主要看气质:移动界面字体二三事

界面中的小确幸

优秀的产品通常在满足功能需求之外,能给用户带来额外惊喜,比如品牌价值、产品气质甚至唤起情感上的共鸣。纵览各大APP界面,无论是社交工具、游戏、报刊杂志、摄影、音乐、健康...文字都是其界面必不可少的组成元素。视觉修养从文字开始,美好的字体也会成为产品使用中可以感受到的微小确切的幸福。

大才子苏轼云:“腹有诗书气自华。” 而恰到好处的字体也能有效提升产品气质。因为文字在不同的场景下担任着不同的角色,是否重在功能抑或彰显个性,这就需要选择不同的字体配合产品带来不同维度的视觉表现。我们无法绝对地去评价一款字体的好坏与否,因为只有选对字体,才能合理有效地发挥其最大价值,从而准确地传达产品的气质。面对技术的发展和设计潮流的演变,界面字体的使用趋势多元而又多变,有些时尚简约富有现代特色,有些则从传统中寻找养分,抒发情怀。

中文

文化艺术

界面离不开文字,为了使界面好看,抛弃系统默认字体,选择更有美感和风格的字体是一次美丽的设计探险。

词Ci

「词Ci」是一款能够自动检查平仄、辅助填词的App,词牌名选择了方正清刻本悦宋(英文字体是Hoefler Text),堪称宋词与宋体的巧妙结合,营造出独特的意境和古典美。虽然是很早之前的一个应用,但在当时是非常大胆的案例,为后面文化艺术类APP的中文字体选择提供了更多可能性的遐想。

产品引导页

引导页因为可以生成图片而限制较少,设计风格众多,字体当然可以大胆地尝试。不乏有太过无聊而被用户完全无视迅速滑掉的引导页,因此选择符合主题的字体,让引导页印象更深刻,提升存在感。

QQ音乐

「QQ音乐」这套宣传歌词海报功能的引导页在三段爱情旅程的标题上同样使用了方正清刻本悦宋,与「词Ci」的古色古香不同的是,此处却为界面多添了一份细腻与怀旧,颇有学生时代情书的味道。

片刻

「片刻」的引导页选择了康熙字典体,由字体设计师厉向晨基于道光七年奉旨重刊版《康熙字典》制作,富有古旧气息,由于源自古籍复刻,因此笔画略微破损,反而也会有手工制品的味道和时光流逝之感。这款字体搭配灰白色物品成功提升引导页的质感,带来温暖、纯粹的幸福感。采用衬线型中文字体配合单个物品的情怀路线(不知道算是MUJI风还是性冷淡)的引导页有占领了一定的比例,招商银行也出过一套类似的引导页,不过在文字的排列和字体的选择上略显粗暴。

天气

My Weather

四叶出品,必属精品,天气APP那么多,这款天气作品绝对做到了过目不忘。图中是「我的天气」主打的一款主题《唐风》,纸原色的背景加上简约复古的插画,而最引入注目是风格强劲的中文字体:蒙纳秀明体,作为一款衬线字体,细节却被尽可能地删减显得棱角分明,横细竖粗有刀刻之感,非常大气利落,与简约的天气动效也十分契合。除此之外还有几款主题供个性化选择,比如像素风的《位元》主题,从中文到温度数字都搭配了像素风格的字体来显示,非常精致用心,堪称年度最佳天气产品。

摄影

当一张毫无装饰的图片无法表达我们内心翻滚的情感时,会想用摄影软件提供的文字贴纸或拼图功能。比如「黄油相机」,就是一款专门为中文字体量身定制的图文结合摄影软件,还有「天天P图」的拼图模版:

天天P图

年末主题选择了一款日本字体,完全日本影视片头的即视感,传递出2015年的时光就像一场电影即将落幕之意;二十四节气拼图模版则选择了造字工房刻宋,继承了宋体的手刻风格而又不失现代感,帮助节气文字的传统情怀与现代摄影无缝结合。不同的字体代表了不同的心情,不管是日系还是文艺小清新,选对了字体,图文就能融为一体,将丰富的情感传达出来。

歌词海报

QQ音乐歌词海报

同样的原理从摄影软件的文字贴纸延伸到了音乐产品的歌词海报分享。「QQ音乐」的2015力作之一:歌词海报,长按歌词选择想要分享的歌词,搭配精美的图片,提供多种字体、排版、字号及投影等自定义样式,成功感动了一大波音乐爱好者和歌词控们。经过精心挑选的字体与排版,让歌词更有诗意,触动人心,瞬间秒杀了竞品的歌词分享设计。嗯,原来分享歌词可以这么高逼格。

阅读

