【UI设计】UI界面设计通用技巧！

设计是一种技能，它是一种手工艺品，而且这种手工艺品做起来并非很容易。

设计UI界面可能具有挑战性，因为我们作为设计师承担着许多责任。我们满足用户,实现他们的操作目的；我们希望引导他们及时完成操作；我们希望减少用户学习和认知的成本；我们希望提高知名度，我们希望他们体会到操作的乐趣。

无论他们的互动是认真的，感兴趣的，强制性的还是无聊，最终我们都希望他们至少对摆在他们面前的界面有愉快的体验。

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

一、创建排版层次结构

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

印刷术应始终遵循基本的层次结构定义。印刷业是（甚至不是）出版视觉印刷体系的第一种媒介。想象一张报纸。它包含一个主要标题-最大的印刷元素，副标题-通常是文章的标题和正文-文章本身。

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

如何创建排版层次结构

首先，我建议减少印刷样式的数量。我发现3种标题样式足以满足2种人体样式，总共只能创建5种样式。我还建议仅使用两个粗细的字体。常规和粗体，或轻和中，具体取决于每个字母形式的字符粗细。从本质上讲，重量上的差异应该足以使重要元素与其他元素区分开。

看起来如何？

这里仅存在三种字体，但非常容易被吸引到标题上，但是，这并不能阻止眼睛自然地阅读随后的故事。此字体使用较薄和中等重量，这是因为它具有较重的加粗样式，在我看来，与其他可用重量相比，对比度太强。仅使用两个权重就可以使主体突出句子的关键部分。

与印刷术有关的另一个技巧是使印刷术样式降至最低。丰富的风格和家庭风格会给人一种草率和支离破碎的感觉。避免混合使用斜体和粗体。

我也更喜欢只使用一个字体家族，但是，如果所有标题都使用一个家族，而正文使用另一个字体，则采用两个字体家族可能是有效的。在这种实践中，将sans字体与sans-serif字体一起使用通常会产生最佳效果。

二、保持一致

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

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

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

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

如何保持一致

在创建界面设计时，重用是一个很好的动词。一旦对表示主按钮等元素的样式感到满意，请将其创建为可视组件，以便您可以一次又一次地重复使用它。如果您需要相同元素的相似实例，但需要进行较小的更改，例如较小版本的主按钮，请使用原始的主按钮组件并减少内部填充以创建新的但几乎相同的版本。

避免更改其他视觉元素，例如边框半径或粗细，甚至避免更改字体粗细，因为这样的细微调整会给用户带来潜在的困惑。

如果使用Sketch，Figma或Adobe XD，则这些工具中的每一个都会促进创建旨在重用的设计组件的想法，因此我完全支持利用这些功能。

一致性是什么样的？

上面说明了如何将主要和次要按钮设计为不同而又一致。一个界面上存在许多元素，因此减少各种不同样式和相关元素的解释非常重要。保持视觉简洁。保持样式一致。

三、创建自然的灰色

创建调色板时，我总是选择两个主调色板来构建我的界面。第一个是单色调色板，它从同一色调提供不同的状态和阴影。本质上是灰色到黑色的调色板。

第二个是单色调色板的复制，仅当我增加颜色组合的蓝色和绿色值时。在单色调色板中使用均匀混合的红色，绿色和蓝色值没有什么问题，但是在我眼中，一旦更改了蓝色或绿色值，它就会消除一些“刚性”。

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

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

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

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

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

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

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

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

四、不要依赖不透明度

在为诸如导航栏或标题的元素创建设计时，减少前景版式和背景之间的对比度的一种常用方法是将字体涂成白色，然后降低其不透明度。问题是造成不一致。原因是不透明度是两个元素之间的颜色混合。前景和背景。

如果这些元素之一是一致的，例如我们的白色nav排版元素，但是背景颜色不一致，即具有颜色变化的渐变，则每个前景nav元素放置在不同背景上方时，它们看起来会彼此不同颜色。

或者，如果前景色与背景元素来自相同的色相/颜色，但未应用任何不透明度，则背景渐变将不会对前景色的外观产生影响，因为不会发生颜色混合。

相同的色相/颜色如何应用？

首先，使前景类型与背景元素具有相同的颜色。我打开调色板，并停留在顺化的同一区域；但是，我降低了前景色的饱和度。

从上面可以看到，我选择了位于同一颜色区域内的前景色（右颜色选择器），但是饱和度（蓝色值）降低了。这将两个对象对齐在一起，从而产生更加和谐的色彩平衡。

实际上这是什么样的？

左图使用白色且不透明。正确的图像使用相同的颜色，但饱和度较低。

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

五、不要害怕空白

来自拉丁语的vacuor恐怖片是对空白空间的恐惧。在艺术和数字设计中，填充空白空间的诱惑要比看到大面积的白色（负）空间闲置时感到不适的感觉容易得多。

不幸的是，管理人员和客户经常将空白视为浪费的空间，这使得引入和使用空白的工作变得更加艰巨，因为还需要一些教育方面的知识。

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

如何处理空白

首先，将空白视为正空间。不要害怕。一旦您对在设计中引入空白的想法感到满意，一个好的实践就是从超出您需要的空白开始。大胆。太过分了。

在内容或UI组件之间创建空间时，请从所需的更多空间开始，然后逐步向内逐步减少空间像素的数量。您很快就会找到理想的空白区域。

如果以相反的方式开始，即首先将元素紧密地放置在一起，然后慢慢增加它们之间的空白，那么您引入的空间可能比上述以相反的方式开始时要小。

空白是什么样子？

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

我希望这5个技巧帮助您创建有效，平衡和成功的用户界面。

转载声明：文章来源于网络，不作任何商业用途！