Photoshop CC设计之道 APP视觉创意与设计

Chapter01 开始 获取移动UI视觉设计的敲门砖 1

1.1 概述移动UI视觉设计 2

1.2 移动UI视觉设计原则 4

1.2.1 完整性原则 4

1.2.2 一致性原则 5

1.2.3 直观性原则 6

1.2.4 习惯性原则 7

1.3 设计是有规律可循的 8

1.3.1 情感化设计 8

1.3.2 差异化设计 9

1.3.3 和谐化设计 10

1.4 如何构思与创意 11

1.4.1 发散思维 11

1.4.2 将思考视觉化 12

1.4.3 寻找切入点 13

1.5 Photoshop软件基础 14

1.5.1 绘图工具 14

1.5.2 图层样式 15

1.5.3 不透明度与填充 16

Chapter 02 风格 五大要素构建界面基础印象 17

2.1 设备的尺寸 18

2.1.1 设备的显示 18

2.1.2 度量单位与留白 19

2.2 主题的设定 20

2.2.1 系统主题 20

2.2.2 正确选择主题突显设计的特点 21

2.3 界面布局 22

2.3.1 应用结构 22

2.3.2 多视图布局 23

2.3.3 滚动视图 24

2.3.4 合理布局促进记忆且强调个性 25

2.4 字体的规范 26

2.4.1 字体的规定类型 26

2.4.2 默认的文字颜色 27

2.4.3 字体的缩放 27

2.4.4 文字的个性来自反复推敲的过程 28

2.5 色彩的选择 29

2.5.1 系统规定的色彩 29

2.5.2 UI视觉设计中色彩使用的原则 30

2.5.3 根据设计需要选择色彩 32

Chapter 03 惊喜 揭秘十大界面元素设计的演变过程 33

3.1 图标 34

3.1.1 设计指南概述 34

3.1.2 小图标和上下文图标 35

3.1.3 创意演变大揭秘 37

3.2 按钮 39

3.2.1 设计指南概述 39

3.2.2 创意演变大揭秘 40

3.3 滑块 42

3.3.1 设计指南概述 42

3.3.2 创意演变大揭秘 43

3.4 开关 45

3.4.1 设计指南概述 45

3.4.2 创意演变大揭秘 46

3.5 标签 48

3.5.1 设计指南概述 48

3.5.2 创意演变大揭秘 49

3.6 下拉菜单 51

3.6.1 设计指南概述 51

3.6.2 创意演变大揭秘 52

3.7 文本框 53

3.7.1 设计指南概述 53

3.7.2 创意演变大揭秘 54

3.8 对话框 55

3.8.1 设计指南概述 55

3.8.2 创意演变大揭秘 56

3.9 进度控件 58

3.9.1 设计指南概述 58

3.9.2 创意演变大揭秘 59

3.10 选择器 60

3.10.1 设计指南概述 60

3.10.2 创意演变大揭秘 61

Chapter 04 创意 开启灵感源泉构思个性移动UI 63

4.1 通讯录界面设计 64

4.1.1 纵向思维定义主要元素：标签 64

4.1.2 标签的数量决定了界面色彩的丰富程度 65

4.1.3 彩色标签决定界面风格：活泼、轻快 66

4.1.4 实例制作步骤解析 66

4.2 短信界面设计 73

4.2.1 按时间顺序定义界面主要元素：时间线 73

4.2.2 用蓝绿色表现短信内容的未知性 74

4.2.3 单色设计元素与繁杂背景混搭 75

4.2.4 实例制作步骤解析 75

4.3 拍照及相册界面设计 80

4.3.1 依据功能确定界面设计要点：开放式、幻灯片 81

4.3.2 根据案例素材照片搭配界面色彩 82

4.3.3 照片色彩决定界面风格：清爽、柔美 82

4.3.4 实例制作步骤解析 83

4.4 计算器界面设计 87

4.4.1 从功能入手定义界面主要元素：计算器 87

4.4.2 为计算器界面进行配色 88

4.4.3 确定计算器元素界面风格：真实、质朴 89

4.4.4 实例制作步骤解析 89

4.5 单位换算界面设计 94

