PhotoshopCC移动UI界面设计与实战

　　从心开始 将一切都改变
　　
　　精工细作 开启移动设计之门
　　突破限制 掌控三大主流系统
　　多点本事 精通App应用设计
　　
　　目前移动设备产品日益增多，移动应用程序的市场呈现出百花齐放的胜景。为了能够迎合用户、提高用户体验，越来越多的移动应用程序产品开始提倡“以用户为中心”的设计理念，这就要求移动UI视觉设计师们要有敏锐的设计嗅觉和完整的设计流程及思维。本书从移动UI视觉设计的基础知识出发，通过分析和讲解三大主流系统的设计规范和设计技巧，将移动UI视觉设计中的创意思路与操作案例完美地结合在一起，力求在帮助读者提高UI界面制作能力的同时，拓展他们移动UI视觉设计的创造思路。希望本书对大家有很多的启发和帮助，让我们利用有限的功能，进行无限的创意！
　　

　　目前移动设备产品日益增多，移动应用程序的市场呈现出百花齐放的胜景。为了能够迎合用户、提高用户体验，越来越多的移动应用程序产品开始提倡“以用户为中心”的设计理念，这就要求移动UI视觉设计师们要有敏锐的设计嗅觉和完整的设计流程及思维。本书从移动UI视觉设计的基础知识出发，通过分析和讲解三大主流系统的设计规范和设计技巧，将移动UI视觉设计中的创意思路与操作案例完美地结合在一起，力求在帮助读者提高UI界面制作能力的同时，拓展他们移动UI视觉设计的创造思路。

　　《Photoshop CC移动UI界面设计与实战》一共包含三部分，共14个Part的内容。第1部分基础篇（Part1~Part3）：介绍移UI视觉设计的基础知识，Photoshop软件的常用操作功能，以及介绍移动UI界面中基础元素的设计规范；第2部分三大主流系统（Part4~Part6）：分别对三大系统进行有针对性的讲解，利用相关的案例介绍移动UI视觉设计的制作方法和技巧；第3部分App应用实例（Part7~Part14）：以完整的App界面设计为主要内容，展示不同风格移动UI界面设计的特点和制作方法。《Photoshop CC移动UI界面设计与实战》包含了大量精美的界面元素、App应用程序界面视觉设计的案例，利用较详细的布局规划、创意思维、配色方案、组件分析等部分来对案例的创作思路进行阐述，告诉读者移动UI视觉设计的创作技巧。

创锐设计

创锐设计，由一支优秀的平面设计师与图形图像资深编辑队伍组成。出版过众多优秀的图形图像方面的专业书籍，不仅在国内处于领先地位，还有大量作品输出过海外版权，备受读者青睐。在课程教材方面，由于他们拥有多年教育培训的经验，因此十分了解初学读者的心理需求，从而研究出了一套行之有效的教学方法；此外，他们又参加过多个商业项目的设计工作，熟悉行业规范、了解客户需求，拥有较高的设计水平，积累了丰富的制作经验、为专业进阶读者指出了技术进阶的明路；在他们的图书中，选择的实例不仅融会贯通了软件技法，更能通过分享图像处理经验，激发读者的灵感、迸发发创意火花，达到事半功倍的效果。

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视觉的主要组成要素及特征 / 9
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 / 183
6．3．1 Panorama（全景视图）简介 / 187
6．3．2 Panorama设计注意事项 / 188
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设计 / 209
界面布局规划 / 300
创意思路剖析 / 300
确定配色方案 / 301
定义组件风格 / 302
制作步骤详解 / 302

Part 14 旅游资讯App设计 / 319
界面布局规划 / 320
创意思路剖析 / 320
确定配色方案 / 321
定义组件风格 / 322
制作步骤详解 / 322

　　在科技高速发展的今天，移动设备已经成为人们生活和娱乐的必需品之一，移动设备的用户界面及体验越来越受到用户的关注。对于一个优秀的App应用程序，其界面的视觉设计起着关键作用，它是除交互式设计以外，用户能够直接接触到的东西。如果把App的功能比作人的肌肉和骨骼，那么移动UI的视觉设计就是人的外貌和品格，是一款成功的软件必不可少的重要组成部分。设计师如何才能设计出让人过目不忘且实用美观的界面呢？在本书中你可以找到答案。本书从移动UI界面设计的基础开始，针对当今主流的三大移动系统，讲述移动UI视觉设计的创意收集、设计重点、制作规范等一系列的知识，将理论与实践进行完美结合，通过从无到有、从局部到整体的方式讲解App应用程序的界面设计，帮助读者建立正确、实用的移动UI视觉设计的思路与方法。

　　《Photoshop CC移动UI界面设计与实战》内容梗概

　　第1部分 基础部分（Part 1~Part 3）：介绍移动UI视觉设计的基础知识，讲解移动UI视觉设计所使用到的Photoshop软件的常用操作功能，以及介绍移动UI界面中基础元素的设计规范。

　　第2部分 三大主流系统（Part 4 ~ P a r t 6）：对三大系统进行有针对性的讲解，从界面的图标、设计风格等角度入手，讲述三大系统各自的区别与特点，并利用相关的案例来介绍移动UI视觉设计的制作方法和技巧。

　　第3部分 App应用实例（Part 7~Part 14）：以完整的App界面设计为主要内容，通过对界面布局、创意、配色和组件等进行详细分析，用不同功能的App的创作思维和制作步骤来展示不同风格的移动UI界面设计的特点和制作方法。

　　《Photoshop CC移动UI界面设计与实战》特色分析

　　全面系统的知识体系：书中将三大主流系统的设计规范和风格进行了详细介绍，通过图文并茂、层次清晰的方式直观地展示出全面而系统的移动UI视觉设计的相关知识，帮助读者了解和掌握与移动UI视觉设计相关的概念和必备的基础知识。

　　精辟的设计思路剖析：在本书的案例中，我们针对案例设计的创意思路、设计来源等进行详细阐述，帮助读者形成自己的设计思维，并将设计创意分析与软件操作相结合，让读者在提升移动UI界面制作技能的同时，拓展创意和设计思维。

　　呈现精美的设计案例：书中包含了大量精美的App设计案例，每个案例都根据不同类型和功能的App进行构思和创作，并将平面设计知识和软件运用知识贯穿其中，可以帮助读者快速提高设计思维的灵活度和软件操作技能。

　　尽管作者在编写过程中力求准确、完善，但是书中难免会存在疏漏之处，恳请广大读者批评、指正，也欢迎大家加入QQ群进行交流。