全局UI設(shè)計規(guī)范手冊:精進UCD設(shè)計總監(jiān)第一字典
注:本文檔由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)載。
我只能說,做ui不能太死。
適用于量產(chǎn)化大眾UI哈,強調(diào)創(chuàng)新式的基本可以無視。謝謝寶貴建議 ??
考慮各種視角、黃金分割也很關(guān)鍵。有空再整理第二章了。
干貨啊
謝謝,如有改進建議歡迎提出。
感謝分享!!~樓主辛苦!
謝謝支持!