一、字体
全新 HarmonyOS 字体
通过研究用户在不同场景下对多终端设备的阅读反馈,综合考量不同设备的尺寸、使用场景等因素,同时也考虑用户使用设备时因视距、视角的差异带来的字体大小和字重的不同诉求,HarmonyOS 设计了全新系统默认的字体——HarmonyOS Sans。
全新字体笔画设计
在保障字体体验的功能性前提下,我们在人文和现代中找到新的平衡。在短笔画时保持横平竖直,简约无装饰,撇捺弯钩长笔画中融入书法的笔势美学,带来全新的视觉感受。
优化字体灰度,提升阅读体验
在不同设备的应用场景下,字体的灰度会影响在弱光环境、小字号、远距离下的识别性。因此优化字体的灰度,让新字体在不同场景下具有更好的识别性和阅读体验。

统一多语言字形风格
鸿蒙系统重新设计了中文、拉丁文、希利尔文、希腊文、阿拉伯文的字形样式,支持100+语言,让多语言下阅读体验更加一致。
HarmonyOS 字体特性
动态字重粗细调节
HarmonyOS Sans支持可变特性,让用户选择他们喜欢的字体粗细来进行文本的显示。
支持更多字重能力
HarmonyOS Sans增加了Thin、Light、Bold、Black的字重能力,开发者可以选择需要的字重来构建界面的信息层级。
等宽与变宽数字字体
HarmonyOS Sans支持变宽和等宽两种样式。文本混排中使用系统默认的变宽数字,在阅读文本段落中能让阅读体验更加连贯。而等宽时钟数字在需要强调数值以及数据需要经常变化的表格和时钟数字的场景中使用时,可以保持数字字宽的对齐,同时更具图形化的呈现可以在界面中脱颖而出。
支持时钟字体特性
HarmonyOS Sans支持时钟字体特性,冒号格式会根据时间格式自动调整位置。

字体排版
多设备字号层级
选择合适的字号有助于定义内容的信息层级,以及达到内容的可读性。通过研究全场景设备的显示环境、用户使用时环境的差异,我们为不同设备形态定义了一套构建信息层级的字号系统。
文本对齐规则
不同的文本对齐方式可以引导用户的视觉流向。在段落文本中文本超长换行默认使用左对齐的方式,因为人的浏览视线都是从左往右移,因此大段需要阅读的文案,采用左对齐的方式排版有利于用户快速定位,保证良好的阅读体验。相对于更常见的左对齐,居中对齐可以更容易获得用户的注意力,因此在标题上、空页面的描述文本以及在插画的引导页上使用居中对齐可以更有效地抓住用户眼球。

图标是操作系统与用户界面关键的视觉元素之一。图标应当具备直接识别关键信息或语义的特质,帮助用户轻松辨别图标所代表的含义。为了保证用户在不同的设备中视觉体验的一致性,在图标的设计上应当保持应用图标的元素一致,再根据不同的设备匹配对应的图标背板以适应于各种场景。除此之外,图标在颜色的使用上应当遵循 HarmonyOS 的色彩规则,满足用户阅读的舒适度以及整体界面的和谐程度。对于面状图标与线状图标的使用也应当遵循系统的设计规则,两种样式使用同一种图形结构,降低用户阅读时再次识别的成本。

设计原则
HarmonyOS系统图标追求精致简约、独特考究的设计原则,主要运用几何型塑造图形,精简线条的结构,精准把握比例关系。在造型和隐喻上增加年轻化的设计语言,使整体风格更加年轻时尚。避免尖锐直角的使用,在情感表达上给用户传递出亲近、友好的视觉体验。

图标样式
系统图标根据不同场景使用描边图形与填充图形两种样式,两种样式使用同一结
图标根据不同的使用场景,分为单色图标和双色图标,单色图标用于系统界面中

|
双色图标是基于填充图形样式做的多彩双色效果,多用于需要突出或强调功能的场景。


图形大小布局
系统图标设计以 24vp 为标准尺寸,中央 22vp 为图标主要绘制区域,上下左右各留 1vp 作为空隙。

关键线的形状是网格的基础。利用这些核心形状做为向导,即可使整个产品相关的图标保持一致的视觉比例及体量。

若图标形状特殊,需要添加额外的视觉重量实现整体图标体量平衡,绘制区域可以延伸到空隙区域内,但图标整体仍应保持在24vp大小的范围之内。

找准图标视觉重心,使其在图标区域中心;允许在保证图标重心稳定的情况下,图标部分超出绘制活动范围,延伸至间隙区域内。

图形特征
描边粗细:1.5vp
终点样式:圆头
外圆角:4vp,内圆角:2.5vp
断口宽度:1vp

两个图形的叠加使用,表示群、组、集的概念。


图标资源命名规则
命名逻辑顺序样例:ic_模块_功能_位置_颜色_状态_数字
ic_模块_功能,为必选项;位置_颜色_状态_数字,可根据实际情况选填。
注:资源名要求全部为小写字母,长字段可以尽量用缩写,命名中不能有空格,不同字段之间以“_”分隔。
HarmonyOS官方设计文档:https://developer.harmonyos.com