UI 設(shè)計(jì)日常規(guī)范全集｜蘭亭妙微設(shè)計(jì)公司實(shí)戰(zhàn)整理
在 UI 設(shè)計(jì)交付與團(tuán)隊(duì)協(xié)作中，統(tǒng)一規(guī)范是保證界面質(zhì)量、提升效率、降低溝通成本的核心基礎(chǔ)。蘭亭妙微設(shè)計(jì)結(jié)合多年項(xiàng)目沉淀，把日常高頻使用的設(shè)備尺寸、圖標(biāo)輸出、字體、單位、命名、設(shè)計(jì)原則、交互準(zhǔn)則完整整理，形成可直接落地的設(shè)計(jì)規(guī)范手冊(cè)，方便團(tuán)隊(duì)隨時(shí)查閱、復(fù)用。
一、iPhone 界面尺寸規(guī)范
蘭亭妙微常用主流機(jī)型基準(zhǔn)（@2x/@3x）
-
iPhone 6/7/8（常用）
分辨率：750×1334px
狀態(tài)欄：40px
導(dǎo)航欄：88px
標(biāo)簽欄：98px
-
iPhone X/XS/11 Pro（常用）
分辨率：1125×2436px
狀態(tài)欄：132px
導(dǎo)航欄：132px
標(biāo)簽欄：147px
-
iPhone 6P/7P/8P
分辨率：1242×2208px
狀態(tài)欄：60px
導(dǎo)航欄：132px
標(biāo)簽欄：147px
-
iPhone 5/5S
分辨率：640×1136px
狀態(tài)欄：40px
導(dǎo)航欄：88px
標(biāo)簽欄：98px
iPhone 應(yīng)用圖標(biāo)輸出尺寸
1024×1024px、180×180px、120×120px、87×87px、80×80px、60×60px、58×58px、40×40px、29×29px
二、Android 界面尺寸規(guī)范
主流適配基準(zhǔn)（蘭亭妙微項(xiàng)目常用）
-
Android 5（1080×1920，常用）
狀態(tài)欄：75px
導(dǎo)航欄：144px
標(biāo)簽欄：144px
-
Android 4（720×1280，常用）
狀態(tài)欄：50px
導(dǎo)航欄：96px
標(biāo)簽欄：96px
-
Android 6（1140×2560）
狀態(tài)欄：100px
導(dǎo)航欄：192px
標(biāo)簽欄：192px
-
Android 3/2/1（低適配機(jī)型）
狀態(tài)欄統(tǒng)一：40px
導(dǎo)航欄統(tǒng)一：88px
標(biāo)簽欄統(tǒng)一：98px
Android 應(yīng)用圖標(biāo)輸出尺寸
192×192px、144×144px、96×96px、72×72px、48×48px
三、iPad 界面尺寸規(guī)范
-
iPad 3/4/Air/mini2（高分）
分辨率：2048×1536px
PPI：264
狀態(tài)欄：40px
導(dǎo)航欄：88px
標(biāo)簽欄：98px
-
iPad Mini / 1/2
分辨率：1024×768px
PPI：163/132
狀態(tài)欄：20px
導(dǎo)航欄：44px
標(biāo)簽欄：49px
iPad 應(yīng)用圖標(biāo)輸出尺寸
167×167px、152×152px、76×76px
四、界面字體規(guī)范（蘭亭妙微統(tǒng)一標(biāo)準(zhǔn)）
iOS 字體
- 中文：蘋方
- 英文 / 數(shù)字：San Francisco Pro
- 導(dǎo)航欄：32–36px
- 標(biāo)簽欄：20px
- 正文內(nèi)容：2–6px 階梯遞進(jìn)（保證層級(jí)清晰）
Android 字體
- 5.x 以上：思源黑體 / Noto Sans Han
- 5.0 以下：Droid Sans Fallback
- 英文 / 數(shù)字：Roboto
五、單位概念（設(shè)計(jì)師必須懂）
-
PX（像素）
固定像素，不同設(shè)備顯示大小不同，小屏顯大、大屏顯小，設(shè)計(jì)稿常用單位。
-
PT（點(diǎn)）
蘋果標(biāo)準(zhǔn)長(zhǎng)度單位，1pt=1/72 英寸，用于 iOS 開發(fā)與印刷。
-
DP/DIP
安卓專用，與屏幕密度無關(guān)，保證不同設(shè)備顯示效果一致。
-
SP
安卓字體專用，可隨系統(tǒng)字體大小縮放，保證可讀性。
蘭亭妙微交付標(biāo)準(zhǔn)：iOS 用 PT，Android 用 DP/SP。
六、文件與控件命名規(guī)范
通用命名（團(tuán)隊(duì)統(tǒng)一）
- 頭部：header
- 登錄：login
- 注冊(cè)：register
- 導(dǎo)航欄：nav
- 標(biāo)簽欄：tab
- 內(nèi)容：content
- 底部：footer
- 按鈕：button
- 圖標(biāo)：icon
- 圖片：img
- 標(biāo)題：title
- 搜索：search
- 返回：back
- 彈窗：pop
- 提示：msg
- 背景：background
- 廣告：banner
- 左 / 中 / 右：left/center/right
控件前綴規(guī)范
- 復(fù)選框：chk
- 組合框：cbo
- 列表框：lst
- 菜單：mun
- 文本框：txt
- 按鈕：cmd
- 組按鈕：gpd
- 線條：lin
- 水平滾動(dòng)條：hsb
- 面板：pnl
七、界面設(shè)計(jì)八大統(tǒng)一原則（蘭亭妙微執(zhí)行標(biāo)準(zhǔn)）
-
色彩統(tǒng)一
主色、輔助色、點(diǎn)綴色固定，字體色、模塊色、場(chǎng)景色嚴(yán)格統(tǒng)一。
-
大小統(tǒng)一
同頁面相同元素大小一致；跨頁面同屬性控件大小一致。
-
字體統(tǒng)一
全產(chǎn)品字族統(tǒng)一，同級(jí)文字大小、顏色、字重統(tǒng)一。
-
間距統(tǒng)一
頁面邊距、模塊間距、元素內(nèi)間距全局統(tǒng)一。
-
圓角統(tǒng)一
卡片、頭像、圖片圓角半徑統(tǒng)一。
-
圖標(biāo)統(tǒng)一
風(fēng)格、線寬、復(fù)雜度、視覺重量保持一致。
-
投影統(tǒng)一
同層級(jí)投影參數(shù)統(tǒng)一，不使用純黑投影。
-
格調(diào)統(tǒng)一
產(chǎn)品氣質(zhì)一致：電商熱鬧、工具簡(jiǎn)潔、閱讀文藝、金融穩(wěn)重。
八、三大設(shè)計(jì)準(zhǔn)則
- 依從
界面幫助用戶理解內(nèi)容、降低操作成本。
- 清晰
文字易讀、圖標(biāo)表意準(zhǔn)確、裝飾適度、功能優(yōu)先。
- 縱深
視覺分層 + 合理動(dòng)效，提升活力與理解成本。
九、交互三大準(zhǔn)則
1. 可用
- 適時(shí)反饋，操作有回應(yīng)
- 邏輯通順，流程合理
- 可撤銷，強(qiáng)提示，高容錯(cuò)
2. 易用
- 砍掉非必要交互步驟
- 多用選擇，少用填寫
- 降低學(xué)習(xí)成本，符合用戶習(xí)慣
3. 好用
- 預(yù)判用戶操作，主動(dòng)提供便利
- 適度趣味，提升愉悅感
- 適配多場(chǎng)景，多設(shè)備兼容
十、蘭亭妙微設(shè)計(jì)總結(jié)
規(guī)范不是限制，而是讓設(shè)計(jì)更高效、更統(tǒng)一、更專業(yè)。
堅(jiān)持
交互體驗(yàn)為首，視覺體驗(yàn)其次，做到界面友好、圖標(biāo)清晰、體驗(yàn)一致，才能做出經(jīng)得起用戶與時(shí)間檢驗(yàn)的優(yōu)質(zhì) UI 作品。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
