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

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


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

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

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

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

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

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

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

英文字体:Roboto

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

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

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

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

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

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

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

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

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

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

案例1  战争气质

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

原型/圆体、哥特体

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

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

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

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

案例2  文艺气质

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

原型/宋体

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

案例3  女性气质

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

原型/细线体、衬线体

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

案例4  男性气质

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

原型/黑体

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

案例5  历史文化气质

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

原型/书法字体

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

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

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

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

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

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

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

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

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

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

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

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

 

作者:25学堂

来源:http://www.chinaz.com/design/2015/1027/462541.shtml

本文来源于人人都是产品经理合作媒体@站长之家,作者@25学堂

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26466/

(0)
CatherineCatherine
上一篇 2017-05-14 15:54
下一篇 2017-05-14 17:50

相关推荐

  • 网站交互设计模式为什么值得读

            对于现在的web的发展来说,这本书优点旧了,里面的相关案例网站都是一些比较早的数据。但是这本书还是很值得一读。就像作者所说的,时间在流逝,模式会变化,适当改变信息密度,网站的…

    2017-08-03
  • 用好的交互设计来管理复杂-“筛选器”

    我们必须按照人们的行为方式来设计,而不是按照我们希望他们应有的行为来设计。

    2017-05-19
  • 手机系统苹果、安卓交互设计的通用原则总结!

    :请点上面免费订阅系统的设计从用户角度来说,交互设计是一种如何让产品更容易用,让用户更愉悦地使用产品。它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解用户心理和行为特点,并用通用的交互能满足用户操作的预期。下面介绍一下在交互设计中一些比较通用的设计原则,大家可以参考一下。交互1、就近原则:将同一类的功能都组织放在页面相同模块中。2、容错原则:必须允许用户有犯错的操作,给予用户后悔的操作机会。3、帮助原则:为用户提...

    2018-02-16
  • 用户体验七境界

    外观重不重要?当然重要。无论是工业产品设计还是用户界面设计,视觉表现直接传递给用户对产品的第一感受,而这种感受贯穿用户在整个产品的使用周期中,间接影响了最终的用户体验。

    2017-05-29
  • 交互设计专业排名最高的大学有哪些

    上周四,康石石在《珠宝设计专业排名最高的大学有哪些》中,为同学们于世界范围(英、比利时、美、意大利、荷兰、挪威、瑞典、德国、爱沙尼亚)内梳理了22所顶级珠宝名校,并在文末许诺阅读量达1000,即为最热情的上墙读者解答艺术留学问题。本周四,康石石兑现承诺,继续为大家推荐货真价实的全球顶级院校,供所有希望出国深造交互设计专业的同学们,提供一份足以信赖的院校清单。写在前面的话交互设计,对于90%同学而言,其实都是一个未知的概念,这直接导致了各...

    2018-02-02
  • 创新与用户体验---工业设计的双驱动力

    4月18日上午深圳融一凤巢设计发展有限公司创始人兼深圳市工业设计协会副会长仪永杰在PDC设计廊会场与到场展客商分享并探讨了现今智能硬件和消费电子类领域的设计发展趋势。仪永杰认为在消费升级的市场导向下,供方市场慢慢转化为需方市场,消费者不仅满足于产品的存在,更多的是产品在消费者内心中碰撞出情感。以小米科技为例,现今决定设计生命力延伸的是创新意识,是对工业设计创新的重视程度。从设计服务到产品化和供应链都需要整合创新满足用户对产品日益增长的功...

    2018-04-18
  • 百度金融用户体验中心负责人 曲佳:设计师求职七宗罪

    继上个周五 19:00 腾讯互娱游戏平台部设计总监陈维的第一节课《如何通关 UI 设计师的游戏副本》后,昨晚百度金融用户体验中心负责人曲佳联合团队的设计经理孔敏,给知群的用户们带来了「七大公司设计师面试官授课合集」的第二节课《设计师求职七宗罪》,在分享的最后环节,也给出了目前百度金融尚未对外大规模公开的招聘信息(最近有跳槽意向的设计师们抓紧时间上车)。曲佳:百度金融设计架构师,百度金融用户体验中心-百度 FDC ( Baidu Fina...

    2018-04-04
  • 智能场景设计:深入场景和意图的体验设计

    “hey各位!我们要开始做一件重要的事了!”陈老湿已经走到我们的工位前,兴致昂扬地说道,“竞对已经上线了类似的功能,我们得抓紧了。上海那边出了方案,看,在这里!”

    2017-05-23
  • 科幻场景中的交互设计

    那么多的电影,里面那些UI场景你留意过么?在不少涉及未来题材的电影中,许多高科技设备与人交互时候的UI界面设计也是非常值得学习的。这次小编大家搜罗了各种电影中出现的UI场景,一起来学习科幻场景中的交互设计…

    2015-01-26
  • Axure做的APP原型,在手机上怎么预览

    自学Axure,在各大网站查询,终于从小白到学会做基本的交互,再到能在APP端预览自己做好的原型。下面就说一下Axure做的APP原型,在手机上怎么预览?(以苹果手机为例)1原型制作好之后,点击发布→“预览选项”→配置→移动设备,导入做好的图标。2点击发布,“发布到AxShare”。3复制链接,将该链接发送到手机上并使用Safari打开。4粘贴并前往,将原型界面打开。5点击底部工具栏。6选择“添加到主屏幕”。7编辑名称→点击添加。8然后...

    2018-03-18