5.1 UI 设计规范
5.1.5 视觉规范
5.1.5.1 字体
字体系统
系统字体是预先安装在设备上,他们具有广泛的语言支持,可以根据语言和地区的自 动切换相应的字符资源,并且不会出现字体使用版权风险。
我们使用Sans-serif(无衬线字体)作为系统字体的显示样式。它没有额外的装饰笔 画,结构更加简洁清晰,在UI界面上具有更良好的屏幕显示效果,并且能带来更高阅 读效率。
在UI界面上使用系统字体进行内容的显示时,无需指定字体的Font family name(字 体名称),在进行不同语言和地区的切换时,系统将根据当前设定的语言和地区配置 相应的字体名称。
中文和其他语种需要独立的字体样式,不能使用同一种字体勉强适配多种语言,优选 公司专用字体,适用于所有应用系统。语言混合的文字,中文使用方正兰亭黑简体,
小语种及数字需使用 HuaweiSans。
字重
字重是指字体的粗细程度,按照国际标准常用的UI显示字重有Thin(100)、Light
(300)、Regular(400)、Medium(500)、Bold(700)。使用合适的字重能让 界面信息层次清晰、版式整齐,达到良好的视距效果和阅读效果。
字号
在办公宝的使用场景下,根据人眼视觉的人机研究,综合 UI 设计定义的字阶,为了保 持阅读的舒适行和可读性,最佳阅读文本的最小值为 6px,文本的最大值为68px。建 议文本的大小不可超出此范围,减轻用户阅读负担。不同字号的文字在屏上的展示效 果参考下图。
行高
使用合适的行高,能得到更好的UI排版效果。在大屏的设计上,建议控件的默认行高
=1.5*字号。
界面上不同层级和类型的文字建议使用合适的字号和行高,使信息层级关系清晰易 读。
在大段落文本中用户需要长时间阅读则需要更大的行高以获得良好的阅读舒适性,建 议行高=(1.5-2.0)*字号。若行高过大,容易使行与行之间的信息形成割裂,且视觉 上丧失了整体感,若行高过小,容易导致行与行之间的信息无法区分,影响阅读,视 觉上过于拥挤,没有透气感。
行长
正文文本的行长度通常在20到30个中文字符或40到60个英文字符之间是最舒适的阅读 长度,长度过短需要经常跳行,影响阅读的流畅性,行长过长使眼睛聚焦的时间长,
容易引起视觉疲劳,影响阅读体验,合适的行长能让眼睛在行首与行尾之间得到休 息,阅读最舒适。
数字
文本混排中使用系统默认的变宽数字,在一般阅读文本段落中能让阅读体验更加连 贯。而等宽时钟数字在需要强调数值以及数据需要经常变化的表格和时钟数字的场景 中,可以使保持数字字宽的对齐,更具图形化的呈现可以在UI界面中更容易脱颖而 出。
文本对齐规则
不同的文本对齐方式可以引导用户的视觉流向。在段落文本中文本超长换行默认使用 左对齐的方式,因为人的浏览视线都是从左向右移,因此大段需要阅读的文案,采用 左对齐的方式排版有利于用户快速定位,保证良好的阅读体验。相对于更常见的左对 齐,居中对齐可以更容易获得用户的注意力,因此在标题上、空页面的描述文本以及 在插画的引导页上使用居中对齐可以更有效地抓住用户眼球。