🎯 CRAP 四大设计原则

掌握这四个原则,你的设计将脱胎换骨

C

对比 Contrast

吸引眼球的关键

页面上的不同元素之间要有对比效果。如果两个项不完全相同,就应当使之截然不同

字体大小 颜色深浅 粗细对比
R

重复 Repetition

建立统一性

在整个作品中重复使用视觉要素(颜色、形状、字体等),增强作品的统一性和条理性。

颜色主题 字体样式 图形元素
A

对齐 Alignment

打造专业感

每一项都应与页面上的某个内容存在视觉联系,避免随意放置,打造清晰精致的外观。

左对齐 右对齐 居中对齐
P

亲密性 Proximity

组织信息

将相关内容组织在一起,使其物理位置接近,形成视觉单元,帮助读者理解信息关系。

信息分组 合理留白 层次清晰
P

亲密性 Proximity

将相关项组织在一起,形成视觉单元

核心理念

将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。

错误示范
标题文字
日期信息
作者姓名
正文内容

元素分散,关系不清

正确示范
标题文字
副标题
作者姓名 日期

相关信息成组

关键要点

1
不要畏惧留白

空白不是浪费,而是设计的重要组成部分

2
信息逻辑分组

通过空间距离体现信息之间的关系

3
减少视觉单元

页面上独立元素越少,设计越清晰

4
引导视线流动

空白可以引导读者的视线,使页面更易读

💡 设计师提示

眯起眼睛看你的设计,数一数有多少视觉元素。如果超过3-5个独立的组,考虑进行合并或重新组织。

A

对齐 Alignment

每个元素都应与页面上某个内容存在视觉联系

左对齐

Flush Left

最常用、最专业的对齐方式,左边形成清晰的边界线

推荐使用

右对齐

Flush Right

营造独特精致感,适合与左对齐元素形成对比

适度使用

居中对齐

Centered

正式、稳重但可能乏味,缺乏清晰的边界线

慎用

对齐原则检查清单

避免在同一页面混合使用多种对齐方式

养成为元素画对齐线的习惯

检查每个元素是否与其他元素存在对齐关系

避免元素在页面上随意放置

R

重复 Repetition

在整个作品中重复使用视觉要素

可以重复的视觉元素

字体样式

标题、正文字体

颜色主题

品牌色、强调色

图形元素

线条、形状、图标

空间关系

间距、对齐方式

重复的作用

增强统一性

将作品的各个部分联系起来成为整体

增加条理性

重复元素作为视觉线索帮助浏览

引导视线

在不同页面重复使用引导有序浏览

建立品牌形象

在系列材料中重复强化品牌认知

注意事项

强化已有元素

发现已有的重复元素,使其更突出、更鲜明

创造新元素

设计独特的图片风格、特殊的字体样式等

避免过度重复

过度重复会造成视觉疲劳,需要与对比结合使用

C

对比 Contrast

让不同元素截然不同,吸引读者注意力

核心理念

如果两个项不完全相同,就应当使之不同,而且应当是截然不同。 对比是增强页面视觉效果最有效的方式,也是建立清晰层次结构、引导读者视线的重要手段。

实现对比的六种方式

大小
粗细
结构
衬线 / 无衬线
形状
ABC / abc
方向
水平 斜体
颜色

对比要强烈

避免过于细微的对比,让差异足够明显

避免冲突

差异不大会产生冲突而非对比

注意层次

考虑信息层次结构,确保重点突出

色彩运用

Color Theory · 用色彩增强设计效果

色轮基础

三原色
三间色
第三色

颜色关系

互补色

色轮对面,对比强烈

三色组

彼此等距的三种颜色

类似色

相邻颜色,整体协调

暖色与冷色

暖色

具有前进感,更加醒目、积极

冷色

具有后退感,更加冷静、专业

CMYK

印刷四分色模式,用于印刷品

RGB

屏幕显示三原色模式,用于屏幕显示

字体设计

Typography · 字体类别与搭配原则

六大字体类别

Aa
旧式体 Oldstyle

基于手写体,有衬线,适合大量正文

可读性高
Aa
现代体 Modern

衬线细,粗细对比剧烈,外观冷酷高雅

不适合大量正文
Aa
粗衬线体 Slab Serif

衬线粗且明显,简洁直接

常用于儿童图书
Aa
无衬线体 Sans Serif

没有衬线,干净现代

屏幕阅读友好
Aa
手写体 Script

模仿手写笔迹,装饰性强

不适合大段文本
Aa
花体 Decorative

装饰性强,传达鲜明情绪

特定场合使用

协调 Concordant

字体风格统一,整体平和正式

安全但可能乏味

冲突 Conflicting

使用相似但不相同的字体

应尽量避免

对比 Contrasting

字体截然不同,吸引眼球

提升设计效果的关键

排版基本规则

标点后一个空格

现代排版规范

使用印刷引号

" " 而非 " "

避免全大写

降低可读性

不使用下划线

用斜体/粗体代替

实践应用

Apply in Practice · 各类设计场景

名片设计

10-11磅字体,去除冗余信息

信笺信封

与名片风格一致,统一形象

传单设计

有趣字体,放大图片,合理留白

新闻简报

重复元素,一致对齐,易读字体

宣传册

合适折叠方式,突出重点信息

明信片

独特形状,明亮颜色,简洁信息

报纸广告

利用留白对比,避免细小字体

简历设计

对比突出重点,结构清晰专业

设计流程

1
创建中心点

确定读者最先看什么

2
信息分组

按逻辑进行分组

3
建立对齐

保持对齐一致性

4
创建重复

重复使用视觉元素

5
建立对比

突出差异吸引视线

设计要诀

不要畏畏缩缩

大胆尝试,打破常规,让设计更出彩

C
对比
截然不同
R
重复
统一协调
A
对齐
视觉联系
P
亲密
逻辑分组

无论你是学生、教师、企业家还是任何需要进行设计的人,掌握 CRAP 四大原则,将让你的设计作品脱胎换骨

返回精选网页