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

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

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

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

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

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

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

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

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

六、動效規(guī)范

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

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

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

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

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

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