注：本文檔由PM7V – Ian Huang整理于2016年9月初，隨著硬件設備條件變更，最佳規范倍率可能隨著時間推移需要加倍計算！

1 UI基礎

1.1 像素

1.1.1 邏輯像素（Pt）

在軟件層面構成了畫面圖像。也稱邏輯點，是控制屏幕顯示內容多寡的單位

1.1.2 物理像素（Px）

在硬件層面構成了液晶屏幕

1.1.3 手機圖像

由物理像素和邏輯像素共同構成，缺一不可

1.1.4 開發原理

程序猿在開發中需將設計師提供的分辨率（物理像素）轉換為邏輯像素后才能控制頁面顯示的內容

1.1.5 范例

IPad_mini分辨率768×1024，倍率為1X，即1Pt=1Px

IPad_mini2分辨率1536×2048，倍率為2X，即1Pt=2Px

15.4寸Macbook_Pro分辨率2880×1800（更多空間邏輯分辨率1920×1200），倍率為1.5X，即1Pt=1.5Px

1.2 倍率

1.2.1 倍率：

1個邏輯像素可以對應任意個物理像素點（1Px、1.5Px、2Px等）

1.2.2 公式：

倍率 = 物理像素 / 邏輯像素

1.2.3 倍率換算圖

1.2.4 常見分辨率

注：因開發工具不同，IOS邏輯像素單位是pt，Android邏輯像素單位是dp

1.3 倍率優劣

1.3.1 開發換算

• 1X倍率，1pt=1px，邏輯像素 = 物理像素，無需換算
• 2X倍率，1pt=2px，邏輯像素 = 物理像素 / 2，能快速換算
• 3X倍率，1pt=3px，邏輯像素 = 物理像素 / 3， 很難換算，除不盡時需四舍五入，易產生誤差

優劣：1x > 2x > 3x

1.3.2 設計成本

• 1x倍率，元素控件尺寸必須為偶數，能兼顧居中排版避免誤差，設計難度低
• 2x倍率，元素控件尺寸必須為4的倍數，否則容易影響居中排版，設計難度中
• 3x倍率，元素控件尺寸必須為6的倍，否則嚴重影響居中排版，設計難度高

優劣：1x > 2x > 3x

1.3.3 查看效果圖

因設備中查看效果圖時，邏輯像素會被成倍放大，故倍率高的設計圖更接近所見即所得的效果。

優劣：3x > 2x > 1x

1.3.4 倍率轉換

• 1x倍率轉2x、3x時只需乘以2或3即可；
• 2x倍率轉1x需除以2，轉3x需乘以1.5，相對繁瑣；
• 3x倍率轉1x、2x時需先除以3，再乘以1、2，極為繁瑣；

優劣：1x > 2x > 3x

1.3.5 切圖

PC：

• 默認1x切圖；

APP：

• 1x切圖已被淘汰，市面設備分辨率普遍在2x以上；
• 2x可直接導出2x切圖，導3x切圖僅需乘以1.5倍；
• 3x可直接導出3x切圖，導2x切圖需除以3再乘以2，較為繁瑣；

優劣：2x >3x >1x

1.3.6 對比

1x、3x個別優勢較大，但存在明顯短板，2x最為均衡，建議使用。

2 PC端

2.1 最佳基數

2.1.1 最佳像素倍率1X

1Pt=1Px

2.1.2 最佳元素控件尺寸

偶數

2.1.3 最佳分辨率寬度

窄屏：980px

寬屏：1220px

2.2 柵格結構

2.2.1 柵格公式：

（A×n）-i = w （60×21）-20 = 1220

2.2.2 窄版980PX

180：40：760

640：40：300

720：20：240

2.2.3 寬版1220PX

900：20：300

960：20：240

2.3 版塊間距

2.3.1 上下左右間距為20PX

2.3.2 特殊情況為40PX

2.4 圖片大小

2.4.1 橫圖比例-10:7

2.4.2 豎圖比例-7:10

2.4.3 窄版

橫圖：

• 二圖版式：480×336PX，間隔1×20PX
• 三圖版式：300×210PX，間隔2×40PX
• 四圖版式：230×161PX，間隔3×20PX
• 五圖版式：180×126PX，間隔4×20PX

