蘭亭秒微設計 UI 設計部
很多 UI 設計師軟件熟練、審美在線，但產出總不夠精致、不夠專業、開發落地差，核心原因就是：細節沒摳到位。
UI 設計的高級感，從來不在大效果，而在像素級的嚴謹、規范里的統一、落地中的細節。今天以蘭亭秒微設計實戰標準，整理 UI 設計必須死摳的細節，幫你做出專業、好落地、高還原的界面。
一、像素與尺寸細節（差 1px 都不行）
UI 是像素級嚴謹的工作，差 1px 就會顯得不專業、開發難還原。
- 統一基準尺寸
- 移動端常用：iPhone 13 Pro 390×844、安卓 360×640
- 后臺 / PC：1920×1080，鎖定 12/24 柵格
- 元素必須整數像素
- 坐標、寬高、間距全用整數，杜絕 0.5px 模糊
- 邊框、圖標、文字位置嚴格貼像素網格
- 間距統一規范
- 用等比間距：4/8/12/16/20/24/32/48…
- 內邊距、外邊距、模塊間距全部標準化
- 對齊強迫癥
- 所有元素必須對齊：左對齊、居中、右對齊、基線對齊
- 文字、圖標、按鈕必須視覺居中，不只是數值居中
二、字體與文字細節（可讀性第一）
文字占界面 70%，文字細節決定界面舒適度。
- 字體層級嚴格區分
- 標題、副標題、正文、輔助說明、提示文字，字號 / 字重 / 顏色三級分明
- 行高字距規范
- 移動端正文行高：1.2–1.5 倍
- 標題可緊縮字距，正文保持寬松易讀
- 顏色統一不雜亂
- 主文本：#333 / #222
- 次要文本：#666
- 提示文本：#999
- 禁用文本：#ccc
- 杜絕亂加彩色文字
- 文字排版禁忌
- 不出現孤字、孤行、亂換行、參差不齊
- 按鈕文字不撐滿、不貼邊、保持左右內邊距均衡
三、圖標與組件細節（統一才高級）
圖標與組件是 UI 的 “門面”，亂則界面廉價。
- 圖標風格絕對統一
- 線性 / 面性 / 雙色只選一種，不混用
- 描邊粗細統一：1.5px/2px
- 圓角統一、斷點統一、視覺重量統一
- 圖標容器標準化
- 常用：24×24、48×48、64×64
- 圖標在容器內視覺居中，不是單純數值居中
- 按鈕細節死摳
- 圓角統一：4/6/8/12px
- 內邊距左右≥文字寬度，上下均衡
- 常態 / 懸浮 / 點擊 / 禁用四態完整
- 輸入框與表單
- 高度統一、邊框統一、提示文字位置統一
- 獲得焦點、錯誤、成功狀態清晰不混亂
四、色彩與視覺細節（高級感來源）
色彩用得好，界面高級；用得亂，界面廉價。
- 色彩體系固定
- 主色、輔助色、中性色、功能色（成功 / 警告 / 錯誤 / 鏈接）
- 一套界面不超過 3 種主色，輔助色克制使用
- 透明度與疊加規范
- 遮罩層：30%–50% 黑透
- 懸浮態：10%–15% 主色透
- 不隨意用透明度導致界面發灰、發臟
- 圓角與投影統一
- 圓角：小組件 4–6px，卡片 8–12px，彈窗 12–16px
- 投影：x/y/ 模糊 / 透明度統一，不重影、不雜亂
- 分割線與邊框
- 分割線：1px，#eee / #f0f0f0
- 能不用就不用，用留白代替分割更高級
五、交互與狀態細節（專業 UI 的底線）
只做靜態圖不算 UI，狀態完整、交互清晰才合格。
- 全狀態覆蓋
- 按鈕：正常 /hover/active /disabled
- 輸入框：默認 / 聚焦 / 錯誤 / 成功 / 禁用
- 列表：空狀態 / 加載中 / 錯誤 / 無更多
- 加載與反饋
- 點擊區域合規
- 移動端可點區域≥44×44px
- 按鈕間距≥8px，避免誤觸
- 彈窗與提示
- 層級清晰、遮罩到位、按鈕文字明確
- 確認 / 取消位置統一，不顛倒邏輯
六、圖層與交付細節（開發最愛）
細節不僅給用戶看，更要讓開發看得懂、好落地。
- 圖層命名規范
- 英文 / 拼音，不出現 “新建圖層”“矩形 1”
- 結構：模塊_元素_狀態，例：btn_login_normal
- 分組與文件夾清晰
- 頁面→模塊→組件，層級分明
- 不重疊、不隱藏無用圖層、不混亂
- 切圖標準
- 2 倍 / 3 倍圖，PNG 透明
- 圖標帶透明容器，方便開發定位
- 標注完整
- 間距、字號、顏色、圓角、狀態全部標注
- 復用組件說明規范，減少溝通成本
七、蘭亭秒微設計｜給 UI 設計師的建議
- 先摳規范與細節，再做視覺效果
- 界面好不好，縮小看整體，放大看像素
- 開發還原度高，才叫合格的 UI 設計
- 養成習慣：每做完一頁，逐項檢查細節
UI 設計的差距，往往不在創意，而在別人懶得摳的細節，你死磕到底。
蘭亭秒微設計 專注高品質 UI/UX 與品牌視覺
歡迎交流學習，一起做更專業、更落地的設計。
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
