【UI设计】UI设计的4个首要设计原则和规范

2021-04-12
2972
0

 

随着专业的发展,技巧和趋势也许在不断地变化,但重要的是需要坚持的UI设计本质概念和原则是永恒。

 

今天小编给大家介绍四种非常基本但十分关键的原则。这些原则可以确保你每次设计UI数字产品时,都能获得令人难忘的产出。

 

 

平衡构图

 

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

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

1.大小

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

2.颜色

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

3.对比

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

4.密度

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

层级关系

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

•建立布局元素之间的视觉关系

•然后给每个元素添加不同的视觉权重

•最后创建眼动模式

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

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

1.大小

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

2.颜色

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

3.对比

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

4.空白

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

对比手法

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

邻近性

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

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

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

用户界面设计是关于与用户的沟通,使旅行方便,解决他们的问题,而不仅仅是专注于设计美观的图形。

转载声明:文章来源于网络,不作任何商业用途!

免责声明:本文内部分内容来自网络,所涉绘画作品及文字版权与著作权归原作者,若有侵权或异议请联系我们处理。
收藏

全部评论

您还没登录

暂无留言,赶紧抢占沙发
绘学霸是国内专业的CG数字艺术设计线上线下学习平台,在绘学霸有2D绘画、3D模型、影视后期、动画、特效等数字艺术培训课程,也有学习资源下载,还有行业社区交流。学习、交流,来绘学霸就对了。
绘学霸iOS端二维码

IOS下载

绘学霸安卓端二维码

安卓下载

绘学霸微信小程序二维码

小程序

版权声明
本网站所有产品设计、功能及展示形式,均已受版权或产权保护,任何公司及个人不得以任何方式复制部分或全部,违者将依法追究责任,特此声明。
热线电话
18026259035
咨询时间:9:00~21:00
在线客服
联系网站客服
客服微信:18026259035
公司地址
中国·广州
广州市海珠区晓港中马路130号之19
绘学霸客户端(权限暂无,用于CG资源与教程交流分享)
开发者:广州王氏软件科技有限公司 | 应用版本:Android:6.0,IOS:5.1 | App隐私政策> | 应用权限 | 更新时间:2020.1.6