頁面由設計決定, 所以首先聊聊設計稿

前戲, 頁面設計規范

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, 體積將會非?？植?/p>

圖片素材體積:

圖片不宜使用過多的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動畫頁面(宣傳用的頁面, 比如微信小頁面)的框架.

總結

以上是生活随笔為你收集整理的html5页面主题,HTML5页面开发笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。