视觉设计 » 优秀设计背后的底层理论(网页和UI设计师需要知道)

优秀设计背后的底层理论(网页和UI设计师需要知道)

发表于: 视觉设计. 评论 (2)
Sponsor

设计趋势年年在变,设计技能也在不断更新,但回到本源,底层的理论知识是不会变的。我自己几乎每年还会翻看一些讲设计基础的书,比如《写给大家看的设计书》之类的,会发现这些原理每次看都会有新的收获。随着工作年数增加,对底层知识的价值认识也越来越深刻,不知道你会不会有这种感觉?

在Medium上看到一位工作超过17年的国外设计leader写的一篇关于设计原理的文章,讲设计如何变得有效?总结得很好。文章很长,为了提高你的阅读体验,我打算分2期来更新,如若你能耐心看完,相信定会有收获!

优秀设计背后的底层理论(网页和UI设计师需要知道)

当没有认知紧张时,用户心流才会发生。当一个设计有效时,你才能体验到认知上的轻松。如果没有,你的“心流状态”就会中断(稍后会详细讨论),让我们陷入认知紧张,于是“设计失败了”。

当基本设计原则被忽略时,这种情况很容易发生,导致设计无法“整合”。这些基本原则包括:平衡性、一致性和视觉层次、负空间、接近性、对比、统一、一致性、配色方案和排版层次等方面。(彩云注:很多人看到这些以为自己都懂,但实际设计时犯错最多的也是这些问题)

从神经科学的角度来说,当一个设计起作用时,我们会“感受到它”。其影响立竿见影。它发生在潜意识里,在一瞬间完成,是人的本能反应。我们不需要把它放在显微镜下分析它。

优秀设计以简洁和优雅而引人注目。乔纳森·伊夫(Jonathan Ive)和迪特尔·拉姆斯(Dieter Rams)都可以算作这种设计思想的拥趸。

人们常说,优秀设计背后的工艺是无形的。然而,这不是随机发生的。不管人们是否注意到,设计的背后是遵循着大量而严格的原理去执行的。伟大的设计师不会在画板上随意地将各种元素组合在一起,这是有方法的。

优秀设计背后的底层理论(网页和UI设计师需要知道)

为什么有些设计具有美的感受,而有些却没有

相反地,当一项设计被认为“有些地方不对劲”时,人们就会下意识地觉得这个设计是有问题的。这样的结果会给品牌或产品带来不好的影响。当一个高端或奢侈品品牌受到高度关注时,这种影响尤其有害。这就是为什么你永远不会遇到设计不完美的香奈儿(Chanel)商店的原因。

“你对一件事的第一印象会建立起你随后的观念,如果一家公司在你看来不专业,你可能会认为他们做的其他事情都不专业。——Daniel Kahneman,普林斯顿大学心理学教授

优秀设计背后的底层理论(网页和UI设计师需要知道)

这不是一个精心制作的设计,会导致认知紧张。你会在这个网站上预订你的行程吗?

我们都同意上面是糟糕的设计,就像建在沙子上的房子,一个忽视基本设计原则的设计将会崩溃。潜意识里,它会立即被认为是破碎的,无论是视觉上、精神上和情感上。

人类的大脑是懒惰的、有偏见的,喜欢走捷径。Daniel Kahneman称之为“低维思维”。当人们看到某种设计时,它的“美学完整性”、视觉感知和神经科学之间存在着相互关联。

当一个设计是合理的,换句话说,它是令人愉快的、有效的,我们会迅速、直观的判断它是合理的。我们的心率降低,多巴胺水平增加,会有一种幸福和平静的感觉。这就像我们听到舒缓的音乐,会沉浸在一种每时每刻的“心流状态” 中。“在这种状态下,人们会专注于一项活动,其他一切似乎都不重要”——来自于一个心理学概念,由 Mihaly Csikszentmihalyi在他的畅销书《心流:最佳体验的心理学》中写道。

优秀设计背后的底层理论(网页和UI设计师需要知道)

你更愿意住进哪个房间?

 

01、设计原则在审美完整性中的作用

苹果的人机界面指南(Apple’s Human Interface Guidelines)几十年来一直在谈论“美学完整性”。它也可以被称为“设计完整性”或“审美凝聚力”。

苹果对美学完整性的定义是“当一个设计的外观和行为与其功能完美匹配时”(彩云注:我的理解就是所见即所得,符合用户的心理预期)。换句话说,设计的构成是产品的一个组成部分。我们将研究决定设计组合成败的设计原则——更多的是关于 UI,而不是关于 UX。

