HarmonyOS鸿蒙系统视觉风格分享

杭州/UI设计师/4年前/1765浏览
HarmonyOS鸿蒙系统视觉风格分享

HarmonyOS 是一款面向全场景智慧生活方式的分布式操作系统。

关注公众号[万能做图师] 回复:鸿蒙,可下载鸿蒙Sketch插件



一、字体


全新 HarmonyOS 字体


通过研究用户在不同场景下对多终端设备的阅读反馈,综合考量不同设备的尺寸、使用场景等因素,同时也考虑用户使用设备时因视距、视角的差异带来的字体大小和字重的不同诉求,HarmonyOS 设计了全新系统默认的字体——HarmonyOS Sans。

下载 HarmonyOS Sans


全新字体笔画设计



在保障字体体验的功能性前提下,我们在人文和现代中找到新的平衡。在短笔画时保持横平竖直,简约无装饰,撇捺弯钩长笔画中融入书法的笔势美学,带来全新的视觉感受。

undefined


优化字体灰度,提升阅读体验



在不同设备的应用场景下,字体的灰度会影响在弱光环境、小字号、远距离下的识别性。因此优化字体的灰度,让新字体在不同场景下具有更好的识别性和阅读体验。


undefined




统一多语言字形风格



鸿蒙系统重新设计了中文、拉丁文、希利尔文、希腊文、阿拉伯文的字形样式,支持100+语言,让多语言下阅读体验更加一致。


HarmonyOS 字体特性



动态字重粗细调节


HarmonyOS Sans支持可变特性,让用户选择他们喜欢的字体粗细来进行文本的显示。


支持更多字重能力

HarmonyOS Sans增加了Thin、Light、Bold、Black的字重能力,开发者可以选择需要的字重来构建界面的信息层级。



undefined


等宽与变宽数字字体


HarmonyOS Sans支持变宽和等宽两种样式。文本混排中使用系统默认的变宽数字,在阅读文本段落中能让阅读体验更加连贯。而等宽时钟数字在需要强调数值以及数据需要经常变化的表格和时钟数字的场景中使用时,可以保持数字字宽的对齐,同时更具图形化的呈现可以在界面中脱颖而出。

undefined


支持时钟字体特性


HarmonyOS Sans支持时钟字体特性,冒号格式会根据时间格式自动调整位置。



undefined




字体排版



多设备字号层级


选择合适的字号有助于定义内容的信息层级,以及达到内容的可读性。通过研究全场景设备的显示环境、用户使用时环境的差异,我们为不同设备形态定义了一套构建信息层级的字号系统。

undefined


文本对齐规则


不同的文本对齐方式可以引导用户的视觉流向。在段落文本中文本超长换行默认使用左对齐的方式,因为人的浏览视线都是从左往右移,因此大段需要阅读的文案,采用左对齐的方式排版有利于用户快速定位,保证良好的阅读体验。相对于更常见的左对齐,居中对齐可以更容易获得用户的注意力,因此在标题上、空页面的描述文本以及在插画的引导页上使用居中对齐可以更有效地抓住用户眼球。


undefined



二、图标


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


undefined

设计原则


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


undefined


图标样式

系统图标根据不同场景使用描边图形与填充图形两种样式,两种样式使用同一结
构图形,使他们看起来具有一致的视觉体验。
图标根据不同的使用场景,分为单色图标和双色图标,单色图标用于系统界面中
辅助表达基础功能。

undefined



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


undefined



undefined

图形大小布局


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


undefined




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


undefined




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


undefined



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


undefined




图形特征

  1. 描边粗细:1.5vp

  2. 终点样式:圆头

  3. 外圆角:4vp,内圆角:2.5vp

  4. 断口宽度:1vp




undefined



图形叠加


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


图形与图形之间需留出1vp的间隙


undefined




图形间隙的拐角处同样需要添加3.5vp内圆角


undefined




图标资源命名规则


命名逻辑顺序样例:ic_模块_功能_位置_颜色_状态_数字


ic_模块_功能,为必选项;位置_颜色_状态_数字,可根据实际情况选填。

注:资源名要求全部为小写字母,长字段可以尽量用缩写,命名中不能有空格,不同字段之间以“_”分隔。



undefined


HarmonyOS官方设计文档:https://developer.harmonyos.com




17
阅读原文
|
Report
|
20
Share
相关推荐
加工流程可视化大屏设计
Recommanded by editor
内容含视频
作品集
作品集
作品集
作品集
作品收藏夹
一些动效练习~
Recommanded by editor
智慧码头解决方案
Recommanded by editor
内容含视频
船货匹配解决方案-货主端App
Recommanded by editor
内容含视频
作品整理总结
Recommanded by editor
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
Heal丨概念网页设计
Homepage recommendation
相关收藏夹
作品集
作品集
作品集
作品集
作品收藏夹
B端
B端
B端
B端
作品收藏夹
素材
素材
素材
素材
作品收藏夹
UI
UI
UI
UI
作品收藏夹
学习文章
学习文章
学习文章
学习文章
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
大家都在看
Log in