优秀设计的背后,离不开这11个应该掌握的底层理论。

这是我在 Medium 上看到一位工作超过 17 年的国外设计 leader 写的一篇关于设计原理的文字,讲为什么设计可以变得有效?讲得很透。强烈推荐大家阅读,定有收获!

1. 奇数原则和三分法构图

奇数法则意思是说,在设计作品中奇数元素比偶数元素更有趣。偶数元素在图像中产生了对称,这可能会显得过于正式和不自然。比如,在一行中排列三个或五个卡片会比 2 个或 4 个效果更好,作品会更加让用户感到舒服和自然。

优秀设计的背后,离不开这11个应该掌握的底层理论

Iskos Design 就是用的奇数原则做的网页设计

三分法构图(也被称之为黄金网格规则),在画面中以水平和竖直方向分成 3×3 的网格和 4 个交叉点。这个规则能很好的协助设计师将最重要的元素放在网格的交叉点上,这样可以很容易的设计出满意的构图。

为什么会这样?因为三分法构图创造了类似斐波那契数列(黄金比例)那种不对称的美,产生了更有吸引力的构图。

优秀设计的背后,离不开这11个应该掌握的底层理论

2. 视觉引导线

你希望用户关注哪些地方?高级设计师非常擅长引导用户的视觉焦点,这种引导可以通过可见和不可见的引导线来完成。这些线条在构图中也可以打造一种动感,也能为画面增添视觉冲击力。

达到这种效果通常用特定的形状和线条,或者是它们的组合形成难以察觉的引导线来实现。利用透视、颜色、对比度和正负空间同样可以帮助达到这种想要的效果。

优秀设计的背后,离不开这11个应该掌握的底层理论

从左到右的不易察觉的曲线将用户的视线引导到页面文字上

3. 大小和比例

大小(scale)是设计中一个元素与另一个元素的相对大小。元素通过大小不同创建视觉层次,其中最大的元素首先会吸引用户的注意力,因此看起来是最重要的。常规的设计策略就是将最重要的元素做成最大的,然后逐级递减。

比例(Proportion)不同于大小,类似但有区别。比例原则是指一个整体设计中各部分的尺寸关系。设计中的元素可以有各种大小,但它们之间的大小差异,整体来看就是比例。

熟练地使用大小和比例是实现设计统一的关键。当一些元素的大小过大或过小,或者比例失调时,设计组合就会失去统一性。这种错误可能发生在排版和其他元素上。例如,标题与子标题和正文相比显得过大。当设计元素失衡时,设计就会\"感觉不平衡\"。

优秀设计的背后,离不开这11个应该掌握的底层理论

大小和比例都没做好时(左图),看起来处理的比较细致了,但依然没有做到很好,在大小上正文和标题分不清(右图)。

4. 强调

