篇一：如何制作出有逼格的H5页面
如何制作出有逼格的H5页面？
目录
一、文字进阶 ............................................................................................... 2
①好看有特效的文字 ............................................................................ 2
②文字配色及取色 ................................................................................ 2
③字体搭配及含义 ................................................................................ 2
④字体下载 ............................................................................................. 3
⑤字体大小及行距 ................................................................................ 3
二、图片 ....................................................................................................... 3
①图片来源 ............................................................................................. 3
②背景颜色及含义 ................................................................................ 3
三、排版 ....................................................................................................... 3
① 简单集中............................................................................................ 3
②文字排版形式及应用 ........................................................................ 4
四、新手需知： ........................................................................................... 4
①应用三级动画 .................................................................................... 4
②利用互动插件 .................................................................................... 4
③推荐浏览器 ........................................................................................ 4
④手机端加载速度慢、卡顿 ............................................................... 4
一、文字进阶
①好看有特效的文字
百度中打开花体字在线生成器
依次选定字体、大小、字色、背景（透明背景）等参数，点击生成。 下载预览图，并且保存png格式到桌面，即可导入H5之中。 ②文字配色及取色
黑底白字，黑底不放蓝色、绿色丨黑底金字丨
红底白字丨黄底黑字丨蓝底白字丨蓝底黄字丨
白底绿字
快速取色方法：打开QQ→截图快捷键Ctrl+Alt+A→将鼠标箭头放在取色位置→出现颜色相对应的RGB（255.255.255）此为白色的RGB值。 ③字体搭配及含义
? 扁平风：张海山锐体
? 文艺风：静蕾钢笔、方正呐喊
? 商务风：造字工房力黑、逼格青春体简、张海山锐线体简 ? 中国风:叶根友行书、汉仪星字体
? 科技风：方正幼线、方正兰亭
? 可爱风：造字工房丁丁体、华康娃娃体
? 杂志风：造字工房俊雅、方正大标宋
? 男性风：方正超粗黑、蒙纳简超刚黑
? 女性风：造字工房悦黑常规体、方正细圆
④字体下载
百度搜索→字体下载→下载位置→系统盘→WINDOWS→Fonts→打开ps/officie等软件就OK
⑤字体大小及行距
建议最小不超过18，其他字号双数，同种类别下用一样字号。 行距建议使用1.5倍行距。
二、 图片
①图片来源
免版权：unsplash.com;pixabay.com
创意设计：dribble.com;站酷
GIF图：giphy.com;giffox.com
图片素材：全景网；昵图；花瓣
图标：esyicon.net;iconpng,iconfont.com
②背景颜色及含义
红色：热情、喜庆丨紫色：神秘、浪漫、女性、情感
黄色：高贵、富有丨蓝色：智慧、清爽、科普、商务
橙色：欢快、销售、购物丨绿色：生机、安全、环保
不花哨是阅读的第一体验。
三、 排版
① 简单集中 最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。
②文字排版形式及应用
齐行型：最稳妥保险，纯纯的阅读方便，没有其他企图。
居左型：方便断句，突出某信息，适合用于短诗歌，介绍类信息。 居右型：凸显个性，杂志类。
居中型：高端、正式、贵气，适用地产、珠宝、手表等奢侈行业。 自由型：八卦杂志，那些角版的插图非常需要这些。
四、 新手需知：
①应用三级动画
H5制作软件动画分为3级，进入、强调、退出。
随便插入一张图片，然后设定进入效果，强调效果和退出效果，熟悉每个动画表达出的感官效果，并设定相互延迟时间。
②利用互动插件
添加一键拨号，网站链接，点赞和投票等配件，增加场景互动性。 ② 推荐浏览器
使用百（GU）度（ge）浏览器，兼容H5制作及操作。 ④手机端加载速度慢、卡顿
上传图片和音乐控制大小，不宜过大，参照以下尺寸大小。
篇二：H5页面设计规范
H5网页设计规范
1、非可循环平铺图片的背景图，须按最大屏幕尺寸来设计，即：1920*720；
2、集团、新闻类网站中间内容宽度使用1003PX；展示、购物类网站中间内容部分宽度使用1200PX；
3、必须删除非显示图层和参考线；
4、命名和分组必须规范，建议使用一下命名规则（如有更合适或者更熟悉的命名规则请提前与技术沟通）中英文均可；
页头：header 内容：content/container 页面主体：main页尾：footer 导航：nav 侧栏：sidebar
栏目：column整体布局：wrapper左右中：缩写为L R C 水平/垂直： H/V菜单：submenu 摘要: summary按钮：btn/button 滚动：scroll 鼠标悬停：hover 点击：click已浏览：visited。 广告横幅：AD/ banner
5、建议将每个独立控件设计有明显的边界，如果不能给出明显边界，请在设计稿中标出与邻近控件的距离；
6、段落文字必须给出行高，必须使用10号以上字体，建议使用1.5倍行高和14号字体。
7、需要后台添加的文字（标题、内容等）必须使用常用字体，即宋体和微软雅黑；
H5手机页面设计规范
1、PSD按照宽度640PX，高度不限来设计；
2、可点击部件不可小于88PX，（如果不够提交设计稿的时候特别说明）。
3、所有部件的尺寸大小必须是双数。
4、每个按钮需要有四个状态：默认、按下、选中、不可选。至少需要考虑：默认和不可选两个状态。
5、除广告图片外，其他图形部件尽量用图形工具绘制。
6、可点击部件尽量和屏幕四边保持20-30PX的距离。
7、设计的时候尽量以一个使用者的角度去设计，判断哪个页面需要状态栏，哪个页面只需要一个返回按钮。
8、iPhone输入法自带搜索按钮，没有必要再在页面上进行显示。
9、尽可能的对页面部件大小边距等元素进行大小的标注
篇三：微信H5页面的五大视觉体验原则[凡科微传单]
wcd.im
微信H5页面的五大视觉体验原则
在微信H5页面中，除了良好顺畅的互动体验之外，还需要一定的美感，也就是我们常说的视觉体验。今天，我们就来总结一下微信H5页面设计中的五大视觉指引原则，帮助大家协调互动与视觉之间的关系。
一、尊重视觉的主导地位
每个人首先都是视觉动物，然后才是行为动物，因此视觉才是H5页面设计的主导，它能在不知不觉中影响着交互。另外，好的视觉设计能够提升转化率，激发用户的购买欲。
二、提供清晰的操作指引
虽然对于一般的微信H5来说，每个页面的切换都会有一个清晰的箭头作为引导，但是如果是需要用户做出额外的点击、滑动才能跳到另一个页面的话，就必须给出一个清晰的操作指引，完善用户体验。
三、保证视觉统一
不只在视觉上，统一性在H5页面设计中非常重要，它体现了页面设计和排版的逻辑性，也体现了色彩、元素的协调性，这样都能让用户享受愉悦的视觉体验。
四、降低用户学习成本
如今用户对H5页面设计模式已经形成了一个熟悉的认知，比如中心排版、翻转动画、点击跳转等等，如果增加一些很陌生、另类的设计，就会增加用户的学习成本，让用户的阅读变得吃力。
五、通过风格指南创造一致性
确定了H5页面的风格之后，那么页面中的元素、尺寸、字体、颜色等各个方面都可以先围绕这个风格进行设计，最后再使用拼凑手法来将他们组合、搭配在一起，这样可以保证页面风格的一致性。
文档来源：http://wcd.im/news/4996
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有