提升UI设计界面高级感的小技巧

在UI设计中，界面排版同样很重要，将有效的信息传递给用户这才是用户界面的功能，下面小千就给大家介绍五个能够提升你的设计高级感的小技巧，学到就是赚到！

1、强化层次结构来提升UI的清晰度

  将必要的文本内容集合起来，重新组织，有意识地梳理视觉层次结构，要让用户能够清晰地感知到内容。对于信息层级，通常会按照标题、副标题、正文、引用说明等常见的文本元素构成。而清晰的文本层次结构，是依托于符合文本本身所属层次的响应的样式，这样才能确保可读性。大标题应当突出，正文应当清晰明了，副标题起到的是对标题的辅助说明作用，所以应当适当缩小，这样一来，文本元素之前的大小关系，位置关系都更加清晰了。一个经验法则是，通过修改字号大小的加倍和减半来快速理清相互关系。比如，如标题字使用了 32px，那么正文字体使用 16 px 来创建这个对比度。

  在更加复杂多变的使用场景中，普通正文标题使用正文的2倍字号，标题中需要突出显示话，那么可以使用正文的3倍字号，而在特别的专题或者需要着重强调说明的场景之下，使用正文的4倍字号来呈现。

2、有意识地创造具有呼吸感的排版

  字间距、行高、行长是在进行排版的时候，最常调整的属性。缺少足够的间距，可能会让文本难以阅读，但是间接过多，可能会让用户在阅读的时候感到稀疏难受。行高在不同的地方，可能会使用不同的术语来表述「行高」的概念，比如 PS 当中会使用「行距」来描述它，本质上，它们描述的是同一个东西——两行文本的垂直间距大小。行高本身并不存在一个标准的数值，它通常取决于字体本身的特征以及设计需求。一般而言，很多设计当中，倾向于将行高设置为字体高度的 1.5倍，在实际的设计当中，会根据字体本身的设计特征和应用场景（移动端阅读可能会适当增加，智能手表这种使用场景上可能会设置得更高），进行合理的调整。如果你的正文使用的是 16 号字体的话，那么这个规则可以直接拿来用——这是久经验证的。字间距字间距指的是文本在横向上的间距。很少有人会在横向的字间距的设置上花费太多的时间，但是它确实是会对阅读产生影响的。在英文字体当中，字间距通常会遵循下面的准则：使用大写字母的时候，需要增加字间距字号增加的时候，需要适当减小字间距增大字体粗细的时候，需要适当减小字间距

  行长行长本质上说的是文本段落的宽度，文本每行的长度。通常，文本的行长要控制得相对短一点，这样易于阅读。在大屏幕上，比如 1440px 宽度的笔记本电脑屏幕上，使用每行 60~80 字符的长度（中文通常控制在每行 35~42 个字之间），但是，如果在是移动端的屏幕上，那么每行的字符数要缩短到 35~45 这个范畴（中文则可以控制在20~25个字即可）。

3、根据内容来选取字体

  在选取文本字体的时候，需要考虑到潜在读者的体验。不同的字体能够给界面和体验带来截然不同的体验，字体的选择能够影响用户对于界面的第一印象。注：英文字体通常不会有很大的选择空间，在这方面中日韩三国在文本字体上，存在的问题明显会更多一些。不过在移动端 APP 上，不少应用可以选择非系统默认的第三方字体，而在网页上，要实现起来会麻烦很多，所以通常只会调用本地的字体。正确的字体选择，能够在信息和视觉两个层面给用户传递信息，错误的选择会导致误解和混乱的结果。

