编辑导语：UI设计师在设计过程中往往需要特别考虑排版的问题，因为这决定了给用户的第一印象是什么，但有不少设计师会忽略排版的问题。那么如何解决UI界面乱的问题呢？本文围绕UI设计排版展开了讲述，推荐对此感兴趣的伙伴阅读。

对于UI设计师来说，特别是对于初阶UI设计师或者UI初学者而已，排版的好坏是这个阶段核心要考虑的问题，也就是细节。但是不少同学总是在这个上边很不注重，总想着创意。没有了基础的创意就如同无本之源，是没有任何意义的。

接下来咱们来看看，这7点可以让你的UI设计质量明显提升所需要注意的问题。

一、忽略内容而设计

如果您想提高自己的技能，请设计一些可能成为产品最终目标的产品。它将实际显示哪些图像，标题有多长？因为，一旦您将真实的内容填满你的设计稿，您的精美设计就会变的异常难看。

具体来说，在开始进行UI设计之前，您需要知道页面的每个部分都将显示哪种内容。您还需要知道内容的最小和最大显示长度，正确处理折行。

1. 选择正确的配图

如果作为概念设计稿，那么选择你能拿到的最好的配图当然是可行的。但是一旦你要为真实的应用创建设计，那么配图的质量就必须要考虑。所以，尽量选择跟主题相关的配图，而不是在图库中的跟主题毫无关联的图片。只有在这种情况下，你才能真实了解最终的成品是什么样子的。

2. 注意重复的列表和块

通常情况下，列表有以下几种形式：图像+文本，图标+文本，数字+文本等。您应该考虑用哪种形式可以让信息更有效的表达。

对于描述功能的小文本块，您可以使用三列布局。但是，如果您有多于五行的文本，并且需要全部显示而没有省略号，则必须用另一种视觉解决方案。为什么呢？因为手机阅读者没有阅读较长的文本的习惯。此时，可以使用水平滚动或者两列布局的图片列表。

另外，要考虑一下内容区块的极端情况，比如列表的文字最长和最短大概有多少字数。优秀的设计师应该始终主动思考。以考虑客户将来可能需要扩展UI的可能性。

二、区分主要动作和次要动作

注意到上图哪里有区别了吗？“Login” “忘记密码”“Get Start” 三个按钮变成了一个。在做设计时，我们必须区分按钮的主次，这就要求你要明白，你现在在设计的这个页面，最重要的功能是什么，然后对这些功能进行排序，主要功能突出显示，次要内容则弱化。因为用户可能还要去找它们，但是它们没有那么重要，但是是必须的。所以，右图优化后的效果是不是更好呢？

区分主按钮和次要按钮（辅助功能）的方法：

• 对主按钮和辅助按钮使用不同的视觉权重。视觉重量最强的按钮将获得更多关注。
• 因此，请使用强烈的颜色，粗体文本和大小为主要按钮赋予视觉效果。对次要动作则相反。

三、令人沮丧的错误状态

在设计用户界面时，请不要忘记任何用户界面的主要目的：在用户和服务之间提供尽可能平滑的交互。不要让用户感觉到沮丧，即使在用户出错的时候。

设计人员应向用户提供有关状态的明确反馈，尤其是在出现错误状态的情况下。因此，错误通知应满足以下简单规则：

• 它们应该是可识别且引人注意的（例如，红色是常见的UI模式，指示错误）。
• 他们应该清楚地说明发生了什么，以及用户如何解决该错误。
• 它们应该是上下文的。最好在与它们相关的元素附近显示错误消息。
• 它们不应具有刺激性。您的用户是否对错误已经足够烦恼了？

设计师还应注意意外错误（例如，服务器错误，找不到页面）。任何错误消息都是用户流程的障碍。因此，我们需要帮助用户进行处理，提供任何可能的解决方案，并设法消除不良体验，尤其是这不是用户犯错的情况下。例如，一个好的解决方案可能是设计404和500页的插图或动画。

1. 表单合法性检查

在设计错误状态时，请尽量避免惹恼用户。特别要注意所有可能的形式检查。

例如，假设您有一个包含必填字段的表单。这意味着开发人员会进行相应的检查，“所有必填字段都不能为空。” 假设用户尝试以随机顺序填写表格。当第一个必填字段失去焦点状态时，它将返回错误：“请填写此字段。这是必需的！”

我们可怜的用户大声说：“等等，我只是在表单字段之间单击，甚至没有单击’提交’！” 而且情况甚至可能变得更糟。例如，假设您有另一个检查，“提交”按钮将被禁用，直到所有必填字段不再为空。

请考虑一秒钟。您的可怜用户没有做任何事情，也无法提交表格，但是您已经将他的几个错误归咎于他了。这肯定会激怒任何人，因此最好避免这种情况。

2. 权衡成本和价值

不要听那些试图告诉您的开发人员，这将花费您很大的精力来以您想要的方式来实现。切记：不避免此问题将使您付出代价，你的客户将会流失。这是必须要做的，没有商讨的余地。

