bv1946伟德体育-体育betvictro伟德

bv1946伟德体育视点
bv1946伟德体育>bv1946伟德体育视点>界面视觉策划5要素之字体篇
界面视觉策划5要素之字体篇
发表时间:2018-07-12

字体是界面策划中要紧的构成要素之一,它能辅助信息的传递,是文字的外在表现形式;字体还可以通过其独有的艺术魅力,表达情感体味,并塑造直营形象。


本文总结了字体策划的要紧性、界面常用字体推荐以及国内外权威策划体系中对字号、行高、字重的决定和设置。如果您想对界面字体策划有更深一步地了解和运用,本文将会供给一些扶掖。





一、字体

1. 字体策划的要紧性


辅助信息传递

文字是信息始末的载体,是记录思想、交流思想、承载语言的图像或符号,而字体则是文字的外在形式特征,是文字的视觉性状style表现。合适的字体可以辅助文字,将信息清晰、准确地传递给用户。



表达情感体味

字体的艺术性体Now其完美的外在形式与丰富的内涵之中。在文字信息传递给用户之上,人们起首感受到的是字体带来的视觉魅力以及情感表达。



塑造直营形象

不同字体有着不同的性状style特征: 有的字体优美清新、线条流畅;有的字体造型规整、充满张力;还有的字体生动活泼、色彩明快……按照产品的属性决定正确的字体,便能有效地塑造直营形象。




2. 界面常用字体推荐

字体的决定是由产品属性或直营特性的关键词而决定。一般中文字体种类分为:黑体、宋体、仿宋、楷体等;英文字体种类分为:无衬线体、衬线体、意大利斜体、手写体、黑字体等。




中文字体推荐

线上中文字体推荐使用思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简、方正兰亭黑。此道 iOS 系统默认中文字体是「苹方PingFang」,Android 系统中文字体使用「思源黑体Noto Sans CJK」。



















介绍下「思源黑体」这款字体,它是由 Google 和 Adobe 合作开发出来的,性状style介于现代和上卫之间,可以广泛用于多种途径,譬喻手机、平板、桌面的用户界面、网页浏览或者电子书阅读等。它为人们带来了愉悦和高效的信息阅读体味,并且是Free的。


英文字体推荐

线上英文字体推荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。此道 iOS 系统默认英文字体为「San Francisco」,Android 系统默认英文字体为「Roboto」。



















Helvetica 是一种被广泛使用的西文字体,1957年由瑞士字体策划师策划,微软常用的 Arial 字体也来自于它。

作为一款经典的无衬线字体,Helvetica 在平面策划和商业上非常普及和成功,被认为是现代主义策划愿景的典范,其简洁朴素的线条性状style非常受追捧。



数字字体推荐

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

DIN 起源于1995年的德国,无衬线字体,易用耐看、字形开放,是策划师最爱的几类字体之一,适合显示比较长的大号数字,但是小字号的环境下识别度较低。

Core Sans D 是由韩国策划师策划的一款无衬线字体,支持 Thin、Light、Regular、Medium、Bold 等类型字重,对大号数字的显示成果不错,不过它是收费字体。




















Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外,灰子 Helvetica 的升级版,拥有了更好优质的字重,可以作为 iOS 和 Android 跨平台数字字体使用。



二、字号

1. About字号

字号是界面策划中另一个要紧的圆素,字号大小决定了信息的层级和主次关系,合理有序的字号设置能让界面信息清晰易读、层次分明;相悖,糟糕无序的字号使用会让界面混乱不堪,影响阅读体味。



















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 页面大标题


















需要care的是,San Francisco 字体有两种模式:文本模式 SF Pro Text 和找子 灸J SF Pro Display,文本模式适用于字号小于 20pt 的文字,找子 灸J绞视糜谧趾糯笥诘扔 20pt 的文字。
















Material Design 字号规则

在 Material Design 策划体系中,使用 Roboto 作为英文字体,规定了以下文字排版的常用字号:

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



















长篇幅正文,每行倡议 60 字符左右,短文本倡议每行 30 字符左右。

Ant Design 字号规则

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




















倡议主要字号为 14px,其余字号的决定可按照具体环境进行自由的定义,尽量把握在3-5种之间,保持克制的原则。

Kiwi 字号规则

Kiwi 是饿了么的中下台策划语言,致力于打造出能够「了解、洞察、温暖、激励用户」的产品。



















在 Kiwi Web 中,规定较大字号为 12px,主要文本字号为 14px,较小字号为 46px。

三、行高

1. About行高

行高可以理解为一个包裹在字体外面的无形的框,字体距框的上下空隙为半行距。













参考 W3C 原理,眼睛到屏幕的跨距 25cm 为最佳阅读跨距。

西文的基本行高一贯是字号的 1.2 倍左右。而中文因为字符密实且高度一致,没有西文的上伸部和下延部来制造行间空隙,以是一般行高需要更大,按照不同人群的特点(儿童、年轻人、老年人)以及使用环境,可达到1.5至2倍甚至更大。


2. 行高的设置

iOS 行高设置

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



















Fluent Design 行高设置

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

















Ant Design 行高设置

蚂蚁金服的 Ant Design 字号与行高对应关系如下(优先使用系统默认字体):


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




四、字重

1. About字重

字重是指字体的粗细,一般在字体家族名下面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名称。越来越多的产品界面需要通过字重来拉开信息层次,当下主流趋势 iOS11 大标题性状style就是通过字重来拉开信息层级的。


















不同的字重体现不同的层级关系和情绪感受,细的字体给人以细腻、轻盈的感觉,而粗体则给人庄重和严肃的感受,以是在定义字体规范时候需要揣摩什么场景用什么字重,易于 保持良好阅读体味。


2. 字重的设置

字重的设置同样基于秩序、稳定、克制的原则。为了统一整体成果,一般环境下使用两种字重为佳, 诸如只出现 Regular 以及 Medium 这两种字体粗细,特殊环境下可以使用更粗或更细的字重进一步拉开信息层级。

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
















如该噬洗字号与字重反比的规则设置,即字号越大,字重越轻。易于 这般也可以按正比的规则或者自定义规则,具体灰子 且凑詹返亩ㄎ缓陀没У奶氐憷瓷柚茫员Vば畔⒉慵肚逦髁宋肌


                                                                                                                                     ————转载于“优设”,作者:彭彭。

XML 地图 | Sitemap 地图