五、圖片處理規(guī)范

1、圖片統(tǒng)一性

1）圖片色調(diào)色溫需統(tǒng)一，例如一個(gè)嬰兒產(chǎn)品的首頁(yè)，整體需要搭配暖色調(diào)的圖片，這樣看上去整體才比較統(tǒng)一舒服。

2）圖片比例需統(tǒng)一，例如一個(gè)賣(mài)貨的產(chǎn)品詳情頁(yè)，在同一屏的欄目中（頁(yè)面）所出現(xiàn)的產(chǎn)品或者人物，比例就需要有一個(gè)統(tǒng)一的大小比例，這樣看上去才比較統(tǒng)一舒服。

2、圖片細(xì)節(jié)處理

1）圖片精度不夠（這里所說(shuō)的精度不是說(shuō)DPI分辨率需要300哦，那是做高精度印刷輸出時(shí)才需要的，而在電腦及手機(jī)上的圖片DPI分辨率為72即可，另外輸出圖片時(shí)需適當(dāng)壓縮一下圖片的大?。㈦s色太多可以使用PS內(nèi)置的CR濾鏡處理。

2）圖片尺寸建議統(tǒng)一為偶數(shù)值，方便前端技術(shù)人員開(kāi)發(fā)。

3）圖片邊緣避免與白色背景融合，可以在邊緣位置加色。

4）為了配合標(biāo)題字體，圖片可以局部調(diào)亮或調(diào)暗。

六、動(dòng)效規(guī)范

無(wú)論是現(xiàn)在經(jīng)?？吹降钠髽I(yè)/品牌H5宣傳頁(yè)面、移動(dòng)端啟動(dòng)頁(yè)，還是曾經(jīng)紅極一時(shí)的首頁(yè)動(dòng)畫(huà)，都需要用到動(dòng)效效果。會(huì)做點(diǎn)動(dòng)效會(huì)給我們加分不少，尤其是做一些加載動(dòng)畫(huà)，這是我們經(jīng)常會(huì)遇到的需求。

做動(dòng)效時(shí)，我們需要注意以下幾點(diǎn)：

1）不論你的動(dòng)畫(huà)有多好看、多吸引眼球，如果成本太高或者過(guò)于復(fù)雜都是無(wú)法落地的，所以我們要遵循簡(jiǎn)單實(shí)用的原則來(lái)進(jìn)行設(shè)計(jì)，千萬(wàn)不要過(guò)度設(shè)計(jì)。

2）任何交互動(dòng)作所導(dǎo)致的狀態(tài)都需要考慮正常狀態(tài)與異常狀態(tài)。拿加載動(dòng)畫(huà)來(lái)說(shuō)，我們需要考慮加載成功的反饋與加載失敗的反饋，并將之注明在輸出規(guī)范中。

3）動(dòng)效使用的工具：可以PS做一些動(dòng)態(tài)表情，用AE做一些加載動(dòng)畫(huà)，頁(yè)面之間的交互動(dòng)效可以使用Flinto、Principle等。

http://m.ezekroy.com/wangzhansheji/3363.html 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)師須了解的UI設(shè)計(jì)規(guī)范（二）