服务热线:
18971120504
图文展示
衍果视觉设计培训学校

【交互设计】UI设计字体排版实用技巧

做了这么久的设计师,如果有人把设计师称作“作图的”,小编一定会毫不犹豫地冲上去和他大打一架,然后大声喊着:设计师才不是“作图的”的呢!


【交互设计】UI设计字体排版实用技巧


设计师是排版的…

老实说,作为一个交互设计师,特别是负责ui界面的设计,每天最多思考学习的就是怎么排版才会更加好看。网络上超过95%的信息是书面文字语言,文字排版就成了重中之重。好的文字排版可以让用户的阅读行为更加轻松,而糟糕的文字排版只会让用户感到厌烦,优化文字排版就是优化用户界面的重要工作。


知道文字排版这事儿多么重要了吧,本着人道主义互助的精神,小编拿出来珍藏多年压箱底的10条武功秘籍,哦不对,排版秘籍,和你唠唠该这么给网页做文字排版,让你设计的界面也能有好的可读性!


-01-千万不要用各种各样的字体

使用超过3种不同的字体来设计你的交互界面,就会使得他们看起来没有秩序感,也显得不够专业。同样,太多的字体大小和样式也会破坏布局。尽可能地将字体种类数目限制到最低,一个字体通常是足够的,最多,也就是使用两个字体。


【交互设计】UI设计字体排版实用技巧


如果你选择使用两个字体,请记得选择两个可以相互配合协调的字体,具有同样的视觉风格,不要让其中一个抢了另一个字体的风头。


【交互设计】UI设计字体排版实用技巧


-02-尝试使用标准字体

设计工具里为我们设计师提供了很多有趣的字体,这些字体也许给我们的设计结果带来许多新鲜有趣、意想不到的设计变化,但这些趣味的字体也许会给你的设计带来错误的影响。过于花哨的字体会分散用户的阅读注意力,用户更多地会思考设计师使用的字体,而不是专心阅读文字信息。所以,如果除非是你的品牌或者交互产品有目的地、迫切地需要一个自定义字体,你还是最好坚持使用这些安全的系统标准字体吧。用好的文字排版、阅读体验吸引读者关注内容,而不是用炫技式的文字字体来呈现。


【交互设计】UI设计字体排版实用技巧


-03-控制好每一行的长度

你之前可能没有想到,一行文本的长度、字符数量是文本可读性的关键。即使你在其他部分的设计再巧妙,如果限制了文本的宽度,也会影响到你的设计可读性。如果一行太短,眼睛不得不频繁地换行,打乱了使用者的阅读节奏,如果一行太长,就会增加用户的阅读疲惫感,使得用户很难专注。如下图,一行60个字符左右的阅读量刚刚好,如果是在移动设备当中,30-40个字母就好了。



【交互设计】UI设计字体排版实用技巧


-04-选择各种尺寸的字体

大多数用户界面都会有各种各样的文本元素,按钮、正文、标签、标题,这么多的文本元素,要给它们赋予不同的文字尺寸大小,会更好地帮助用户阅读文本信息,找到信息的主次关系。




【交互设计】UI设计字体排版实用技巧


既然如此,你要选择一种可以在不同大小和字重下都具有可读性和可用性的字体,这十分重要!你要保证你选择的这个字体,即使在很小的情况也能清晰分明,像草书、花体手写体就不要选择了:它们虽然很漂亮,但真的很难阅读啊!



-05-使用字母好区分的字体

讲真的,有些字体里的字母真的不好区分,特别是下图当中i和l,真的很难区分啊!


【交互设计】UI设计字体排版实用技巧


因此,在选择字体类型的时候,作为设计者你应该在不同的文本字母中检查你选择的这个字体是不是合适,这样才会确保这个字体不会给你的用户造成阅读困难。



-06-避免所有字母使用大写

全大写的拼写会给人一种极强的视觉冲击,如果不涉及上下文内容的阅读,单单是强调一词或者一句,效果是很好的。可是在大段文字当中,与小写字体相比,全大写的字体会大大影响用户的阅读速度。



【交互设计】UI设计字体排版实用技巧


-07-控制好行与行之间的间距

事实证明,在段落之间,正确使用空白空间可以提高20%的阅读理解能力,帮助用户快速吸收理解文字信息,剥离无关紧要的信息。而这个空白空间,就是指的两行文本之间的间距,也就是行距。通常,我们会采用字母高度的30%作为行与行之间的空白间距。



【交互设计】UI设计字体排版实用技巧


-08-确保你的文字有足够的颜色对比度

记住,不要把你的文本和背景使用相同相似的颜色。颜色对比更鲜明,文本越可见,用户阅读速度就越快。如果你做好了选好了颜色,最好放在大多数设备上,与真实用户一起进行测试。测试中发现了问题,会好过实际应用当中出现了问题。



【交互设计】UI设计字体排版实用技巧

【交互设计】UI设计字体排版实用技巧


-09-避免使用红色或者绿色的文字

红配绿,很鲜艳是不?恭喜色觉正常的你,可是你的一部分色盲症用户就没这个感受了。色盲是个很常见的现象,特别是在男性当中,8%的男性是色盲,尤其是红绿色盲者,这是最常见的色盲种类。所以,作为设计师,你应该避免用红色和绿色来传达信息。如果有可能,不止是避免红绿色,建议你使用颜色以外的区分方法来强调重要的信息。



【交互设计】UI设计字体排版实用技巧


-10-避免使用闪烁的文本

blingbling闪烁的文字是不是看起来很酷炫?可是它可不是文字效果里的好选择。闪烁的文字内容可能会引起一部分敏感特殊用户群的癫痫发作。就算你的用户没有癫痫症,闪烁的内容也可能会让他们感到烦躁恼火,或者是分散他们的阅读注意力。




好了,未来的交互设计师们,小编这份秘籍,你一定要收好哦!希望,会给你未来的设计探索,提供帮助。


联系老师

联系老师

副标题

 
 
 
 
 工作时间
周一至周日 :8:30-21:00
 联系方式
客服热线:18971120504