新手福利!UI设计中的字体选择指南

作者:像素范儿像素范儿发布时间:2017-12-04

UI设计作为一种视觉设计,除了在视觉上给人一种美的享受外,更重要的是向广大用户传达一种信息、一种理念。

APP里面文字、图形、色彩是信息传达的三要素,字体则是这三要素中的重要因素之一。

在用户界面中,每一个单词和字母都至关重要。好的字体等于好的设计。字体成了界面设计的基石,而我们设计师,则是这些这类「信息基石」的修造者。

字体即界面,王宇老师以拉丁罗马为主的西文字体,东亚汉字体系为主的中文字体,这两个人类使用最广泛的字体入手,分别说下在APP界面设计里面该如何使用。

西文字体 - 衬线体(serif)

如上图所示,字形笔画末端有结构装饰细节的文字,称之为衬线体。有衬线字体是用于印刷的第一代手工业进化而至工业时代的主流文字家族。

衬线体起源于古罗马的石刻。古罗马的匠人在雕刻文字的时候,要先用方头笔刷写好样子,之后照着写好的样子进行雕凿。由于直接用方头笔刷书写会导致笔画的起始和结尾出现毛糙,所以在笔画开始、结束和转角的时候增加了收尾的笔画,也就自然形成了衬线。雕刻匠人照写好的字雕刻,就形成了所谓的「serif」 。

使用衬线体的APP

Medium,最棒的个人博客写作社区,使用的就是衬线体 FF Tisa Pro

Polyvore 国外一款关于时尚服饰导购的APP

大名鼎鼎的quora,国外最大的问题回答网站。他是知乎的  emmmm…     他所用的字体也是衬线体

西文衬线体强调了字母笔画的开始及结束,并且棱角分明,边角易于辨别每个字母,读者在阅读较多的段落时会变得轻松。

推荐几款使用最多的英文衬线体

1. Centaur

史诗风格的字体,适合代表年代悠久的感觉,以及烘托诗史氛围。威尼斯的圣马可大教堂指示牌就是用这款字体。指环王的海报也用了这款字体。

2. Garamond

加拉蒙是一种具有诗歌般传统、柔软、纤细的字体,老式罗马字的代表性字体。没有强烈个性,十分易于阅读,是其流行的原因,常被大公司复刻使用。

3. Caslon

戏剧家萧伯纳曾经说过:"I’ll stick with Caslon until I will die”   翻译过来就是:直到我死我也要用Caslon。

卡斯隆是美国独立宣言用字,想一下这个字体的分量。

它是英国历史上第一款原创设计的字样。印刷厂发现Caslon字样的优雅,清晰,适于阅读,故其在印刷时期广为流行。还有一句类似的有趣的话是“犹豫不决时就用卡斯隆”。

4. Times

可能是最常见且广为人知的衬线字体之一,英国的《泰晤士报》首次采用。在字体设计上属于过渡型衬线体,对后来的字型产生了很深远的影响。另外由于其中规中矩、四平八稳的经典外观,所以经常被选择为标准字体之一。

西文字体 - 无衬线体(Sans-serif)

无衬线体(Sans-serif)专指西文中没有衬线的字体,与汉字字体中的黑体相对应。

相比严肃正经的衬线体,无衬线体给人一种休闲轻松的感觉。随着现代生活和流行趋势的变化,如今的人们越来越喜欢用无衬线体,因为他们看上去“更干净”。

使用衬线体的APP

Twitter,twitter是一个广受欢迎的社交网络及微博客服务的应用,可耻的抄袭了我们的微博。所使用的字体就是无衬线的字体。

Instagram,Instagram(照片墙)是一款运行在移动端上的社交应用,以一种快速、美妙和有趣的方式将你随时抓拍下的图片彼此分享。同样也是无衬线字体。

Panna,一个视频美食食谱社区,国外吃货的聚集地。同样也是无衬线字体。

无衬线字体崇尚绝对的理性、客观、系统化。字体比较简洁美观,适用于短句美感提升,在追求极简风的今天,在UI设计里极其流行。

推荐几款使用最多的英文无衬线体

1. Futura

Futura是拉丁语未来的意思,现代且具有几何特征,是现在的主流大热字体。

