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