ui设计规范文档大全（详解ui设计规范和规则）

视觉设计(作为一门学科)在过去20年里的发展超过了其他任何学科。曾几何时，设计师只被视为执行者，而今天设计师使用最便利的工具(比如Sketch, Figma, Invision)，并拥有最好的在线资源(比如Dribbble, Muzli)来协助他们完成日常工作。

今天我们越来越多地使用数字产品，朝着一个完全数字的生态系统发展，UI设计是界面呈现的推动者，我们每天与之交互。设计师在享有更大权威的同时，也肩负着更大的责任。

随着专业的发展，技巧和趋势也许在不断地变化，但重要的是需要坚持的UI设计本质概念和原则是永恒。今天UXD给大家介绍四种非常基本但十分关键的原则。这些原则可以确保你每次设计UI数字产品时，都能获得令人难忘的产出。

 

01

Hierarchy

Hierarchy层级就像它的传统意义一样，是按照项目在屏幕上的重要性或重量进行排列。视觉层次解释了我们如何有效地组织内容和设计元素。拥有更多视觉权重的元素更容易吸引用户的注意，这是很自然的，在设计布局时应该考虑这种行为。

•建立布局元素之间的视觉关系 •然后给每个元素添加不同的视觉权重 •最后创建眼动模式

例如，博客的标题比正文需要更多的关注。类似地，在界面设计中，一个行动召唤(CTA)可能比其他的更需要特殊的重要性。每当我们试图用视觉来理解信息时，我们首先会观察我们所看到的东西的相似性和差异性，这些关系使我们能够区分物体。

让我们来讨论4个基本元素，看看它们是如何建立视觉层次的。

1.大小

大小是一个重要的工具，特别是在文本的情况下。人类倾向于认为大文本更重要。此外，较大的元素更容易被注意到，这就是为什么我们的眼睛会自动捕捉到较大的文本、图像或插图。所以设计师应该理解屏幕上每个元素的优先级，并相应地调整它们的大小。

2.颜色

颜色在等级创造中扮演了一个有效的角色，即使是最基本的颜色黑色或白色也会对用户的浏览模式产生巨大的影响。用户会与颜色产生情感上的联系，所以可以巧妙地使用不同的组合来引导用户对你的数字产品采取预期的行动。有不同的色调可供选择，例如，柔和、大胆、明亮。设计师应该对色轮做详细的研究，以掌握颜色的选择。

3.对比

对比建立层次结构，我们使用颜色、字体重量、字体大小等来创建对比。我们将在下一节中详细讨论这个概念。

4.空白

留白是一种视觉设计元素，而不仅仅是一块画布，如果使用得当，它可以帮助你创造出很棒的界面。它基本上是多个设计元素之间的区域，帮助用户理解元素之间的关系，所以适当的负空间对于传达正确的信息是必要的。

02

Contrast

Contrast对比是帮助我们设计更好的界面的另一个重要原则。这不仅仅是关于颜色的明暗对比或大小的对比。对比可以帮助我们更好地组织内容，也可以帮助用户关注某些元素。除了强调元素之外，它还创造了视觉平衡和设计兴趣。然而，过多的对比会让用户感到困惑，因为对比可以创建许多焦点，用户可能会发现难以采取预期的行动。设计师可以通过如下方法创造合适的对比:大小/颜色/重量/风格/有无衬线字体/填充

 

03

Proximity

Proximity邻近性这个原则描述的是：如果视觉元素在视觉上相似，那么它们就被认为是相关的。这样视觉上相似的元素主要被看作是一个组，而不是单个的元素。

因此，我们可以在UI设计中，使用邻近原则来对彼此相关的相似信息进行分组。例如我们在标题下面写潜台词来支持它。接近的原则使界面更容易被用户扫描和掌握。事实证明，邻近性比颜色、形状或样式等其他工具更重要。

在界面设计中，邻近性扮演重要角色的一个领域是排版。用户不喜欢阅读冗长的文本，他们很难识别重要的信息。因此设计师应该将大的主体复制块分解成更小的块，以便用户能够轻松地掌握和消化信息。相反属于不同类别的物品必须放置在足够远的地方，以防止任何负面影响。

04

Balance

一个平衡的构图感觉稳定和赏心悦目，而一个不平衡的设计会产生不稳定和分心。视觉平衡是关于在设计中拥有相同比例的消极和积极元素。

一个平衡的构图可能会有一些区域吸引用户的注意，但它不应该与其他元素的可见性冲突。记住，视觉平衡应该模仿现实生活中产品的物理平衡，以保持用户对设计的关注，设计师可以通过元素的视觉重量来平衡构图。视觉权重可以由元素的突出程度决定，有多个参数会影响元素的视觉权重，例如大小、颜色、对比度和密度。

1.大小

人类的大脑倾向于把越大的东西解释为越重。同样的心理也适用于数字界面。

2.颜色

在颜色的情况下，它的工作原理是不同的，即，尖锐和大胆的颜色有更多的重量。一个元素即使尺寸很小，但颜色很醒目，如红色、深蓝色等，也会引人注目。

3.对比

明暗元素之间的差别叫做反差。在界面设计中，如果我们想要吸引用户的注意或者想要突出一些东西，我们就会使用对比。但自然地，深色元素会更加突出。

4.密度

这一点很明显，密度越大的东西，无论颜色和大小，重量就越大。

用户界面设计是关于与用户的沟通，使旅行方便，解决他们的问题，而不仅仅是专注于设计美观的图形。我们今天讨论的原则将帮助你获得更好的整体用户体验，通过实践，你将发现自己掌握了这些概念。