五、圖片處理規範

1 、圖片統一性

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

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

2 、圖片細節處理

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

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

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

4）為了配合標題字型，圖片可以區域性調亮或調暗。

六、動效規範

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

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

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

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

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