发布时间：2020-7-30 分类： 电商动态
本文记录了外国神灵在工作中的一些UI细节，仔细阅读，相信会有一些收获！这篇文章总计3029个单词，阅读大约需要10分钟。
以下是翻译的全文：
我想我们大多数人都是从一点点UI开始设计的，或根本不理解它。但即使我们一开始没有任何优势，我们仍然通过大量的设计书籍和文章了解了颜色，布局，布局等方面。因此，在本文中，我将分享我从不同设计师那里学到的知识以及我在设计用户界面时学到的知识，包括我自己的一些新发现。语句:下面的以下“不坏”示例并不一定意味着它们是错误的。这只是我们从良好设计到更好解决方案的改进的基础。
1.使重要文本更加突出
当文本需要区分层次结构时，只需将文本放大，以强调通常无法解决问题，就像下面的问题一样：
文本的层次结构不仅是一个小而大的关系。它需要正确组合文字的大小，重量和颜色才能形成对比。对比度越大越好。 （译者注：我认为对比度不能太大，恰到好处。）
那你如何设计一个更好的比较呢？
1.不要使用方法将对比度和级别添加到不同的字体大小。
2.相反，主要内容加粗和加深，次要内容变薄（不太重要）。
3.创建三种不同的文本颜色，从暗到亮（参见下面的示例）。通常我使用我设计的基色作为正文文本颜色。
4.不要害怕使用大字体（例如: 24px标题，16px正文，10px标签等）。字体比率越大=对比度越好。
5.打开网站Modularscale在线计算器可用于创建更好的字体层次结构。
请记住，对比度=大小+单词重量+颜色。
6.最后，您必须返回并检查比较。您可以使用此计算器检查其可读性。
上面的图片是我使用的基本颜色。我使用深色作为标题和浅色作为辅助内容。
2.不要使用各种复杂的颜色值
不要仅仅为了选择一些暗色值来上下移动颜色选择器，这会使您的工作复杂化。
我们都知道使用黑色文字颜色（000）会使读者的眼睛疲劳，所以我们的选择是使用更深的颜色。使用具有不同透明度的黑色作为解决方案，而不是使用复杂的十六进制颜色值。
在上面的示例中，我使用黑色作为主要颜色（000）并根据其应用程序的位置（例如主要内容，次要内容等）降低其透明度。
3.使用数学方法来理解颜色
我们大多数人都喜欢正确的颜色组合。每当我们看到一个精彩的配色方案时，我们会问自己：“他们是怎么做到的？”（如下所示）
图片来源：momoandspirits
直到我了解到理解颜色不仅适用于从一开始就拥有设计天赋的人，而且还有简单的色调加法和减法，饱和度，亮度（HSB）将达到一些神奇的效果（我们将使用HSB替换RGB）。您可以轻松摆脱单调的白色背景并将其转化为毕加索的作品，如下例所示：
那么HSB的加法和减法反映在哪里？
如何理解两种颜色模式
实际上有两种方式，我们可以看到两个选项都具有相同的基色B9F4BC（圆形背景），但文件夹和条带颜色有所不同。当我们开始时，请记住第一个数字对应于色调，然后是饱和度，最后是亮度。
选项A
选项A
在选项A中，我们可以看到色调值123没有改变所有形状（圆形，文件夹，条带），并且饱和度和亮度已经改变。
现在，根据饱和度24和亮度96进行更改。当我们为文件夹设计深绿色时，这两个值都会改变。从饱和度24到40（增加+16）和从亮度96到82（减少-14），这意味着饱和度正在变化，无论是增加还是减少，它都需要与亮度成反比来设计良好的对比度（反之亦然）。在条带中发生同样的事情，使用文件夹的饱和度和亮度作为基值，饱和度从40增加到44（+04），亮度从82减少到75（减少-07）。由此导致公式：
暗色调=饱和度会增加亮度降低
浅色调=饱和度会降低亮度增加
每当我想知道在我的设计中应该使用什么样的颜色时，这个公式帮助了我。我意识到最好有一个基色并从那里开始调整饱和度和亮度，同时保持色调值不变。
选项B
选项B
在选项B中，相同的原理仍然适用（上面的公式），但这次色调值会改变。我们应用于各种设计材料的术语RGB和CMY现在对我们有意义。
RGB代表红色，绿色和蓝色，而CMY代表青色，品红色和黄色。当我第一次开始时，这些术语对我来说没有任何意义，直到我发现我可以使用RGB和CMY进行颜色组合。
现在在选项B中，如果我们想要使背景变暗，我们需要做的就是将调色板上的颜色选择器移动到最近的RGB方向，或者将其移动到CMY方向以获得更多的Light变化。例如：
颜色选择界面
因为我想设计更深的背景颜色B9F4BC（圆形背景）并将其应用到文件夹图标。这次需要将颜色选择器移动到最近的RGB方向（在这种情况下为蓝色）。但是如果你想要一个较浅的文件夹，你需要将颜色选择器向左移动，靠近CMY方向（本例中为黄色）
通常情况下，选择RGB方向的颜色会使颜色变暗，而CMY方向会使颜色变浅。
将颜色选择器移动到所需的结果后，我们现在在选项A中应用公式，我们得到以下颜色：
红色，绿色，蓝色（RGB）+选项A公式=深色调
青色，品红色，黄色（CMY）+选项A公式=浅色调
4.使用空格分组内容
大胆留空
除了在两组之间添加线以指示分离之外，使用更大的空白是更好的解决方案。
正如接近原则所说：彼此接近或接近的对象被视为一组内容。
在我上面的例子中，我的目标是区分标题和作者，使用更大的24px间隔更合适。
5.使用颜色分隔线
颜色作为区别
在设计时，制作列表界面可能很繁琐，因为您只需要不断复制组件即可完成。但是在用户看来，阅读这些列表可能很困难，尤其是如果一行与另一行之间没有很大差异。因此，除了使用线条之外，添加颜色背景对于可读性非常有帮助，对设计人员来说也更有价值。
6.渐变填充而不是文本投影
标题设计
特别是当背景是动态的时，设计标题和向图像添加文本变得非常具有挑战性。通常，具有动态图片背景的文本的常见解决方案是添加投影，但它无助于用户的可读性。它在字母和单词周围增加了更多的视觉混乱，因为它填补了字母之间的空白。对于某些人来说，黑白颜色叠加是解决此类问题的有效方法。但最近，我发现了一种使用渐变填充的新方法。
渐变填充方法
这比向图像添加黑色背景或降低其透明度要容易得多。此外，只有一些图像具有一些灰度，而其他图像保持自然。文本的位置变得更暗，这提高了文本的可读性。
7.线的长度
大多数设计师通常会使每一行足够长以适应页面宽度。但这会给用户带来视觉压力，每行45-65个字符是理想的。
如果缩短线的长度以达到预期效果，则右侧有一个非常大的空白区域，如下所示：
右侧有一个大的白色区域
不要怀疑这样做的初衷，以文字为中心，可以消除右边的空白。
中心内容
8.对设计进行组件化
设计的不一致性在于它不是基于规格。当您意识到这个问题时，您可能设计了5种不同的卡，10种不同的按钮，5种不同的标题样式，等等。
在开始设计特定内容的界面之前，请尝试回顾一些以前的设计，因为您可能会看到可以重复使用的模式。
我们可以在艺术照片卡上重复使用文章的卡片内容，而不是重新设计新样式（如上例所示）。这节省了设计人员的时间并使界面保持一致。
9.使用品牌颜色作为重点
我们普遍认为品牌色彩必须占据界面色彩的很大一部分。我们很难以干净简洁的设计向客户展示大面积的霓虹黄，橙和粉红色品牌颜色。所以你会怎么做？只需将它们用作强调色即可。
10.亮点
最后，在设计上面的列表时，您可以在边距处创建选择框，符号或数字。这将使列表更清晰，更易读。
我希望这10个设计技巧可以帮助您改进界面设计。
原文：https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9作者：Riel M译者：云天空翻译本文已获得正式授权作者
授权截图
本文最初由@彩云Sky出版于彩云翻译设计。未经许可，禁止复制。
