五、圖片處理規范

1、圖片統一性

1）圖片色調色溫需統一，例如一個嬰兒產品的首頁，整體需要搭配暖色調的圖片，這樣看上去整體才比較統一舒服。

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

2、圖片細節處理

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

2）圖片尺寸建議統一為偶數值，方便前端技術人員開發。

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

4）為了配合標題字體，圖片可以局部調亮或調暗。

六、動效規范

無論是現在經常看到的企業/品牌H5宣傳頁面、移動端啟動頁，還是曾經紅極一時的首頁動畫，都需要用到動效效果。會做點動效會給我們加分不少，尤其是做一些加載動畫，這是我們經常會遇到的需求。

做動效時，我們需要注意以下幾點：

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

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

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

http://www.bangwork.net/wangzhansheji/3363.html 優秀網頁設計師須了解的UI設計規范（二）