兰亭秒微设计 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 与品牌视觉
欢迎交流学习，一起做更专业、更落地的设计。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