美学完整性不仅仅是关于设计有多好看。它指的是具有明显连贯性的设计:有效的结构和布局,是什么让它产生效果。换句话说,它的元素在视觉层次、对齐、间距、平衡、对称、重复、比例、强调、接近、对比、统一、一致性、配色、排版、负空间等方面都有出色的运用,这里仅举几个例子。

这与“黄金比例”无关,黄金分割不能解决问题。斐波那契数列螺旋没那么玄乎,给设计师带不来惊人的设计。

设计师们在安吉丽娜·朱莉或蒙娜丽莎的脸上画出金色螺旋形时惊呼道:”果然是”黄金比例“(彩云注:但事实上有点故弄玄虚了)。当然,自然界中确实有神圣几何学(黄金比例,又称斐波那契螺旋,是基于此),依赖“黄金螺旋”作为设计原则是一种谬论,它已被多次暴露在其赤裸裸的荒谬中。

优秀设计背后的底层理论(网页和UI设计师需要知道)

这是我的洗衣机,上面叠加了斐波那契螺旋。

“审美的完整性”不是没道理的。这个概念是基于基本的设计原则,是有成就的设计师实践他们的艺术作品的经验总结。

让我们来看看一些设计原则,以及它们为什么会使得你的设计更能更加有效。通常情况下,真正优秀的设计会结合这些设计原则。

我们将探讨以下这些最底层的设计原理:

  • 视觉层次感
  • 间距、对齐和网格
  • 平衡
  • 对比
  • 对称
  • 重复
  • 几率原则和三分原则
  • 引导线
  • 比例
  • 强调
  • 整体性
  • 亲密性
  • 一致性
  • 颜色
  • 排版
  • 负空间

02、视觉层次感

视觉感知的基本规则对任何视觉设计都是至关重要的,因为它们指导着如何尽可能快地传达信息。视觉层次是设计中信息的结构和优先级。它决定了人们接受和处理信息的顺序,因为它以一种视觉方式引导他们。

视觉层次感重在打造视觉优先级。通过巧妙地使用颜色、形状、大小、间距、比例和方向,创造性地使用决定层次的视觉元素来传达构图的意义、概念和情绪。

核心关注点是什么,你希望用户首先注意到或开始阅读的设计中最重要的元素是什么?我们想让它成为焦点,然后其他部分的设计从这里展开。

优秀设计背后的底层理论(网页和UI设计师需要知道)

一个具有良好视觉层次的网站会引导用户关注重要的部分

视觉层次对于每一种视觉设计都是至关重要的,无论是需要引导访客眼球的首页还是移动端UI的导航入口。用户对每个元素的理解取决于组合中的其他元素及其上下文。

建立视觉层次的一些技术是:位置、大小和比例、颜色和对比、间距和亲密性、负空间、纹理、引导线和高度。在一个元素周围使用丰富的负空间可以使它看起来更有意义。使用引导线可以创造移动,就像一个人的眼睛在设计上移动一样。排版的层次结构也扮演着重要的角色,通过不同的大小和权重,我们可以让更重要的文本元素脱颖而出并建立秩序。

加分技巧

  • 使用一个隐形三角形连接设计中的三个重点区域(构图)。
  • 注意古腾堡图模式(Gutenberg Diagram)、F 模式(F-Pattern)、Z 模式(Z-Pattern)和层蛋糕模式(Layer Cake Pattern)的视觉扫描,并顺应趋势而不是反对趋势。(彩云注:这里的这些模式彩云就不过多介绍了,感兴趣的可以自行了解下)

优秀设计背后的底层理论(网页和UI设计师需要知道)

没有视觉层次的网站没有明显的兴趣点。

03、留白、对齐和网格

设计中的对齐和间距通过空间上的连接传达出一种秩序和组织感,这两个原则都在设计背后发挥重要价值。设计师早期学到的基本知识之一是在网格上编排设计,然后对齐和分隔这些元素。

左对齐、居中对齐、右对齐都没错,但你必须对齐,否则当元素没有对齐时,设计就会给人崩溃的感觉。它给人一种不安的感觉。

优秀设计背后的底层理论(网页和UI设计师需要知道)

没对齐的话,眼睛看着很难受

