UI设计规范有哪些？尺寸、字体、颜色与组件

UI设计规范先统一尺寸单位、文字层级、颜色语义和组件状态，再规定不同屏幕与内容长度下怎样变化。Android常用dp描述布局、sp描述文字，iOS布局通常用pt；不要直接拿截图像素当设计稿尺寸。将这些规则整理为可共享的UI规范与组件库，团队才能在不同页面使用同一套约定。

1. 移动端UI设计的基本知识

移动端UI设计面向手机、平板等移动设备。理解尺寸时，把“屏幕物理大小”“像素数量”“布局逻辑单位”分开：两台分辨率不同的手机，可以让同一个按钮显示为接近的可操作尺寸。

• 屏幕尺寸：通常指屏幕对角线的物理长度，1英寸等于2.54厘米。仅凭对角线不能推出屏幕的宽和高，还需要长宽比；它也不能直接决定设计稿应采用多少像素。

• 分辨率：描述像素数量。例如750×1334通常表示宽750像素、高1334像素，不是750行、1334列。图片导出尺寸与屏幕布局单位也不是同一个概念。

• 像素密度（PPI）：指每英寸长度包含的像素数量，而不是一个正方形内的像素总数。对已知横纵像素数和屏幕对角线的设备，可用“像素对角线长度÷屏幕对角线英寸数”估算PPI。

• DPI：原本用于描述每英寸的打印点数。在Android资源适配中，density dpi用于布局单位与像素的映射；这里的逻辑密度不应直接等同于屏幕的物理PPI。

实际设计先确认目标平台、可用窗口和逻辑单位，再选择画板；交付图片时才处理像素倍率。不要为每一款物理手机都复制一套画板，优先检查内容在窄、宽、横屏和大字号条件下是否仍能使用。

2. Android的UI设计规范

2.1 基本单位

• dp：Android的密度无关像素。仅在160 dpi的基准密度下，1dp对应1px；常用换算是px = dp × density dpi ÷ 160。24dp图形在2倍密度下对应48px，但其逻辑布局大小仍为24dp。

• sp：用于文字尺寸，会考虑用户的字体大小偏好。不能只用密度换算它；Android的字体缩放还包含非线性缩放。交付时说明文字角色和放大行为，开发通过平台接口换算，不在设计说明中写死一个适用于所有设置的sp转px公式。

2.2 单位和度量

这些是密度分组与资源倍率，不是每组固定的手机分辨率。完整映射和资源准备方式见Android多像素密度文档。

2.3 图片缩放

位图按需要导出对应倍率，矢量图则要检查平台支持和渲染效果。不要把同一张低分辨率图片简单放大成多份；图片像素足够、裁切规则一致，才能兼顾清晰度与文件体积。

2.4 字体

• 中文字体：选择覆盖项目语言与所需字形的字体，并确认使用许可。思源黑体与Noto Sans CJK是相关字体项目，但名称、版本和分发不能简单当成完全相同的文件。

• 英文字体：Android项目可以沿用对应设计系统的系统字体方案；采用Roboto或品牌字体时，明确字重、回退与多语言混排要求。

• 字体粗细：记录实际字体支持的字重，再观察中英文混排的视觉重量。不同字库的同名Regular或Medium不保证看起来完全等重。

• 字体大小：按标题、正文、辅助说明定义层级，并在真实中文内容下比较。不要将“中文统一比英文大1px”当成通用规范；字号还需与字体、行高、容器和用户设置一起检查。

2.5 图标

• 笔画：同一层级图标保持一致的描边风格；缩小时检查曲线、斜线和小孔隙是否仍清晰，必要时使用为小尺寸准备的版本。

• 颜色：图标区分默认、选中和不可用状态，具体颜色取自项目语义样式。弱化后仍需能辨认；陌生图标补文字说明，不让颜色或透明度独自承担含义。

3. iOS的UI设计规范

iOS界面要结合目标系统和设备设计。画板尺寸、可用窗口、安全区和文字设置各自影响布局，不应只拿某一代iPhone截图作为所有设备的规范。

3.1 尺寸

用pt描述布局，再按导出用途准备像素资源。屏幕外形、横竖方向和窗口变化可能改变可用空间；照片或背景可以延伸到边缘，重要文字和操作则应遵守安全区。下图用于观察不同设备比例，不作为机型尺寸清单。

样机模板

3.2 布局

在Pixso设计稿中，自动布局用于组织内容的方向、间距、内边距与尺寸关系。例如把按钮文字和左右留白组成一组，再调整文字长度，观察按钮是否随内容增长。下面用画布中的布局关系理解这一点。

