鸿蒙系统UI标准:HarmonyOS中的字体标准 原创 精华

starLWW
发布于 2021-5-12 10:43
浏览
9收藏

通过研究用户在不同场景下对多终端设备的阅读反馈,HarmonyOS 形成了独特的字体系统。综合考量不同设备的尺寸、使用场景和时间等因素,同时也考虑用户使用设备时的视距、视角的差异会对字体大小和字重有不同诉求。

 

秉承以人为中心的设计理念,结合人因研究的分析结论,HarmonyOS 定义了不同设备下的默认字体大小,以及在界面中的使用场景,以此来提升用户在使用过程中的阅读体验。

 鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区

HarmonyOS 字体系统包含一系列等比例字号大小的集合,可以适应不同设备及内容的排版需求。每种类别的字号都有相应的使用场景,请使用推荐字号作为你的选择。

 

注:fp:中文全称字体像素,英文为Font pixels,字体像素大小默认情况下与vp相同,但如果开发者在设置中修改了字体显示大小,就会在vp的基础上乘以scale系数。

  
鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区 

字号规范
鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区

字体色彩规范
智慧屏对文字使用场景进行了深度研究,并在暗色模式下提供了色彩使用标准。使用这些色彩可以准确的对界面内文字进行分类显示,引导用户阅读时的视觉重心和心理感受。高亮色和警告色的使用可以帮助用户有选择的对内容进行阅读,突出重点内容并引导用户作出判断。

鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区
如何使用
在智慧屏上我们使用 2 种字重,通常情况下标题文本使用 Medium,辅助文本及正文使用 Regular。

 鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区

家庭场景下观看智慧屏属于远场交互。用户通常会长时间、远距离地使用电视。大段文字不易阅读,且容易产生疲劳感,因此,设计时应尽可能地用图形、卡片代替文字,尤其注意避免使用大段文字。

 鸿蒙系统UI标准:HarmonyOS中的字体标准-鸿蒙开发者社区

文字颜色的使用受家庭灯光环境的影响,正常光源与昏暗的室内将会影响用户阅读文本。请选择适当的文本大小与颜色,确保及时尺寸较小的文字也能够被用户清楚的识别。从清晰度、美观度、舒适度与满意度这些方面综合考虑,保证应用的最小字号文本保证在 12fp 以上,正文字号尽可能使用 14-18fp,此外建议文本颜色与背景色的对比度不低于 5:1,正文对比度不低于 11:1。

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
已于2021-5-14 13:38:51修改
6
收藏 9
回复
举报
7条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋
已于2021-5-12 11:41:51修改
1
回复
2021-5-12 11:35:02
鸿蒙张荣超
鸿蒙张荣超

赞赞赞!

回复
2021-5-12 11:52:50
fh7578
fh7578

可以的,必须支持啊

回复
2021-5-12 15:43:14
longlong899
longlong899

图片看不清啊!!!强烈建议换上高清图!

 

回复
2021-5-13 11:31:24
mb60790e26d8483
mb60790e26d8483

问一下鸿蒙系统的vp,fp和安卓系统中的dp,sp,px之间是什么对应关系?

回复
2021-5-14 08:50:07
starLWW
starLWW

简单来说,vp是鸿蒙系统中提出的虚拟的界面换算单位,是一种可灵活使用并且最重要的是可缩放的单位。vp全称virtual pixels,常用于表示尺寸的虚拟像素,与屏幕像素的关系是 1vp 约等于 160dpi 屏幕密度设备上的 1px,在不同密度的设备上,鸿蒙会针对性的转换设备间对应的实际像素值。fp全称font-size pixels,是鸿蒙提供的标识字体像素的单位;默认情况下与vp相同,即默认 1 fp = 1vp,当用户在设置中修改了字体显示大小,那么字体大小会在vp的基础上乘以 scale 系数,即 1fp = 1vp * scale,scale系数默认为1,会根据设备分辨率、密度进行调整。

回复
2021-5-14 13:35:37
starLWW
starLWW 回复了 longlong899
图片看不清啊!!!强烈建议换上高清图!

已更换部分图片

回复
2021-5-14 13:39:25
回复
    相关推荐