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

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

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

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

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

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

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

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

場景的圖層組命名:

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

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

- loading page

- start page

- normal page

- end page

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

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

圖片素材體積:

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

音頻:

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

頁面動畫交互文檔:

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

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

頁面開發(fā)流:

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

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

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

總結(jié)

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

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