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 制作iOS 6语言设置界面 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 制作iOS 6地址搜索界面 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 制作iOS 6便签图标 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.10 本章小结 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 关于游戏UI的设计 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.10 输入框 288

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

操作难点分析 297

对比分析 297

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

操作难点分析 305

对比分析 305

4.8 本章小结 305

附录1 Photoshop CC新增功能 306

附录2 常见手机尺寸 308

附录3 图标的设计标准 308

附录4 字体设计规范 310

现如今，各种通信、网络连接设备与大众生活的联系日益密切。用户界面是用户与机器设备进行交互的平台，这就导致人们对各种类型UI 界面的要求越来越高，和UI 设计行业的兴盛，iOS、Android 和Windows 这3 种系统就是其中的佼佼者。本书主要依据iOS、Android 和Windows 这3 种操作系统的构成元素，由浅入深地讲解了初学者需要掌握和感兴趣的基础知识和操作技巧，全面解析各种元素的具体绘制方法。全书结合实例进行讲解，详细地介绍了制作的步骤和软件的应用技巧，以便读者能轻松地学习并掌握。现如今，各种通信、网络连接设备与大众生活的联系日益密切。用户界面是用户与机器设备进行交互的平台，这就导致人们对各种类型UI界面的要求越来越高，促进UI设计行业的兴盛，iOS、Android和Windows Phone这3种系统就是其中的佼佼者。本书主要依据iOS、Android和Windows Phone这3种操作系统的构成元素，由浅入深地讲解了初学者需要掌握和感兴趣的基础知识和操作技巧，全面解析各种元素的具体绘制方法。全书结合实例进行讲解，详细地介绍了制作的步骤和软件的应用技巧，以便读者能轻松地学习并掌握。本书主要根据读者学习的难易程度，以及在实际工作中的应用需求来安排章节，真正做到为学习者考虑，也让不同程度的读者更有针对性的学习内容，强化自己的弱项，并有效帮助UI设计爱好者提高操作速度与效率。【作者简介】高鹏，Adobe认证工程师及讲师。从事美工工作2年、插画设计1年多，后又担任广告公司创意总监一职。拥有多家大学从事相关艺术教学经验，曾在北京人文大学、北京科技经营管理学院教授Illustrator动漫绘制、广告设计、运动规律、色彩构成等课程。著作有《Flash 动画设计新手入门篇》《Illustrator CS3图形创意设计经典108例》《一定要会的Photoshop CS5图像设计经典 208例》等。