页面由设计决定, 所以首先聊聊设计稿

前戏, 页面设计规范

PSD设计稿的图层 "分组" 以及图层 "命名":

设计稿中的每一个元素, 比如 唱片机, 设计师需要将所有属于唱片机的图层全部打到一个图层组里, 并且命名这个图层组为唱片机. 

这样开发人员可以快速的去单独导出这个设计元素, 而不是满屏幕到处去找这个唱片机的各个部位的 图层分布在哪.

图层打组的细化: 细化就是元素的图层组内部再分组, 这个点子需要设计师多为元素将要做的动画考虑考虑. 比如刚刚举例的唱片机, 唱片机的图层组里面, 要实现一个唱片机开启关闭的效果, 也就是唱片机摇杆 旋转到碟片上以及旋转出碟片的动画,  这个动画需要操作唱片机的两个元素, 一个是碟片, 一个是唱片机摇杆, 那么设计师需要将唱片机这个图层组里面的碟片以及摇杆这两个元素, 独立打成图层组, 属于碟片的图层放到名字叫碟片的图层组里, 属于摇杆的图层放到名字叫摇杆的图层组里.

图层组的命名: 命名按照元素本身的名字来命名, 比如元素是一个唱片机就命名唱片机,

图层组的“状态”命名: 状态就是, 比如一个按钮有普通效果与鼠标移动上去的效果, 与鼠标按下去的效果, 这三个按钮的操作动作就叫做状态, 命名的时候可以起名 按钮-普通状态  按钮-移入状态  按钮-点击状态 ( button-normal  button-hover   button-active), 建议用英文命名一些网页常见的组件名, 比如按钮(button 或叫 btn), 列表(list), 列表项(list-item).. 状态必须用normal, hover, active这种命名来命名, 这样更直观

场景的图层组命名:

谈完了单个设计元素的打组与命名, 现在该把注意力放到页面的整体场景架构上,

设计稿需要按照页面的不同的场景, 将元素放在不同的场景里, 比如HTML5小页面一般会有

- loading page

- start page

- normal page

- end page

这四种场景, 那么设计师需要将这些场景都独立新建一个图层组, 将每个场景需要的页面元素图层组放置到每个场景的图层组里面

设计稿以细腻的UI, 暗金风格为主, 画面细腻, 光影效果强, 但是设计元素的需要半透明的元素的数量实在太多, 这样造成一个很恐怖的问题就是: 图片全是PNG格式, 图片体积巨大, 即使是通过tiny小熊猫吃了竹子压缩PNG后, PNG图片的体积依旧巨大, 偶尔一两张大的PNG很正常, 但是如果所有图片都是png, 体积将会非常恐怖

图片素材体积:

图片不宜使用过多的PNG图, 对图片建议的格式是JPG格式, JPG图片在PS中输出切片的JPG quality请至少设置为80%以下, 因为JPG图片在quality超过了80%以后, 体积会成倍上涨, 而quality为80%并不会损失什么画质(眼睛看得到几乎没有什么的区别).

音频:

不宜使用复杂的音乐, 最好是普通的小riff(重复段), 需要考虑音频的淡入淡出, 这样听起来会自然一些. 记得压缩音频大小

页面动画交互文档:

在开始页面的制作之前, 必须敲定设计稿的动画表现形式以及所有的实施细节, 然后书写进文档中进行记录, 动画交互必须符合技术实现, 如果不能实现的交互或者难度成本太大的交互就舍去.

不要不重视交互文档, 等你开发完了整个页面之后, 你发现你做的跟客户想要的, 简直就是一个在左边一个在右边, 那不好意思只能重写交互了XD.....

页面开发流:

我按照主要使用比例分成两种类型:  1.DOM类型   2.Canvas类型

Dom类型: 好处是可以很方便的让页面元素有比较有弹性的动画交互, 通过Animation Lib, 比如animate.css. 不好的地方是, 因为H5页面动画场景跟动画元素很多, 大量操作DOM会让页面性能变得很差, 很卡顿

Canvas类型:　好处是几乎不必操作DOM元素进行动画交互, JS画出的动画会非常流畅, 缺点是很考验开发者的技术, 对复杂的元素移动以及动画, 会涉及到物理知识, 以及用JS代码实现物理知识. 现在市面上有很多优秀的Canvas游戏框架, 比如Phaser, cocos 2d, 以及图形物理引擎 three.js, 但我想, 还缺少一个常用的的HTML5动画页面(宣传用的页面, 比如微信小页面)的框架.