移動端網站設計參考規範（初稿）

找了一些這方面的資料，都是零零散散的，東西太多看起來比較累人，因此把一些有用的實際數據提煉了出來，僅供參考。

1、約定規範

1. 團隊內部使用相同版本Photoshop，Illustrator

2. 文件命名規範「版本號+頁面內容+修改最新序號」（例：1.0_產品列表01.psd)

3. PSD文件,圖層分組命名，保持一個清晰的圖層結構

2、佈局

設計稿尺寸

1. 設計師按寬度750px*1334px（iPhone 6）作設計稿，除圖片外全部設計元素用矢量路徑來作

2. 等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子裏切圖

3. 生成@3x切圖資源，以及寬度750px的設計標註圖。

組件化

1. 網頁通常有頭部、底部、側邊欄、搜索框，導航，多形態按鈕，分頁，遮罩層，輸入框等。
   以及一些業務上的價格組件，產品組件，表格組件，可複用的地方請組件化。

2. 按鈕的形態多變，設計按鈕在懸浮、單擊、禁用等狀況下的樣式。按鈕的顏色，大小，直角圓角保持可控類型數量。

字體

1. 字體採用冬青黑或者華文黑體。

2. 模塊欄目字體32px，小標題和正文字體28px或30px,名稱和標註22px或24px,提醒文字18px。

3. 默認行高32×1.6=52px

4. – 價格文字：#CC0000
   – 默認文字：#333333

– 次要文字：#666666
– 輔助文字：#999999

顏色

1. 設計使用256web安全色，PS中RGB/8位

2. 背景色分割線
   – 背景顏色：#EEEEEE

– 分割線 ：#E5E5E5
– 深分割線：#CCCCCC

3、注意細節

1. 適配內容變化（文字長度，圖片尺寸），屏幕尺寸

2. 考慮真實場景下的用戶體驗，無圖，無數據，以及錯誤異常的狀況

3. 圖片最大寬度建議700px。

4. 全部網頁用到的同一張圖保持相同寬高比，寬高均爲偶數像素。

5. 圖片優化和壓縮。使用web格式輸出圖片，在保證圖片不失真的狀況下儘可能輸出最小容量的圖片。

4、相關工具

1. 字體圖標 阿里巴巴矢量圖標庫

2. 線框圖工具 摩客

3. 標註和測量工具 馬克鰻

4. 切圖工具1 ASSISTOR PS

5. 切圖工具2 Cutterman

6. 設計 Sketch

5、參考文章

1. ios&安卓設計標準規範

2. 一套完整的UI設計規範手冊（IOS版）

3. iOS APP設計一稿支持iPhone5/iPhone6/Plus設計流程

4. 還原活的設計