UI设计中字体的应用

作者&投稿:承姬 (若有异议请与网页底部的电邮联系)

我们在一直赶路,有时候要停下来,好好想想,沿途的风景我们好好欣赏过了吗?我们的基础知识牢固吗?我们有总结沉淀吗?

你说你是不是外貌协会的,反正我是的。想啥呢,我是说设计。在设计中,我们大多数人也都是不知不觉的加入到外貌协会中了。工作中你是不是经常遇到产品经理在你后面指点江山,让你出几个稿子对比。其实很多情况下你自己早就做了很多设计方案了,现在已经是你这些设计方案中暂时最优的方式了。但是,你还是要做出几种样式来给他们看。你讲的再多都没有直接展示来的更直接。你去买菜,买衣服的时候,也会拿几种来做对比,所以嘛,设计多种方案那也是家常便饭了(即使你给的是最优方案,那你也可以给出几种其他方案,以便于他们做决策)。

设计发展太快,我们过多的去追逐炫酷特效UI设计时,还是不要忘记设计的基础知识。Behance,Dribbble上的设计你是不是经常被他们给迷住。很多界面设计看着很简洁,很舒服。他们在处理文字、颜色、配图上都下了很大功夫。你也知道,能在dribbble上传作品的人视觉设计能力都不差的。那今天就从基础的文字入手,看看文字在UI设计中的规范和应用。

一、两种设备中的字体

很多朋友在进入UI行业的时候,总是在纠结我要用什么字体呀、设计稿的尺寸该设计多大呀、图标该多大呀……这些东西,对于刚入行的朋友来说却实是一脸懵逼。但这些都是很容易找到的,只要你不是伸手族。

Android

在Android中,英文字体使用Roboto,中文字体使用Noto(思源黑体)。以前的设计中,中文字体主要是使用微软雅黑,但微软雅黑在界面中就显得有点厚重、臃肿。Google联合Adobe发布了「思源黑体」作为Android的默认中文字体,新的「思源黑体」不仅仅在字形上更易于在屏幕的阅读,并且拥有7个字重,充分满足了设计的需求。

Roboto有6种字重:Thin、Light、Regular、Medium、Bold 和 Black(图片来谷歌官网)

Noto有7种字重:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black(图片来源于谷歌官网)

iOS

在英文方面,苹果加入了新的字体San Francisco,该字族包含了有两个字体:为 iOS 和 OS X 设计的 SF,以及为 Watch OS 设计的 SF Compact ,而各自分为各自分为Text 和 Display,前者 6 个字重,后者 9 个(多了三个斜体)。

在中文方面,终于,iOS带来了全新的「苹方」,字形更加优美,且在屏幕的显示也更加清晰易读,拥有6个字重,满足了日常的设计和阅读需求。

所以,在设计稿中,你用平方就好了。

iOS英文字体”San Francisco“展示(图片来源于网络)

iOS中文字体“平方”展示(图片来源于网络)

很多公司都是两个客户端同时进行,而设计资源并不是很充足,只有一人设计的小公司比比皆是。所以你在设计app的时候,既要设计iOS端,也要设计安卓端,那你是不是要崩溃掉。而且两个端的界面基本一样的,所以就没有必要设计两个了,除非你“咸”的蛋疼。现在的互联网,不仅是拼资源,也在拼速度,快速迭代产品是现在互联网的一大特点。所以,设计的快速迭代也必须紧跟产品步伐。那怎么解决呢,通常只出iOS版就好了,其他的微调就行,开发会给你搞定的。

二、文字的大小规范

文字的大小规范,关系着整个app界面的统一性、协调性。掌握好文字的大小规范,是初学者入门的必要技能。

