赞助商
立即赞助

饿了么高级设计师:界面视觉设计 5 要素之字体篇

UI设计3年前 (2021)更新 流光
2.2K 0 0

字体界面设计中重要的构成要素之一,它辅助信息的传递,是字的外在表现形式;字体还可通过独有的艺术魅,表达情感体验,并塑牌形象。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

本总结了字体设计的重要、界面常用字推荐以及国内外权威设计系中对字号、行高、字重的选择和设置。果你想对界面字设计有更深一步地和运用,文将提供一帮助。

一、字体

1. 字体设计的重要性

辅助信息传递

文是信息内容载体,是记录思想、交流思想、承载语言图像或符号,而体则是文在形特征,是文视觉风格表现。合适体可以辅助文,将信息晰、准确地传递用户。

表情感体验

体艺术性体现在其完美在形与丰富内涵。在文信息传递用户前,们首先感受到是体带来视觉魅力以及情感表。

塑造品形象

不体有着不风格特征: 有体优美新、线条流畅;有体造型规、充满张力;有体生动活泼、色明快……根据品属性选择正确体,便能有效地塑造品形象。

2. 界面常用字体推荐

体选择是由品属性或品特性关键词而决定。般文体类分为:黑体、宋体、仿宋、楷体等;英文体类分为:衬线体、衬线体、意大利体、手写体、黑体等。

文体荐

线上文体荐使用思黑体、华文黑体、冬青黑体、微软雅黑、苹-简、黑体-简、正兰亭黑。其 iOS 系统默认文体是「苹PingFang」,Android 系统文体使用「思黑体Noto Sans CJK」。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

介绍下「思黑体」这款体,它是由 Google 和 Adobe 合作开发出来,风格介于现代和传统,可以广泛用于多途径,比如手、平板、桌用户界、网页浏览或者电子书阅读等。它为们带来了愉悦和高效信息阅读体验,并是免费。

英文体荐

线上英文体荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其 iOS 系统默认英文体为「San Francisco」,Android 系统默认英文体为「Roboto」。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

Helvetica 是被广泛使用西文体,1957年由瑞士体设计师设计,微软常用 Arial 体也来自于它。

作为一款经典的无衬线字体,Helvetica 在面计和商业上非常普及和成功,被认为是现代主义计理念的典范,其简洁朴素的线条风格非常受追捧。

数字字体推

线上数字字体推使用 DIN、Core Sans D、Helvetica Neue。

DIN 源1995年的国,无衬字,易用耐看、字形开放,是设计师最爱的几类字之一,适合显示比长的大号数字,但是小字号的情况下识别度低。

Core Sans D 是由韩国设计师设计的一款无衬线字体,支持 Thin、Light、Regular、Medium、Bold 等类字重,对大号数字的显示效果错,过它是收字体。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

Helvetica Neue 除了上介绍的简洁朴素、中性严谨、没有多余的修外,还是 Helvetica 的升级版,拥有了更多的字重,可作为 iOS 和 Android 跨平台数字字体使。

二、字号

1. 关于字号

字号是界面设计中另一个重要的元素,字号大小决定信息的级和主次关系,合理有序的字号设置能让界面信息清晰易读、次分明;相反,糟糕无序的字号使用让界面混乱不堪,影响阅读验。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

2. 字号的选择

字号的选择,可以遵循 iOS 、Material Design、Ant Design 等国内外权威计体系中的字号规则,也可以根据产品的点行定义。

iOS 字号规则

在 iOS11 系统中,使用 San Francisco 作为系统英文字体,包含了以下种字号的文本式:

  • 11pt / 12pt Caption 说明文
  • 13pt Footnote 脚注
  • 15pt Subhead 副标题
  • 16pt Callout 标注
  • 17pt Body / Headline 文 / 模块标题
  • 20pt / 22pt / 28pt Title 页标题
  • 34pt Large Title 页面大标题

饿了么高级设计师:界面视觉设计 5 要素之字体篇

需注意的,San Francisco 字体两种模式:文本模式 SF Pro Text 展示模式 SF Pro Display,文本模式用于字小于 20pt 的文字,展示模式用于字于于 20pt 的文字。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

Material Design 字号规则

在 Material Design 设计体系中,使 Roboto 作为英字体,规定了字版的字号:

  • 12sp 小字提示
  • 14sp(桌面端 13sp)正 / 按钮字
  • 16sp(桌面端 15sp)小标题
  • 20sp Appbar 文
  • 24sp 大标题
  • 34sp / 45sp / 56sp / 112sp 超大号文字

饿了么高级设计师:界面视觉设计 5 要素之字体篇

