相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

界面设计中的字体元素

刺客发布于:2018-7-11 14:57 |原作者: Neil彭彭|
刺客
河北省 衡水市 网页设计师
发私信 + 关注
简介: 字体是界面重要的构成要素,能辅助信息传递,是文字外在表现形式;字体可以通过其独有的艺术魅力,表达情感体验,塑造品牌形象。字体是界面设计中重要的构成要素之一,它能辅助信息的传递,是文字的外在表现形式;字体还可以通过其独有的艺术魅力,表达情感体验,并塑造品牌形象 ...

版权申明:本文原创作者“Neil彭彭”。感谢“Neil彭彭”的原创文章分享!

字体是界面重要的构成要素,能辅助信息传递,是文字外在表现形式;字体可以通过其独有的艺术魅力,表达情感体验,塑造品牌形象。

界面设计中的字体元素 飞特网 设计理论

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

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

本文总结了字体设计的重要性、界面常用字体推荐以及国内外权威设计体系中对字号、行高、字重的选择和设置。如果你想对界面字体设计有更深一步地了解和运用,本文将会提供一些思路。

-

一、字体

1. 字体设计的重要性

辅助信息传递

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

表达情感体验

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

塑造品牌形象

不同字体有着不同的风格特征: 有的字体优美清新、线条流畅;有的字体造型规整、充满张力;还有的字体生动活泼、色彩明快... 根据产品的属性选择正确的字体,便能有效地塑造品牌形象。

2. 界面常用字体推荐

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

中文字体推荐

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

界面设计中的字体元素 飞特网 设计理论

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

英文字体推荐

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

界面设计中的字体元素 飞特网 设计理论

Helvetica 是一种被广泛使用的西文字体,1957 年由瑞士字体设计师设计,微软常用的 Arial 字体也来自于它。作为一款经典的无衬线字体,Helvetica 在平面设计和商业上非常普及和成功,被认为是现代主义设计理念的典范,其简洁朴素的线条风格非常受追捧。

数字字体推荐

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

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

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

界面设计中的字体元素 飞特网 设计理论

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

二、字号

1. 关于字号

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

界面设计中的字体元素 飞特网 设计理论

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

界面设计中的字体元素 飞特网 设计理论


需要注意的是,San Francisco 字体有两种模式:  文本模式 SF Pro Text 和展示模式 SF Pro Display,文本模式适用于字号小于 20pt 的文字,展示模式适用于字号大于等于 20pt 的文字。

界面设计中的字体元素 飞特网 设计理论

Material Design 字号规则

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

  • 12sp 小字提示

  • 14sp (桌面端 13sp) 正文 / 按钮文字

  • 16sp (桌面端 15sp) 小标题

  • 20sp Appbar 文字

  • 24sp 大标题

  • 34sp / 45sp / 56sp / 112sp 超大号文字

界面设计中的字体元素 飞特网 设计理论

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

12下一页
21

好评
14

差评

刚表态过的朋友 (35 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

刺客
河北省 衡水市 网页设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计