Photoshop APP界面设计全解析 全彩

第1章 UI设计基础知识 1

1.1 手机UI设计基础 2

1.1.1 手机的品牌 2

1.1.2 手机样式 2

1.1.3 手机的屏幕色彩 4

1.1.4 手机的功能分类 5

1.1.5 智能手机的屏幕分辨率 7

1.2 UI设计基础 8

1.2.1 什么是UI设计 9

1.2.2 手机UI设计的要点 9

1.2.3 手机UI与Web UI的区别 11

1.3 设计尺寸的单位 12

1.3.1 英寸 12

1.3.2 分辨率 13

1.3.3 屏幕密度 13

1.4 iOS系统概述 14

1.4.1 iOS系统的发展历史 14

1.4.2 iOS 7的设计主题 16

1.4.3 iOS 7与iOS 6的不同 16

1.5 Android系统概述 18

1.5.1 Android系统的发展历史 18

1.5.2 Android系统UI设计要点 20

1.5.3 Android启动图标的设计标准 22

1.6 Windows Phone系统概述 23

1.6.1 Windows Phone系统的发展历史 23

1.6.2 Windows Phone系统的特色 24

1.6.3 Windows Phone的控件 25

1.7 本章小结 26

第2章 iOS系统实例 27

2.1 iOS界面的设计原则 28

2.1.1 美 28

2.1.2 一致性 29

2.1.3 直接控制 29

2.1.4 反馈 29

2.1.5 暗喻 30

2.1.6 用户控制 30

2.2 iOS界面的设计规范 31

2.2.1 确保程序在iPad和iPhone上通用 31

2.2.2 重新考虑基于Web的设计 31

2.3 iOS界面基本图形——直线 32

实战1 制作iOS6语言设置界面 33

操作难点分析 39

对比分析 39

2.4 iOS界面基本图形——图形 40

2.4.1 矩形 40

2.4 2圆角矩形 40

2.4.3 圆 41

2.4.4 其他形状 41

实战2 制作iOS 7快捷设置界面 42

操作难点分析 48

对比分析 49

2.5 控件的绘制 49

2.5.1 搜索栏 49

2.5.2 细节展开按钮 50

实战3 制作iOS6地址搜索界面 50

操作难点分析 56

对比分析 56

2.5.3 滚动条 57

2.5.4 切换器 57

实战4 制作iOS 6亮度设置界面 58

操作难点分析 65

对比分析 65

2.6 iOS图标的绘制 66

2.6.1 程序图标 66

实战5 制作iOS6便签图标 67

操作难点分析 74

对比分析 74

2.6.2 小图标 75

2.6.3 文档图标 75

2.6.4 Web快捷方式图标 76

2.6.5 导航栏、工具栏和Tab栏上用的图标 76

2.7 设计中的图片 77

2.7.1 登录图片 77

2 7.2 为Retina屏幕设计 78

2.8 iOS 7的设计特点 80

2.8.1 新界面 80

实战6 制作iOS 7锁屏界面 80

操作难点分析 83

对比分析 84

实战7 制作iOS 7主界面 84

操作难点分析 89

对比分析 89

2.8.2 更新 90

2.9 iOS 6与iOS 7对比 92

2.9.1 依从用户的操作界面 92

2.9.2 扁平化代替拟物化 93

2.9.3 易读性强的动态字体 93

2.9.4 无边框按钮 93

2.9.5 半透明的导航元素 93

2.9.6 留白内容 93

2.9.7 层次感的表现 93

2.9.8 尽量不使用启动画面 93

实战8 制作iOS 6文本编辑界面 94

操作难点分析 101

对比分析 101

实战9 制作iOS 7文本编辑界面 102

操作难点分析 108

对比分析 108

综合实战10 制作时间设置界面 109

操作难点分析 120

对比分析 120

综合实战11 制作iPad文件浏览界面 121

操作难点分析 130

对比分析 131

综合实战12 制作游戏界面 131

操作难点分析 141

对比分析 141

2.1 0本章小结 142

第3章 Android系统实例 143

3.1 Android APP UI概览 144

3.2 UI设计原则 145

3.3 Android界面设计风格 148

3.3.1 设备与显示 148

3.3.2 主题样式 149

3.3.3 标准和网格 149

3.3.4 触摸与反馈 150

3.3.5 字体 151

3.3.6 颜色 152

3.3.7 图标 152

3.3.8 写作风格 154

3.4 Android APP的常用结构 155

实战1 制作操作栏 157

实战2 制作选择栏 159

实战3 制作通知 162

实战4 制作启动图标 164

操作难点分析 170

对比分析 170

实战5 制作主界面 171

操作难点分析 176

对比分析 176

3.5 控件设计 177

3.5.1 控件的分类 177

3.5 2控件的设计规范 179

实战6 制作网格列表 185

操作难点分析 188

对比分析 188

实战7 制作声音设置界面 189

操作难点分析 193

对比分析 193

实战8 制作音量调节对话框 194

操作难点分析 197

对比分析 197

实战9 制作信息编辑界面 198

操作难点分析 204

对比分析 204

实战10 制作添加联系人界面 205

操作难点分析 209

对比分析 209

3.6 特效的使用 210

实战11 制作锁屏界面 211

操作难点分析 214

对比分析 215

综合实战12 制作天气界面 215

操作难点分析 223

对比分析 223

综合实战13 制作游戏界面 223

操作难点分析 229

对比分析 229

3.7 本章小结 229

第4章 Windows Phone 系统实例 230

4.1 Windows Phone的设计原则 231

4.2 关于度量单位 232

4.3 关于游戏U I的设计 232

4 4用户界面框架 233

4.4.1 主界面 233

实战1 制作WP系统主界面 234

操作难点分析 240

对比分析 240

4.4.2 状态栏 240

4.4.3 应用程序栏 241

4.4.4 应用程序栏的图标 242

4.4.5 屏幕方向 242

4.4.6 字体 243

实战2 制作功能设置界面 244

操作难点分析 247

对比分析 247

4.5 推送通知 247

4.5.1 “瓦片式”通知 248

4.5.2 烤面包式通知 248

4.5.3 原生通知 249

4.6 界面框架设计 249

4.6.1 页面标题 249

4.6 2主题 250

4.6.3 进度指示器 250

实战3 制作视频播放界面 251

操作难点分析 254

对比分析 254

4.6.4 屏幕键盘 254

实战4 制作新建信息界面 255

操作难点分析 259

对比分析 259

4.7 应用程序界面控件 260

4.7.1 按键 260

实战5 制作应用商店界面 260

操作难点分析 264

对比分析 264

4.7.2 复选框 265

实战6 制作添加键盘界面 265

操作难点分析 268

对比分析 268

4.7.3 超链接 269

4.7.4 列表框 269

实战7 制作应用程序列表 270

操作难点分析 273

对比分析 273

4.7.5 全景视图 274

实战8 制作全景视图 275

操作难点分析 280

对比分析 280

4.7.6 密码框 281

4.7.7 进度条 281

4.7.8 单选按钮 281

实战9 制作同步设置界面 282

操作难点分析 284

对比分析 284

4.7.9 文本块 285

实战10 制作语音设置界面 285

操作难点分析 287

对比分析 288

4.7.1 0输入框 288

综合实战11 制作计算器界面 289

操作难点分析 297

对比分析 297

综合实战12 制作可爱游戏界面 297

操作难点分析 305

对比分析 305

4.8 本章小结 305

附录1 Photoshop CC新增功能 306

附录2 常见手机尺寸 308

附录3 图标的设计标准 308

附录4 字体设计规范 310