长篇幅正文,议 60 符左右,短文本议 30 符左右。

Ant Design 号规则

Ant Design 受到5音阶以及自然律启发定义了10不号,从小到大依为: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

议主要号为 14px,其余号选择可根据具体情况进自由定义,尽量控制在3-5,保持克制原则。

Kiwi 号规则

Kiwi 是饿了么后台设计语言,致力于打造出能够「了解、洞察、温暖、激励用户」品。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

在 Kiwi Web ,规定最小号为 12px,主要文本号为 14px,最大号为 46px。

三、行高

1. 关于行高

行高可以理解一包裹字体外面的无形的框,字体距框的下空隙半行距。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

参考 W3C 原理,眼睛到屏幕的距离 25cm 阅读距离。

西文基本高常是号 1.2 倍左右。而文为符密实高度致,没有西文上伸部和下延部来创造空隙,所以般高需要更大,根据不群特(儿童、年轻、年)以及使用环境,可到1.5至2倍甚至更大。

2. 行高的设置

iOS 行高设置

Apple 官方的 iOS 字与行高对应关系如下(@1x倍率):

饿了么高级设计师:界面视觉设计 5 要素之字体篇
Fluent Design 行高设置

Microsoft 官方的 Fluent Design 字与行高对应关系如下(使用字体 Segoe UI):

饿了么高级设计师:界面视觉设计 5 要素之字体篇

Ant Design 行设置

蚂蚁金的 Ant Design 字号与行对应系如(优先使系统默认字体):

饿了么高级设计师:界面视觉设计 5 要素之字体篇

行计算公式:L = F + 8。中 L 是行(Line Height),F 是字号(Font Size),F ≥ 12。

四、字重

1. 关于字重

字重是指字的粗细,一般在字家族名面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等是字重名称。越来越的产品界面需要通字重来拉开信息次,当下主流趋势 iOS11 大标题风就是通字重来拉开信息层级的。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

不同的字重体现不同的层关系和情绪受,细的字体给人以细腻、轻盈的觉,而粗体则给人庄重和严肃的受,所以在定义字体规范候需要考虑什景用什字重,从而保持良好阅读体验。

2. 字重的设置

字重的置同基于秩序、稳定、克制的则。为了统一整体效果,一情况下使用种字重为佳,例如只出现 Regular 以及 Medium 这种字体粗细,殊情况下可以使用更粗或更细的字重进一步拉开息层。

当字号大小为 12-18pt 时,使用 Regular;20-26pt 时,使用 Light;28-34pt 时,使用 Thin;当字号大小超 34pt 时,建议使用 Ultralight。

饿了么高级设计师:界面视觉设计 5 要素之字体篇

以上是按字号与字重反比的规则设置,即字号越大,字重越轻。当也以按正比的规则或者自定义规则,具还是要根据产品的定位和用户的特点来设置,以证信息级清晰明为准。

本到此就要告一落了,如果对你有一点帮助就请点个。你可注我的公众号彭彭设计笔记,我会定期更 UI/UX 设计类精章,感谢你的阅读。

欢迎关注作者的微信公众:「彭彭设笔记」

饿了么高级设计师:界面视觉设计 5 要素之字体篇

图片素作者:Prateek Vatash

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一. 智能后视镜时代背景 随着社会的发展和科技水平的提高,人们对驾驶汽车的安全性、娱乐性提出了更高的要求。汽车的中央后视...
交互设计
现代人对于健康越来越重视,而移动端APP 在这方面为用户提供了多种多样的帮助。无论是系统化的健身应用,还是卡路里计算器,...
App设计
点开这篇文章的同学不妨先来思考一个问题:你电脑里究竟有多少字体包?估计连你自己都不太清楚吧。 但在我们工作中使用率最...
字体设计
编者按:文章用诸多案例讲解关于「峰终定律」的概念、应用、改善用户体验的步骤。 一、什么是峰终定律 峰终定律是由诺贝尔奖...
入门
在上一个不同寻常的周末,复古青年写真霸屏了 QQ 空间、微信等社交平台,撩拨了每个年龄层对自己复古青年形象的想象。 活动...
实战案例
很多人在这个信息爆炸的移动时代,更想看到一些所谓的「干货」,干货到底是什么,可以直接拿来上手的是干货吗?还是需要你经...
交互模式
王M争:用户在使用产品过程中,难免会犯错。一个好的产品可以降低用户犯错的概率,并且提升错误被解决的效率。通俗点说就是帮...
容错性
对我来说,产品设计的美妙之处在于它通常不会止步于你的第一个想法。产品设计的过程乍看起来有点凌乱,但是经过多次的迭代和...
Eugen Eşanu