五十路熟妇高熟无码视频,无码簧片,亚洲大尺度无码无码专线,亚洲欧美日韩国产自偷,jizz无码在线观看视频,av色综合,99精品国产成人一区二区,亚洲粉嫩av一区二区黑人

UI 設計日常規范全集|蘭亭妙微設計公司實戰整理

 

在 UI 設計交付與團隊協作中,統一規范是保證界面質量、提升效率、降低溝通成本的核心基礎。蘭亭妙微設計結合多年項目沉淀,把日常高頻使用的設備尺寸、圖標輸出、字體、單位、命名、設計原則、交互準則完整整理,形成可直接落地的設計規范手冊,方便團隊隨時查閱、復用。
 

 

image.png

一、iPhone 界面尺寸規范

 
蘭亭妙微常用主流機型基準(@2x/@3x)
 
  • iPhone 6/7/8(常用)
     
    分辨率:750×1334px
     
    狀態欄:40px
     
    導航欄:88px
     
    標簽欄:98px
     
  • iPhone X/XS/11 Pro(常用)
     
    分辨率:1125×2436px
     
    狀態欄:132px
     
    導航欄:132px
     
    標簽欄:147px
     
  • iPhone 6P/7P/8P
     
    分辨率:1242×2208px
     
    狀態欄:60px
     
    導航欄:132px
     
    標簽欄:147px
     
  • iPhone 5/5S
     
    分辨率:640×1136px
     
    狀態欄:40px
     
    導航欄:88px
     
    標簽欄:98px
     
 

iPhone 應用圖標輸出尺寸

 
1024×1024px、180×180px、120×120px、87×87px、80×80px、60×60px、58×58px、40×40px、29×29px
 

image.png

二、Android 界面尺寸規范

 
主流適配基準(蘭亭妙微項目常用)
 
  • Android 5(1080×1920,常用)
     
    狀態欄:75px
     
    導航欄:144px
     
    標簽欄:144px
     
  • Android 4(720×1280,常用)
     
    狀態欄:50px
     
    導航欄:96px
     
    標簽欄:96px
     
  • Android 6(1140×2560)
     
    狀態欄:100px
     
    導航欄:192px
     
    標簽欄:192px
     
  • Android 3/2/1(低適配機型)
     
    狀態欄統一:40px
     
    導航欄統一:88px
     
    標簽欄統一:98px
     
 

Android 應用圖標輸出尺寸

 
192×192px、144×144px、96×96px、72×72px、48×48px
 

image.png

三、iPad 界面尺寸規范

 
  • iPad 3/4/Air/mini2(高分)
     
    分辨率:2048×1536px
     
    PPI:264
     
    狀態欄:40px
     
    導航欄:88px
     
    標簽欄:98px
     
  • iPad Mini / 1/2
     
    分辨率:1024×768px
     
    PPI:163/132
     
    狀態欄:20px
     
    導航欄:44px
     
    標簽欄:49px
     
 

iPad 應用圖標輸出尺寸

 
167×167px、152×152px、76×76px
 

 

image.png

四、界面字體規范(蘭亭妙微統一標準)

 

iOS 字體

 
  • 中文:蘋方
  • 英文 / 數字:San Francisco Pro
  • 導航欄:32–36px
  • 標簽欄:20px
  • 正文內容:2–6px 階梯遞進(保證層級清晰)
 

Android 字體

 
  • 5.x 以上:思源黑體 / Noto Sans Han
  • 5.0 以下:Droid Sans Fallback
  • 英文 / 數字:Roboto
 

 

五、單位概念(設計師必須懂)

 
  1. PX(像素)
     
    固定像素,不同設備顯示大小不同,小屏顯大、大屏顯小,設計稿常用單位。
     
  2. PT(點)
     
    蘋果標準長度單位,1pt=1/72 英寸,用于 iOS 開發與印刷。
     
  3. DP/DIP
     
    安卓專用,與屏幕密度無關,保證不同設備顯示效果一致。
     
  4. SP
     
    安卓字體專用,可隨系統字體大小縮放,保證可讀性。
     
 
蘭亭妙微交付標準:iOS 用 PT,Android 用 DP/SP。
 
 

 

六、文件與控件命名規范

 

通用命名(團隊統一)

 
  • 頭部:header
  • 登錄:login
  • 注冊:register
  • 導航欄:nav
  • 標簽欄:tab
  • 內容:content
  • 底部:footer
  • 按鈕:button
  • 圖標:icon
  • 圖片:img
  • 標題:title
  • 搜索:search
  • 返回:back
  • 彈窗:pop
  • 提示:msg
  • 背景:background
  • 廣告:banner
  • 左 / 中 / 右:left/center/right
 

控件前綴規范

 
  • 復選框:chk
  • 組合框:cbo
  • 列表框:lst
  • 菜單:mun
  • 文本框:txt
  • 按鈕:cmd
  • 組按鈕:gpd
  • 線條:lin
  • 水平滾動條:hsb
  • 面板:pnl
 

 

七、界面設計八大統一原則(蘭亭妙微執行標準)

 
  1. 色彩統一
     
    主色、輔助色、點綴色固定,字體色、模塊色、場景色嚴格統一。
     
  2. 大小統一
     
    同頁面相同元素大小一致;跨頁面同屬性控件大小一致。
     
  3. 字體統一
     
    全產品字族統一,同級文字大小、顏色、字重統一。
     
  4. 間距統一
     
    頁面邊距、模塊間距、元素內間距全局統一。
     
  5. 圓角統一
     
    卡片、頭像、圖片圓角半徑統一。
     
  6. 圖標統一
     
    風格、線寬、復雜度、視覺重量保持一致。
     
  7. 投影統一
     
    同層級投影參數統一,不使用純黑投影。
     
  8. 格調統一
     
    產品氣質一致:電商熱鬧、工具簡潔、閱讀文藝、金融穩重。
     
 

 

八、三大設計準則

 
  1. 依從
     
    界面幫助用戶理解內容、降低操作成本。
  2. 清晰
     
    文字易讀、圖標表意準確、裝飾適度、功能優先。
  3. 縱深
     
    視覺分層 + 合理動效,提升活力與理解成本。
 

 

九、交互三大準則

 

1. 可用

 
  • 適時反饋,操作有回應
  • 邏輯通順,流程合理
  • 可撤銷,強提示,高容錯
 

2. 易用

 
  • 砍掉非必要交互步驟
  • 多用選擇,少用填寫
  • 降低學習成本,符合用戶習慣
 

3. 好用

 
  • 預判用戶操作,主動提供便利
  • 適度趣味,提升愉悅感
  • 適配多場景,多設備兼容
 

 

十、蘭亭妙微設計總結

 
規范不是限制,而是讓設計更高效、更統一、更專業。
 
堅持交互體驗為首,視覺體驗其次,做到界面友好、圖標清晰、體驗一致,才能做出經得起用戶與時間檢驗的優質 UI 作品。
 

 

 

蘭亭妙微(藍藍設計)m.wtxcl.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

日歷

鏈接

個人資料

藍藍設計的小編 http://m.wtxcl.cn

存檔