Photoshop CC移动UI界面设计与实战PDF电子书下载

Part 1 移动UI设计基础 1

1.1 UI设计存在的意义 2

1.1.1 人机交互的桥梁 2

1.1.2 操作逻辑系统的展现 3

1.1.3 展现系统的整体风格 3

1.2 移动UI设计的原则 4

1.2.1 视觉一致性原则 4

1.2.2 视觉简易性原则 5

1.2.3 从用户的习惯考虑 6

1.2.4 操作的灵活性及人性化 8

1.3 三大主流操作系统的特点对比 9

1.4 不同系统UI视觉的主要组成要素及特征 10

1.4.1 iOS系统中的组成要素及特征 10

1.4.2 Android系统中的组成要素及特征 12

1.4.3 WP系统中的组成要素及特征 13

1.5 认识移动终端的分辨率和像素 14

1.6 移动UI的创意与灵感收集 16

1.6.1 各种经验和灵感的记录 16

1.6.2 将对象抽象化 17

1.6.3 设计灵感的转移 18

1.7 移动UI的视觉设计流程 20

Part 2 PS在移动UI设计中的常用功能简介 23

2.1 绘图工具的介绍 24

2.1.1 规则形状的绘制 24

2.1.2 自定义形状的绘制 25

2.1.3 绘制任意所需的形状 27

2.2 图层样式的运用 28

2.2.1 增强立体感的图层样式 28

2.2.2 发光效果的图层样式 30

2.2.3 更改色彩的图层样式 31

2.3 蒙版的编辑 33

2.3.1 图层蒙版 33

2.3.2 剪贴蒙版 34

2.4 文字的添加 36

2.4.1 文字的添加与设置 36

2.4.2 文字的高级编辑 37

Part 3 移动UI界面中基本元素的制作 39

3.1 按钮 40

3.1.1 按钮设计的基础知识 40

3.1.2 扁平化按钮的设计 41

3.2 开关 45

3.2.1 开关设计的基础知识 45

3.2.2 简易色块开关的设计 47

3.3 进度条 49

3.3.1 进度条设计的基础知识 49

3.3.2 扁平化进度条的设计 49

3.3.3 层次感强烈的进度条设计 52

3.4 搜索栏 56

3.4.1 搜索栏设计的基础知识 56

3.4.2 扁平化搜索栏的设计 58

3.5 列表框 63

3.5.1 列表框设计的基础知识 63

3.5.2 简易列表框的设计 64

3.5.3 立体化列表框的设计 68

3.6 标签栏 70

3.6.1 标签栏设计的基础知识 70

3.6.2 线性化标签栏设计 71

3.6.3 木纹质感的标签栏设计 72

3.7 图标栏 75

3.7.1 图标栏设计的基础知识 75

3.7.2 线性化图标栏设计 76

3.7.3 纸箱纹理的图标栏设计 79

Part 4 iOS系统及其组件的设计 83

4.1 iOS系统的发展及其特点 84

4.1.1 iOS系统的发展 84

4.1.2 iOS 8系统的设计特点 86

4.2 iOS系统设计的规范 89

4.2.1 设计原则 89

4.2.2 色彩和字体 92

4.2.3 图标的设计 96

4.3 iOS系统界面设计实训 100

4.3.1 扁平化图标的设计 100

4.3.2 半透明效果的界面设计 108

Part 5 Android系统及其组件的设计 115

5.1 Android系统的特点 116

5.2 Android系统的设计规范 118

5.2.1 度量单位 118

5.2.2 字体的使用标准 118

5.2.3 色彩的应用规范 121

5.2.4 四种类型的图标 124

5.3 六种标准的Widget规范 126

5.3.1 Widget框架简介 126

5.3.2 Widget框架的标准尺寸 128

5.3.3 4×1的Widget框架设计 129

5.3.4 3×3的Widget框架设计 133

5.3.5 2×2的Widget框架设计 137

5.3.6 4×1的加长Widget框架设计 140

5.3.7 3×3的横向Widget框架设计 144

5.3.8 2×2的横向Widget框架设计 149

5.4 Android系统界面设计实训 154

5.4.1 立体化的图标设计 154

5.4.2 超强立体感的界面设计 163

Part 6 WP系统及其组件的设计 175

6.1 WP系统的特点 176

6.2 高自由度的Live Tiles 178

6.2.1 Live Tiles简介 178

6.2.2 Live Tiles常见表现形式 180

6.2.3 Live Tiles设计的十大要点 181

6.2.4 Live Tiles设计 185

6.3 独特的Panorama 189

6.3.1 Panorama（全景视图）简介 189

6.3.2 Panorama设计注意事项 190

6.3.3 Panorama设计 193

6.4 WP系统界面设计实训 196

6.4.1 线性图标的设计 196

6.4.2 极简风格的界面设计 200

Part 7 孕妈帮手App设计 207

界面布局规划 208

创意思路剖析 208

确定配色方案 209

定义组件风格 210

制作步骤详解 210

Part 8 新闻网站App设计 221

界面布局规划 222

创意思路剖析 222

确定配色方案 223

定义组件风格 224

制作步骤详解 224

Part 9 美食网站App设计 237

界面布局规划 238

创意思路剖析 238

确定配色方案 239

定义组件风格 240

制作步骤详解 240

Part 10 篮球运动App设计 253

界面布局规划 254

创意思路剖析 254

确定配色方案 255

定义组件风格 255

制作步骤详解 256

Part 11 流量银行App设计 269

界面布局规划 270

创意思路剖析 270

确定配色方案 271

定义组件风格 271

制作步骤详解 272

Part 12 藏宝游戏App设计 283

界面布局规划 284

创意思路剖析 284

确定配色方案 285

定义组件风格 286

制作步骤详解 286

Part 13 音乐播放App设计 289

界面布局规划 300

创意思路剖析 300

确定配色方案 301

定义组件风格 302

制作步骤详解 302

Part 14 旅游资讯App设计 319

界面布局规划 320

创意思路剖析 320

确定配色方案 321

定义组件风格 322

制作步骤详解 322