核心设计理论
Chapter 01
设计基础
与原则
设计是有目的地解决问题、创造价值的创造性过程。在视觉传达中，设计是通过视觉元素有效传达信息、情感和功能的过程。
设
计
原
则
基
础
概
念
形
01 / Basic Concepts
设计基本概念
设计的三要素
形式Form
视觉表现：颜色、形状、材质、空间
功能Function
实用目的：可用性、易用性、目的达成
情感Emotion
心理影响：情感连接、品牌感知、用户体验
设计的四个层次
01
战略层为什么设计？目标是什么？
02
范围层设计包含什么？功能需求？
03
结构层信息如何组织？交互流程？
04
表现层视觉如何呈现？感官体验？
02 / Core Principles
核心设计原则
对比
Contrast定义：通过差异创建视觉兴趣和层次
应用方法
- - 大小对比：大标题与小正文
- - 颜色对比：互补色、明暗对比
- - 形状对比：几何形状与有机形状
- - 纹理对比：光滑与粗糙
- - 空间对比：密集与稀疏
常见误区
- ✕ 对比不足导致视觉平淡
- ✕ 过度对比造成混乱
- ✕ 无目的的对比分散注意力
重复
Repetition定义：在设计中重复使用视觉元素创造统一性
应用方法
- - 颜色重复：建立品牌色彩系统
- - 形状重复：创建视觉节奏
- - 字体重复：保持排版一致性
- - 间距重复：建立网格系统
- - 图标风格重复：确保视觉统一
实际应用
- - 设计系统中的组件复用
- - 品牌视觉识别系统
- - 页面间的设计一致性
对齐
Alignment定义：元素在页面上的位置关系，创造视觉连接
对齐类型
- - 左对齐：最易阅读，适合大量文本
- - 右对齐：创造形式感，适合短文本
- - 居中对齐：正式、传统，适合标题、邀请函
- - 两端对齐：整齐但需注意断词
网格系统
- - 12列网格：网页设计标准
- - 8点网格系统：现代UI设计
- - 基线网格：文字排版对齐
亲密性
Proximity定义：相关元素靠近，无关元素分开
应用场景
- - 表单标签与输入框
- - 标题与正文
- - 导航菜单项
- - 产品图片与描述
设计检查
- - 相关元素是否足够接近？
- - 无关元素是否明显分开？
- - 视觉分组是否清晰？
平衡
Balance平衡类型
- - 对称平衡：正式、稳定、传统
- - 不对称平衡：动态、有趣、现代
- - 径向平衡：焦点集中、放射状
- - 晶体平衡：马赛克式、拼贴效果
平衡技巧
- - 视觉重量：暗色>亮色，大元素>小元素
- - 色彩平衡：暖色前进，冷色后退
- - 空白空间：负空间也是设计元素
层次
Hierarchy视觉层次建立方法
- - 尺寸：越大越重要
- - 颜色：高对比度吸引注意
- - 位置：上方、左侧优先
- - 字体：粗体、斜体强调
- - 间距：隔离创造重点
信息层次
- 01 一级信息：必须看到
- 02 二级信息：应该看到
- 03 三级信息：可以忽略
节奏
Rhythm节奏类型
- - 重复节奏：相同元素等距排列
- - 交替节奏：ABAB模式
- - 渐进节奏：逐渐变化
- - 流动节奏：有机、自然变化
应用场景
- - 图标列表间距
- - 时间轴设计
- - 图片画廊布局