强调原则用于使设计的某些元素突出(使用对比、接近、比例、留白等)或不突出,即弱化强调(例如在页面底部有一个几乎看不见的\"小字\")。强调是层级之母,因为没有强调就没有层级。

与其他一些设计原则一样,\"强调\"是用来引导人们关注设计,并强调需要重点关注的第一、第二和第三点。首页面和电商转化页面在 99%的情况下都使用这种原则。

优秀设计的背后,离不开这11个应该掌握的底层理论

使用这个原则,在购物网站上强调了标语和产品,转化效果非常好

5. 统一性

统一是指设计元素如何很好地结合在一起,形成\"视觉凝聚力\"。它指的是设计中的连贯性,让人们觉得所有部分都是一起的。每个元素都应该具有清晰的视觉关系,以帮助传达清晰、简洁的信息。整体性好的设计比整体性差的设计更有条理,质量也更高。

运用统一的配色,重复、平衡和对称之类的原则将有助于在设计中形成一种和谐感,也就是一致性。设计中良好的一致性就好比歌曲中一首歌被和谐地唱出来,形成一个完美的整体。

优秀设计的背后,离不开这11个应该掌握的底层理论

一致的颜色、重复的图案、平衡和对称在蒂芙尼的网站上创造了一种统一的感觉。

6. 接近原则

格式塔的接近原则让设计师将同类型的相关元素进行分组。把它们分开得更远,元素就显得越不相关,它们之间的关系就会减弱。一般来说,人们会认为远离的元素是不相关的。

不应该让用户在设计中分辨哪些元素是相互关联的,正如美国邮政服务的例子所显示的那样,缺乏对邻近性的关注会导致直接的认知紧张,损害用户体验。

优秀设计的背后,离不开这11个应该掌握的底层理论

接近原则没做好的案例。由于字段标签离它们下面的字段更近,人们可能会搞混

下面是一个邻近性原则做的好的案例,我们可以看到相关元素是如何通过邻近性关联起来的(分组的元素用紫色表示)。

优秀设计的背后,离不开这11个应该掌握的底层理论

一个把接近原则用好的网页设计案例

7. 一致性

一致性原则使数字产品的使用更加可预测,符合用户的期望。设计中的一致性可以培养熟悉度,它可以提高用户体验、可用性和用户使用效率。另一方面,不一致的设计将产生更多的认知负荷/脑力劳动,并导致困惑和挫折。这就相当于在用户的路径上设置障碍。让用户的心流嘎然而止!

做好一致性可以增强\"审美凝聚力\"。\"我们都知道,当我们使用应用时,应用的导航位置如果经常变化,或者像\"加入购物车\"这样的主按钮在不同屏幕上从红色变成绿色,这是多么令人沮丧。

除了视觉一致性和易用性,品牌一致性在产品设计中也发挥着重要作用。如果没有一致的元素呈现,如排版、配色和图案,高质量的品牌体验将无法传递。

在用户体验方面,一致性意味着在设计中使用相似的 UI 元素来完成相似的任务,即在整个产品中拥有相似的功能和行为。因为可用性是一种评估用户界面易用性的质量属性,所以一致性对用户体验的可用性有很大的贡献。

优秀设计的背后,离不开这11个应该掌握的底层理论

一致性是通过使用相同的配色、排版、间距、模式和交互来实现的。

8. 颜色

颜色在设计中是非常重要,几乎是设计中最具影响力的创意元素。一个深思熟虑的配色可以让一个设计从普通到惊艳,而一个平庸的配色会降低用户的体验,甚至阻碍他们使用产品的能力。

明亮、丰富的颜色比柔和的颜色更引人注目,因此有更大的视觉冲击。柔和的颜色可以提供一个令人愉快的,微妙的配色方案,但适当的对比必须要有,特别是文字,必须保证可读性。

颜色甚至可以用于呈现 UI 中的结构感并指向可用的交互,但为设计制作一个配色方案并不是一项简单的任务。除了品牌化,还必须非常小心地创造颜色的和谐和耐用性,使得它能在各个场景下都能正常使用。

色彩心理学也不容忽视。色彩承载着意义和情感,可以向人的潜意识传递信息。在品牌方面,人们对颜色做了大量的心理学研究,因为在人们与品牌进行任何互动之前,颜色会让他们产生一种本能的反应。例如,蓝色通常被认为是可靠的、安全的和平静的,想想银行;而红色是刺激的,被认为是增加人们的心率,想想饮料包装。

优秀设计的背后,离不开这11个应该掌握的底层理论

一个极简主义的暗色主题设计传达了一个特定的品牌气质,并使用了少量的颜色。

9. 排版

排版在设计中扮演着非常重要的角色,它的重要性再怎么强调都不为过。在构图中,字体样式对人们感知设计的影响比任何其他元素都大,可能除了颜色。

因为我们的大脑以闪电般的速度运转,一个字体会对一个设计产生影响,以至于它可能在不到一眨眼的时间内改变用户的印象。与颜色一样,字体甚至会影响我们的情绪,资深设计师可以通过字体传达情绪和风格。通过选择合适的字体,我们可以传达出稳定、优雅、舒适、可靠、有力等信息。

排版层次结构可以快速建立视觉层次结构,并且通常在其中扮演重要角色。因此,在设计中经常使用不同的字体和字体大小来表示层次结构,例如标题、副标题、正文和引用。

\"除了确保文本清晰易读,排版可以帮助你理清信息层次,传达重要内容,并表达你的品牌。\" ——苹果的人机界面指南

优秀设计的背后,离不开这11个应该掌握的底层理论

兰博基尼的网站巧妙地使用了排版风格和比例来赋予其设计力量。

10. 负空间(又名留白)

Claude Debussy 曾说过,\"音乐是音符之间的空间\"。同样的观点也适用于设计,元素之间的负空间给予设计强调、平衡和统一。

元素周围适当的负空间将焦点集中在元素本身。它强调了内容,并提供了必要的喘息空间,以确保布局不显得杂乱。没有了呼吸空间,人脑就不太可能扫描兴趣点,更容易感到困惑。

优秀设计的背后,离不开这11个应该掌握的底层理论

苹果官网提供了一个利用负空间创造强烈焦点的杰出例子。

11. 最后

人们已经开始期待所有平台和设备上的优化、无阻碍的用户体验。理解设计原则及其交互方式对所有设计师来说都是至关重要的。使用专业技能设计它们是创造具有视觉吸引力的功能性设计的关键。我们不要忘记,美学的完整性会严重影响用户体验。

基于原则的设计是设计师在感觉有点迷失或用尽创意时可以依赖的黄金标准方法。在没有理解和实现设计原则的情况下,也可能实现可接受的设计。然而,这可能需要大量的尝试和错误才能创造出看起来不错的内容,并创造出最佳的用户体验。

产品的美学质量与它的实用性密不可分,因为我们每天使用的产品影响着我们和我们的幸福。但只有精心制作的物品才会美丽。— Dieter Rams(迪特尔·拉姆斯)

当我们不关注由设计原则驱动的设计质量时,我们可能会忽视品牌质量及其所代表的一切。当某些东西设计不好时,品牌就会受到伤害,产品也会受到影响。这就是为什么伟大的设计师在他们的工作中极其严谨, 他们知道\"你永远不会有第二次机会给人留下良好的第一印象。\"

设计的细节成就了设计本身。—— 查尔斯 伊姆斯(Charles Eames)

作者:彩云译设计

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/237828.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年3月2日 12:05
下一篇 2023年3月2日 12:05

相关推荐

  • 单选框设计需注意的两点

    始终都需要默认的选项 对於表单页面设计最突出的问题之一是:用户是否随时撤销他们的行为。这意味着你的表单是否可以支持他们将功能控件恢复到原始的状态。这条准则若单选框设计上,需要至少给予一个风险最小的选项…

    2022年6月25日
    0150
  • 全网难得教程!超详细的SVGA礼物动效设计指南。

    首先想说下为啥要写这篇文章,最近接到个项目任务,制作直播间礼物赠送视觉效果,由于之前没有接触过此类设计,因此在多方打听,并在网上到处探索后发现 SVGA 是个不错的选择,在与开发同学沟通并尝试了另外几种格…

    2023年3月7日 SEO操作
    024
  • 小编分享网页设计和网站建设的区别是什么。

    一般情况下很多人都觉得网页设计和网站建设是同一个内容,其实在字面上理解我们也会发现网页设计就是对我们平时打开的页面进行设计,其具体包括对页面的文字、声音、图片、视频动画等元素进行设计美化的一项工作。…

    2023年6月15日
    00
  • 极光风如何设计?用案例详述热门的极光风设计趋势。

    作为设计师都会时刻关注设计趋势,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好的感官体验。最近黑马哥结合落地产品所呈现出来的设…

    2023年3月1日 SEO操作
    020
  • 怎样保持页面出错时用户的良好体验?

    在出现错误时帮助用户迅速复原 也就是还原功能的设计,这是很多页面设计会忽略的问题,最常见的雷区是无法支持用户快速回到原始的状态,而是要用户重新再来! 尽可能保留用户原始的操作信息 简单来说就是支持用户实…

    2022年6月17日
    0109
  • 浅谈长滚动页设计

      长滚动页面以及无限滚动式页面已经彻底地流行开来,成为了页面设计的常规形式。这两种设计形式并不是巧合,当用户向下进行滚动的时候,所需要的内容与页面会自然地呈现出来,在此过程里通常不会涉及到额外的…

    2022年6月25日
    0115
  • 按钮设计实战解析,17个科学测试+超多案例。

    编者按:按钮设计是 UI/UX 设计的一个基础问题,设计师 Eduard Kuric 为此专门深入地撰写了这个系列文章,这篇是系列的第一篇。他在文章中深入分析了按钮的基础特性,并且深入细致的设置了一套完整的测试,试图彻底…

    2023年3月2日 SEO操作
    05
  • B端产品页面如何设计,从用户专注维度详解B端产品的三种页面类型。

    前言在 B 端产品当中,我们经常看到五花八门的设计页面,很多人会质疑自己,这是 B 端产品的页面么?感觉品牌调性不太符合,B 端产品往往传达给用户的都是严肃、刻板,但是在同一个产品当中,同样会存在这样的差异…

    2023年3月1日 SEO操作
    01

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息