UI界面设计元素和原则

设计元素和原则

没有基础的设计是没有飞行员的飞机,不会去任何地方。

你有没有见过任何一件设计,可能是印刷的或数字的,并且觉得有些东西是错误的,不对劲的,或者传达的信息与它的想法不同?最有可能的是,该设计缺乏对基本建筑元素和原则的不适当实施。

设计元素是任何设计的基本单元,它们共同形成一个结构以传达信息。点、线、形状、形式、纹理、颜色、值和空间等元素;是我们可以在任何设计的组成中找到的各种元素。

为了在任何设计中有效地利用这些元素,设计师创造了一些基本原则,将这些元素组合到设计中,以使其有意义并传达信息。当然,原则可以被视为规则,可以打破的规则,但你必须首先知道它们是什么以及如何玩它们。这种做法并不建议一次使用所有原则,这取决于设计的意图或要求。你使用这些原则的方式决定了你的设计的成功程度。

重要的是要意识到,每个设计都是由设计元素组成的,就像墙上的砖一样。但是要建造一堵墙,应该有一些规则来使其坚固并防止它倒塌。设计原则将成为确保强度的规则。 我们使用它们的方式决定了设计是否会成功。因此,现在让我们更深入地了解这些概念。

设计元素

艺术家和设计师理论家梅特兰·E·格雷夫(Maitland E. Grave)在1941年将设计元素定义为“构建所有设计的材料”,可以是点,线,形状,形式,纹理,颜色,价值和空间。让我们逐一解决它们。

a. 点是任何图形或艺术表达的最小单位,它鼓励头脑思考它的位置,并提供想象力和空间中的一切。

b. 线条是由在空间中移动的点定义的艺术元素,是一种长度大于厚度的元素,可以是不间断的、破碎的或暗示的。直线可以是垂直的、对角线的、水平的,甚至是弯曲的。它可以是任何宽度、大小、形状、位置、方向、间隔或密度。

尽管线条在形式上是基本的,但它会影响观众的思想和感受,并将观众的眼睛引导到空间中。也可以对其他元素进行分组或划分。

c. 形状可以定义为占据空间中确定区域的二维元素。每个图形都包含形状以及图形,其中可能包含其他元素,如颜色、线条、纹理和值。

d.在形式上,我们有一个三维元素,它可以是几何的(人造的)或自然的(有机的)。它可以通过高度、宽度和深度来测量,无论是数字还是物理。主要通过组合形状创建,可以通过颜色或纹理增强。

e. 纹理可以赋予表面触觉外观和感觉,即使纹理是数字的,也可以给人一种物理感觉的错觉。我们可以为线条、形状和形式赋予视觉纹理。它们能够吸引或分散观众的眼睛。

f. 颜色可以帮助组织设计并突出特定区域或动作。像其他元素一样,它具有不同的特征:色调、饱和度和亮度。利用这些特征,颜色可能更强烈或更暗(饱和),更暗或更浅(亮度也称为值)。由于这些特征,颜色传达不同的信息和情感,尽管重要的是要记住,不同的文化对每种颜色都有不同的内涵。


在设计中,没有颜色被认为是黑白的,即使黑色和白色是颜色。这意味着颜色是一个并不总是存在于设计中的元素,这取决于我们可以摆脱它的意图。

g. 空间与设计施工所需的面积或房地产有关。空间涉及二维区域,但也可以使用阴影、阴影、重叠和大小调整在平面上产生第三维的错觉。

与颜色一样,空间不是我们设计中必须始终存在的原则。然而,这是在设计中添加焦点或强调元素的好方法。

设计原则

如今,我们可以找到一堆定义设计原则的不同文章,但没有为它们设置标准编号。随着时间的推移,肯定会有新的原则出现。由于设计是一种不断发展和创造性的实践,因此没有明确数量的原则,但作为设计师,我们应该始终注意遵循6个基本原则,以确保设计成功。

在这里,我们将尝试了解它们的正确实现如何产生影响。

a. 对比度

它通常是使您的设计“流行”的神奇关键因素,这是许多设计客户非常普遍(有时令人沮丧)的需求。可能当你想到对比度时,你首先想到的是颜色,但对比度可以以不同的方式带来,你也可以玩大小和重量来产生对比。

对比度的另一个好处是可读性和易读性,这对于文本等元素非常重要。在下面的设计中,我们可以通过排版、形式和颜色找到对比度的多种应用。

