干货 | 帮助创建有效用户界面的5个设计技巧

https://www.jianshu.com/p/5129fac811cb

干货 | 帮助创建有效用户界面的5个设计技巧

LDesign1 关注

0.183 2019.12.03 14:27:56 字数 3,470 阅读 75

设计是很困难的。设计不仅是为了解决问题，而且在理想的情况下，它们应该让人们在过程中感到快乐和愉悦。设计是一种技能，是一门手艺，这门手艺并不总是那么容易获得。

伟大的设计师想出一个主意，不断地重复，并将指针稍稍向前移动，指向一个新的、向前的方向。这不是剽窃，这是艺术。然而，最具开拓性的设计师们往往是跳跃性的。他们设计的东西我们甚至不知道自己想要什么——直到他们设计出来。

我已经做了几年的设计，我很幸运能在不同的领域进行设计。在过去的很长一段时间里，一直从事用户界面设计和用户体验设计。

设计用户界面可能具有挑战性，因为我们作为设计师承担着许多责任。我们要求用户实现他们的目标。我们希望引导他们及时完成。我们希望减少学习和认知工作。我们希望提高认知度。我们希望他们体验快乐。无论他们是认真的，有趣的，强制性的还是无聊的互动，最终我们都希望他们至少对摆在他们面前的输出有愉快的体验。

那么我们如何实现这一目标呢？

用户界面技巧

Web上有很多指南，特别是对于设计师而言。互联网中，充满了杰出的人才，他们都展示了自己的工作以及如何做自己的工作。我当然不是专家，我是一位始终存在增长空间的设计师。但是，根据我自己的工作总结，我发现了一些技巧，这些技巧在我每次进行新项目时都会不断地与之相关。当我能够创建成功的设计界面时，这些技巧将有很大的帮助。

技巧1：创建排版层次结构

层次结构：根据人员或事物的重要性对其进行排列的系统

排版应始终遵循基本的层次结构定义。印刷业即使不是第一个发布视觉排版层次结构的媒体，也是其中之一。想象一张报纸。它包含一个主要标题-最大的印刷要素，副标题-通常是文章标题和正文-文章本身。

定义明确，结构良好的类型层次结构可营造秩序感，并帮助用户以自然的阅读模式阅读。由于将重要元素与次要元素区别开来，因此提高了它们的速度和数据定位能力。

如何创建排版层次结构？

首先，我建议减少字体样式的数量。我发现3个标题样式和2个主体样式已经足够创建5个样式了。我还建议只使用两钟字体的权重。常规和粗体，或者轻和中度，取决于每个字母形式的本身字符厚度。本质上，重量的差异应该是明显的，足以帮助区分重要的元素。

看起来如何？

这里只有三种字体，但很容易被吸引到标题上，然而，这并不妨碍眼睛自然地阅读接下来的故事。这种字体使用了轻和中度粗体，因为它有较重的粗体，在我看来，这与其他粗体形成了强烈的对比。只使用两个权重值可以使主体突出句子的关键部分。

另外一个与排版有关的技巧是将排版样式风格降到最低限度。丰富的风格和字体家族可以创造一种马虎和分裂的感觉。避免使用混合斜体和粗体。我更喜欢只使用一个字体家族，但是，如果所有的标题都使用一个字体族，而主体使用另一个字体族，那么采用两个字体族是有效的。在这种实践中，使用有衬线字体和无衬线字体通常会产生最佳效果。

技巧2.保持一致性

一致性消除了混乱并减少了学习。

混乱是一种不舒服的情绪。我们的大脑喜欢划分区域。混乱需要努力认知来计算当前的不确定性。具有相同交互作用的元素的多种设计样式；例如，多种主要按钮样式或多种输入样式有可能引起用户混乱和不确定性。

采用一致的设计模式有助于消除混淆，并减少用户期望的认知工作量。

一致的设计模式还减少了用户存在的选项数量，因此减少了单次使用交互行为的数量。删除选项可以增加剩余选项的熟悉度和期望值。

如何保持一致？

在创建界面设计时，重复使用是一个很好的动词。一旦你对描述元素(如主按钮)的样式感到满意，就可以将其创建为可视组件，以便可以反复使用它。如果你需要相同元素的类似实例，但需要进行小的更改(例如主按钮的小版本)，请使用原始的主按钮组件并减少内部填充，以创建一个新的但几乎相同的版本。避免改变其他视觉元素，如边框半径或厚度，甚至避免改变字体的权重，因为像这样的小调整都会给用户造成潜在的混乱。

如果使用Sketch、Figma或adobexd，这些工具都促进了创建可重用设计组件的想法，因此我完全支持利用这些功能。

一致性是什么样的?