四、元素没有对齐

许多设计师认为使用网格会限制您的创造力，从某种意义上说，这是事实。但是，如果您是UI设计的初学者，我认为有必要在打破规则之前首先学习这些规则。

适当的填充和间距可使布局看起来整洁有序，同时使读者更容易阅读和理解信息。

在逻辑块周围应设置相同大小的空间（例如，在顶部和底部以及左侧和右侧）。如果空间不均匀，您的页面将显得凌乱，并且用户可能不会平等地考虑每个部分。

填充太小意味着用户无法将内容分解为逻辑块。为了防止逻辑部分混合在一起，请将它们分开并在它们之间插入较大的空间。

维护视觉层次结构的一种简单方法是遵循以下简单规则：不同逻辑块之间的填充应大于每个块内标题和文本之间的填充。例如，假设您有一长串包含标题，副标题和段落的文本：

• 将标题padding-bottom设置为40px，然后跟随一段文本。
• 将段落padding-bottom设置为10px。
• 如果段落后有副标题，则将其顶部填充为30px（即，段落与子标题顶部之间的间隔为30px），将底部填充为20px（即，子标题底部与段落之间的间隔）将为20px，大于段落之间的间隔）。

这将把重点放在最重要和最大的元素上。最大的文本（标题）周围有较大的空间。但是这个空间应该更接近跟随它的相关元素。

五、对比度过低

大多数设计必须要考虑到大多数人，其中包括盲人，色盲和视力障碍的用户。通常，我们会尝试设计看起来不错的产品，而忽略了要与我们的产品进行交互的不同用户。

成熟的设计师更倾向于克制的做设计。比如将文字缩小到8px甚至更小，使用浅灰色阴影（因为它看起来不错）。虽然它更适合我的UI界面布局，但是它忽略了有视力障碍的访客。

WCAG（Web内容可访问性指南）提到，必须要保证4.5:1的对比度。为了确保您符合这些标准，请下载Stark，它将检查您的设计是否可访问。

1. 保持留白

如果您将两个完全不同的元素放置在彼此非常靠近的位置，那么用户将不会理解哪个元素是“主要”元素。这就是为什么我们可以说对比不仅是对元素应用不同的视觉样式，而且还涉及使用留白的艺术。这是因为有时为了使元素形成对比，您需要使用空格分隔它们。

留白对于使您的内容易于用户阅读很重要。当然，留白可能会被不正确地使用：有太多的留白或将太多的内容塞满了一个很小的区域。许多广告过多的网站也缺乏足够的留白。

2. 确保文本和图像有足够的对比度

避免将低对比度的文本复制放置在图像上。文字和背景之间应有足够的对比。要突出显示副本，请在图像上放置一个对比滤镜。黑色是一种流行的颜色，但是您也可以使用明亮的颜色，将它们混合和匹配。

另一种选择是从一开始就使用对比图像。在这种情况下，您可以将副本放置在照片或图像的深色部分的顶部。

六、图标观感不佳

当您需要通过小符号表达含义或简要说明说明时，图标非常有用。它们还是现代界面的基本组成部分，尤其是在移动设备上。在应用程序中，图标通常等同于按钮。这就是为什么选择正确的视觉图像以符合元素含义的原因非常重要。

您需要使用非常简单且通用的图像来讲述故事，每个人都可以理解。您需要将这些图标与UI的整体样式进行匹配。然后，您需要将它们以SVG格式提供给开发人员。

有些设计师喜欢用免费的图标，这些图标单个看起来都不错，但是一旦放到一起，就不太协调了。那么如何来避免这种混乱呢？

• 线宽-调整大小后，所有图标的线宽应相等。否则，它们不会非常明显。
• 圆角半径—如果您的图标包含一些矩形形状，请比较集合中每个图标的圆角半径。如果不同的图标不同，则最好对其进行修复。
• 风格形状（用于轮廓图标）—可以是矩形或圆形。

尽管使用免费图标并没有错，但最好还是谨慎使用它们。使用免费图标会使项目看起来廉价，并且在某些情况下不专业。此外，还有很多免费的图标，人们可以立即识别出来。为什么？他们已经看到它们到处都在使用。

七、注意点击区域

触摸区域太小会让用户抓狂，因为它们会使用户难以完成所需的动作。我们所有人都经历过在智能手机上点击错误按钮，并在屏幕加载错误时必须等待的挫败感！

因此，在设计可点击元素时，请记住，成人食指的平均宽度为1.6到2厘米，以创建手指友好的目标。触摸目标的宽度至少为45–57像素。这将为用户提供足够的空间来击中目标，而不必担心准确性。

原文作者：Denislav Jeliazk（作者已授权）

原文地址：https://mp.weixin.qq.com/s/z2EdEEgVPRcGu0x77Cz6-w

翻译：Tzw_n，公众号「小阿田的设计笔记」

本文由 @Tzw_n 翻译发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议