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

1 UI基礎(chǔ)

1.1 像素

1.1.1 邏輯像素（Pt）

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

1.1.2 物理像素（Px）

在硬件層面構(gòu)成了液晶屏幕

1.1.3 手機圖像

由物理像素和邏輯像素共同構(gòu)成，缺一不可

1.1.4 開發(fā)原理

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

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個邏輯像素可以對應(yīng)任意個物理像素點（1Px、1.5Px、2Px等）

1.2.2 公式：

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

1.2.3 倍率換算圖

1.2.4 常見分辨率

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

1.3 倍率優(yōu)劣

1.3.1 開發(fā)換算

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

優(yōu)劣：1x > 2x > 3x

1.3.2 設(shè)計成本

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

優(yōu)劣：1x > 2x > 3x

1.3.3 查看效果圖

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

優(yōu)劣：3x > 2x > 1x

1.3.4 倍率轉(zhuǎn)換

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

優(yōu)劣：1x > 2x > 3x

1.3.5 切圖

PC：

• 默認(rèn)1x切圖；

APP：

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

優(yōu)劣：2x >3x >1x

1.3.6 對比

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

2 PC端

2.1 最佳基數(shù)

2.1.1 最佳像素倍率1X

1Pt=1Px

2.1.2 最佳元素控件尺寸

偶數(shù)

2.1.3 最佳分辨率寬度

窄屏：980px

寬屏：1220px

2.2 柵格結(jié)構(gòu)

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 文字顏色

重要文字

場景：標(biāo)題

懸停色：Hover色（輕）

參考色：#333333

次要文字

場景：正文

參考色：#666666

弱文字

場景：說明文案

參考色：#999999

極弱文字

場景：輸入框默認(rèn)文字

參考色：#bbbbbb

鏈接文字

場景：未點擊前的鏈接狀態(tài)色

默認(rèn)定制色：參考網(wǎng)站主色調(diào)

參考樣例：#0099FF

Hover文字（重）

場景：強營銷文案

默認(rèn)定制色：參考網(wǎng)站強調(diào)色

參考樣例：#666699

2.5.3 按鈕顏色（定制色）

后臺操作類（正常）

背景色#00b34a

文字色#ffffff

后臺操作類（Hover）

背景色#0cb048

文字色#ffffff

前臺營銷類（正常）

背景色#f36f20

文字色#ffffff

前臺營銷類（Hover）

背景色#e7691e

文字色#ffffff

次級操作（正常）

背景色#d8d8d8

文字色#000000

次級操作（Hover）

背景色#cccccc

文字色#000000

2.5.4 色彩組合

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

2.6 圖標(biāo)（定制）

2.6.1 可參考Bootstrap圖標(biāo)庫

2.6.2 范例

2.7 填寫框

2.7.1 正常狀態(tài)

2.7.2 激活提醒狀態(tài)

2.7.3 報錯狀態(tài)

2.7.4 表單間距

2.8 命名規(guī)范

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

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

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

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

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

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

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

3 移動端

3.1 最佳基數(shù)

3.1.1 最佳像素倍率2X

1Pt=2Px

3.1.2 最佳元素控件尺寸

4的倍數(shù)

3.1.3 最佳分辨率

【重IOS】750×1334px

【重安卓】720×1280px

3.1.4 【3x場景】當(dāng)前控件尺寸×1.5倍

iPhone Plus控件（3x）

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

標(biāo)準(zhǔn)模式：1242×2208px，在1080P屏幕展示位0.87倍大小

安卓1080P控件（3x）

1080×1920px

3.1.5 【4x場景】當(dāng)前控件尺寸×2倍

2K屏幕

1440×2560px

機型樣例

小米5

3.1.6 【6x場景】當(dāng)前控件尺寸×3倍

4K屏幕

2160×3840px

機型樣例

Sony-Xperia Z5 Premium

VR設(shè)備

3.2 iPhone設(shè)計規(guī)范 （2x-750P標(biāo)準(zhǔn)）