4、使用同一字体家族

  如果你在不同字体的搭配上，并没有足够丰富的经验，那么使用同一字体族的字体来进行设计，总是最为安全的选择。通常，一个字体族是为一个明确的目标来设计的。它们有着更为统一的、富有凝聚力的外观，在设计使用过程中，会更加便捷。使用字体族的另外一个好处在于，它可以更快适配不同文本元素在排版上的需求，你可以更快地通过调整字体大小、粗细、文字大小、色彩来制造相应的对比，呈现不同的视觉效果。另外，同一字体族当中，通常会附带有相应的斜体、等宽字体等等，这可以应对一些相对特殊的需求，而不用手工去修改。

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

  在世界上绝大多数的国家和地区，所使用的文字排版都是从左到右的（比如阿拉伯语就是反过来的），阅读顺讯是自上而下的。这决定了左对齐是确保可读性的重要基准。左对齐给人的双眼提供了一个扫读时候的基准位置，在大量、长时间阅读的过程在，极大地减小了阅读压力——而居中对齐则明显做不到这一点。另外，还要额外注意一点，就是要避免在段落的最后一行只有一个字，单字成行在排版中叫「寡字」，这是需要避免的。

本文来自千锋教育，转载请注明出处

提升UI设计界面高级感的小技巧相关推荐

学习UI设计有哪些入门的小技巧
对于许多刚毕业的大学生来说,他们没有技能,只能从事一些简单的工作或低工资.为了给自己一个良好的职业发展前景,许多学生选择学习UI,UI设计初学者应该如何入门?接下来,推荐一些学习ui设计技巧: 学u ...
干货分享！通过图片提升UI设计作品格调的3个方法
目前越来越多的人对用户体验有了更高的要求,为了给用户更好的体验,就需要UI设计师通过图片来提升作品的格调.如果你的图片看起来比较高端,用户停留的时间也会更久.那么,如何通过图片提升UI设计作品格调?接 ...
ui设计界面参数_参数化设计，可以更有效地设计用户界面
ui设计界面参数 User Interface Designers lacked proper design tools for years. Fortunately with the appeara ...
ui设计配色技巧：UI设计界面配色
ui设计配色技巧:UI设计界面配色就重要性而言,在UI设计中色彩元素扮演的角色仅次于功能.今天就为大家来分享一下ui设计配色技巧:UI设计界面配色法则,和庞姿姿一起来看看吧~ 人机互动主要基于用户的界 ...
QT入门之UI设计界面
QT入门之UI设计界面在UI设计界面中,可以观察到属性编辑器实际上就是对派生类的各个成员数据进行赋值.因为QLineEdit继承自QWidget,QWidget又继承自QObject,所以可以看出属 ...
APP手机应用程序软件UI设计界面介绍AE模板
APP手机应用程序软件UI设计界面介绍AE模板下载,具有时尚的设计,现代文本动画和时尚的过渡效果.简单易用,只需编辑文本,拖放到新媒体中并点击渲染即可.推广和宣传新手机应用程序的好方法等等.用这个令人 ...
UI设计作品太单调？三招提升UI设计作品的层次感！
UI设计的作品如果具有良好的色彩层次感,无疑可以为用户带来强烈的视觉冲击.因此,想要成为一名合格的UI设计师,掌握一定的色彩运用技巧是非常重要的.对于新手而言,如何才能提升UI设计作品的色彩层次感?下 ...
学了这么久UI，你还不知道UI设计界面包含哪些？
为了建立有效的UI,设计师需要深入的了解移动端APP的特性,了解他们的组成部分和功能.现如今随着移动行业的快速发展,很难给所有的APP建立一个统一的界面标准.先就和南京学码思UI培训机构一起来看下吧! ...
操作系统：提升电脑开机速度的15个小技巧
今天小编给大家分享提升电脑开机速度的15个小技巧,希望对大家能有所帮助! 1.禁用闲置的IDE通道右键点击"我的电脑-属性",然后点击"硬件"接着点击&quo ...

提升UI设计界面高级感的小技巧

1、强化层次结构来提升UI的清晰度

2、有意识地创造具有呼吸感的排版

3、根据内容来选取字体

4、使用同一字体家族

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

提升UI设计界面高级感的小技巧相关推荐

最新文章

热门文章