豎圖：

• 二圖版式：480×685PX，間隔1×20PX
• 三圖版式：300×428PX，間隔2×40PX
• 四圖版式：230×328PX，間隔3×20PX
• 五圖版式：180×257PX，間隔4×20PX

2.4.4 寬版

橫圖：

• 二圖版式：600×420PX，間隔1×20PX
• 三圖版式：380×266PX，間隔2×40PX
• 四圖版式：290×203PX，間隔3×20PX
• 五圖版式：228×160PX，間隔4×20PX

豎圖

• 二圖版式：600×857PX，間隔1×20PX
• 三圖版式：380×543PX，間隔2×40PX
• 四圖版式：290×414PX，間隔3×20PX
• 五圖版式：228×326PX，間隔4×20PX

2.5 顏色

2.5.1 框架顏色

• 整體框架線顏色——#eeeeee
• 間隔線顏色——#e8e8e8
• 板塊間隔灰底——#i8i8i8
• 按鈕邊框顏色——#d8d8d8
• 輸入框顏色——#cccccc

2.5.2 文字顏色

重要文字

場景：標題

懸停色：Hover色（輕）

參考色：#333333

次要文字

場景：正文

參考色：#666666

弱文字

場景：說明文案

參考色：#999999

極弱文字

場景：輸入框默認文字

參考色：#bbbbbb

鏈接文字

場景：未點擊前的鏈接狀態色

默認定制色：參考網站主色調

參考樣例：#0099FF

Hover文字（重）

場景：強營銷文案

默認定制色：參考網站強調色

參考樣例：#666699

2.5.3 按鈕顏色（定制色）

后臺操作類（正常）

背景色#00b34a

文字色#ffffff

后臺操作類（Hover）

背景色#0cb048

文字色#ffffff

前臺營銷類（正常）

背景色#f36f20

文字色#ffffff

前臺營銷類（Hover）

背景色#e7691e

文字色#ffffff

次級操作（正常）

背景色#d8d8d8

文字色#000000

次級操作（Hover）

背景色#cccccc

文字色#000000

2.5.4 色彩組合

以上定制色可參考《UI設計規范輔助文檔》-色系組合頁挑選組合

2.6 圖標（定制）

2.6.1 可參考Bootstrap圖標庫

2.6.2 范例

2.7 填寫框

2.7.1 正常狀態

2.7.2 激活提醒狀態

2.7.3 報錯狀態

2.7.4 表單間距

2.8 命名規范

一級文件夾（以板塊名稱命名） eg：006 找裝修公司

二級文件夾（以日期命名） eg：2016.8.16

三級文件夾（以序號+板塊名稱+頁面命名） eg：01-找裝修公司-列表頁

二級文件夾（作廢文件） eg：pass

三級文件夾（以日期+板塊名稱+頁面命名） eg：2018.8.16-找裝修公司-列表頁

二級文件夾（原型圖文件） eg：2016.8-原型圖

三級文件夾（以日期+板塊名稱+頁面命名） eg：2018.8.16-找裝修公司-列表頁

3 移動端

3.1 最佳基數

3.1.1 最佳像素倍率2X

1Pt=2Px

3.1.2 最佳元素控件尺寸

4的倍數

3.1.3 最佳分辨率

【重IOS】750×1334px

【重安卓】720×1280px

3.1.4 【3x場景】當前控件尺寸×1.5倍

iPhone Plus控件（3x）

放大模式：1125×2001px，在1080P屏幕展示位0.96倍大小

標準模式：1242×2208px，在1080P屏幕展示位0.87倍大小

安卓1080P控件（3x）

1080×1920px

3.1.5 【4x場景】當前控件尺寸×2倍

2K屏幕

1440×2560px

機型樣例

小米5

3.1.6 【6x場景】當前控件尺寸×3倍

4K屏幕

2160×3840px

機型樣例

Sony-Xperia Z5 Premium

VR設備

3.2 iPhone設計規范 （2x-750P標準）

3.2.1 界面布局參考值

• 狀態欄——40px
• 標題欄——88px
• 主菜單欄（標簽欄、底部條）——98px
• 內容區域——1108px
• 寬度——640~828px
• 高度——960~1472px