简单说明下,在Android开发中,字体使用的单位是sp;iOS开发中,字体使用的单位是pt。(详细了解sp与pt的请查看http://www.uisdc.com/designers-guide-to-dpi)

Android

同时使用过多的字体尺寸和样式可以很轻易的毁掉布局。字体排版的缩放是包含了有限个字体尺寸的集合,并且他们能够良好的适应布局结构。最基本的样式集合就是基于 12、14、16、20 和 34 号的字体排版缩放。

这些尺寸和样式在经典应用场合中让内容密度和阅读舒适度取得平衡。字体尺寸是通过 SP(可缩放像素数,scaleable pixels)指定的,让大尺寸字体获得更好接受度。

一款app中,你想要整体界面统一,就必须统一字体,设定字体使用规范(如图所示)

你在规范字体的时候可以参照这种样式来规范自己的设计

iOS

iOS的系统字体是San Francisco。该字体有两个变种:SF UI Text (用于19pt及以下大小的文本)和SF UI Display(用于20pt及以上大小的文本)。当你在标签和其它界面元素应用了系统字体时,iOS系统会根据字号自动选择最合适的字体样式。它还会根据需要自动改变字体,以满足辅助性功能的设置。(动态规范字体请去官网查看)

是不是有点懵,其实我们简单点来看,在iOS中,通常使用的字体大小就这么几个:11pt、13pt、15pt、17pt、20pt。具体怎么使用并没有限定死,但是最小的字不要小于11pt。现在的app文字都趋向于大字体,用户的时间是越来越难获取,怎样在有效的时间内博得用户眼球,大文字标题也逐渐使用在app中了。

三、文字的颜色规范

最基本的常识是,相同颜色的背景和文字是很难阅读的。但有些人不知道的是,带有过强对比度的文本会有些炫目,同样难以阅读。这一点在深色背景下尤其明显。要获得良好的辨识度,文本应当满足一个最低的对比度,也就是 4.5:1(依据明度计算)。7:1 的对比度是最适合阅读的。这些色彩的组合同样要考虑到某些非典型用户对于对比度的不同反应。

下图是安卓系统中文字常用的色彩划分。以纯黑为基础,根据透明度来区分文字的色彩层级。最深的颜色为Black 87%,

切记不要使用纯黑色,纯黑在设计中用的非常少。

用透明度来区分文字的层级,如果你闲麻烦,你完全可以用另一种方式来设计文字。iOS中,主要文字颜色为#333333,次要文字颜色为#666666,辅助文字颜色为#999999,提示性文字或不可用文字颜色为#CCCCCC。所以说,两种方法你都可以采用。主要是要让你的文字有层级,易读。当然,最好不要用彩色系文字,即使你要用,那也最好是稍微带点有彩色的深色文字(比如黑色中带一点点蓝紫色),根据自己的需要来制定文字的层级。展示文字还是以无彩色系(黑、白、灰)展示为主。

四、如何让你的app中的文字更有层级

一款app,文字层级展示是非常重要的。那么如何让你的app文字更有层次感呢。主流的层级方式我总结如下:大小、色彩、加粗。当然你也许会说,那还有不同字体、艺术文字、斜体呢。不过,这种使用方式一般在app中较少,很多时候艺术文字我们把它当成一种图片。在游戏app中,会经常食用其他字体,即使是其他字体,那也需要有层级。

大小

前面也说过,app中通常使用的文字根据不同的作用,它的大小是不一样的,比如Android中,通常使用的文字大小为12sp(多用于提示,或者较弱的层级展示)、14sp(用于展示型文字,或者辅助型文字)、16sp(用于展示型文字,或者小标题)、18sp(多用于导航文字或者标题)

颜色

颜色区分app文字层级是最常用的一种方式,它不仅能体现主次,还能代表点击功能。如下图iOS-设置,左边是有颜色区分的,右边的颜色是相同的。当左右颜色相同的时候,用户就很难一眼看出重点,不知道界面想表达什么。而右边本来就是的提示性说明文字,就需要弱化。

在一款app中,可点击的文字需要和普通展示文字区分开。那么通常的方式就是采用不同的颜色来区分。通常你会在朋友圈或者QQ空间看到,能点击的文字都是采用蓝色。当然,并不是说点击的颜色就一定要用蓝色,你也可以用其他颜色,但是一定要统一。不过Android和iOS系统,基本都是用蓝色来代表可点击的。所以蓝色是一个很好的选择。

加粗

文字加粗是区分层级的另外一种方式,这种常用于标题,不仅能区分上下文层级,还能分区块,能让用户快速定位到自己需要的频道。

       站酷            作者:Luyeelin    

~

vivo手机的字体设置在哪里
答:2、Funtouch OS 4.0系统之前:设置--壁纸与字体--我的--字体/本地字体--右上角“字体大小/A”。部分软件如:微信、浏览器等,软件内设置中可独立调节字体大小,若i主题中调节无效,可进入应用设置中操作。更多使用疑惑可进入vivo官网--我的--在线客服--输入人工,咨询在线客服反馈。

书法在设计中的应用的奥秘有那些?
答:日本设计师普遍采用书法字体停止创意设计,水墨文化在商品包装上得到很好表现。书法字体因其产生的年代不同作风各异,将其应用在装潢设计上效果共同。具有丰厚的表现力和艺术感染力,可以充沛表现商品的地域文化特征。在发明过程中,设计师充沛思索商品自身的特征,并留意与其它设计要素之间的谐和关系。字体设计或潇洒流利、...

汉字海报怎么做?巧用字体做海报之——字图穿插(设计新方法)
答:好了,这篇关于巧用字图穿插手法设计海报的教程就写到这里,希望你能从中获得灵感和学到知识,并能够在实际工作中应用它。如何制作海报想学简单的PS 用PS制作简单的彩色文字人像海报,具体步骤如下: 1、首先打开Photoshop,将人物肖像图导入。一般情况下,会对导入的图像进行润饰,令图像的光暗和色彩效果更加鲜艳。这里,...

书法元素在平面设计中的运用
答:3.3了解书法技法,实施选择设计 为了满足平面设计中不同的艺术特色和设计需求,设计师需要针对不同的书法元素进行创新,有选择地将字体、文字、版面结合在一起,使平面设计效果更加出乎预料,吸引大众的眼球。例如,在书法字体的应用上,最为常见的是隶书、篆书、楷书、行书等几种书写形式。在平面设计中,...

ps海报字体设计特效字体-ps怎样给海报设计艺术文字
答:ps怎么做海报漂亮字体 具体步骤:1、首先新建一个1000X1000像素的文档。2、填充背景颜色为(#141414),输入你想要的文字,什么样的字体不用纠结,自己选一个就好,调整一下字母之间的间距。3、将文字图层转换为“智能对象”,快捷键ctrl+i反相,如果不反相的话在液化滤镜中的颜色就是白色,不容易辨认出效果。4...

手机改变字体在哪里设置
答:若使用vivo手机需更改系统字体:可进入i主题--我的--字体--选择字体--立即应用,另外可点击“下载更多”,下载喜欢的字体进行应用。目前仅支持“i主题”内的字体资源,部分字体需要付费。

在设计过程中设计师能使用系统自带的哪种字体?
答:虽然,在平面设计中,设计师对于字体的选择,有一定的个人情感因素,每个设计师都会有几种自己特别爱用的字体。但对于资深的设计师而言,他们懂得如何理性地对待字体的应用,总是根据设计项目的使用功能,目标受众群体的审美风格倾向,来选择与设计品整体风格相统一的字形字体。字体在平面设计中拥有两方面的...

平面广告设计中的文字视觉表现
答:三、平面广告设计中特殊效果字体应用中注意的问题 平面广告设计中经常会运用到字体的特殊效果,而特殊效果的运用一定要十分地谨慎,往往广告设计者因过于注重设计的技法,而忽略了广告传播的效果。例如如果广告采用白底黄字、黑底深灰字,会影响到广告设计内容的可视性。为避免降低可视性,除非对印刷效果有...

设计中常用字体有哪些?
答:书法体的使用书法体其实是非常有特色的,它往往代表了艺术感,中国风,大家便可以在一些传统的中国风的设计中来使用书法体,以标题设计为主。艺术字体的使用艺术风格的字体,也有着自身的美感,相信大家在设计中也会经常选择艺术字体。因为艺术字体是由大家创造的,具有灵活性,大家可以根据主题的需求来设计...

变换你的电脑字体,让文字更添魅力!
答:在字体设置界面中,你会看到所有已安装的字体。选择新字体时,需要考虑风格、大小和颜色等因素,以选择适合你的字体。应用新字体应用新字体的方法很简单:①选中需要改变的文本;②右键单击选中的文本,选择“字体”选项;③从已安装的字体中选择新的字体;④点击“确定”按钮,新字体即刻应用到选中的文本中!设为...