设计稿的自动布局与iOS应用运行时的布局是两件事。需要交付的是可说明、可实现的规则，例如窄屏改为纵向排列、长标题换行、按钮保持足够操作区域；开发仍需在应用中实现并测试。按照Apple布局指南，重点检查以下变化：

• 不同窗口宽度和安全区，主要内容与操作是否仍可见；

• 不同的设备方向（纵向/横向）；

• 拆分视图；

• iPad 上的多任务处理模式；

• 动态文字大小更改；

• 不同语言的文字长度、阅读方向，以及日期与数字格式；

iOS布局注意事项：

①确保主要内容以其默认大小清晰可见。用户没有必要通过水平滚屏来阅读重要文本，或者放大才能查看主要图像，除非用户自己选择改变尺寸。

②在整个APP中保持整体一致的外观。通常，具有相似功能的元素应该看起来是相似或者统一的。Pixso的组件和样式创建功能可以提供很好的帮助，了解更多Pixso组件和样式的创建方法，点击跳转Pixso详细创建组件和样式指南。

③使用视觉重量和平衡来传达重要性。

④保持对齐让用户浏览更简单，并传达组织和层级关系。

⑤如果可以的话，同时支持纵向和横向。

⑥做好更改文本大小的准备。

⑦为触控元素保留足够的操作区域，区分可见图标大小与实际点击范围，避免相邻控件容易误触；按目标平台的可访问性要求和真机操作检查。

3.3 字体

字体：

系统字体：优先采用平台的系统文字角色和字体方案，不按旧系统版本的字体清单手工指定所有文字。Apple的系统字体说明强调，具体字体会随平台、语言与文字角色选择。

设计时要检查中文、英文、数字与符号的混排，尤其是价格、日期和长名称。若采用品牌字体，说明许可、缺字回退和动态字号策略，不能只交一张在自己电脑上正常显示的图片。

大小规范：

• 导航标题：说明页面身份，保持与导航操作之间的层级。

• 内容标题：按页面主标题、区块标题等角色区分，不把每个标签都加大加粗。

• 正文：优先保障连续阅读，长内容允许换行与容器增高。

• 辅助说明：可降低视觉权重，但不能弱化到难以阅读，尤其是错误原因和费用条件。

动态文字大小：

Dynamic Type允许用户调整文字大小。设计至少比较默认字号与较大字号下的布局：并排区域是否需要上下堆叠，行高与容器是否增长，按钮文案是否被截断。不要把一张默认字号表当成全部动态字号规则。

3.4 图标

应用图标与界面内的小图标不是同一交付物。应用图标要按目标系统的外观、分层与资源流程准备；界面图标则要在实际使用尺寸下检查可辨认性。

Apple当前的应用图标指南包含分层图标与不同系统外观的设计要求，不能继续把旧版多尺寸PNG表作为唯一交付方式。先与开发确认目标平台和资源工作流，再准备需要的图层与预览。

设计交付中分别写清：

• 用途：应用图标、导航图标或内容插图；

• 外观：需要哪些明暗或其他平台外观版本；

• 资源：使用矢量、位图还是分层图标文件；

• 预览：在实际出现位置和小尺寸下是否仍可辨认。

3.5 按钮

按钮要通过层级表达操作重要性。下面的样式组合展示了强调程度与尺寸的差异；实际项目还要决定默认、按下、加载和不可用等状态，不将图中的组合数量当成平台永远不变的规定。

在Pixso中，把同一按钮的状态放入组件变体，区分文字、图标、内边距与状态属性。修改主组件后，检查实例是否正确继承预期变化；存在独立覆盖的属性也要单独确认。设计规范要写清“何时用哪一种按钮”，不只罗列外观。

4. 把颜色、间距与状态写成项目规则

平台规范解决通用约束，项目规范还要说明自己的业务含义。颜色可按正文、弱提示、主操作、危险与成功等用途命名；间距按元素内部、同组与组间区分；组件记录出现条件、输入内容和可用状态。

Web项目可参考WCAG文本对比度要求检查正文与背景；同时检查状态是否有文字或形状提示。色板好看不等于所有组合都适合正文。

5. 用一张完整页面验证规范

规范写完后，用它完成一张真实内容的表单或列表，再替换长标题、空值、错误提示和大字号。出现例外时，判断应修改页面还是补充组件规则，并记录原因。

把文字、颜色、间距、按钮状态和资源要求集中交付，开发才能理解哪些值固定、哪些随内容变化。能在一张真实页面上说明白的规范，才适合继续推广到整套产品。