尤其是要突出时尚,设计感的时候可以使用。制作过程中受到包豪斯运动的影响。是LV、Omega的商标用字,也是现在很多杂志的首选字体。

2. Optima

具有古典气息,笔画两端比较粗,中间比较细,气质优雅。

时代周刊的字体更换,雅虎2013年作为全新标识的设计基准,都证明了这款字体的热度。

3. neo sans

塞巴斯蒂安·莱斯特(Sebastian Lester)的设计师塞斯巴斯蒂安·莱斯特(Sebastian Lester)将他的“新西斯”系列作品描绘成“清晰而不中性,细致入微,不分散注意力”。

Neo Sans系列拥有圆形的无边形信件形式,有六种重量,从轻到超,配有斜体字。它的前瞻性个性使其成为品牌项目以及编辑或出版设计的绝佳选择。

4. open sans

Open Sans是由Google委托Steve Matteson设计的无衬线字体,以诚实的重要性、开放的表现形式、及一个中立但具亲和力的外观的理念设计的。

Droid Sans主要用于一些Android手机上的用户界面字体,Open Sans则是使用于部分Google的网页及其印刷和网络广告。

5. Helvetica

着重介绍一下这款字体,了解字体的同学对于这个字体一定不会陌生。

Helvetica是苹果电脑的默认字体,微软常用的Arial字体也来自于它。2007年是helvetica诞生50年,作为在平面设计和商业上非常普及和成功的一款字体,英国导演Gary Hustwit专门为她拍摄了一部纪录片《Helvetica》。

视频链接:

https://www.bilibili.com/video/av14868042/

Helvetica 被广泛的用于全世界使用拉丁字母和西里尔字母的国家。同样的风格也被移植到希腊字母、希伯来字母和汉字。

Helvetica被大量使用在标志、电视、新闻标题以及无数的商标里。 如3M、爱克发、BASF、美国航空、American Apparel、BMW、Crate & Barrel、Epson、德国汉莎航空公司、Fendi、J. C. Penney、Jeep、川崎重工业、Knoll、英特尔、无印良品、雀巢、松下、Microsoft、三菱电机、摩托罗拉、丰田、Parmalat、SAAB(Helvetica 83粗体)、三星、渣打银行、Staples、Target、Texaco等数百间主要企业的标志都是使用Helvetica字体。

也就是说,我们日常生活里面看到的最多的英文字体就是Helvetica。

Helvetica的成功,归功于与整个瑞士平面设计风格的融合。它们共同形成了一整套完整的理念:崇尚绝对的理性、客观、系统化。但这不是完美的,它也有相应的缺点。

Helvetica的设计理念是一致、去个性。字母的整体造型都偏圆,因此缺乏阅读韵律,并且没有针对小字阅读优化,在优秀字体及细分领域都丰富的今天,Helvetica的优势减弱。

中性也是一把双刃剑:冷静,客观的同时,也抹杀情感,忽略了形式可能为用户带来的愉悦。

中文字体 - 白体字(衬线体)

中国传统的印刷字体都是白字体,等同于英文里的衬线体。

在复刻印刷时代,为了刻画的方便,汉字和模板的纹理史垂直的,这样汉字的“横”刻起来比较容易;而竖划与木纹交叉,需要粗一些,防止两侧木纹断裂处磨损严重无法辨识。代表字体:宋体、仿宋、楷体。

使用白体字的APP

记录字句,发现共鸣,一言使用的就是中文衬线字体。

澎湃新闻,专注时政与思想的互联网平台,使用的也是中文衬线字体。

くらしのこよみ(时训),日本平凡社推出的一款二十四节气APP,东亚汉字体系的日本应用也使用的是中文衬线字体。

中文衬线体的字形方正,笔画横平竖直,棱角分明,结构严谨,整齐均匀,有极强的笔画规律性,从而使人在阅读时有一种舒适醒目的感觉

推荐使用的中文衬线体

1. 宋体

宋体是最常用到的字体,宋体基本笔画包括点、横、竖、撇、捺、勾、挑、折等,其结构饱满、端庄典雅、整齐美观。宋体字既适用于印刷刻版,又适合人们的基本阅读需要,因此一直沿用至今。宋体在财经类杂志的刊头字体设计中运用得最频繁,在教育类杂志的刊头字体设计中运用得最少。

2. 楷体

