描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302495567
《APP UI设计之道》以Photoshop UI图标制作和界面交互设计为中心，通过50余个典型实例，讲解了当前热门的手机APP UI设计技术，主要有图标制作、质感效果制作、字体制作、三维ICON制作、图形设计、各类控件制作等，以及手机整体界面的制作方法，帮助读者在短的时间内精通UI设计技术，迅速从新手变为UI界面和APP界面的设计高手。适合UI设计爱好者，想进入UI设计领域的读者朋友，以及设计专业的大中专学生阅读。
《APP UI设计之道》的内容设计以让读者学有所依、学有所用为宗旨，采用以例带点的讲解方式，即将每个知识点的讲解都融入到具体的典型实例中，范例丰富、情景生动、图文并茂、内容翔实，可以带给读者独特而高效的学习体验。
《APP UI设计之道》是全面学习APP UI设计和Photoshop使用方法与技巧的快速入门与提高教程，
内容包括Photoshop系统的使用基础、APP UI设计基础、APP中的光影设计、APP中的字体设计、简约Icon设计、三维Icon设计、多种图形设计、控件设计、界面设计、导航设计等。
在内容安排上，为了使读者更快地掌握软件的基本功能，书中结合大量的UI实例讲解Photoshop 软件中一些抽象的概念、命令和功能。在写作方式上，《APP UI设计之道》紧贴软件的实际操作界面，使用软件中真实的对话框、操控板和按钮等进行讲解，使初学者能够直观、准确地操作软件进行学习，从而尽快上手，提高学习效率。
《APP UI设计之道》内容全面，条理清晰，实例丰富，讲解详细，适合UI设计爱好者阅读，也可供想进入UI设计领域的读者朋友，以及设计专业的大中专学生阅读。
目 录
第1 章 Photoshop 系统的使用基础 1
1.1 Photoshop 的安装、卸载、启动和退出 2
1.1.1 安装Photoshop 2
1.1.2 卸载Photoshop 2
1.1.3 启动Photoshop 2
1.1.4 退出Photoshop 3
1.2 图形图像文件的基本操作 4
1.3 Photoshop 系统界面调整 8
1.3.1 界面组成部分 9
1.3.2 调整界面 14
第2 章 APP UI 设计基础 15
2.1 APP UI 设计概述 16
2.1.1 UI 设计概述 16
2.1.2 APP 概述 16
2.1.3 Photoshop 软件 17
2.1.4 APP UI 设计技术 18
2.2 APP UI 界面设计团队与流程 20
2.2.1 APP 界面设计者与产品团队 20
2.2.2 APP 界面设计与项目流程 21
2.2.3 视觉设计 22
2.3 APP UI 界面设计理论 23
2.3.1 用户操作习惯 23
2.3.2 界面布局 23
2.3.3 操作简单 28
2.3.4 在操作方式上创新 29
2.3.5 在设计中投入情感 29
2.3.6 APP UI 的配色理论 29
2.4 APP UI 界面设计技巧 33
2.4.1 完整的APP UI 设计流程 34
2.4.2 图标设计的流程 37
2.4.3 让图标更具吸引力 37
第3 章 APP 中的光影设计 39
3.1 玻璃质感图标设计 40
3.1.1 设计构思 40
3.1.2 操作步骤 40
3.2 牛仔裤质感设计 49
3.2.1 设计构思 49
3.2.2 操作步骤 49
3.3 木纹质感设计 64
3.3.1 设计构思 64
3.3.2 操作步骤 64
3.4 绚丽光线界面设计 94
3.4.1 设计构思 94
3.4.2 操作步骤 94
3.5 UI 设计师技能：颜色搭配 102
3.5.1 简约配色设计 102
3.5.2 混合特效设计 103
3.5.3 具体案例 104
第4 章 APP 中的字体设计 105
4.1 斜面浮雕字体设计 106
4.1.1 设计构思 106
4.1.2 操作步骤 106
4.2 钻石字体设计 112
4.2.1 设计构思 112
4.2.2 操作步骤 113
4.3 立体岩石材质字体设计 118
4.3.1 设计构思 118
4.3.2 操作步骤 118
4.4 UI 设计师技能：文字设计 126
4.4.1 字号设计 126
4.4.2 UI 文字设计标准 127
第5 章 APP 中的简约Icon设计 129
5.1 联系人图标设计 130
5.1.1 设计构思 130
5.1.2 操作步骤 130
5.2 搜索图标设计 132
5.2.1 设计构思 132
5.2.2 操作步骤 133
5.3 照相机图标设计 135
5.3.1 设计构思 135
5.3.2 操作步骤 135
5.4 闹钟图标设计 140
5.4.1 设计构思 140
5.4.2 操作步骤 140
5.5 简约平面图标整套设计 150
5.5.1 设计构思 150
5.5.2 操作步骤 151
5.6 设计师技能：图标大小选择 163
第6 章 APP 中的三维Icon设计 165
6.1 音乐图标设计 166
6.1.1 设计构思 166
6.1.2 操作步骤 166
6.2 录音器图标设计 172
6.2.1 设计构思 172
6.2.2 操作步骤 173
6.3 电话簿图标设计 177
6.3.1 设计构思 177
6.3.2 操作步骤 177
6.4 立体勾选框图标设计 182
6.4.1 设计构思 182
6.4.2 操作步骤 182
6.5 实体手机设计 188
6.5.1 设计构思 188
6.5.2 操作步骤 188
6.6 UI 设计师技能：图标的设计 202
6.6.1 表现形态 202
6.6.2 图标特性 203
6.6.3 图标设计的构思 204
第7 章 APP 中的多种图形设计 205
7.1 二维码扫描图形设计 206
7.1.1 设计构思 206
7.1.2 操作步骤 206
7.2 徽标图形设计 210
7.2.1 设计构思 210
7.2.2 操作步骤 210
7.3 个性条形码设计 218
7.3.1 设计构思 218
7.3.2 操作步骤 218
7.4 夏日海景宣传海报设计 222
7.4.1 设计构思 222
7.4.2 操作步骤 222
7.5 UI 设计师技能：构图技巧 231
7.5.1 粗细对比 231
7.5.2 远近对比 231
7.5.3 疏密对比 231
7.5.4 动静对比 231
7.5.5 中西对比 232
7.5.6 古今对比 232
第8 章 APP 中的控件设计 233
8.1 立体旋钮设计 234
8.1.1 设计构思 234
8.1.2 操作步骤 234
8.2 开关按钮设计 243
8.2.1 设计构思 243
8.2.2 操作步骤 243
8.3 金属质感旋钮设计 250
8.3.1 设计构思 251
8.3.2 操作步骤 251
8.4 进度按钮设计 260
8.4.1 设计构思 260
8.4.2 操作步骤 260
8.5 透明界面按钮设计 266
8.5.1 设计构思 266
8.5.2 操作步骤 266
8.6 滑动控件设计 287
8.6.1 设计构思 287
8.6.2 操作步骤 287
8.7 UI 设计师：如何设计按钮 292
8.7.1 关联分组 292
8.7.2 层级关系 292
8.7.3 善用阴影 292
8.7.4 圆角边界 293
8.7.5 强调重点 293
8.7.6 按钮尺寸 293
8.7.7 表述必须明确 294
第9 章 APP 中的界面设计 295
9.1 Loading 游戏加载界面设计 296
9.1.1 设计构思 296
9.1.2 操作步骤 296
9.2 日历和拨号界面设计 304
9.2.1 设计构思 304
9.2.2 操作步骤 304
9.3 清新主题的对话框设计 326
9.3.1 设计构思 327
9.3.2 操作步骤 327
9.4 个性化报错界面设计 333
9.4.1 设计构思 333
9.4.2 操作步骤 334
9.5 UI 设计师技能：界面设计 343
9.5.1 清晰地展现信息层级 343
9.5.2 采用一致的设计语言 344
9.5.3 在细节上给予惊喜 344
第10 章 APP 中的导航设计 345
10.1 导航栏设计 346
10.1.1 设计构思 346
10.1.2 操作步骤 346
10.2 透明列表界面设计 349
10.2.1 设计构思 350
10.2.2 操作步骤 350
10.3 设置界面设计 359
10.3.1 设计构思 360
10.3.2 操作步骤 360
10.4 扁平化手机界面的设计 365
10.4.1 设计构思 366
10.4.2 操作步骤 366
10.5 UI 设计师技能：UI 设计原则 373
10.5.1 可视性 373
10.5.2 反馈 374
10.5.3 限制 374
10.5.4 映射 374
10.5.5 一致性 374
10.5.6 启发性 374
第11 章 APP 综合案例设计 375
11.1 引导界面设计 376
11.1.1 设计构思 376
11.1.2 操作步骤 376
11.2 登录/ 注册界面的设计 381
11.2.1 设计构思 381
11.2.2 操作步骤 381
11.3 扁平化选择列表设计 385
11.3.1 设计构思 385
11.3.2 操作步骤 385
11.4 欢迎界面的设计 389
11.4.1 设计构思 389
11.4.2 操作步骤 389
前言
我国互联网行业目前已经进入高速发展阶段，各行各业都在进军互联网行业，互联网产业的规模在不断扩大，用户体验越来越受到重视。随着技术领域的发展，产品的人性化意识日趋增强，UI 设计师也成了这两年的紧俏职业。
现在手机屏幕越来越大，各种智能设备的发展，对软件界面设计的要求也越来越高。APP 界面设计已不仅满足于追求时髦的人的手机炫酷，已经成为企业形象宣传的一把利器。鉴于此，APP 应用公司越来越重视界面设计的个性化、时尚化与服务化。
用户对APP 界面设计的要求是不断变化的，近几年的发展趋势主要是要求简洁和易用，扁平化已成为火的发展趋势。简洁设计旨在通过清晰的视觉交流来解决用户的问题，而简单的用户界面结合强大的可用性，会令用户印象深刻。一个简单易用的应用也能更容易地传播和推广。
本书汇集作者在手机APP 界面设计方面的丰富经验，详细讲解APP 手机界面设计知识，从写实到新潮，从质感到流行，从图标到整体商业案例系统，手把手教您学会APP 界面的创意设计。
通过阅读本书，读者可以快速了解以下内容：
快速认识并了解UI 设计。
快速掌握图标制作基础。
学会制作写实APP 图标。
快速掌握iOS新潮扁平风的设计技法。
学会质感APP 的表现手法。
熟练掌握个性化字体设计的方法。
掌握真正的手机APP 界面商业案例设计的技巧。
本书采用版本软件Photoshop CC 2017 来制作和讲解，Photoshop 作为目前非常流行的一款设计软件，凭借其强大的功能和易学易用的特性，深受广大设计师的喜爱。同时，本书并不局限于具体的软件版本，而同样适合于CS、CS2、CS3、CS4、CS5、CS6 版本，所以读者完全不用担心会被软件版本所困扰。
本书内容全面、结构清晰、实例新颖，采用理论知识与操作案例相结合的教学方式，全面地向用户介绍了手机APP UI 界面设计所需的基础知识和操作技巧，综合实用性较强，可确保用户能够理解并掌握相应的功能与操作。读者可登录http://www.tup.com.cn 下载本书案例素材文件。
本书主要由华北理工大学的甘霖、李雪老师编写，其中第1、2、3、4、7、8、11 章由甘霖老师编写，第5、6、9、10 章由李雪老师编写。杨宇璇、张婷、封素洁、代小华、封超等也参与了本书的编写。由于作者水平所限，本书错误在所难免，敬请广大读者批评指正。
编 者
第3 章 APP 中的光影设计
本章收录了四个界面和图标的设计实践练习，包含图形绘制、图层样式技巧等操作。通过这些练习，可以使读者更加深刻地认识到光与影在设计中起到的重要作用。
关键知识点
矢量工具的应用
透视感和玻璃质感
图层样式
光与影
3.1 玻璃质感图标设计
玻璃质感被广泛应用于设计中，可以说是设计师的宠儿。这不仅因为玻璃看上去玲珑剔透、透明质感非常好，还因为玻璃的反光会轻松营造出清新、唯美的感觉。
3.1.1 设计构思
本案例制作具有玻璃质感的界面。首先利用绿色作为背景，为圆角矩形添加图层样式表现出玻璃的质感，再加上反光的设计，使玻璃质感更加突出，后绘制APP 图标，完成本例的制作。
3.1.2 操作步骤
(1) 新建文档。执行“文件”→“新建”命令，在弹出的“新建文档”窗口中，选择新建一个800×800 像素的文档，如图3-1 所示。
(2) 设置颜色。在工具栏中把前景颜色设置为深绿色(#1e7214)，把背景颜色设置为绿色(#46a33b)，如图3-2 所示。
图3-1 图3-2
(3) 填充渐变。单击工具栏中的“渐变工具”，打开渐变编辑器，在背景图层中填充渐变色，如图3-3 和图3-4 所示。
(4) 绘制圆角矩形。新建图层，单击工具栏中的“圆角矩形工具”按钮，在选项栏中选择工具的模式为“形状”，绘制圆角矩形，如图3-5 和图3-6 所示。
(5) 添加斜面和浮雕。执行“添加图层样式”→“斜面和浮雕”命令，打开“图层样式”面板。选择“斜面和浮雕”选项，设置参数，添加斜面和浮雕效果，如图3-7 和图3-8 所示。
(6) 添加描边。在打开的“图层样式”界面中选择“描边”选项，设置参数，添加描边效果，如图3-9 和图3-10 所示。
图3-3 图3-4
图3-5 图3-6
图3-7 图3-8
图3-9 图3-10
(7) 添加内阴影。在打开的“图层样式”界面中选择“内阴影”选项，设置参数，添加内阴影效果，如图3-11 和图3-12 所示。
图3-11 图3-12
(8) 添加内发光。在打开的“图层样式”界面中选择“内发光”选项，设置参数，添加内发光效果，如图3-13 和图3-14 所示。
图3-13 图3-14
(9) 添加投影。在打开的“图层样式”界面中选择“投影”选项，设置参数，添加投影效果，如图3-15 和图3-16 所示。
图3-15 图3-16
(10) 绘制圆角矩形。新建图层，单击工具栏中的“圆角矩形工具”按钮，在选项栏中选择工具的模式为“形状”，绘制圆角矩形，如图3-17 和图3-18 所示。
图3-17 图3-18
(11) 不透明度。修改图层的不透明度为18%、填充为38%，如图3-19 所示。
(12) 改变描点。单击工具栏中的“转换点工具”，转化为常规路径，如图3-20 所示。
图3-19 图3-20
(13) 添加渐变叠加。执行“添加图层样式”→“渐变叠加”命令，打开“图层样式”面板。选择“渐变叠加”选项，设置参数，添加渐变叠加效果，如图3-21 和图3-22 所示。
评论
还没有评论。