编辑导语：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协议