小白自学APP界面设计:如何选符合产品气质的字体

开门见山,25学堂继续跟大家讲解小白自学APP界面设计系列教程。

这节课的主题就是如何教大家挑选符合移动APP产品气质的字体。之前25学堂也跟大家分享了一篇《移动APP界面设计分享:文字阅读体验设计篇

不管是中文还是英文,文字不仅是传达信息的载体,也是设计中的重要元素,设计过程中尽量保证文字的阅读性,在严谨中寻求突破。经过艺术设计的字体,可以使信息更形象、更美感的铭记于你心中。

字体传奇

随着移动端扁平化设计推进,越来越多的设计师不满足于仅仅是色块、图标和系统字体的枯燥组合,而把更多的心思投入到精益求精的视觉设计中。

 

iOS 系统当中的APP设计字体:

常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好。

iOS7字体设计规范以及APP设计中英文字体下载

 

Android系统当中的APP界面设计字体:

英文字体:Roboto         中文字体:Noto   (Android 5.0 Lollipop 思源黑体字体)也是目前安卓系统当中使用的最新字体,之前的字体还有如下Droid字体。字体设计也比较优雅。

安卓字体Android移动APP设计字体规范详解

下面我们就来看看一些比较好的符合产品气质的字体和app。

优雅的APP案例欣赏:Yahoo 天气 – 最优雅的天气APP

优雅的app字体设计

Yahoo Weather! 不论是在布局、字体和色彩的运用上都显得精致细腻,滑动时高斯模糊的处理更是流畅平滑。值得去下载学习。

好的字体在文本的易读性上起了决定作用,却不止于此,它也传递出设计师分享的意图。它是整个用户体验的重要部分。

从另一方面讲,缺乏好的字体,是整个产品不专业的表现。文字是主要界面的基础元素。

第一部分:如何来选择更符合产品主题气氛的字体与字形:

案例1  战争气质

bd201503208

原型/圆体、哥特体

左图字体所传达的气质:趣味、活泼;

显得对这部战争类型的电影所表现的气质格格不入。

右图字体所传达的气质:哥特、凌厉;

采用了具有装饰性的衬线字体,衬线字体的特点在于线条交接处和末端具有明显的粗细变化和装饰,使字体气氛感觉犀利,加上纹理质感处理,便有了神话意境和哥特式惊悚的味道,很好的衬托出电影本身的气质。

 

案例2  文艺气质

bd201503206

原型/宋体

上面两张电影海报应用的字体都是宋体,宋体的衍生有很多,又长有扁,有胖有瘦。一般用于书籍印刷。而在电影界上这类型字体多用于文艺片,正如案例中,两部都是文艺温馨的爱情片,运用宋体进行排版处理,既显得清新又文艺。

 

案例3  女性气质

bd201503207

原型/细线体、衬线体

字如其人,女性的特点是细致优雅、苗条细长;常被用作化妆品、女性杂志、艺术等女性主题领域。

 

案例4  男性气质

bd201503204

原型/黑体

作为强现代感的无衬线字体—黑体,给人感觉粗壮紧凑,颇有力量感,可塑性很强,对比案例3的细线体,即可表现为阳刚有力的男性气质,也可以变成纤细优雅的女性气质。

 

案例5  历史文化气质

bd201503205

原型/书法字体

书法字体具有很强的设计感与艺术表现力,运用好的话往往是点睛之笔。各式各样的书法字体有着自己独特的细腻的特点,把握好这一点,既能给电影增加文化内涵,也能衬托出电影的气质。

从以上5个方面,算是给大家点睛了一下。希望大家可以自己多去观察和了解这些字体的气质。才能很好的用在我们的移动app界面上。

如今,字体是移动设计师的重要武器之一,恰当的字体运用,可以使产品的定位和内容的情感有加倍的表达。因为系统默认的字体太少或者太丑了。可以供设计师发挥的就是内嵌字体。

内嵌字体就是 设计师设计在图片上 或者是把字体当中图形化的一种使用。

所以,内嵌字体,成为了一些追求完美的App设计师的一个解决方案。

当然,有些时间设计师也要学会根据产品的气质去改变字体。重新设计下字体。

 

第二部分、APP案例详解:简书APP

简书APP

作为一个「交流故事,沟通想法」的的写作平台App,简书为了优化阅读体验,选择了思源黑体作为内嵌字体,使用户发布的不管是简体中文、繁体中文、还是日文韩文,都能有比较理想的表现。食色的产品概念是和「生活家」们一起,发现与分享城市中的美食,所以选择了细腻精致的方正兰亭纤黑作为主要的界面字体。

用户第一次使用,就能感受它与其他产品在气质上的不同。

除了内嵌简洁亲和的非衬线体之外,诸如像Lohas乐活这样小清新和强调自然生活感的产品,则会选用了田氏宋体旧字形或者方正兰亭刊宋之类的,既能体现古韵,又相当简练质感的衬线字体来表达产品定位和气质。

以上这些关于移动app字体设计知识,希望对各位有所帮助。

 

每天更新,
全站高品质素材免费下载!