- 设计理论 -

少年!快收下这十个改进界面的外挂

作者:刘清 原文出处:海盐社
2018-07-20

21.jpeg

前段时间我分享了《九个提升作品展示的技巧》,今天给大家分享一篇来自菲利宾的产品设计师  Riel M 关于改进 UI 界面的几点建议。

我可能会认为我们大多数人都是从用户界面设计开始的,最小的数值或者其他什么都不知道。 但是即使我们一开始就遇到了困难,我们还是通过大量的设计书籍和文章来理解颜色、字体、布局等工作原理。 在我现在工作的公司 Make Technology 是由用户体验进行驱动的 ,在这里设计不能简单地用颜色、形状和文字来解释。我们会强调"为什么"要做出这些改变以及过程,每当我们创建一个更大的文本、添加一个阴影、或者改变颜色的时候,就必须有一个理由来解释为什么事情要这么做。

因此,在本文中,我将分享从不同的公司、设计师和在我设计用户界面时学到的东西,以及一些新的发现:

* 免责声明: 下面展示的 "Don’t" 的例子并不一定意味着他们是错的。 这是我们如何从一个好的设计解决方案到另一个更好的解决方案的基础。

1、这段文字很重要,那就让它变得更大?

在调整文本的层级关系的时候,使文字更大以强调它的重要性通常不能解决问题所有的问题,就像下面这样:

640.png

文本的层级调整并不是一味的调整字号的大小,而是调整字重、字号、颜色,使他成为一个合适的组合,造成文字间的对比。对比越大文字结构就越清晰。

640.jpeg

那么我们该如何创造如更好的文字对比呢?

•不要使用不同的字体和多于4个以上的字号组合来创建文字对比度和层次结构。

•而对主要内容要大胆的使用更大的字体和颜色,而对次要的辅助内容则要使用更小更轻的。

•创建三种不同的文字颜色,从深色到浅色(参见下面的示例)。通常我使用中间的颜色作为基本颜色和正文文字的颜色。

•请记住,文字对比=字号+字重+颜色

640-1.png

译者注:关于文字的设置可以看下我的另一篇文章《移动界面中的文字设置》

2、使用透明度来调整黑色

手动在颜色选择上下移动选取颜色,所的到的结果并不乐观。在白色的背景下我们有更好的方式设置颜色。