阅读软件的文字很重要,由于阅读是一个沉浸式的长时间的体验过程,因此字体一般不会太过花哨。即使是电子书软件(微信阅读、QQ阅读、多看等)一般也只提供几种可读性较高的宋体和黑体供个性化的体验,现在普遍认可黑体是比较适合电子显示屏长期阅读的字体。但随着技术的不断提升,屏幕显示能力更强,有超越印刷品的趋势,在高清环境下,即使是细节颇多的宋体字型未来可能也能达到理想的显示效果。

澎湃新闻

新闻资讯软件「澎湃新闻」成功利用了字体的选择在知乎上引起了大量tao争lun议,大胆地在界面全部使用了方正准雅宋,凸显独特辨识度的同时,更多地可能是想展现作为新闻平台背后严肃真实的新闻态度与情怀吧。由此可见用户对产品的理解和气质的感知,字体真是功不可没。

西文数字

不同类型的产品,或是一个APP的不同界面,文字的重心可能并不相同。比如在记账、天气、运动健康等功能的界面,我们的设计重心会更偏向数字,在中文内容为主的界面则更关注汉字的部分,本文也分别从中文和数字去阐述。而中英文字体通常也是分开使用的,比如iOS9的苹方和San Francisco,可能因为中文字体的设计师通常是中国人,对字体的理解和设计重心都在汉字部分,英文及数字的设计容易被忽视,反之亦然,因此很难诞生两者兼顾的字体。

运动健康

walkup & 手机QQ

创意记步应用「WalkUp」将运动这件小事变得更具故事性和娱乐性,除了概念特别,界面设计也选择了特殊字体去呈现步数。同样对这块进行优化的还有「手机QQ」中的QQ健康助手,在每日推送的消息中大胆使用了特殊字体去呈现,与QQ时尚年轻的定位十分契合。

天气

各种天气界面

除了汉字,可以发现天气软件中温度所使用的不同字体也是拉开产品气质差别的关键。纤细的数字搭配舒服的纯色会给界面带来简洁干净的感觉;而搭配城市摄影等位图则更沉浸和优雅。设计精美的天气界面对每天查看天气的用户来说也是一种享受。

其他

拟物&垂直行业

在一些拟物设计和具有明显行业特征(票券、卡片等)界面设计中也能发现美好的字体,它们帮助提升票券的精致度和时尚感,有跳出电子荧幕之感,也更能满足不同行业的一些个性化展示。

实例对比

字体之于产品界面的气质是否真的如此重要呢?让我们用简单的实例感受下。

机票卡片对比

这是一个航班出行的状态提醒,以卡片的形式呈现并结合实体机票的概念进行设计。界面中数据信息占了很大比例,若仍然使用原生字体会略显粗暴,机票的质感只依靠排版也无法完全体现。换了一种精心挑选的字体后不论是卡片的气质还是界面的精致度都得到了显著提升,同时让行业特征得以凸显,也更符合用户对机票信息的心理预期。

Tips

虽然字体可以让界面更完美,但显然不是任意搭配随便使用的。在实际的设计过程中,选择一款字体还需耐心斟酌。

「字体设计师就像流行歌手一样,你没有办法阻止有人在浴室乱唱你的歌」——Eric Spiekermann

理解字体

字体世界眼花缭乱,当我们选择使用一款字体时,最好先了解它的诞生历史来龙去脉,帮助精准地把握它所传达的感觉,从而确定它适合使用的场景,以免误用滥用。一款字体即使再个性独特,如果与主题不符,也可能会变成界面的槽点。

保证可读性

在日常生活中,交通指示的字体如果很难快速识别可能会引发无数血案。在手机界面虽然没有那么严重,但功能性始终是文字存在的首要前提。纸张通过外界光源反射,而屏幕则是内发光显示,字体显示更纤细,因此一款在印刷品上精致无比的字体可能到了电子显示屏上就变得破碎。不过字体本质上也是一种科技产品,字体的选择也在随着科技的发展不断变化,如今屏幕精度不断提升,印刷字体在电子屏的显示差别可能会变得越来越小。另外,一款适用于标题(较大字号)的字体被用在内文阅读(较小字号)的易读性可能会变得非常糟糕。字体的选择之于界面的长远体验,可谓失之毫厘,谬以千里。

考虑成本

如果在视觉设计稿中精心挑选了字体,一定很不希望这点美好的小追求被开发和产品PK掉,同时无论如何也想要(不同终端不同版本的)所有用户都能看到设计者的良苦用心吧。如何推动字体的使用和保证字体的完美实现还需和开发及产品共同权衡利弊。文字显示的背后是像素点,像素点的背后则是编码,一套字体给APP带来的压力不可忽视,如果是中文字体所带来的增量更是明显增加产品的内存(如果只是英文数字则相对要小得多)。面对内存、性能或版本等问题的硬伤,能否找到巧妙地解决方法,是将字体存储在云端、转成图片还是使用SVG...实际落地中还需要多方面考量,兼顾界面美感与实现成本。

以上

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容