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

http://www.chinaz.com/design/2015/1027/462541.shtml|25学堂 2016-12-05 09:01:37

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


1.jpg


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


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


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


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


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


英文字体:Roboto


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


2.png


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


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


3.jpg


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


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


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


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


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


案例1  战争气质


4.jpg

(原型/圆体、哥特体)


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


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


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


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


案例2  文艺气质


5.jpg

(原型/宋体)


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


案例3  女性气质


6.jpg

(原型/细线体、衬线体)


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


案例4  男性气质


7.jpg

(原型/黑体)


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


案例5  历史文化气质


8.jpg

(原型/书法字体)


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


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


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


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


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


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


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


9.png


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


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


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


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


SinoType

SinoType

Tianshi

Tianshi

Yahoo

Yahoo