我们都知道使用纯黑色文字颜色(#000)会给读者的眼睛造成紧张的感觉,我们可以使用具有不同不透明度的黑色作为解决方案,而不是手动选择3个或更多的十六进制颜色值。

640-1.jpeg

在上面的例子中,我使用了黑色(# 000)作为我的主色 ,并且根据它的应用位置降低了它的不透明度(即区分出主要内容、次要内容等)

3.用数值来理解颜色

我们大多数人都不擅长挑选合适的配色组合,每当我们看到一个设计有着精心策划的配色方案时,我们都会问自己:"他们是怎么做到的?" (就像下面的一样) :

640-2.jpeg

一直到我了解到:颜色不仅仅是为那些拥有设计天赋的人所掌握,只要学会简单的增加和减少色相,饱和度,亮度(HSB)的数值。 你可以很容易地摆脱那些无聊的白色背景,然后把它变成像上面毕加索配色般的作品: (这里开始我们将使用 HSB 代替 RGB)

640-2.png

那么要加减HSB的那些数值呢?

640-3.jpeg

实际上我们可以采用两种方法,正如我们现在所看到的,两个选项都有相同的基本颜色 # b9f4bc (圆背景) ,但是当涉及到文件夹和条纹的颜色时就不同了。 在我们开始的时候,永远记住第一个颜色对应的色相(H),其次是饱和度(S),最后是亮度(B)。

· 方案A ·

640-3.png

在方案A 中,我依次标出了颜色的顺序(圆、文件夹、条形) ,而这其中饱和度和亮度是变化发生的地方。

现在,可以看到圆基础的饱和度是24亮度是96,这两个值在我们为文件夹创建深绿色时发生了变化。 饱和度从24的变为40(递增 + 16) ,亮度从96的变为82(递减 -14) , 同样在条形上,使用文件夹的饱和度和亮度作为基准值,我们从40增加到44(递增 + 04) ,从82降到75(递减 -07) ,从中我们可以发现:

暗值=饱和度增加亮度递减

亮值=饱和度递减亮度增加

640-4.png

· 方案B ·

640-5.png

在方案B中,同样的原理(我们上面的公式)仍然适用,但色相值会改变。我们在各种设计中使用的术语RGB和CMY现在对我们来说是有意义的。

RGB代表红色,绿色和蓝色,而CMY是青色,品红色和黄色。当我第一次开始配色时,这些术语对我来说并没有什么重要性,直到我遇到了使用RGB和CMY进行颜色组合的发现。

现在在方案 B 中,如果我们想要我们的基础颜色的色相有一个较暗的变化,我们所需要做的就是要移动我的的色相条将它移动到最近的 RGB 的方向,如果想让他的色相更亮就把它移到 CMY 的方向。 例如:

640-4.jpeg

因为我们想要圆背景的产生一个更暗变化,那我们需要将我们的颜色选择器移动到最近的 RGB 所在的方向(在上图中是靠近蓝色)。 但是如果我们想要一个更亮颜色,就要将选择器移动到左边,接近 CMY (这里是黄色)。

*更多的时候,RGB会导致变暗,而CMY会导致变暗 一定要依据配色时的情况做选择。

在将颜色选择器移动到我们想要的变化之后,我们再依据方案 A 中得到的公式,这使得我们得到了方案B 的配色组合:

640-5.jpeg

640-6.jpeg

4.使用大间距分割内容

640-7.jpeg

除了在两组文字之间添加一条分割线以显示分隔之外,在两个组之间使用较大的间距是一个更好更简单的解决方案。

正如接近法则(Law of Proximity)所说:

彼此靠近或接近的对象更容易被人认为属于同一个组合。Objects that are near, or proximate to each other, tend to be grouped together.

从我上面的例子来看,我的目标是通过使用24px之间的大的空白间隙,在我的标题和作者之间创建一个分隔。

从我上面的例子来看,我的目的是利用它们之间24px 的大间句创建一个再标题和作者之间的分割。

5.使用颜色区分列表

640-8.jpeg

在设计列表时很无聊,因为它只需要复制 n 次组件。 但是在用户使用的时候,如果列表和另一行列表之间没有很大的区别的话,阅读它们就会变得很困难。 因此在列表中添加颜色背景对用户来说是很有帮助的,对我们的设计师来说也会更加享受。

6.用正片叠底代替文字投影

640-9.jpeg

如果图像背景是动态的 (或者可以随时更改的), 设计页眉组件或在图像上添加文本是相当有挑战性的。(PS:图片可能看不太清上面的例子文字是加了一层投影)

通常, 具有动态图像背景的文本的通用解决方案是给文字添加投影, 但这并不有助于用户的可读性。反而增加了更多的视觉干扰周围。

对于一些人来说,黑 / 白色的颜色覆盖页是一种解决方案,对于这些设计来说是一个很有帮助的方法。 但是最近,我发现了使用正片叠底作为渐变填充的解决方案。

640-10.jpeg

译者注:关于图片文字的设置方式可以看下我写的另一篇分享《图片中文案的处理技巧》

7.字行长度

640-11.jpeg

大多数设计师所做的常做事就是使字行的长度更长,以便它可以适展示更多的文字占满多大的版面。但这样做会给我们的用户造成眼睛疲劳,而不像每行45-65个字符是理想的。(中文25-35个字符)

如果你曾遇到了缩短字行长度后以达到理想的字行数,但又会在右侧产生一个如下所示的白色空间:

640-12.jpeg

请不要犹豫,依旧做出减少字行长度的决定,你可以选择使文本中心对齐,以便减少空白版面的影响。

640-13.jpeg

8.不要重复造轮子

640-14.jpeg

造成设计不一致的一个重要的原因是它不是基于组件的。尤其是当你意识到你已经制作了5种类型的卡片,10个按钮,5个标题标题样式等等的时候。

在开始创建界面之前,请尝试查看以前创建的设计,因为您可能会发现可以重复利用的组件和样式(如上图)。而不是重新发明轮子创建一个新的样式。这将为设计人员节省时间并使界面保持一致。

9.使用品牌色作为提示颜色

640-15.jpeg

我们通常认为品牌颜色必须占据我们界面颜色的很大一部分。但在追求留白和极简主义的布局的当下,不要大范围向用户展示那些令人震惊的黄色、橙色和粉红色的品牌颜色。

那解决方式是什么? 把它们当作重点操作的颜色就行,不要大范围的使用它。

10.对齐内容

640-16.jpeg

最后,如果您要创建一个像上面这样的列表设计,请在边距中留出空白,以突出显示列表内容。这将使用户的可读性不间断且更清晰易读。

以上就是 Riel M 关于改进 UI 界面的几点建议,在文章中还穿插了几篇我之前写的文章。对于文章有什么建议或者有想和我讨论的,都欢迎大家在文章底部留言。

希望这篇文章能对你有所帮助~

翻译:刘清

作者:Riel M

原文链接:http://t.cn/REiPeW7

22.jpeg

海盐社.jpeg

喜欢就分享
精选评论
  1. 第三个用数值来理解颜色,方案B,Folder的颜色代码应该写错了吧,应该是#6DD699吧,还有下面那个RGB会变暗,CMY会变亮,而不是变暗吧。

    • ༊྄ཻᏴ࿆Ꮻ࿆Ꭶ࿆Ꮥ࿆ 洋࿐