UI界面排版技巧:怎么提高UI界面的高级感?

如题所述

排版设计在UI界面中同样重要。界面本身就有责任把重要的信息有效地传递给用户,而在大多数情况下,这通常是通过文字来完成。有效的排版对于改善UI用户体验如此重要。优化排版,本质上也是优化UI和UX。现在就和你分享5种实用的排版技巧,提高UI界面的高级感。

1、增强层次结构,使UI更清晰

整理、重组、有意识地梳理出视觉层次,使使用者能清楚地感知内容。在信息层次结构中,通常由标题、副标题、正文、参考说明等常见文本元素组成。

并且一个清晰的文本层次结构,是依赖于与文本本身所属层次相对应的样式,以便保证可读性。题目应突出,正文应清楚明了,副标题起到的是对标题的辅助说明作用,因此应适当缩小,这样文本元素前的大小关系、位置关系就比较清楚。

一条经验之谈就是,通过修改字体大小,减少字体大小,从而迅速消除彼此之间的关系。例如,像标题字使用了32px,而body字体使用16px来创建这种对比。

对于更为复杂和多变的使用场景,普通正文标题使用两倍大字体字体,需要高亮标题的标题,则可使用3倍大的正文字体,在特殊情况下或需要重点说明的情况下,用4倍字体显示。

2、有意识地创作有气息的版式

字距、行高、行距是排字时,最常调整的属性。缺乏足够的空隙,可能使文字难于阅读,但间接过多,可能使使用者在阅读时感到不舒服。

(1)行高

“行高”这一概念在不同的地方可以用不同的用语表达,例如,PS中的“行距离”用“距离”来形容它,本质上,它们用垂直间距的两行文字来描述它。

collection本身没有标准数值,这通常取决于字体本身的特性和设计要求。一般来说,在许多设计中,往往将行高设定为字体高度的1.5倍,在实际设计中,根据字体本身的设计特点和应用场景(移动端的阅读可能会适当增加,智能手表这一使用场景中可能会设置得更高),进行合理的调整。这条规则可以直接使用,如果您的文本使用了16号字体,这是经过很长时间验证的。

(2)字距

字距是指横向文字之间的间距。几乎没有人会花太多的时间来设置横向的字距,但这对阅读有一定的影响。用英文字体时,字距通常遵循以下指导方针:

当使用大写字母时,需要增加字间距

字体增大时,需适当减小字间距

加大字体粗细时,需适当减小字间距

排字时,软件会自动调节字母、字母之间的距离,同时在视觉设计时,也要注意字偶距问题。

(3)行长

行号实质上是指文本段落的宽度,每行文本的长度。一般来说,文字的长度要相对短一些,这样容易读懂。对于笔记本电脑,比如1440px宽的大屏幕,使用一行60~80个字符(中文通常控制在每行35~42字),但是,如果是在移动端屏幕上,则每行字符的数目要减少到35~45(中文字数控制在35~45字)。

3、基于内容选择字体

选择文本字体时,应考虑潜在读者的阅读体验。各种字体在界面和体验上都会带来截然不同的体验,字体的选择会影响用户对界面的第一印象。

注意:英文字体一般没有太多的选择空间,在这方面中日韩三国在文字的字体上,显然会有更多的问题。但是在移动端APP上,很多应用都可以选择非系统默认的第三方字体,而在网页上,要实现起来就麻烦很多,所以一般只会调用本地字体。

“好的设计师把文字看作是内容,而伟大的设计师把文字看作是UI。-CameronMoll

选择合适的字体,能够在信息和视觉两个层面上传递信息,错误的选择将导致误解和混乱的结果。

4.使用相同字体家族

假如你对不同字体的搭配还不够丰富,那就用同一种字体进行设计吧,是最安全的选择。一般来说,字体设计都是为了一个明确的目标。他们具有更统一、更有凝聚力的外观,在设计和使用过程中,会更方便。

使用字体族的另一个好处是,它可以更快地适应不同文本元素的需要,您可以通过调整字体大小、粗细、文字大小、颜色等,更快地产生对比,呈现不同的视觉效果。

此外,同一种字体族中,往往会附带相应的斜体、等宽字体等,这样就不需要手动修改就能满足一些比较特殊的要求。

5、尽可能使用左对齐以提高可读性

全世界绝大多数国家和地区,字的排版都是由左向右(如阿拉伯语相反),顺口是从上到下。它确定左对齐是确保可读性的一个重要基准。

在大量、长时间阅读的过程中,左对齐给人的双眼提供了一个基本的扫描位置,这大大降低了阅读的压力,而居中对齐显然无法做到这一点。

此外,要特别注意的一点是,要避免段落的最后一行只有一个字,排版时要避免单字成行,在排版时要避免。

排版设计是数字时代每一个设计师都需要学习和掌握的一项重要技能,不管您的设计项目是什么类型的,这些基本原则总是会给您的设计带来更好的结果。但这些排版技巧都只是很基础的部分,在实际的设计中,还会涉及许多更复杂的排版布局,但这些基础,始终是最重要的。想要更好的排版布局,就上,学习排版课程吧~

温馨提示:答案为网友推荐,仅供参考
相似回答