頁面由設(shè)計決定, 所以首先聊聊設(shè)計稿

前戲, 頁面設(shè)計規(guī)范

PSD設(shè)計稿的圖層 "分組" 以及圖層 "命名":

設(shè)計稿中的每一個元素, 比如 唱片機, 設(shè)計師需要將所有屬于唱片機的圖層全部打到一個圖層組里, 并且命名這個圖層組為唱片機.

這樣開發(fā)人員可以快速的去單獨導出這個設(shè)計元素, 而不是滿屏幕到處去找這個唱片機的各個部位的 圖層分布在哪.

圖層打組的細化: 細化就是元素的圖層組內(nèi)部再分組, 這個點子需要設(shè)計師多為元素將要做的動畫考慮考慮. 比如剛剛舉例的唱片機, 唱片機的圖層組里面, 要實現(xiàn)一個唱片機開啟關(guān)閉的效果, 也就是唱片機搖桿 旋轉(zhuǎn)到碟片上以及旋轉(zhuǎn)出碟片的動畫, ?這個動畫需要操作唱片機的兩個元素, 一個是碟片, 一個是唱片機搖桿, 那么設(shè)計師需要將唱片機這個圖層組里面的碟片以及搖桿這兩個元素, 獨立打成圖層組, 屬于碟片的圖層放到名字叫碟片的圖層組里, 屬于搖桿的圖層放到名字叫搖桿的圖層組里.

圖層組的命名: 命名按照元素本身的名字來命名, 比如元素是一個唱片機就命名唱片機,

圖層組的“狀態(tài)”命名: 狀態(tài)就是, 比如一個按鈕有普通效果與鼠標移動上去的效果, 與鼠標按下去的效果, 這三個按鈕的操作動作就叫做狀態(tài), 命名的時候可以起名?按鈕-普通狀態(tài) ?按鈕-移入狀態(tài) ?按鈕-點擊狀態(tài) ( button-normal ?button-hover ? button-active), 建議用英文命名一些網(wǎng)頁常見的組件名, 比如按鈕(button 或叫 btn), 列表(list), 列表項(list-item).. 狀態(tài)必須用normal, hover, active這種命名來命名, 這樣更直觀

場景的圖層組命名:

談完了單個設(shè)計元素的打組與命名, 現(xiàn)在該把注意力放到頁面的整體場景架構(gòu)上,

設(shè)計稿需要按照頁面的不同的場景, 將元素放在不同的場景里, 比如HTML5小頁面一般會有

- loading page

- start page

- normal page

- end page

這四種場景, 那么設(shè)計師需要將這些場景都獨立新建一個圖層組, 將每個場景需要的頁面元素圖層組放置到每個場景的圖層組里面

設(shè)計稿以細膩的UI, 暗金風格為主, 畫面細膩, 光影效果強, 但是設(shè)計元素的需要半透明的元素的數(shù)量實在太多, 這樣造成一個很恐怖的問題就是: 圖片全是PNG格式, 圖片體積巨大, 即使是通過tiny小熊貓吃了竹子壓縮PNG后, PNG圖片的體積依舊巨大, 偶爾一兩張大的PNG很正常, 但是如果所有圖片都是png, 體積將會非常恐怖

圖片素材體積:

圖片不宜使用過多的PNG圖, 對圖片建議的格式是JPG格式, JPG圖片在PS中輸出切片的JPG quality請至少設(shè)置為80%以下, 因為JPG圖片在quality超過了80%以后, 體積會成倍上漲, 而quality為80%并不會損失什么畫質(zhì)(眼睛看得到幾乎沒有什么的區(qū)別).

音頻:

不宜使用復雜的音樂, 最好是普通的小riff(重復段), 需要考慮音頻的淡入淡出, 這樣聽起來會自然一些. 記得壓縮音頻大小

頁面動畫交互文檔:

在開始頁面的制作之前, 必須敲定設(shè)計稿的動畫表現(xiàn)形式以及所有的實施細節(jié), 然后書寫進文檔中進行記錄, 動畫交互必須符合技術(shù)實現(xiàn), 如果不能實現(xiàn)的交互或者難度成本太大的交互就舍去.

不要不重視交互文檔, 等你開發(fā)完了整個頁面之后, 你發(fā)現(xiàn)你做的跟客戶想要的, 簡直就是一個在左邊一個在右邊, 那不好意思只能重寫交互了XD.....

頁面開發(fā)流:

我按照主要使用比例分成兩種類型: ?1.DOM類型 ? 2.Canvas類型

Dom類型: 好處是可以很方便的讓頁面元素有比較有彈性的動畫交互, 通過Animation Lib, 比如animate.css. 不好的地方是, 因為H5頁面動畫場景跟動畫元素很多, 大量操作DOM會讓頁面性能變得很差, 很卡頓

Canvas類型:　好處是幾乎不必操作DOM元素進行動畫交互, JS畫出的動畫會非常流暢, 缺點是很考驗開發(fā)者的技術(shù), 對復雜的元素移動以及動畫, 會涉及到物理知識, 以及用JS代碼實現(xiàn)物理知識. 現(xiàn)在市面上有很多優(yōu)秀的Canvas游戲框架, 比如Phaser, cocos 2d, 以及圖形物理引擎 three.js, 但我想, 還缺少一個常用的的HTML5動畫頁面(宣傳用的頁面, 比如微信小頁面)的框架.

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。