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