3.2.1 界面布局參考值

• 狀態(tài)欄——40px
• 標(biāo)題欄——88px
• 主菜單欄（標(biāo)簽欄、底部條）——98px
• 內(nèi)容區(qū)域——1108px
• 寬度——640~828px
• 高度——960~1472px

3.2.2 圖標(biāo)尺寸

導(dǎo)航欄：44×44px

內(nèi)容區(qū)域：58×58px（因留2px作為陰影效果顯示，實際圖標(biāo)占用60px）

標(biāo)簽欄：

默認(rèn)：50×50px

最大尺寸：96×64px

3.2.3 文字尺寸

⑴ 導(dǎo)航欄

36px

重要標(biāo)題

例：導(dǎo)航欄的退出、注冊、登錄文字按鈕

34px

較為重要標(biāo)題

例：頂部導(dǎo)航欄主標(biāo)題

⑵ 內(nèi)容區(qū)域

① 標(biāo)題

32px

正文大標(biāo)題

30px

正文標(biāo)題、重要節(jié)點文字

② 正文

28px

大多數(shù)文字

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

③ 注釋輔助

24px

輔助性正文文字

20px

輔助性次要文字

例：時間信息

⑶ 標(biāo)簽欄圖標(biāo)下方文字

20px

3.2.4 原型圖顏色 （線框圖）

文字

黑色#282828

深灰色#6566565

淺灰色#989898

邊框

淺灰色#C3C3C3

背景

淡灰色#f2f2f2

按鈕背景

純白色#ffffff

3.2.5 常用像素

可點擊高度（88px）

子欄內(nèi)控件高度（58px）

控件之間距離

親密距離20px

左圖標(biāo)與右邊文字之間的距離

圖標(biāo)到頂部邊欄線的距離

疏遠距離30px

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

圖標(biāo)在列表欄目內(nèi)默認(rèn)居中

3.2.6 UI定制項

原型圖直角呈現(xiàn)

按鈕

文本框

UI設(shè)計圖圓角呈現(xiàn)

按鈕樣式

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

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

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

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

注：UI設(shè)計師需按網(wǎng)站風(fēng)格決定圓角半徑的大小

3.3 組件適配原則

3.3.1 等比縮放

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

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

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

3.3.2 彈性控件

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

列表存在長文字時，“文字長度自適應(yīng)”先于“間距自適應(yīng)”

屏幕越寬，顯示按鈕越多

3.3.3 文字流

文字換行高度間隔自適應(yīng)，文字后的內(nèi)容應(yīng)緊跟文字底部。

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

參考排版變化如下：

4 UI交付 @2x

4.1 標(biāo)注

4.1.1 畫布大小：以當(dāng)前所選的分辨率為準(zhǔn)進行標(biāo)注（720P或750P）

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

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

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

4.2 切圖

4.2.1 統(tǒng)一采用png格式

4.2.2 命名

默認(rèn)以@1x、@2x、@3x倍率作為目錄

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

4.3 圖片優(yōu)化

4.3.1 圖片壓縮優(yōu)化

4.3.2 ICON 可采用PNG 8

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

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

4.4 切圖參考

4.5 引用參考資料

感謝以下供參考的UI規(guī)范資料，本人僅進行整理統(tǒng)合，并統(tǒng)一了互相矛盾的一些內(nèi)容。

1、張云錢——《交互設(shè)計：iOS原型尺寸規(guī)范》

2、jasmine_sunny?——《iOS和Android的app界面設(shè)計規(guī)范》

3、jorel——《APP UI設(shè)計及切圖規(guī)范》

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

作者：黃賢生-Ian Huang（微信號：52189873，公眾號：pm7ver），微創(chuàng)中國技術(shù)產(chǎn)品經(jīng)理，8年互聯(lián)網(wǎng)產(chǎn)品設(shè)計品控從業(yè)經(jīng)驗，曾主導(dǎo)多款電商產(chǎn)品的產(chǎn)品策劃、項目管理和品控管理工作。

本文由@黃賢生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。