3.2.2 圖標尺寸

導航欄：44×44px

內容區域：58×58px（因留2px作為陰影效果顯示，實際圖標占用60px）

標簽欄：

默認：50×50px

最大尺寸：96×64px

3.2.3 文字尺寸

⑴ 導航欄

36px

重要標題

例：導航欄的退出、注冊、登錄文字按鈕

34px

較為重要標題

例：頂部導航欄主標題

⑵ 內容區域

① 標題

32px

正文大標題

30px

正文標題、重要節點文字

② 正文

28px

大多數文字

例：商品名稱、簡介、輔助按鈕

③ 注釋輔助

24px

輔助性正文文字

20px

輔助性次要文字

例：時間信息

⑶ 標簽欄圖標下方文字

20px

3.2.4 原型圖顏色 （線框圖）

文字

黑色#282828

深灰色#6566565

淺灰色#989898

邊框

淺灰色#C3C3C3

背景

淡灰色#f2f2f2

按鈕背景

純白色#ffffff

3.2.5 常用像素

可點擊高度（88px）

子欄內控件高度（58px）

控件之間距離

親密距離20px

左圖標與右邊文字之間的距離

圖標到頂部邊欄線的距離

疏遠距離30px

所有元素距手機屏幕最左邊和最右邊的距離

圖標在列表欄目內默認居中

3.2.6 UI定制項

原型圖直角呈現

按鈕

文本框

UI設計圖圓角呈現

按鈕樣式

1、所有能點擊的圖片不得小于44px（Retina需要88px）

2、單獨存在的部件必須是雙數尺寸

3、兩倍圖以@2x作為命名后綴

4、充分考慮每個控制按鈕在4中狀態下的樣式，如圖

注：UI設計師需按網站風格決定圓角半徑的大小

3.3 組件適配原則

3.3.1 等比縮放

屏幕寬度不變、高度變化時，控件高度不變；

屏幕寬度變化時，控件高度自適應等比變化，保持不變形；

屏幕高度的變化不影響控件的比例變化。

3.3.2 彈性控件

列表兩端組件與屏幕左右兩端邊距始終固定，中間距離自適應

列表存在長文字時，“文字長度自適應”先于“間距自適應”

屏幕越寬，顯示按鈕越多

3.3.3 文字流

文字換行高度間隔自適應，文字后的內容應緊跟文字底部。

固定單行文字，默認不換行，超出文本一般用”…”省略

參考排版變化如下：

4 UI交付 @2x

4.1 標注

4.1.1 畫布大?。阂援斍八x的分辨率為準進行標注（720P或750P）

4.1.2 字體：按照像素px標注，可在角落附上px與sp單位的換算規則， 如@2x，1sp=2dp=2px。

4.1.3 顏色：按照實際的顏色值標注，Android顏色值取值為十六進制的值 比如一綠色的值，給工程師的值為#5bc43e。

4.1.4 間距：每個主要的控件必須標注出來，各種邊距必須標注清楚。 角落可附上px與dp的換算規則，@2x，1dp=1px

4.2 切圖

4.2.1 統一采用png格式

4.2.2 命名

默認以@1x、@2x、@3x倍率作為目錄

依圖片性質命名。如bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png等

4.3 圖片優化

4.3.1 圖片壓縮優化

4.3.2 ICON 可采用PNG 8

4.3.3 支持完全透明和完全不透明兩種效果和256色

4.3.4 需要高清的可采用 PND24/32

4.4 切圖參考

4.5 引用參考資料

感謝以下供參考的UI規范資料，本人僅進行整理統合，并統一了互相矛盾的一些內容。

1、張云錢——《交互設計：iOS原型尺寸規范》

2、jasmine_sunny?——《iOS和Android的app界面設計規范》

3、jorel——《APP UI設計及切圖規范》

4、海邊來的設計師——《UI適配攻略·教程》

作者：黃賢生-Ian Huang（微信號：52189873，公眾號：pm7ver），微創中國技術產品經理，8年互聯網產品設計品控從業經驗，曾主導多款電商產品的產品策劃、項目管理和品控管理工作。

本文由@黃賢生 原創發布于人人都是產品經理。未經許可，禁止轉載。