楷体是在楷书技术上规范出来的一种字体,与手写体相近似,流畅和谐,富有韵味。通常用于正文及说明性文字。

楷体在新闻类杂志的刊头字体设计中运用得最频繁,在娱乐、女性、情感类杂志的刊头字体设计运用得最少,几乎没有。

3. 方正清刻本悦宋

字体清秀、文雅 ,相似字体方正宋刻本秀楷简体、方正博雅宋,清刻本悦宋撇比较长,所以竖排版比较美观,根据字形选择排版。

4. 文悦古典明朝体

典雅、繁体字,中国风弄,结束笔触感强,相似字体康熙字典体,

中文字体 - 黑体字(无衬线体)

我们手机里面安装的APP使用的文字,我们每天看电脑上的网页文字,我们每天的看的广告站牌文字,我们每天接触到的所有所有的文字信息,98%都是中文无衬线字体。

无衬线字体的特点非常突出:方正、朴素、简洁、无装饰、明确、视觉相等、笔形方头方尾、黑白均匀等等一系列特点,占据了生活里的方方面面,你现在在知乎浏览的我的这篇文章就是无衬线的苹方字体。

使用无衬线的APP? 不想截图了,太多了…

推荐使用的无衬线字体

1. 苹方字体

苹果在iOS 9推出的一款中文字体,针对中文进行了深度优化,增大字间距提高可读性,同一字号、颜色下,显得更清晰。

2. 兰亭黑体

方正兰亭黑衍生于于齐立老师为微软设计的微软雅黑。微软雅黑面对的,是像素密度只有96dpi(Windows操作系统默认的缩放比例)的电子显示设备。在这种情况下,使用大字面、大中宫的设计能够尽可能多地占据像素,同时更好地安排字的间架结构。

3. 华文黑体

与华文细黑一样是Mac OS X9之前版本的操作系统中文默认字体,同时还是iOS 8之前的中文默认字体。值得一提的是,iOS 8之前的iOS Developer编程时使用的默认中文字体是华文黑体(Heiti SC),而iOS Designer 在ps设计时使用的是黑体-简或 Heiti SC,并设为细体,浑厚。

4. 思源黑体

Source Han Sans,思源黑体,是Adobe跟Google合资开发的一套集设计素质、完整字数(对国内使用环境特别重要)和泛用性于一身,是竞争力十分强的。思源黑体七个字重,基本满足了中港台多年来电子阅读、网路环境用的字体字重,最重要的是没有版权。

5. 冬青黑体

Hiragino Sans GB(ヒラギノ角ゴ 簡体中文)是大日本网屏和北京汉仪合作开发的中文简体字体,2009 年苹果公司将其加入 Mac OS X 10.6 Snow Leopard (雪豹)系统。在日本的版本上将字形严格依照中国标准 GB18030-2000 修改,它也是日本制作的第一款获得中国政府国标认证的字体。曾作为内参版本iOS和 OS X的系统字体。

6. 小米兰亭

小米公司一直在使用方正兰亭黑字体作为其MIUI系统的原生字体。为了更好的满足移动互联网的展示和阅读特性,提升用户体验,小米公司团队一起历时18个月的精心打磨,最终完成了在MIUI8系统中完美呈现的“小米兰亭”字体。

7. 微软雅黑

微软雅黑是美国微软公司委托中国北大方正电子有限公司设计的字体。这款字体是一种全新的无衬线黑体,它的字形略呈扁方而饱满,笔画简洁而舒展,易于阅读

8. 汉仪旗黑

2015 年 3 月 26 日,网易新闻客户端 iOS 版更新到 5.0,设置中增加了非华康系的字体设置,即最近推出的汉仪旗黑,且无需下载,内置于应用中。在切换到该字体后,给人的观感是清晰且圆润,与 iOS 默认中文字体形成鲜明对比。

好,先分享到这里,按照惯例,我们会有小彩蛋在最后,文章上述的所有字体,王宇老师已经精心的放到了百度网盘里,请移步下载

链接:  https://pan.baidu.com/s/1c2treik

密码:  3imw


郑重说明

文中所有的字体仅供学习参考

商用请购买相关字体版权

做字体是一件辛苦而伟大的事情

请尊重知识产权!谢谢!!!


更多精彩内容可关注公众号“石家庄像素范儿”