上面的例子说明了如何将主按钮和辅助按钮设计得既不同又一致。许多元素存在于一个单一的界面中，因此减少相关元素的不同风格和解释的数量是很重要的。保持简单的视觉效果。保持风格一致。

技巧3:创建自然的灰色

在创建调色板时，我总是选择两个主调色板来构建我的界面。第一种是单色调色板，它提供了来自同一色调的不同状态和阴影。这基本上是一个灰到黑的调色板。第二个是复制单色调色板，只是我增加了蓝色和绿色值的色彩组合。在单色调色板中使用红色（R）、绿色（G）和蓝色（B）的均匀混合没有什么问题，但是在我看来，一旦蓝色或绿色的值改变，它就会去掉一些“冷酷”风格。

这种方法还有助于增加对比度的元素所占的表面积较小。对于可能充当分割线元素的单个像素边框或其他设计修饰（例如无效或禁用的标签），创建现有灰度的第二种版本并增加颜色值会使颜色稍微加深，而无需创建新灰色。

如何创建更自然的灰色调色板？

此过程没有对，错或科学的方法，只需您自己判断即可。

我首先复制灰色单色调色板，然后通常尝试保持“红色”值不变。但是，对于较深的阴影，红色值的确会略有减少，因为在向下移动调色板时需要减少白色的量。

然后，我将“绿色”和“蓝色”值增加到对灰色的自然外观感到满意的程度。我尝试避免将每个值增加5点以上，因为这有可能创建一个全新的阴影，而不是其灰色前身的自然版本。

蓝灰色调色板是什么样的？

下面显示了我用于创建用户界面设计的两个调色板。这些颜色还有其他较暗的混合，但是出于本文的目的，我将图像裁剪为仅显示5个级别。

如你所见，此方法将创建更自然的灰色调色板。当我们在自然环境或建筑环境中环顾四周时，灰色永远不会100％是红色，绿色和蓝色。阳光，反射，阴影和明亮的蓝天，都扭曲了我们对颜色的判断，尤其是灰色。建筑物可能只使用了一种色调的灰色油漆；但是，我们的解释并不总是能反映出这一点。

技巧4.不要依赖不透明度

在为导航条或标题等元素创建设计时，减少前景排版与背景之间的对比度的一种常见方法是将字体涂成白色，然后降低其不透明度。问题是这会造成不一致。这样做的原因是不透明度是两个元素之间的颜色混合;前景和背景。如果其中一个元素是一致的，例如我们的白色导航排版元素，但背景颜色是不一致的，即一个渐变的颜色，每个前景导航元素将出现不同的，因为他们被放置在一个不同的背景颜色。

另外，如果前景颜色与背景元素的色调/颜色相同，但没有任何不透明度，背景渐变将不会影响前景元素的外观，因为不会发生颜色混合。

实际上这是什么样的？

此图清楚地显示了左侧示例中的“我的账户”标签看起来比右侧示例更不饱和的情况。结果，该字体看起来灰暗且无光泽，这也降低了字体的对比度和可读性。

技巧5.不要害怕留白

Horror vacui，源自拉丁语，是对空旷空间的恐惧。在艺术和数字设计中，填补空白空间的诱惑比我们看到大片空白(负)空间时的不舒服感觉要容易得多。不幸的是，经理和客户经常认为留白是浪费空间，这使得引入和使用留白的任务变得更加艰巨，因为还需要一些教育部分的知识。

正确使用时，空白会在对象之间建立关系，定义顺序和优先级，建议移动，并可以帮助强调或不强调特定内容，例如横幅，促销，主题部分等。

如何处理空白？

首先，把空白想象成正空间。不要害怕。一旦你习惯了在你的设计中引入空白的想法，一个好的实践就是从比你需要的更多的空白开始。是大胆的，是过度的。在内容或UI组件之间创建空间时，首先要有比需要更多的空间，然后慢慢地向内移动，每次减少空间像素的数量。你很快就会找到一个理想的空白空间。

如果你以相反的方式开始，即最初将元素紧密地放在一起，然后慢慢地增加它们之间的空白，那么你引入的空间可能会比上面提到的以相反的方式开始要小。

空白是什么样子？

你可以从上面的示例中看到，尽管右侧的每张城市卡的尺寸都与左侧的相同，但可以感觉到右侧的尺寸更长。我增加了每张卡中的空白量，在城市名称和城市形象之间，每颗星星之间以及通过将城市价格重新定位在右侧来增加了额外的空白。这些调整会在城市名称周围创建更多空白区域，从而提高可见度，突出性和重要性。

最后，我希望你发现这些技巧是有用的。正如我在本文开头提到的那样，这是5个技巧，我总是在新项目开始时就采用这些技巧。这些技巧将有望帮助你创建有效，平衡和成功的用户界面。