首先,海报传达了两个元素之间的二元性。此外,使用不同的颜色和字体粗细提高了“对比度”一词的可读性,这表明对比度可用于使您的设计在视觉上“流行”,并引起人们对设计某些元素的注意。这是一个基本概念,但如果执行得当,它有助于一个美丽而成功的设计。

b. 等级

想象一下,一个设计以与应有的顺序完全不同的顺序传达某些东西,该消息可能会被错误传达,甚至更糟的是,甚至无法理解。

这就是层次结构的力量,作为设计师,我们必须在用户没有意识到的情况下引导或驱动我们的用户。在上图中,眼睛捕捉到的第一件事是红色的大字母完全改变了用户阅读消息的方式,这是层次结构使用不当的明显例子。我们的设计应该以我们实际期望的方式传达信息。层次结构设置了用户进行设计的方式,给出了起点,他将把眼睛一直放到他将引导他们的最终点。

层次结构可以通过大小,颜色,重量,位置给出,甚至对比度都可以成为改善层次结构的好工具。现在,您可以看到多个原则如何协同工作以创建一个好的设计。

在上图中,我们可以找到多个元素,但由于元素的排列,从视觉上看,图像在右侧的权重更大。虽然平衡并不意味着它应该是对称的,但当你在设计的两边都有相同质量和数量的元素时,你可以找到对称的平衡,或者当你在设计的一侧有一个大元素,而在另一侧有一堆小元素时,你可以找到对称的平衡,它们共同赋予大元素相同的视觉重量。

d. 邻近性

在超市里,你知道你可以在一个地方找到任何清洁产品,因为它们都在清洁区。邻近原则遵循相同的逻辑,通过在您的设计中安排具有紧密接近的相似元素,这有助于我们组织设计元素并改善其中的焦点。

在上图中,我们可以在右手看到,我们有一个备用的元素,在设计中造成混乱和混乱,元素之间没有关系,而不是在左手边,我们让元素以我们可以将它们关联的方式排列在两个不同的组中,接近具有提供秩序和更干净外观的质量。

在下面的示例中,我们可以看到信息的接近性如何使两张名片之间的差异,在左手边,我们有少量的信息,这些信息赋予了这种凌乱的外观和感觉,并且很难知道信息的层次结构。在右边,我们实现了邻近性,电话号码和网站是联系该公司的方式被分组,地址和公司名称也是接近该公司的方式也被分组,创造了一个更易于理解的设计。

e. 空白

设计元素的存在对设计产生了重大影响,以及它们的缺失。空白或负空间不一定是白色,它可以是背景的任何颜色。空白旨在使您的设计对眼睛感到舒适,并在您的设计中提供呼吸空间,以减少混乱或抽筋。

在上面的比较中,我们可以看到在元素之间留出这些空白空间如何减轻整体构图的重量,使右图像比左图像更舒适。

此外,空白可用于 c 为仅具有该元素的轮廓或轮廓的元素提供错觉效果。在下面的示例中,我们可以看到设计师如何使用此海报中的空白空间来传达这个角色拥抱长发的人,只是带有剪影的印象。

f. 对齐

对齐是一个非常重要的概念,它使我们能够在元素之间建立关系,即使它们之间没有直接关联,对齐也提供了一条无形的线,有助于连接它们并引导眼睛。 通过对齐组件,查看者可以更加有序和清晰地解释设计,并且可以更好地关联其中的元素。

如上图所示,有 6 种原则对齐方式,右、中、左、上、中、下。尽管对齐方式可能与美工板以及其他元素有关。在下面的示例中,我们可以识别不同的对齐方式,这些对齐方式使我们能够将每个图像与菜单中各自的板详细信息相关联。

我们刚刚了解了六个基本原则,尽管有更多的原则可以单独发挥,也可以与其他原则一起与您的设计一起发挥作用,具体取决于您的设计意图。

提示/最佳实践

在应用任何原则之前,请考虑设计的意图。

尽量不要同时使用所有原则。根据设计的目的使用它们。

上海UI设计公司,用户体验设计咨询公司,人机交互设计公司,交互设计公司,UI设计公司排名,UI外包公司


首页 > 新闻资讯

Tag: 上海UI设计公司 用户体验设计咨询公司 人机交互设计公司 交互设计公司 UI设计公司排名 UI外包公司
留言