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 字體
- 中文:蘋(píng)方
- 英文 / 數(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))
蘋(píng)果標(biāo)準(zhǔn)長(zhǎng)度單位,1pt=1/72 英寸,用于 iOS 開(kāi)發(fā)與印刷。
-
DP/DIP
安卓專(zhuān)用,與屏幕密度無(wú)關(guān),保證不同設(shè)備顯示效果一致。
-
SP
安卓字體專(zhuān)用,可隨系統(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)一
同頁(yè)面相同元素大小一致;跨頁(yè)面同屬性控件大小一致。
-
字體統(tǒng)一
全產(chǎn)品字族統(tǒng)一,同級(jí)文字大小、顏色、字重統(tǒng)一。
-
間距統(tǒng)一
頁(yè)面邊距、模塊間距、元素內(nèi)間距全局統(tǒng)一。
-
圓角統(tǒng)一
卡片、頭像、圖片圓角半徑統(tǒng)一。
-
圖標(biāo)統(tǒng)一
風(fēng)格、線寬、復(fù)雜度、視覺(jué)重量保持一致。
-
投影統(tǒng)一
同層級(jí)投影參數(shù)統(tǒng)一,不使用純黑投影。
-
格調(diào)統(tǒng)一
產(chǎn)品氣質(zhì)一致:電商熱鬧、工具簡(jiǎn)潔、閱讀文藝、金融穩(wěn)重。
八、三大設(shè)計(jì)準(zhǔn)則
- 依從
界面幫助用戶(hù)理解內(nèi)容、降低操作成本。
- 清晰
文字易讀、圖標(biāo)表意準(zhǔn)確、裝飾適度、功能優(yōu)先。
- 縱深
視覺(jué)分層 + 合理動(dòng)效,提升活力與理解成本。
九、交互三大準(zhǔn)則
1. 可用
- 適時(shí)反饋,操作有回應(yīng)
- 邏輯通順,流程合理
- 可撤銷(xiāo),強(qiáng)提示,高容錯(cuò)
2. 易用
- 砍掉非必要交互步驟
- 多用選擇,少用填寫(xiě)
- 降低學(xué)習(xí)成本,符合用戶(hù)習(xí)慣
3. 好用
- 預(yù)判用戶(hù)操作,主動(dòng)提供便利
- 適度趣味,提升愉悅感
- 適配多場(chǎng)景,多設(shè)備兼容
十、蘭亭妙微設(shè)計(jì)總結(jié)
規(guī)范不是限制,而是讓設(shè)計(jì)更高效、更統(tǒng)一、更專(zhuān)業(yè)。
堅(jiān)持
交互體驗(yàn)為首,視覺(jué)體驗(yàn)其次,做到界面友好、圖標(biāo)清晰、體驗(yàn)一致,才能做出經(jīng)得起用戶(hù)與時(shí)間檢驗(yàn)的優(yōu)質(zhì) UI 作品。
蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.lindaling.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話:01063334945。