UI设计经常被人错误理解。它不仅涉及视觉设计，而且也包含用户体验设计。出色的UI设计实际上是设计简洁明了和效率的结合。在本文中，厦门创意互动将揭示有效的UI设计的黄金法则，以及如何实现它。这些规则与版式，调色板，CTA，组件和设计系统有关。 

在这里，我们正在使用InVision Studio。但是，这些规则适用于您所使用的任何网站设计工具，并且通常过程非常相似（请参阅我们的最佳UI设计工具指南以及其他一些选择，或者我们的主要Web设计工具指南）。 

UI设计与可用性有关。视觉设计仅与表单有关，而UI设计与表单对功能的帮助有关。让我们从排版开始看一些指导UI设计过程的基本规则。

规则1：好的设计是使用起来很流程用户体验好

出色的排版归结为可访问性。在设计系统中，应以增强可读性和可读性的方式设计字体大小，行高，段落间距和字母间距。

视觉设计（即颜色和字体）无疑会增加用户的整体体验，但最终用户会使用UI，而不是将其视为艺术品。清晰的字母可以使内容更清晰，可读的单词可以帮助用户有效地消化内容。

但是，精心设计的字体在美学上仍然可以令人满意。我们经常会忘记科学的一面，而形式和功能成为一面。实际上，您仅对几个简单的印刷增强功能就可以拥有多么漂亮的黑白Helvetica（或类似字体）。通过增强功能，我们的意思是调整字体大小，行高，字母间距等。同样，“美丽”字体在无法读取时可能会变得很不好。

但是，就像UI设计的许多方面一样，微调这些单独的样式并不是真正的挑战。挑战在于在整个设计中保持一致性，因为作为人类，我们基于思维模型，模式，过去的事件和熟悉程度来浏览整个世界（和我们的用户界面）。

这就是设计系统进入故事的地方。设计系统可帮助我们保持一致性，并在不同重要性的元素之间建立清晰的视觉层次结构，从而帮助用户更快地了解我们的UI，甚至更有效地消化我们的内容。现在，尽管设计系统几乎可以像类似Bootstrap的框架那样复杂，但实际上它们的开始更像是样式指南，而这正是我们今天要创建的，首先是版式。

01.字体大小

在可读性和可读性方面，WCAG 2.0 Web内容可访问性指南定义的最小可接受字体大小为18pt（或14pt粗体）。我们无法真正告诉您要使用的字体大小，因为这在很大程度上取决于字体本身，但是重要的是要牢记视觉层次结构，以及该基本大小如何将其与摘要文本（例如标题（<h1>，< h2>，<h3>等）。

使用您选择的UI设计工具（此处使用InVision Studio），创建一系列文本层（T）并调整大小以与以下模板相关：

• <h1> 44px
• <h2> 33px
• <h3> 22px
• <p> 18像素

对于Studio（和所有其他UI设计工具），这是通过使用右侧的检查器调整样式来完成的。

接下来，选择字体。现在，您可能会注意到某些字体是18px <p>和22px <h3>看起来没有什么不同。我们在这里有两种选择：调整字体大小，或考虑使用其他字体作为标题。如果您预计您的设计将是大量文本，请考虑使用后者。 

请记住，视觉UI设计通常是一种直觉，没有固定的东西-一切都可能发生变化。

02.线高

最佳的行高可确保文本行之间具有足够的间距，以实现良好的可读性。这已成为越来越多的公认标准，甚至Google的PageSpeed Insights都建议将其作为手动检查或标记，以防文本中包含因行高而导致的链接过于紧密。

WCAG再一次帮助我们解决了这一问题，声明行高应为字体大小的1.5倍。因此，在UI设计工具中的“线条”（或类似线条）下，只需将字体大小乘以–至少– 1.5。例如，如果正文文本为18px，则行高将需要为27px（18 * 1.5）。但是，请再次注意您的直觉–如果1.6倍对您而言感觉更好，那就继续吧。

您可以使用检查器直接执行数学运算。现在开始考虑在设计中使用实际数据还为时过早，但是至少可以使用一些实际数据（即使只是lorem ipsum）。InVision Studio有一个本地真实数据应用程序，可帮助我们了解排版的实际外观。

03.段落间距

段落间距（或文本间距）不是我们可以使用检查器声明的样式。相反，我们需要使用智能指南手动对齐图层以确保准确性。与行高相似，魔术倍数为2倍（表示字体大小的两倍）。 

例如，如果字体大小为18px，则在进入下一个文本块之前应该有36px的空格。关于字母间距，该间距至少应为0.12。但是，在开始使用这些元素来创建组件（就像UI工具包）之前，我们不必担心这一点。

04.共享样式

如果您的UI设计工具支持它（InVision Studio尚不支持），请考虑将这些印刷样式转换为“共享样式”，以使其能够快速重用，同时确保视觉一致性。通常这是通过检查员完成的。

规则2：三种颜色就足够了

颜色可以对设计产生巨大影响-毫无疑问。但这不一定是关于它们有多美丽。当涉及到UI设计时，习惯上来说颜色是我们喜欢的第一件事，但是我们被告知直接进入视觉设计是一件坏事。但是，在创建设计系统时，这仍然是正确的-颜色应该是头等大事，因为它扮演着许多不同的角色。

UI设计中的颜色可能非常有效，但是由于某些用户（实际上很多人）患有各种类型的视觉障碍，因此并不总是可靠的。 

话虽如此，它不一定与所使用的特定颜色有关，而与颜色的类型有关。当涉及品牌时，这可能不是正确的-因为颜色在这方面用于情感影响-但是对于UI，颜色也可以用于视觉层次。

01.选择你的颜色

颜色具有含义，因此重要的是不要过多。太多意味着用户必须理解和记住的更多事情，对于我们来说，还有更多的颜色组合需要担心。 

一般来说，这是推荐使用的格式：

• 号召性用色（也是主打品牌色）
• 中性浅色（适合大量文本的内容）
• 中性深色（更适合UI元素，也适合深色模式）
• 然后，对于所有上述情况，变浅和变暗的变化

列表中的最后一点意味着很容易实现以下目标：

• 暗模式很容易实现
• 我们的CTA颜色永远不会与其他颜色冲突
• 在任何情况下，我们都可以根据需要强调和强调

02.创建一个调色板

使用您选择的UI设计工具，为每种颜色（命名为Brand，Neutral / Light和Neutral / Dark）创建一个相当大的画板（点按A）。然后，在每个画板上创建其他较小的矩形，以显示颜色的暗淡变化以及其他颜色本身。

通常，将较亮和较暗分别考虑为10％的额外白色和10％的额外黑色。完成后，在每个画板上显示印刷样式的副本。 

这些文字层的颜色应为中性光，除非在中性光画板上，否则它们应为中性暗。

03.检查对比度水平

接下来，我们需要检查颜色以获得最佳的颜色对比。有多种颜色工具可以执行此操作，例如适用于Sketch 的Stark插件和适用于macOS的Adobe XD或Contrast。但是，可以使用在线解决方案，例如Contrast Checker或Color Contrast Checker。