4.5.1 根据功能及作用定义界面主要元素；绿色、矩形 94

4.5.2 使用不同明度的绿色和黑色进行配色 95

4.5.3 双色搭配决定界面风格：清晰、醒目 96

4.5.4 实例制作步骤解析 96

4.6 录音机界面设计 102

4.6.1 根据现实操作定义主要元素：磁带 102

4.6.2 参照磁带素材对界面进行配色 103

4.6.3 黑色磁带元素决定界面风格：冷调、质感 104

4.6.4 实例制作步骤解析 104

4.7 收音机界面设计 113

4.7.1 通过形象思维具象化设计元素：电磁波 113

4.7.2 根据收音机的颜色进行配色 114

4.7.3 都市照片和矩形电磁波定义界面风格：时尚、简约 115

4.7.4 实例制作步骤解析 115

4.8 音乐播放界面设计 120

4.8.1 发散思维寻找界面主要元素：CD光盘 120

4.8.2 用复古色调的照片进行配色 122

4.8.3 复杂背景决定界面元素风格：简单 122

4.8.4 实例制作步骤解析 123

4.9 日历界面设计 126

4.9.1 根据界面内容的限制来敲定界面布局；棋盘式 126

4.9.2 用多种色彩对日历信息进行分类表现 127

4.9.3 棋盘式设计确定界面风格：单色、简约 128

4.9.4 实例制作步骤解析 128

4.10 搜索界面设计 131

4.10.1 联想思维定义界面主要元素：木纹、放大镜 131

4.10.2 以木纹和放大镜的颜色进行配色 132

4.10.3 木纹材质决定界面风格：天然、复古 133

4.10.4 实例制作步骤解析 133

Chapter 05 爆发 升级创意创作完美移动UI界面 139

5.1 清爽色调的扁平化手机主题设计 140

5.1.1 项目任务 141

5.1.2 提取关键字：凉爽、扁平化、IOS 7 141

5.1.3 根据IOS 7中的字体定义图标和文字 142

5.1.4 调整主要色彩的明度以增加配色 142

5.1.5 剖析案例制作步骤 143

5.2 购物APP客户端UI设计 150

5.2.1 项目任务 151

5.2.2 提取关键字：时尚、柔美、清晰 151

5.2.3 用标题栏和图标栏引导用户操作 152

5.2.4 添加灰度色彩调和配色 152

5.2.5 剖析案例制作步骤 153

5.3 浏览器APP客户端UI设计 159

5.3.1 项目任务 160

5.3.2 提取关键字：大气、简约 160

5.3.3 添加点缀色彩突出关键信息 161

5.3.4 剖析案例制作步骤 161

5.4 天气APP客户端UI设计 168

5.4.1 项目任务 169

5.4.2 提取关键字：清爽、简化、分区明确 169

5.4.3 根据天气照片创作出天气图标 169

5.4.4 利用线条进行视线引导式布局 170

5.4.5 剖析案例制作步骤 171

5.5 美食APP客户端UI设计 178

5.5.1 项目任务 179

5.5.2 提取关键字：美食、Android、功能清晰 179

5.5.3 多种特效打造立体感的界面元素 180

5.5.4 利用底纹使界面更精致 180

5.5.5 剖析案例制作步骤 181

5.6 医院APP客户端UI设计 191

5.6.1 项目任务 192

5.6.2 提取关键字：医院、直观、统一 192

5.6.3 根据界面内容定义布局 193

5.6.4 剖析案例制作步骤 194

5.7 音乐APP客户端UI设计 201

5.7.1 项目任务 202

5.7.2 提取关键字：音乐、特点、Android 202

5.7.3 以主色调进行配色扩展 203

5.7.4 根据LOGO风格定义界面按钮外观 203

5.7.5 剖析案例制作步骤 204

5.8 游戏APP客户端UI设计 210

5.8.1 项目任务 211

5.8.2 提取关键字：抢球、打地鼠、猫咪 211

5.8.3 参考“打地鼠”游戏进行界面布局 212

5.8.4 统一风格保持界面一致性 213

5.8.5 剖析案例制作步骤 213