1 / 8
走入设计
设计，这个词在我们的生活中无处不在。从我们早上醒来看到的手机界面，到路上看到的广告牌，再到我们阅读的书籍和浏览的网页，设计无时无刻不在影响着我们的视觉体验和认知感受。那么，什么是设计呢？设计的目的和意义又是什么呢？
设计本质上是一种有目的性的创造活动，它通过视觉元素的组织和安排，来传达信息、表达情感、解决问题。好的设计能够让人一眼就理解信息，产生共鸣，甚至引导行为。而糟糕的设计则会让信息变得混乱，让人感到困惑和不适。作为初学者，我们需要理解设计不是随意的装饰，而是有章可循的科学与艺术的结合。
什么是设计
设计这个词来源于拉丁语“designare”，意思是“标记”或“指定”。在现代语境中，设计指的是为了达到特定目标，对视觉元素进行有意识的组织和安排的过程。设计的目的可以概括为三个方面：传达信息、解决问题、创造美感。
当我们设计一张海报时，我们的目标可能是让路过的人注意到某个活动；当我们设计一个网站时，我们的目标可能是让用户能够轻松找到他们需要的信息；当我们设计一个产品包装时，我们的目标可能是让产品在货架上脱颖而出。无论设计的具体形式是什么，其核心都是通过视觉语言来达成某种目标。
设计的意义不仅仅在于美观，更在于功能性和有效性。一个设计作品如果只是好看但无法传达信息或解决问题，那它就不是好的设计。同样，如果一个设计虽然功能完善但视觉上让人感到不适，它也很难被认为是成功的。好的设计需要在美观、功能和用户体验之间找到平衡。
设计是解决问题的方法，而不仅仅是装饰。每一个设计决策都应该有明确的理由和目标。
Gestalt 设计法则
在20世纪初，德国心理学家们提出了格式塔心理学理论，这个理论后来被广泛应用于设计领域，形成了我们今天所说的 Gestalt 设计法则。格式塔这个词来自德语，意思是“整体”或“完形”。格式塔心理学认为，人类的大脑倾向于将视觉元素组织成有意义的整体，而不是孤立地看待每个元素。
接近性原理
接近性原理告诉我们，在视觉上靠近的元素会被视为一组，而距离较远的元素则会被视为不同的组。这个原理在我们的日常生活中随处可见。想象一下，当我们在看一张名片时，姓名、职位和联系方式如果靠得很近，我们就会自然地认为它们属于同一个人； 如果它们分散在名片的不同角落，我们就会感到困惑，不知道哪些信息是相关的。
在设计中，我们可以利用接近性原理来组织信息。比如，在网页设计中，相关的按钮和说明文字应该放在一起，这样用户就能立即理解它们之间的关系。在排版设计中，标题和对应的正文应该保持适当的距离，既不能太远让人感觉脱节，也不能太近让人分不清层次。
接近性原理的应用需要我们仔细考虑元素之间的距离。太近会让元素显得拥挤，太远又会让它们失去关联性。合适的距离取决于具体的设计情境和元素的视觉重量。一般来说，相关的元素应该比不相关的元素更靠近，但也要保持足够的呼吸空间。
让我们通过两个具体的例子来直观地感受接近性原理的作用。下面的第一个例子展示了元素距离不当的情况，第二个例子展示了如何正确运用接近性原理。
❌ 坏的设计：元素距离不当
在这个例子中，姓名、职位和联系方式之间的距离过大，我们很难立即理解它们属于同一个人。信息之间的关系变得模糊不清。
✅ 好的设计：合理运用接近性原理
在这个例子中，相关的信息被紧密地组织在一起，我们能够立即理解这些信息都属于同一个人。接近性原理帮助我们快速识别信息的分组关系。
相似性原理
相似性原理指出，具有相似视觉特征的元素会被视为一组。这些视觉特征包括颜色、形状、大小、方向、纹理等。当我们看到一排圆点和一排方块时，我们会自然地认为圆点是一组，方块是另一组，即使它们在空间上可能是交替排列的。
在设计中，相似性原理帮助我们创建视觉分组，而不需要完全依赖空间位置。比如，在一个表格中，我们可以用相同的颜色来标记同一类型的数据，这样即使这些数据分散在不同的行和列中，用户也能快速识别它们属于同一类别。在导航菜单中，我们可以用相同的样式来显示同一层级的菜单项，这样用户就能立即理解菜单的结构。
相似性原理的应用需要注意保持一致性。如果我们用红色来标记重要信息，那么所有重要信息都应该用红色，而不是有时用红色，有时用蓝色。这种一致性能够帮助用户建立认知模式，提高信息处理的效率。
让我们通过一个导航菜单的例子来直观地感受相似性原理的作用。
❌ 坏的设计：缺乏视觉一致性
在这个例子中，每个按钮都使用了不同的颜色、圆角和样式，我们很难理解它们属于同一组导航菜单项。缺乏相似性让界面显得混乱。
✅ 好的设计：运用相似性原理
在这个例子中，所有按钮使用了相同的颜色、圆角和样式，我们能够立即识别出它们属于同一组导航菜单。相似性原理帮助我们快速理解界面结构。
连续性原理
连续性原理告诉我们，人的眼睛倾向于沿着连续的线条或路径移动，而不是突然改变方向。当我们看到一条曲线时，我们的视线会自然地沿着曲线的方向移动，即使这条曲线被其他元素部分遮挡，我们也会在心理上将其连接起来。
在设计中，连续性原理可以帮助我们引导用户的视线。比如，在网页设计中，我们可以使用连续的线条或元素来引导用户从上到下阅读内容，或者引导用户关注到某个重要的按钮或链接。在图表设计中，我们可以使用连续的线条来展示数据的变化趋势，让用户能够轻松地追踪信息。
连续性原理还可以帮助我们创建视觉流动。一个好的设计应该有一个清晰的视觉路径，让用户的视线能够自然地从一个元素移动到下一个元素，而不是在页面上漫无目的地游走。这种视觉流动可以通过对齐、线条、颜色渐变等方式来实现。
让我们通过一个内容布局的例子来感受连续性原理的作用。
❌ 坏的设计：视线路径混乱
标题在右边
正文内容在左边，但是...
另一个标题在中间
更多内容又跑到了右边
标题又回到了左边
在这个例子中，文本的对齐方式不断变化，视线需要在页面上左右跳跃，阅读体验非常不流畅。缺乏连续性让用户感到困惑和疲劳。
✅ 好的设计：创建清晰的视觉流动
标题一
正文内容自然地跟随在标题下方，形成连续的阅读路径。
标题二
更多内容继续沿着相同的方向排列，视线可以顺畅地移动。
标题三
整个布局形成了一条清晰的视觉路径，阅读体验流畅自然。
在这个例子中，所有文本都遵循左对齐，标题和正文形成清晰的层级，视线可以沿着一条连续的路径从上到下移动。连续性原理创造了流畅的阅读体验。
封闭性原理
封闭性原理指出，人的大脑倾向于将不完整的图形视为完整的图形。当我们看到一些不完整的线条或形状时，我们会在心理上“填补”缺失的部分，形成一个完整的图形。这就是为什么我们能够从简单的线条中识别出复杂的形状。
在设计中，封闭性原理可以帮助我们简化设计，同时保持信息的完整性。比如，在图标设计中，我们可以用简单的线条来勾勒出一个物体的轮廓，即使这个轮廓是不完整的，用户也能识别出这个物体是什么。在界面设计中，我们可以用边框或背景色来创建一个视觉容器，即使这个容器没有完全封闭，用户也能理解哪些元素属于这个容器。
封闭性原理的应用需要注意不要过度依赖。虽然人的大脑能够填补缺失的部分，但如果缺失太多，或者图形过于复杂，用户可能无法正确理解设计意图。因此，我们需要在简化和清晰之间找到平衡。
让我们通过卡片设计的例子来感受封闭性原理的作用。
❌ 坏的设计：边界不清晰
卡片标题
卡片内容区域，但是...
另一个卡片
两个卡片之间没有明显的分隔，我们很难区分它们属于不同的内容块。
在这个例子中，虽然有两个卡片，但它们之间缺乏清晰的视觉边界，我们很难立即识别出它们是独立的内容块。封闭性不足导致信息结构不清晰。
✅ 好的设计：运用封闭性原理
卡片标题
卡片内容区域，通过边框和圆角形成了清晰的视觉容器。
另一个卡片
即使边框没有完全封闭，我们也能通过视觉边界清楚地识别出每个卡片的范围。
在这个例子中，每个卡片都有清晰的边框和圆角，即使边框不是完全连续的，我们的大脑也能自动填补，形成完整的视觉容器。封闭性原理帮助我们快速识别内容结构。
图形与背景原理
图形与背景原理，也被称为“图底关系”，指的是我们如何区分视觉中的主体（图形）和背景。在大多数情况下，图形是我们要关注的主要元素，而背景则是次要的、提供上下文的环境。这个原理在我们的视觉感知中起着基础性的作用。
在设计中，图形与背景的关系直接影响着信息的传达效果。如果图形和背景的对比不够明显，用户可能无法清楚地识别出主要信息；如果图形和背景的关系处理得当，主要信息就能脱颖而出，吸引用户的注意力。
创建清晰的图形与背景关系可以通过多种方式实现。对比度是最常用的方法，通过颜色、明度、大小的对比，我们可以让图形从背景中分离出来。比如，深色的文字在浅色的背景上，或者浅色的文字在深色的背景上，都能形成清晰的图底关系。模糊背景、使用边框、改变纹理等方法也能帮助区分图形和背景。
让我们通过文字和背景对比的例子来感受图形与背景原理的作用。
❌ 坏的设计：对比度不足
重要信息
这段文字与背景的对比度很低，我们很难清晰地阅读内容，主要信息无法从背景中突出。
在这个例子中，文字颜色和背景颜色过于接近，对比度不足，我们很难区分图形（文字）和背景，阅读体验很差。
✅ 好的设计：清晰的图形与背景关系
重要信息
这段文字与背景形成了强烈的对比，我们能够清晰地阅读内容，主要信息从背景中清晰地突出。
在这个例子中，深色文字在浅色背景上形成了清晰的对比，图形（文字）和背景的关系明确，阅读体验良好，信息传达有效。
图形与背景的关系应该是动态的，而不是固定的。在不同的设计情境中，同一个元素可能既是图形也是背景，这取决于我们想要传达的信息重点。
视觉层级
视觉层级是设计中一个至关重要的概念，它指的是通过视觉手段来建立信息的重要性层次，引导用户的注意力按照设计者的意图流动。 在一个设计作品中，不是所有信息都同等重要，有些信息需要立即被注意到，有些信息可以稍后关注，有些信息则只是作为补充。视觉层级帮助我们传达这种重要性差异。
大小与重要性
在视觉层级中，大小是最直观、最有效的工具之一。一般来说，较大的元素会首先吸引我们的注意力，我们也会自然地认为较大的元素更重要。这个原理在我们的日常生活中随处可见，比如报纸上的大标题、广告牌上的主要信息、网页上的重要按钮，它们都通过较大的尺寸来强调自己的重要性。
在设计中，我们可以通过调整元素的大小来建立视觉层级。标题通常比正文大，重要的按钮通常比次要的按钮大，主要的产品图片通常比辅助图片大。这种大小差异不仅能够吸引注意力，还能帮助用户快速理解信息的结构。
然而，大小并不是越大越好。过大的元素可能会显得突兀，破坏整体的平衡感。我们需要在强调重要性和保持视觉和谐之间找到平衡。一般来说，重要的元素应该比次要的元素明显大，但不需要大得夸张。一个常见的经验法则是，主要元素的大小应该是次要元素的1.5到2倍，这样既能建立清晰的层级，又不会显得不协调。
让我们通过标题层级的例子来感受大小与重要性的关系。
❌ 坏的设计：大小层级不明确
主标题
正文内容，但是...
副标题
更多正文内容，所有文字大小相同，我们很难区分哪些是标题，哪些是正文。
在这个例子中，标题和正文使用相同的大小，缺乏视觉层级，我们无法快速识别信息的重要性。
✅ 好的设计：清晰的大小层级
主标题
正文内容，通过大小差异建立了清晰的视觉层级。
副标题
更多正文内容，主标题最大，副标题次之，正文最小，信息的重要性一目了然。
在这个例子中，主标题、副标题和正文使用了不同的大小，形成了清晰的视觉层级，我们能够立即识别出信息的重要性顺序。
位置与注意力
位置在视觉层级中也起着关键作用。根据阅读习惯和文化背景，不同的位置具有不同的视觉重要性。在大多数从左到右阅读的文化中，左上角是最先被注意到的区域，因为这是阅读的起点。右上角次之，然后是左下角和右下角。在垂直布局中，顶部通常比底部更重要，因为这是视觉的起始点。
在设计中，我们可以利用位置来安排信息的重要性。最重要的信息应该放在用户首先看到的位置，比如页面的顶部、卡片的左上角、对话框的中心等。次要信息可以放在不那么显眼的位置，比如页面的底部、侧边栏、折叠区域等。
位置的重要性还体现在"视觉中心"的概念上。虽然页面的几何中心可能不在正中央，但有一个视觉中心，这个中心通常略高于几何中心。将重要元素放在视觉中心附近，能够更好地吸引注意力。同时，我们也要考虑用户的视线移动路径，将相关信息沿着这个路径排列，能够创造更流畅的阅读体验。
让我们通过信息布局的例子来感受位置与注意力的关系。
❌ 坏的设计：重要信息位置不当
重要通知
次要信息在左上角
更多次要信息
在这个例子中，最重要的信息被放在了右下角，而次要信息占据了左上角这个视觉优先位置，信息的优先级被颠倒了。
✅ 好的设计：合理利用位置
重要通知
次要信息在下方
更多次要信息
在这个例子中，最重要的信息被放在了顶部，这是用户首先看到的位置，次要信息依次排列在下方，符合视觉优先级和阅读习惯。
对比与强调
对比是建立视觉层级最有力的工具之一。通过对比，我们可以让某些元素从其他元素中脱颖而出，吸引用户的注意力。对比可以通过多种方式实现，包括颜色对比、明度对比、大小对比、形状对比、纹理对比等。
颜色对比是最常用的对比方式之一。鲜艳的颜色、与背景形成强烈对比的颜色，能够立即吸引注意力。比如，在一个以蓝色为主的页面中，一个橙色的按钮会非常显眼；在一个浅色的背景上，深色的文字会形成强烈的对比。然而，颜色对比的使用需要谨慎，过多的颜色对比可能会让设计显得混乱，反而失去了强调的效果。
明度对比，也就是明暗对比，是另一种有效的对比方式。明亮的元素在暗背景上，或者暗的元素在亮背景上，都能形成强烈的对比。这种对比方式特别适合需要强调文字或重要信息的场景。在设计中，我们可以通过调整元素的明度来建立视觉层级，重要的元素使用更强烈的明度对比，次要的元素使用较弱的明度对比。
让我们通过按钮设计的例子来感受对比与强调的作用。
❌ 坏的设计：缺乏对比
在这个例子中，所有按钮都使用了相同的颜色和样式，缺乏对比，我们无法识别哪个按钮更重要，用户不知道应该优先点击哪个。
✅ 好的设计：运用对比强调
在这个例子中，重要操作使用了鲜艳的蓝色和粗体字，与普通按钮和次要操作形成了强烈的对比，我们能够立即识别出最重要的操作按钮。
对比的目的是强调，而不是混乱。好的对比应该是有层次的，让用户能够清楚地识别出最重要的信息，同时不会感到视觉疲劳。
CRAP 设计法则
CRAP 设计法则是由设计师 Robin Williams 提出的四个基本设计原则的首字母缩写，它们分别是：对比（Contrast）、重复（Repetition）、对齐（Alignment）和亲密性（Proximity）。这四个原则虽然简单，但却是所有优秀设计的基础。掌握这些原则，我们就能创造出既美观又有效的设计作品。
对比
对比原则指的是通过差异来强调重要信息，让设计更有视觉冲击力。对比不仅仅是颜色的对比，还包括大小、形状、方向、纹理、空间等多个方面的对比。强烈的对比能够立即吸引注意力，而微妙的对比则能够创造层次感。
在文字设计中，对比可以通过字体大小、字重、颜色等方式实现。标题使用大号粗体字，正文使用小号常规字，这样就能形成清晰的层级关系。在色彩设计中，对比可以通过色相、明度、饱和度来实现。互补色之间的对比最强烈，类似色之间的对比较温和，我们可以根据设计需求选择合适的对比强度。
对比的应用需要注意不要过度。如果所有元素都形成强烈对比，反而会让设计显得混乱，用户不知道应该关注哪里。好的对比应该是有选择的，只对真正重要的元素使用强烈对比，对其他元素使用较弱的对比，这样就能建立清晰的视觉层级。
让我们通过文字排版的例子来感受对比原则的作用。
❌ 坏的设计：对比过度或不足
标题一
标题二
标题三
正文内容，所有文字大小相同，标题和正文没有区别。
在这个例子中，要么所有元素都形成强烈对比（所有都是大号粗体），要么缺乏对比（标题和正文相同），我们无法建立清晰的视觉层级。
✅ 好的设计：有层次的对比
主标题
副标题
正文内容，通过字体大小、字重和颜色的对比，建立了清晰的视觉层级。
在这个例子中，主标题、副标题和正文使用了不同的大小、字重和颜色，形成了有层次的对比，我们能够清楚地识别信息的重要性。
重复
重复原则指的是在设计中重复使用某些视觉元素，以创造统一性和一致性。这些重复的元素可以是颜色、形状、字体、大小、空间、线条等。重复不仅能够增强设计的统一感，还能帮助用户建立认知模式，提高信息处理的效率。
在品牌设计中，重复原则的应用最为明显。一个品牌会在所有接触点重复使用相同的颜色、字体、Logo、图形元素等，这样用户就能立即识别出这个品牌。在网页设计中，重复使用相同的按钮样式、卡片样式、间距等，能够让整个网站看起来协调统一。
重复的应用需要注意变化。完全相同的重复可能会显得单调，我们可以在重复中加入一些变化，比如在保持基本样式一致的同时，调整大小、颜色或位置。这种有变化的重复既保持了统一性，又增加了视觉趣味。
让我们通过卡片列表的例子来感受重复原则的作用。
❌ 坏的设计：缺乏重复
卡片一
内容描述
卡片二
内容描述
卡片三
内容描述
在这个例子中，每个卡片都使用了不同的颜色、圆角、边框和内边距，缺乏重复元素，整个设计显得不统一，我们很难理解它们属于同一组内容。
✅ 好的设计：运用重复原则
卡片一
内容描述
卡片二
内容描述
卡片三
内容描述
在这个例子中，所有卡片使用了相同的样式、圆角、边框和间距，重复的元素创造了统一性和一致性，我们能够立即理解它们属于同一组内容。
对齐
对齐原则指的是将设计元素按照某种方式排列，创造视觉联系和秩序感。对齐可以是左对齐、右对齐、居中对齐，也可以是沿着某个隐形的网格线对齐。对齐不仅能够让设计看起来更整洁，还能帮助用户理解元素之间的关系。
在文字排版中，对齐是最基本的应用。正文通常使用左对齐或两端对齐，这样能够保证阅读的流畅性。标题可以根据设计风格选择左对齐、居中对齐或右对齐。在布局设计中，对齐能够创造视觉结构，让不同的元素看起来是一个整体。
对齐的应用需要注意一致性。如果我们在一个设计中混合使用多种对齐方式，可能会让设计显得混乱。一般来说，我们应该选择一种主要的对齐方式，然后在需要强调或变化的地方使用其他对齐方式。同时，我们也要注意对齐的精确性，即使是微小的不对齐也会影响整体的视觉效果。
让我们通过文本布局的例子来感受对齐原则的作用。
❌ 坏的设计：对齐混乱
左对齐的文本内容
居中对齐的文本内容
右对齐的文本内容
又回到左对齐
再次居中对齐
在这个例子中，文本的对齐方式不断变化，缺乏一致性，整个布局显得混乱无序，我们很难找到视觉上的秩序感。
✅ 好的设计：统一的对齐
左对齐的文本内容，所有文本都遵循相同的对齐方式。
更多左对齐的内容，形成清晰的视觉结构。
继续左对齐，整个布局看起来整洁有序。
统一的对齐方式创造了视觉联系和秩序感。
在这个例子中，所有文本都使用左对齐，形成了一致的视觉结构，整个布局看起来整洁有序，我们能够轻松地阅读和理解内容。
亲密性
亲密性原则指的是将相关的元素放在一起，将不相关的元素分开，通过空间关系来表达信息结构。这个原则与 Gestalt 的接近性原理类似，但更强调主动地组织空间来传达信息。相关的元素应该靠近，不相关的元素应该远离，这样用户就能立即理解哪些信息是相关的。
在表单设计中，亲密性原则的应用最为明显。标签和对应的输入框应该靠近，相关的输入框应该放在一起，不同的表单部分应该用足够的空间分隔。在卡片设计中，卡片内的所有元素应该靠近，卡片之间应该有足够的间距，这样用户就能清楚地识别出每个卡片的边界和内容。
亲密性的应用需要注意平衡。如果相关元素靠得太近，可能会显得拥挤；如果靠得太远，又可能失去关联性。我们需要根据元素的大小、重要性、视觉重量来调整间距。一般来说，相关的元素之间的间距应该小于不相关的元素之间的间距，但也要保持足够的呼吸空间。
让我们通过表单设计的例子来感受亲密性原则的作用。
❌ 坏的设计：亲密性不当
姓名
邮箱
电话
在这个例子中，标签和输入框之间的距离过大，我们很难立即理解它们之间的关联关系。同时，不同表单字段之间的距离也过大，整个表单显得松散。
✅ 好的设计：合理运用亲密性
姓名
邮箱
电话
在这个例子中，标签和对应的输入框紧密地放在一起，我们能够立即理解它们的关联关系。不同表单字段之间有适当的间距，既保持了独立性，又形成了统一的整体。
CRAP 四个原则不是孤立的，它们相互关联、相互支持。在实际设计中，我们需要综合考虑这四个原则，创造出既美观又有效的设计作品。
小结
了解了这些基本的设计原理后，我们需要明白，这些原理不是孤立存在的，而是相互关联、相互支持的。在日后的设计工作中，我们需要综合考虑这些原理，根据具体的设计目标和情境来灵活应用。
一个好的设计作品，往往同时运用了多个设计原理。比如，一个优秀的网页设计可能同时运用了 Gestalt 的接近性原理来组织信息，运用了视觉层级来引导注意力，运用了 CRAP 法则来创造统一性和秩序感。这些原理的协同作用，能够让设计既美观又有效。
作为初学者，我们可能会觉得这些原理很多，难以掌握。但不要担心，这些原理其实都是基于人类视觉感知的基本规律，一旦理解了这些规律，我们就能自然而然地应用它们。最好的学习方法就是多观察、多实践。观察身边的设计作品，分析它们运用了哪些原理；尝试自己设计，在实践中体会这些原理的作用。
设计是一个需要不断学习和实践的过程。掌握了这些基础原理，我们就有了设计的基础工具。在接下来的课程中，我们将深入学习色彩、排版、布局等更具体的设计知识，这些知识都是建立在这些基础原理之上的。让我们一起继续这个设计学习的旅程吧！