写给大家看的设计书
The Non-Designer's Design Book
掌握 CRAP 四大设计原则,让非专业人员也能创作出专业级设计作品
🎯 CRAP 四大设计原则
掌握这四个原则,你的设计将脱胎换骨
对比 Contrast
吸引眼球的关键页面上的不同元素之间要有对比效果。如果两个项不完全相同,就应当使之截然不同。
重复 Repetition
建立统一性在整个作品中重复使用视觉要素(颜色、形状、字体等),增强作品的统一性和条理性。
对齐 Alignment
打造专业感每一项都应与页面上的某个内容存在视觉联系,避免随意放置,打造清晰精致的外观。
亲密性 Proximity
组织信息将相关内容组织在一起,使其物理位置接近,形成视觉单元,帮助读者理解信息关系。
亲密性 Proximity
将相关项组织在一起,形成视觉单元
核心理念
将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。
元素分散,关系不清
相关信息成组
关键要点
空白不是浪费,而是设计的重要组成部分
通过空间距离体现信息之间的关系
页面上独立元素越少,设计越清晰
空白可以引导读者的视线,使页面更易读
眯起眼睛看你的设计,数一数有多少视觉元素。如果超过3-5个独立的组,考虑进行合并或重新组织。
对齐 Alignment
每个元素都应与页面上某个内容存在视觉联系
左对齐
Flush Left最常用、最专业的对齐方式,左边形成清晰的边界线
右对齐
Flush Right营造独特精致感,适合与左对齐元素形成对比
居中对齐
Centered正式、稳重但可能乏味,缺乏清晰的边界线
对齐原则检查清单
避免在同一页面混合使用多种对齐方式
养成为元素画对齐线的习惯
检查每个元素是否与其他元素存在对齐关系
避免元素在页面上随意放置
重复 Repetition
在整个作品中重复使用视觉要素
可以重复的视觉元素
标题、正文字体
品牌色、强调色
线条、形状、图标
间距、对齐方式
重复的作用
将作品的各个部分联系起来成为整体
重复元素作为视觉线索帮助浏览
在不同页面重复使用引导有序浏览
在系列材料中重复强化品牌认知
注意事项
发现已有的重复元素,使其更突出、更鲜明
设计独特的图片风格、特殊的字体样式等
过度重复会造成视觉疲劳,需要与对比结合使用
对比 Contrast
让不同元素截然不同,吸引读者注意力
核心理念
如果两个项不完全相同,就应当使之不同,而且应当是截然不同。 对比是增强页面视觉效果最有效的方式,也是建立清晰层次结构、引导读者视线的重要手段。
实现对比的六种方式
对比要强烈
避免过于细微的对比,让差异足够明显
避免冲突
差异不大会产生冲突而非对比
注意层次
考虑信息层次结构,确保重点突出
色彩运用
Color Theory · 用色彩增强设计效果
色轮基础
颜色关系
色轮对面,对比强烈
彼此等距的三种颜色
相邻颜色,整体协调
暖色与冷色
具有前进感,更加醒目、积极
具有后退感,更加冷静、专业
印刷四分色模式,用于印刷品
屏幕显示三原色模式,用于屏幕显示
字体设计
Typography · 字体类别与搭配原则
六大字体类别
基于手写体,有衬线,适合大量正文
衬线细,粗细对比剧烈,外观冷酷高雅
衬线粗且明显,简洁直接
没有衬线,干净现代
模仿手写笔迹,装饰性强
装饰性强,传达鲜明情绪
协调 Concordant
字体风格统一,整体平和正式
安全但可能乏味冲突 Conflicting
使用相似但不相同的字体
应尽量避免对比 Contrasting
字体截然不同,吸引眼球
提升设计效果的关键排版基本规则
现代排版规范
" " 而非 " "
降低可读性
用斜体/粗体代替
实践应用
Apply in Practice · 各类设计场景
10-11磅字体,去除冗余信息
与名片风格一致,统一形象
有趣字体,放大图片,合理留白
重复元素,一致对齐,易读字体
合适折叠方式,突出重点信息
独特形状,明亮颜色,简洁信息
利用留白对比,避免细小字体
对比突出重点,结构清晰专业
设计流程
确定读者最先看什么
按逻辑进行分组
保持对齐一致性
重复使用视觉元素
突出差异吸引视线
不要畏畏缩缩
大胆尝试,打破常规,让设计更出彩
无论你是学生、教师、企业家还是任何需要进行设计的人,掌握 CRAP 四大原则,将让你的设计作品脱胎换骨