QQ登录

登录|注册 上传

飞特网

  • 飞特网官方微博
  • 飞特网微信公众号

聊聊UI设计中的文字

frce发布于:2020-2-14 11:57 |原作者: 七七的设计手札 |来自:公众号:七七的设计手札
简介: 字体是界面中最基本的构成之一, 用户通过文本来理解内容,完成操作。合适的文字不仅可以有效传达信息,还能在界面中形成韵律的美感
版权申明:本文出自“七七的设计手札”原创,感谢“七七的设计手札”的原创文章分享!

字体选择

IOS,Android 两大系统是当前主流的两大系统,界面设计时通常会优先默认选择各自系统字体,保证文字的可读性和后期兼容。

Android:默认字体-思源黑体/Robot
iOS
:默认字体-苹方/San Francisco

某些地方为了强调各自品牌的气质,也会使用少部分特殊字体。微信读书的标题采用了衬线体的文字,来凸显界面的文艺的气息。 

聊聊UI设计中的文字 飞特网 设计理论

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

字体大小


最小字体

根据科学研究发现:人眼对于信息物体的识别,在眼睛内视角度数>0.3°,才能保文字信息体投射到视网膜中的分辨率足够大,能够被大脑所识别,我们正常情况下手机大约为30cm,距离电脑大约为50cm  根据公式:h=2d·tan(θ/2)得到的数值换算成px,大约最小的字号大小为20px,14px。

聊聊UI设计中的文字 飞特网 设计理论

字体大小及公式示意图

所以在设计稿中手机端文字不要低于20px,电脑端文字不要低于14px 

字号的设定

在设计时一般还会有很多不同大小的字号,通常会以2的倍数为增量单位4及以上为单位的倍增可以在视觉上明显的感受到文字的变化,偶数倍的变化也方便开发在以1倍图和3倍图适配时不会出现半像素的情况。在设计字号时,选择尽量控制在 3-5 种之间,保持克制的原则,避免字号过多产生杂乱。

例如Ant Design设计规范中, 以5 音阶和自然律为启发定义了 10 个不同尺寸的字体,其字体大小增量选择了2,4,6,8,10,12,文字尺寸越大,增量越大。 

聊聊UI设计中的文字 飞特网 设计理论

Ant Design字体规范

聊聊UI设计中的文字 飞特网 设计理论

Material Design字体规范

字体行高

什么是行高

我们可以把文字看成放在一个盒子里面的元素,文字距离盒子的上下各有一定的距离,外面盒子的高度就是行高。因此在标注文字时,应把行高一同算入文字元素。

聊聊UI设计中的文字 飞特网 设计理论

如何选择行高 

Material Design中文字采用4dp的网格,每行文字之间的间距为4dp的倍数,因此文字的行高为:文字的大小+4dp的倍数。

聊聊UI设计中的文字 飞特网 设计理论

Material Design字体行高示意

字体颜色

在说字体颜色之前,我们需要了解一个概念WCAG 的标准。WCAG是指内容无障碍指南,指南的目的是为了web内容让广大残障人士所接受,遵循这些原则也可让普通用户更容易访问我们的网站。

在WCAG标准中,基于亮度和发光强度,将主体颜色和背景颜色的对比度分为1-21,用对比度来表示两个颜色之间的差异。

A级别 31对比度,对于普通人的最小可接受对比度

AA级别 4.51 对比度,对于老年人最小可接受对比度

AAA级别 71对比度,对于低视力的人群最小可接受对比度

颜色对比值越大,内容越容易识别。同样这一原则也可以应用在信息展示上,对于比较重要需要强调的信息可以使对比值较大的颜色,对于仅仅做展示,不需要用户过于关心的信息则使用对比值较小的颜色做弱化处理。文字有深有浅,使得信息层级更为清晰,界面更加有节奏感。

聊聊UI设计中的文字 飞特网 设计理论

(计算对比度的工具:https://juicystudio.com/services/luminositycontrastratio.php#specify

关于文本的长度

文本的长度建议控制在45-72个字符之间最佳。文本太短,用户的视线会频繁的在首尾来回移动,影响阅读效率;文本太长,用户则会很难专注于文本本身的意思,增加理解成本。

一点建议

在设计前先建立一个大致规范,在具体的场景中再进行实际的调整,这样有助于实现设计的统一性。如果想要使得信息层级更加分明,不妨加大它们之间的差异性;例如,将标题变得更粗、更大,文字颜色区别更加分明, 尝试让文字更加具有细节和韵律。

丰富的细节虽然可以让界面更好看,但也应避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。

(参考引用:Ant Design、Material Design)

欢迎关注公众号:七七的设计手札

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

2

好评

差评

刚表态过的朋友 (2 人)

frce
吉林省 长春市 平面设计师
+ 关注 私信
  • 聊聊UI设计中的文字
  • UI设计中的那些圆角
  • 交互设计的七大定律

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 手机版| 飞特网