什么是设计原则,它们是如何工作的?
设计原则控制任何具有视觉形式的对象的外观和行为。这些原则被设计人员在图形软件中的使用转化为应用程序、规则和指南。因此,这些设计原则已被编入设计过程中使用的通用实践中。
在本文中,我们将探讨这些设计原则是什么以及它们是如何工作的。我们还将展示它们的应用示例,以便您可以了解它们在实践层面的工作原理,并研究为什么在设计下一个项目时定期使用它们很重要。
我们所说的设计原则是什么意思?
用于组织或安排设计结构组件的基本思想称为设计原则。设计原则的应用方式会影响情感和设计师意图的表达方式以及设计中信息的传达方式。因此,了解设计原理对您来说至关重要。如果不了解这些原则,您的设计可能一文不值。我知道这听起来可能很苛刻,但这是真的。但不要担心任何事情。你还没有学习设计的原理,一旦你学会了,你的设计可能会给别人留下深刻的印象。
平衡
因此,让我们从学习设计原则开始,这是我们必须研究这种平衡的第一个原则。
但毕竟什么是平衡呢?
嗯,从最笼统的术语来看,平衡实际上意味着一种平衡状态。现在,将相同的定义应用于设计概念。在设计上,平衡是指视觉平衡的概念。这与我们的身体平衡感有关。
好的,请用这种方式。平衡是产生视觉稳定性的作品中冲突元素的一种调节。但现在,你可能想知道设计是如何实现平衡的:让我解释一下
在任何设计中,实现平衡的方法有两种。第一个是对称的,另一个是不对称的。我们将在短时间内详细研究这些类型的每一种类型。但是,让我先告诉你,平衡是一种易于理解的三维物体,尽管当你考虑在设计中应用它时,你可能会对如何实现它感到有点困惑。我还请注意,如果在设计中不能实现平衡,您创建的对象将只是而且肯定会翻倒。
那么,理解平衡的先决条件是什么呢?
理解设计平衡的唯一需要的是想象力。是的,我亲爱的朋友们,你的想象力,这是你有很多的东西,我敢肯定,我有信心。因此,是时候刮伤你富有想象力的头脑,并详细了解设计。要理解二维构图中的平衡概念,我们必须用我们的想象力将三维类比与二维平面进行。换句话说,平衡是对象、颜色、纹理和空间之间视觉重量的分布。如果设计是一个比例,则视觉组件必须保持平衡,才能使设计感觉稳定。
对称平衡
对称是沿中轴左右或上下重复的状态。在自然界中,我们到处可以看见对称的形式,如蝴蝶、蜻蜓、树叶、花朵等等。 对称的形态在视觉上有自然、安定、均匀、协调、整齐、典雅、庄重的朴素美感,很符合人们的视觉习惯。所以在人们的生活中,经常会用到对称图形。
平衡相对于对称具有更为丰富的形态。当画面的对称关系被打破时,可以调整力的重心使画面达到力的平衡。 力的平衡可以分为以下三种情况:
当两个事物相同时,力的重心位于两个事物中间位置,形成了绝对的平衡关系。我们也称这种绝对的平衡关系为对称,画面达到了绝对的平衡关系,给人一种安定平和的形式美感。
当两个事物量感达到平衡时,形象上可以有所差别。 这里说的差别是在保持力的平衡的前提下的差别,是有一定限度的。
当两个事物量感不同时,可以调节力的重心使之达到平衡。 在遇到这种情况时,我们可以通过调节大小、色彩、位置使画面达到平衡。
不对称平衡
非对称的设计是我们在工作中经常遇到的重要概念之一,这种方法有趣而又耐人寻味,十分的吸引人。
这种方法使用起来可能是非常的棘手,这也是为什么有些设计师不选择非对称设计的原因,不过我们其实大可不必规避,因为非对称的设计,每个设计师都是可以做到的,只是需要多花些时间认真规划。
在开始之初,最先需要考虑的是结构和设计项目中对于对称和非对称的匹配关系的概念意识,如果打破常规的设计模式,并且分解成更小的设计组成部分,那么这里面就会包含各种不同类型的平衡关系。(想想有视差滚动的网站或在设计面板中的画布区域的图像)
想想为什么我们正在使用的这种非对称比较好?如果明确知道自己想要的视觉效果,将有助于确定如何通过技术手段来实现这种效果。另外非对称性设计是非常吸引用户注意力的,尽管有些不平衡,但是我们可以通过一些简单的手段使得更加自然。不过要说明的是,在画布上的东西应该相信自己直觉的,但是要确定是:看起来真的好,还只是一种自己的感觉。
在两者之间神奇的实现一种平衡,良好的非对称设计中是包括平衡的,使用这种设计方式会导致整体感有失平衡,这个时候就需要通过在一定的空间里面使用补偿元素,创造和运动的中心点,了解元素之间的视觉重量,加入焦点颜色和视觉引导线以及通过一些网格来创建这种平衡。
径向平衡
径向构图是把视觉元素从一个共同的中心点放射出来,以主要功能点为中心,将其他元素或内容径向编排起来。
优点是能轻松地将用户注意力引导到画面的主要功能点上。
两个页面的设计相似,都采用了径向平衡的构图。通过中心点突出最重要的功能,然后在排布其他功能或数据。径向构图也让整个界面看起来更饱满。
黄金比例
大自然的进化大都是向着协调与平衡的方向靠拢的。许多自然界当中的生物在进化都是这样,而数学家在探索和观察的过程中,发现了这么一个几乎存在于大部分自然界事物和生命中的这么一个公式,或者说比例,也就是今天所说的黄金比例。
黄金比例是大小不同的两个事物之间存在的数学比例,这种比例让这种对比具有了突出的美学特征,这个迷人的数字存在于鹦鹉螺的纹路上,植物的叶柄沿着黄金分割的角度生长,人的肚脐位于人体的黄金分割点上,等等等等。黄金分割在生活中的存在更是数不胜数。
黄金比例是1:1.618,它构成了一个完美的不对称的比例。
黄金比例被发现已经超过4000年了,无数出土的精美的艺术品和宏伟的古代建筑当中,依然可以找到黄金比例的影子。著名艺术家达芬奇和艺术家 萨尔瓦多·达利被认为是黄金比例的忠实追随者,黄金比例也成为了他们艺术创作中最重要、最关键的工具。
只有所有元素都协调地搭配才能让整个设计足够协调。而在设计过程中,合理的运用黄金比例来控制元素和元素之间的大小、数量和比例。进入UI设计流程之后,许多设计师会有意识地开始运用黄金比例。
模式
为了理解用户交互设计中的模式是什么,只需与现实世界的对象进行类比即可。在自然界中重复模式,装饰房间和衣服,或人类行为模式(习惯)具有可预测的重复元素。因此,在设计用户界面时,会遇到常见问题的重复解决方案。
只要您了解哪种模式解决了特定问题,您就可以通过高效工作来节省时间。在创造性旅程的早期阶段,设计师经常犯错误,花费大量时间寻找独特的解决方案,而不是寻找合适的解决方案。在这种情况下,独特并不总是最好的,许多好的解决方案已经被商店的同事使用并且非常成功。
我认为没有必要羞于从最好的方面学习并每次检查自己,实施价值是否超过实施成本。更常见的是,设计师在不深入理解问题的情况下应用此技术。因此,该决定是不恰当的。这导致了在下一个开发阶段难以解决的问题的连锁反应。
还有一个关于模式重要性的小评论,还记得你回家打开灯的那一刻吗?
我不是。这个动作已经调试好了,通过按惯性移动开关,手一段时间后仍然可以到达通常位置。与您的设计相同,没有必要使用户的生活复杂化。我们都习惯了模态窗口右下角的十字架,除非你为自己设定这样一个目标,否则不要分散用户的注意力。但在这种情况下,有必要理解“什么”和“为什么”。
节奏
音乐节奏会带动人的心情高低起伏,那么什么是页面的节奏呢?页面节奏常规是指的就是在同一个页面内容中,间距的样式不要太多,另外间距尽量使用倍数。我们说页面的节奏是指我们页面布局怎么去分割,给予用户什么样的视觉体验,让用户第一眼看到什么,第二眼知道有什么,第三眼发现什么,都是我们视觉思路明确带着用户去体验的。
设计过程中合理使用空白区域。当然此处的“白”并非指白色,而是指界面中没有被界面元素占用的空白区域。恰当地“留白”有助于突出界面元素和改善可用性,引导用户在不知不觉中进入系统的思维框架,从而顺利地、正确地应用这个系统。
层次结构
层次结构在页面上排名设计元素的重要性。您想让某人首先看到什么?它应该是引起强烈号召性用语的网页标题,还是提供更多上下文的照片或插图?让我们深入研究这些设计示例,并学习如何创建更好的层次结构。
层次结构是用户按重要性处理信息的顺序。在界面设计中,就像在任何其他形式的设计中一样,这个概念是必要的。通过正确使用层次结构,大脑可以对元素进行分组和优先级排序,从而给它们一个特定的顺序,这有助于理解你想要交流的内容和用户的成就感。
在界面设计中,一个常见的问题是过多地使用分散在屏幕上的元素或组件,如果没有按照正确的层次结构放置这些元素或组件,就会产生混乱和导航方面的更大努力。对这些要素进行优先排序对避免这个问题很重要。
为什么视觉层次结构在设计中很重要?
如果设计的每个部分都具有同等的重要性,那么什么都不会脱颖而出。当涉及到网页或应用程序设计时,避免这一点至关重要。使用层次结构将帮助您指导用户正确的路径。这是他们第一次使用此应用程序吗?良好的入门经验将有助于向他们介绍该应用程序的关键功能。同样,一个人对网站的第一印象对他们返回至关重要。
要创建一个正确的层次结构,必须考虑以下七个资源:
尺寸
元素越大,就越容易引起注意。事实上,人们首先看到的是更大的物体,包括文本和图像。使用尺寸层次结构背后的想法是为了给视觉旅程提供一个焦点。
颜色
明亮的颜色比柔和的色调更突出。色彩是一种强大的视觉资源,它的正确使用可以有效地分离屏幕上的元素来优先或优先考虑它们。在界面设计中,通常最强烈的色彩是交互,因为用户需要采取行动或从系统接收反馈。
接近
靠近的元素比遥远的元素更能吸引人的注意力。在创建阅读顺序时,让组使用距离是一个非常可行的资源。人类的视觉倾向于对元素进行分类,因此,使这种分类基本上有利于使用者的脑力工作。
对齐
任何与其他元素相分离的元素都会引起注意。这是因为对齐在元素之间创造了秩序,这条规则的任何改变都会引起人类的兴趣,并因此而引人注目。
重复
重复的样式给人的印象是这些元素是相关的。这种层次结构包括重用接口中相同或类似的元素。重复也提供了一些优势,基于视觉模式。如果某事被重复,那是因为它很重要。
负空间
元素周围的空间越大,它产生的关注就越多。负空间是显示空白画布的区域,不仅可以在周围找到,而且可以在同一元素之间和内部找到。它不适合单一的颜色,而是采用了背景的颜色,给人一种空间的错觉。
纹理
多变和复杂的纹理比平面纹理更能吸引人的注意。墙的平面比人行道的平面更突出。这是因为复杂性总是比极简主义更能吸引用户的注意力。纹理的使用也融入了其他重要的设计元素,如风格和氛围。
一致性
UI设计中一致性原则之所以如此重要,是因为一致性的设计让用户感到舒适
如果有人告诉你一个产品仅仅“凭直觉的设计”就可以成功,他们可能只是在炫耀技能而已。世界上压根就没有“单凭直觉设计”就能搞定的事儿。我们通过社会经验来理解和延伸自己的体验,任何单单凭“直觉的设计“仅仅是一种来自我们先前经验的隐喻或者情景的结合。
这并不是说我们就要硬生生的用一个莫须有的事物来安到一件设计上。但作为设计师,我们确实应该花一些时间来理解,为什么要采用这种设计方式? 为什么它能被大众广泛认知?以及如何把这些知识应用到我们创造的产品上?
UI设计师有义务去理解为什么有些作品看起来就是那么与众不同,新鲜并且有趣。
UI设计中如何保持一致性设计原则?
建立对比强烈的视觉层次感,让重要的内容放大,加粗。
把所有的内容都按网格优雅的对齐,或者也可以引入其它任何一种视觉排列系统
在整个应用中运用一致的配色方案
让所有页面的导航元素保持一致性
在不同的情况下复用相同的设计元素。比如同一个通知元件,在不同的情况中使用颜色来区分它们。
对比度
事实上,对比度是最重要的设计原则之一,它也是每个设计项目中必不可少的设计要求。为什么这么说呢?控制对比度有助于设计项目的组织结构化,建立信息和视觉的层次,让你最重要的部分成为视觉的重心,让关键信息突出展示。善于使用有对比度的设计,能增加视觉的观赏性和趣味性。在相同的布局、相同的视觉元素中,形态和色彩的变化有时候非常单调,但是对比能让变化显得不同凡响。
然而,和绝大多数的设计规则一样,平衡是对比度控制的核心规则。如果对比度反差太大,这样的视觉设计可能是混乱而不和谐的,如果对比度不明显,那么设计作品可能看起来单调而晦暗,毫不突出。
那么,怎么控制对比度才能真正提升设计项目的视觉效果呢?遗憾的是,你所期待的神奇公式并不存在。正如同你刚刚开始学习设计技能的时候一样,对比度设计中的许多技巧不是非此即彼的简单规程。但是如果你认为它过于神秘那就错了,对比度是成就好设计的一种规则,它还是有迹可循的,任何人都可以将它添加到设计项目中,做出优秀的作品。
调整元素大小
如果你试图使事物尽可能相似或对称,那么在您的设计中创建一个明确的焦点可能会非常困难。具有相同尺寸,颜色和重量的元素可能最终变得不明显。
使用纹理和图案
纹理和图案可以帮助你创建高对比度的设计时,他们的特点是显著不同的彼此。例如,将粗糙纹理的背景与平滑的前景文本进行配对,可以增加设计的对比度。
添加颜色
使用颜色为你的设计增加对比度是非常有效的。最好的部分是有几种不同的方法去做它。你可以对比暗色调和浅色,色相和/或色温。
与明暗颜色对比是很简单的。想想深色背景上的浅色文字或者浅色背景上的深色文字。或者,你也可以将不同的调色板组合在一起以使用不同的颜色。
注意对齐和间距
空白和文本对齐有助于建立组织结构,并在UI设计中创建视觉层次结构。例如,如果你正在设计一个包含大量内容的页面,那么在重要元素周围加上空白可以帮助它们脱颖而出,并吸引访问者的注意力。
利用排版
版式对于网页设计是必不可少的,它给了你很多机会来提高你的设计的对比度。具体来说,您可以添加与字体组合、样式和权重的对比。
添加意外的元素
意想不到的元素,如果使用得当,可以给你的设计一个平衡的对比。
尽管这种对比技巧很难掌握,但是有几种不同的方法可以让你开始尝试。例如,您可以通过引入不对称元素来打破干净、对称的设计。或者你也可以在其他中性的UI设计中使用明亮的颜色使它更流行。