网格有很多不同的类型:列网格、基线网格、模块网格、层次网格、像素网格等。不同设计使用不同网格,但最基本的是设计元素的对齐和间距。

优秀设计背后的底层理论(网页和UI设计师需要知道)

(Illustration courtesy UX Engineer)

网格可以被打破。一个死板的构图可能会在视觉上无趣,除非一个元素从网格中脱颖而出。错位或“打破网格”是赋予元素更多视觉权重的一个机会。当在设计中设置视觉层次结构时,它可以用来强调某些东西。

优秀设计背后的底层理论(网页和UI设计师需要知道)

有时打破网格可以创造强调和移动

04、平衡

设计上有两种平衡:对称和不对称。所有的构成元素:排版、颜色、图像、形状、图案、留白等,都具有一定的视觉重量。有些元素很重,很吸引眼球,而有些元素很轻,感觉不那么重要。

这些元素的放置方式能够在对称设计中创造出一种平等的顺序感,或者一种稍微偏离平衡能够创造出一种不对称的设计。无论对称还是不对称,我们的大脑都被某种平衡感所吸引,因为它创造了和谐、秩序和美学上令人愉悦的结果。

优秀设计背后的底层理论(网页和UI设计师需要知道)

多重原则:平衡、对齐和对称在网站上发挥作用

05、对比

“对比”指的是使设计中不同的元素更容易区别开。强烈的对比可以在设计中强调一个区域,而微弱的对比可以弱化它,创造一个视觉层次。对比在设计中也扮演着重要的角色。对比不足会使文字特别难以阅读,尤其是对视力有障碍的人来说。

优秀设计背后的底层理论(网页和UI设计师需要知道)

在左边的设计中,一些文字和背景之间的对比不够。

Web内容可访问性指南 (WCAG)呼吁“文本的视觉呈现应该有至少4.5:1的对比度”,除了大规模文本,它应该有至少3:1的对比度。因此,设计师需要确保内容保持舒适易读。(彩云注:具体可用性配色工具,彩云之前的文章中有分享过,现在这种可用性颜色已经越来越被重视了,你也要用起来啊)

其他UI元素(如各种显示器和设备上的卡片、按钮、文字和图标)之间的适当对比也是必须的。如果UI元素之间没有明显的区分度,设计就容易产生混乱。

06、对称

在格式塔原理中,对称和秩序的法则也被称为prägnanz,德语单词“好身材”的意思。这个原理说的是,大脑会以尽可能简单的方式感知模糊的形状,这都是为了节省大脑能量。

我们倾向于寻找一切事物的对称性。几项研究发现,面部对称能提高人们对人脸吸引力的评价(尽管完全对称的脸其实并不一定那么有吸引力)。该理论认为,这种偏好与选择DNA最好的伴侣的进化优势有关。

对称在自然界中也无处不在。看看一只蝴蝶,一朵花,或者一只海星。

优秀设计背后的底层理论(网页和UI设计师需要知道)

对称

同样的原理也适用于数字领域,平衡对称的设计更令人愉悦。

优秀设计背后的底层理论(网页和UI设计师需要知道)

对称性在应用中发挥作用。Uber Eats、Booking.com和Behance。

07、重复

重复是一致性的近亲,是优秀可用性的标志。

在设计中利用重复是件好事,因为我们的大脑总是在寻找模式、相似性和一致性。为什么?因为重复相同性质的元素需要更少的认知努力。

我们更容易识别重复的模式,而不是每次看到新模式都要重新校准大脑。正如前面提到的,大脑作为一种生存机制是懒惰的,模式识别和认知捷径意味着有意识地处理视觉信息所需的能量更少。

例如,重复元素的形状和大小、填充、留白、类型和颜色,也有助于更对称、更好地平衡,做出美观的设计。

优秀设计背后的底层理论(网页和UI设计师需要知道)

The Athletic这个软件就是用重复元素做设计的好例子。

好了,为了照顾大家的阅读体验,再写更多估计有很多人要开始没耐心了。

原文链接:https://mp.weixin.qq.com/s/pwzIJGm6DTMCKOfX0rLhHw作者 | 彩云Sky 来源 | 彩云译设计(ID: caiyunyisheji)

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论2 Responses to “优秀设计背后的底层理论(网页和UI设计师需要知道)”

  1. XS - 回复

    看似讲的头头是道,实际都是蜻蜓点水,讲一堆给小白听的

    • 设计 达人 -

      欢迎发表您的见解


{ 发表评论 }