UI设计尺寸规范，是团队对文字、控件、间距与适配方式的共同约定。它没有一份可直接套用到所有设备的固定数值表。先确定Web、iOS还是Android，再区分可见图形和操作热区，最后用真实内容决定组件该固定、伸缩还是换行。
如果只记“按钮高40、图标24、间距8”，容易画出看起来整齐却不好操作的页面。下面把这些数值放回适用环境，说明哪些可以作为起点，哪些必须随内容改变。
先分清px、pt与图片像素
画板尺寸、屏幕分辨率与图片像素不是同一件事。先与开发确认交付采用的逻辑单位，避免把1170px宽的手机截图当作1170 CSS px的网页。
| 环境 | 常见单位 | 设计时需要说明 |
|---|---|---|
| Web界面 | CSS px；文字常结合rem等相对单位实现 | 视口、内容容器、缩放与断点规则 |
| iOS原生界面 | pt | 逻辑尺寸、系统文字缩放和安全区域 |
| Android原生界面 | 布局常用dp，文字常用sp | 密度无关尺寸与用户字体设置 |
| PNG/JPEG等位图 | 图像像素 | 实际显示大小、导出倍数与文件体积 |
例如，一个网页图标显示为24×24 CSS px，使用2倍位图时资源可以是48×48像素，但界面里的占位仍是24×24 CSS px。矢量资源则不靠导出倍数保持清晰。不要把“2倍图”理解为让用户看到两倍大的图标。
文字与图标的常用尺寸
字体层级参考
先按“页面标题、区块标题、正文、辅助说明”定义用途，再挑字号。以下为中文Web界面的试排起点，适合用真实文案对照，不是平台最低标准。
| 文字角色 | 可尝试的范围 | 重点观察 |
|---|---|---|
| 界面标题 | 20–28 CSS px | 长标题不挤掉返回与主要操作 |
| 区块标题 | 16–20 CSS px | 通过字重、间距与正文拉开层级 |
| 表单与功能正文 | 14–16 CSS px | 姓名、邮箱、单位与错误原因能读清 |
| 文章等连续阅读 | 16–18 CSS px | 同时调整行长与行高 |
| 辅助说明 | 12–14 CSS px起试排 | 关键条件不能因为次要而难以辨认 |
行高与字距
中文多行正文可以从字号的1.5–1.8倍行高尝试。例如16px正文配24–28px行高，再放入三至五行真实文字判断阅读感。按钮标签、数据表单元格和连续文章不必采用同一行高。
中文正文通常先保持默认字距；不要统一增加到字号的0.1–0.2倍，让按钮、数字和短标签都变得松散。文字放大后，容器应允许内容增长，不能只保留理想字号下的高度。具体字体选择可继续看UI字体与行高指南。
图标尺寸与光学校正
常见功能图标可从16、20、24 CSS px几个规格中选择，导航或强调图标可以更大。尽量采用统一网格与笔画风格，但要观察视觉重量：同一个24px方框内，实心圆与细线箭头看起来未必一样大。
图标负责让人识别，外层按钮负责让人点中。这两个尺寸要分开标注；装饰图标不需要因为同页有按钮就强行扩大热区。
按钮尺寸与点击热区
桌面Web普通按钮可以从32–40 CSS px高度、左右12–20px内边距试排；移动触控入口应另定热区。圆角4–8px是常见的视觉选择，不是可用性标准。
不同规范的数字不要合并使用：WCAG 2.2目标尺寸条目的AA要求涉及至少24×24 CSS像素及间距等例外；Apple界面设计提示建议命中区域至少44×44pt，具体控件可结合按钮指南处理；Android无障碍指南建议交互目标至少48×48dp。它们不是同一单位，也不能据此认定24px就是理想的手机按钮大小。
查看按钮组件素材时，同时比较默认、聚焦、禁用和加载状态。16px的删除图标可以放在更大的按钮容器里；相邻删除与编辑操作还要拉开距离，热区不能彼此重叠。
“保存”改成“保存并继续”后，通常先增加宽度并保持内边距，而不是压缩文字。按钮所在空间实在有限时，可以调整操作排列或减少次要文案；支付金额、提交对象等关键信息不应为了对齐而截断。
输入框高度与错误提示
输入框应容纳一行文字、上下内边距与边框。假设文字行高22px，上下内边距各8px、上下边框各1px，总高度就是22＋8×2＋1×2＝40px。不要一边指定32px固定高度，一边又要求这些内容全部塞进去。
这是单行框的计算。多行备注、标签选择器、上传文件列表需要不同的增长方式；标签、帮助说明和错误提示也不能算在输入框本体里后一起裁切。桌面密集表单可从32–40px试排，移动表单仍要按触控环境确定。
可以从输入框组件素材中挑一组样式，先统一字号与内边距，再放入不同长度的内容。不要只看空框状态。
用三行表单检查尺寸是否真的够用
把“姓名、邮箱、备注”三行放在一起，就能发现大部分尺寸问题：
- 邮箱填入较长地址，观察文字是否保持可编辑与可定位。
- 姓名下增加两行错误说明，下一个字段应自然下移，而不是被覆盖。
- 备注输入多行文字，明确自动增长的范围或框内滚动方式。
- 把“提交”改成“保存并通知成员”，检查按钮宽度和相邻操作。
- 放大文字，再检查标签、内容与提示是否仍对应同一个字段。
当问题来自横向空间不足时，应调整排列，具体可看响应式UI布局。
导航栏高度与安全区域
桌面网站导航可以从60–80 CSS px高度试排，但导航项数量、品牌标志高度和主要操作都可能改变这个选择。导航图标可从24px开始，项目间距20–30px也只是起点；不要用固定间距把最后一个入口挤到屏外。
手机原生导航还涉及系统状态栏、底部手势区域和设备安全区域，不能把桌面导航数值直接移用。底部固定按钮应与安全区域一起考虑，软键盘出现后也不能遮挡当前输入。页面层级可参考导航栏设计，整体结构可参考网站页面结构。
间距从关系出发，不必所有数值都凑8
4px或8px为基础的间距序列，能减少随意数字，适合建立团队的节奏。例如4、8、12、16、24、32px可以覆盖多数图标间距、组件内边距和模块间距。但边框1px、光学修正或平台控件不必为凑整数而变形。
相关内容靠近，不同组之间拉开。字段标签到输入框可用较小距离，一个完整字段到下一字段用更大距离，表单到下一章节再增大。即使数字都来自8的倍数，如果标签离下面输入框比离上面输入框更远，归属关系仍然会读错。
在设计系统里用“紧凑间距、默认间距、区块间距”等角色管理，比把每一处都叫“16”更容易调整。不要让一处视觉修正变成全站新规格。
卡片宽度与内容高度
卡片宽度由容器、列数和间距共同决定。200–400px可覆盖部分桌面卡片，但不能作为跨端标准。例如1200px内容区放3列、列间距24px，每张卡片宽度为384px；手机单列则按视口与边距计算。
高度通常随标题、图片与说明增长。确需同排等高时，应明确文本是否允许截断、按钮如何对齐；不能统一设置400px上限后把重要内容裁掉。长名称、空数据和异常提示都应放入卡片看一遍。
图片比例与导出尺寸
先确定图片在界面中显示多大、采用什么比例，再决定资源像素。若显示区域宽320 CSS px、高180 CSS px，准备640×360像素的2倍图片可以是一个选择，但网页还应结合实际设备与图片体积决定是否需要更大资源。
照片可以按构图裁切，Logo、二维码、说明截图通常需要保持完整。关键文字直接放在网页中，比全部烘焙进大图片更容易适应文字缩放和手机阅读。为图片预留正确比例，也能减少加载后页面上下跳动。
