UI 连载系列！让设计更高级的12个实用小技巧

我们好，我是彩云。在做 UI 界面规划时，有时分看着规划出来的界面总觉得不大好，但又不知道问题出在哪，这里其实考验的便是规划观察力。资深规划师之所以强，往往便是强在对规划细节的把握才能，他们总能找到你所看不到的细节问题。大的问题往往一眼就能看出来，但规划质量凹凸往往就藏在这些规划细节中。

观察力的进步也是来自于平常项目中的经验积累，为此，彩云围绕规划细节计划出一个系列文章，今天这篇文章是第一期，感兴趣的同学坚持重视，后续会有更多规划细节干货文章连载更新，保证看完就能用到自己的工作中。

当你在规划一个高效、美观的 UI 界面时，有时只需求一些小的调整，就能快速进步规划的质量。有时分仅仅是简略的调整就能规划出让客户、用户和你自己真实满足的界面。

在这篇文章中，我整理了一些小的规划技巧，来协助你快速改善自己的规划，进步用户体会。

恰当运用文本装修元素

有些人会拿极简规划出来说事，认为不应该加多余的文字搅扰 ，界面上的内容都应该遵从有意义这个准则，这没有问题。但有时分添加文本的目的仅仅简略的为了“装修”，这样是能够的。咱们不希望一切的规划都变得平平无奇。

朴实出于装修原因而加入一些比较特别的元素也彻底没问题，它能够不遵从可访问性标准，比方色彩比照度特别浅，看不清都没联系。只要这些元素不影响用户体会就能够。

UI 界面中的不同元素要有差异度

按钮、告诉（文字链接）是用户界面中两个独立又重要的元素。假如能够的话，一定要保证用户在阅读你的网站或应用时能够快速且轻松地将它们差异开来。

按钮，在大多数情况下都是最重要的，所以在界面中一定要保证是最突出，并且很容易差异其他元素（例如：文本链接）。

运用更天然的投影

规划过程中咱们一般都会用到投影。投影的恰当运用，能够有效进步视觉质量。在规划界面时，避免运用比较重的投影，下降不透明度，让界面看着愈加天然。

运用让视觉愈加明晰的字体

在规划中，字体恰当都运用大写也是很不错的。它能够协助你在规划中完成元素之间的多样性和比照度，进步视觉的全体效果。但要保证挑选是适宜的字体，行高和字重粗细，保证给用户呈现的内容明晰度。

面包屑导航规划要便于用户了解

导航的规划无处不在，一般会应用在内容比较多的网站上，但有时很难了解它所表达的意思。假如将字体色彩和粗细略微调整下， 就能够让用户快速确认自己所在站点中的位置，以及他们或许需求去的其他地方。

例如：假如他们经过查找跳转到某个站点的某个位置，这就特别有用。像上图中的规划一样，始终让导航链接中的最终一项让它在视觉上与其他有显着差异，这样用户愈加容易了解。

少用过高饱满度的色彩

高饱满度的色彩（明亮的蓝色、红色、绿色等）在网站上是挺有视觉冲击力，并能吸引用户的注意的。但是假如过度运用它们或许会让用户的眼睛感到疲劳，尤其是结合文本内容一同运用的时分。

尽量少地运用高饱满的色彩，你能够测验把饱满度下降，添加色彩中的灰度来使色彩变淡，这样不仅能避免用户视觉疲劳，还能愈加突出重点内容，让用户阅览起来愈加方便且不被视觉搅扰。

运用用户了解便于辨认的图标

在规划中运用图标时，最好运用用户了解并便于辨认的图标，让用户能快速了解运用它能做什么。运用不能传达正确意义的图标，只会变成视觉噪音，引起用户混杂，成为用户的认知障碍。

运用亲密性准则来表达元素之间的联系

版式规划四大基本准则：比照，重复，对齐，亲密性，其间亲密性准则是把画面中相关元素进行分类，树立某种视觉上的相关，完成页面全体结构明晰度，加快用户在阅读网站或应用时的认知。

运用 4pt 基线网格+8pt 网格来做字体排版

进行文字排版时，将 4pt 根底网格 与 8pt 网格 一同运用能够为规划带来愈加调和的笔直节奏。

你只需求运用 4 的倍数（16、20、24、28 等）的行高值将字体与 4 的基线网格对齐。为什么是 4？ 好吧，就我个人而言，我发现在处理某些文本大小时，过去以 8 的倍数进行缩放并不是那么通用。

削减标题的行高

冗长的正文需求满足的行高来添加可读性，而标题一般要短得多，所以你能够略微削减间距。

标题的推荐行高一般是文本大小的 1 – 1.3 倍，标题文字越大，需求的行高就越少。

运用色轮上的附近色不容易出错

附近色，是最调和的配色方案之一，当你在挑选色彩遇到困难时，它能给你很大的协助。

一组由“主”、“次”、“再次”组成的附近色能够帮你快速构建一个简略的、不会出错的配色方案。

在规划中最大化信噪比

规划中的明晰度和可用性能够经过“最大化信号”和“最小化噪音”来完成，这反过来又产生了高信噪比。

你能够经过保证相关信息（信号）有效地呈现，而不相关的信息（噪声）被彻底削减或删除来完成这一点。剪掉绒毛。使事情愈加明晰，删减无关信息，强化重要信息，进步信噪比达到进步界面规划质量的目的。

彩云注：由于篇幅有限，今天是规划细节系列文章的第一期，下一篇会持续更新更多规划细节，感兴趣的同学坚持重视，保证看完就能用到自己的工作中。如觉得有学到，一定要给彩云点个赞，我会更有动力，哈哈~

欢迎重视作者的微信大众号：「彩云译规划」