火星网校
UI设计的四个重要设计原则和规范
发布时间：2024-03-14 18:50:11 浏览量：229次
视觉设计(作为一门学科)在过去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.密度
这一点很明显，密度越大的东西，无论颜色和大小，重量就越大。
用户界面设计是关于与用户的沟通，使旅行方便，解决他们的问题，而不仅仅是专注于设计美观的图形。我们今天讨论的原则将帮助你获得更好的整体用户体验，通过实践，你将发现自己掌握了这些概念。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
