【精选】【干货】H5移动端页面设计心得分享.pdf

【干货】H5移动端页面设计心得分享 如今H5页面设计已经得到大家非常多的关注 ，在实 中我们也已经积累了一些经验和教训 ， 今天结合咱们的实战案例 ，从字体 ，排版 ，动效 ，音效 ，适配性 ，想法这几个方面好好聊一 聊关于H5的设计 ，希望对同学们有帮助。 字体 排版 在有限的手机屏幕空间内 ，我们积累的经验告诉我们最好的效果是简单集中 ，最好有一个核心元素 ，中心元素不宜过多 ，突出重点为最优。 比如J DC的“拍拍十二星座实用手册”的项目 ，只用了最简单的图形和文字居中摆放。 　　以可口可乐的这个“我们在这 我们在乎”为例 ，相较而言 ，越左边的排版会越容易引起关注。这 是因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯 我可以马上看完不费劲”的潜意识信 息而带着轻松的态度去阅读。 动效 　　1 / 前期跟前端设计师进行沟通 ，讨论页面中元素的动效呈现。例如一些元素的位移 ，旋转 ， 翻转 ，缩放 ，逐桢 ，淡入淡出 ，粒子效果 ，照片处理等等 ，还有3D展示效果。 (ht t p://f f f NaNiscm.co m 这个网站里有h5所能实现的效果) 　　比如J DC出品的“京东HR招聘”里面就用了位移 ，缩放 ，淡入淡出的效果。而“京东微店七宗罪” 的最慷慨这一屏则是用到了粒子效果 ，每个钱币翻转下落的速度不一样显得画面更真实。今年在朋 友圈疯转的维多利亚和特斯拉的H5用的是擦除的效果 ，模糊的遮罩足够挑起人们的好奇心。 以上两款 ，包括今年最火的H5案例都在这了 《如此风骚!201 年刷爆朋友圈的十大 HT ML5 技 术案例》 　　2 / 背景动效其实比较推荐缓动效果 ，如“京东管培生招聘”的例子里星空中一闪而过的流星 ，间 歇性出现不抢主角风头再好不过了. 　　3 /复杂多变的动效不一定是好的 ，要考虑到加载速度等用户体验问题。 音效 　　1 / 考虑到用户使用场景的多样性 ，那种介绍类的如果要加背景音乐 ，尽量不要太粗暴。有一点 循序渐进最好 ，给用户留时间在骚扰别人之前可以关闭。 或者可以在开始时是关闭状态。但做游戏h5页面的时候 ，音乐可以没有关闭开启按钮 ，因为用户对 接下来发生的事是有预知的。 　　2 / 考虑每一页音乐按钮放置的明显性。如果能用其他页面元素去替代音乐符号作为按钮也是极 好的。 　　3 / 给前端设计师的音乐文件 ：格式为mp3等 ，单轨 ，最好30秒以内 。为了加载速度 ，文件大 小尽量控制在 ：100k以内最佳 ，可以用A do be A udit io n等软件来压缩。作为无限循环的背景音乐 ， 截取时一定要注意头尾得连接得上。 交互 　　1 / 展示型: 有很多种不同的交互方式 ，最常见的是翻页 ，这种方式制作起来相对简单 ，多用于 展示一些新的产品 ，功能 ，或者活动介绍等。技术上现在市面上已经有H5在线生成器 ，基本上给图 片和文字就可以帮你进行处理。 除了翻页以外 ，还有点击 ，输入文字 ，擦除屏幕 ，滑动屏幕等 ，玩法非常丰富。在“拍拍圣诞活动”里 就用到了重力感应 ，摇一摇可以随机判断 ，让用户有了自己参与的乐趣。 　　2 /游戏型 ：像是起初朋友圈红过的围住神经猫 ，或者是我们的“拍拍Jump”这类需要计算逻辑 ， 得出分数或者结论的小游戏。 3 /产品型 ：有一些H5是作为一个长期运营的产品存在的 ，用户的访问可能会更固定 ，比如微信里的 购物页面等。 　　手机端之间 ：一般我们先用6 0X 1136进行设计 ，参考线会标在960高的地方 ，主要元素最好不 要过高以适配各种机型。其他安卓机器前端切图时可以适当拉伸 ，变化不会太大就不用每个进行 适配。 响应式设计 ：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等 )进行相应的响应和调整。具体的实 方式由多方面组成 ，包括弹性网格和布局、图片、CSS media query的使用等。 为不同电子设备单个布局 ，尽量使用纯色而非渐变 想法 　　被大众主流乐于分享的信息大概有这么几种 ： 最直接的利益驱动 ，分享有奖或者需要众筹等 ， 对自己有用并且也对周围人也会有新鲜感的信息 ， 自己参与游戏或者测试得到的结果。 不管是分享给朋友或朋友圈还是Q Q对话 ，让用户主动去分享你的带有很大性质的广告意味的信息 在自己的社交群体中 ，此条信息与自己相关并且别人也能参与进来当然是最理想的。 　　可口可乐北极熊求合影的例子就是一个很好的宣传方式 ，借由简单的合成照片技术让人们有意 愿去分享自己努力创作的照片。还有UJ EA