内容简介

《APP UI设计之道》是全面学习APP UI设计和Photoshop使用方法与技巧的快速入门与提高教程， 内容包括Photoshop系统的使用基础、APP UI设计基础、APP中的光影设计、APP中的字体设计、简约Icon设计、三维Icon设计、多种图形设计、控件设计、界面设计、导航设计等。

在内容安排上，为了使读者更快地掌握软件的基本功能，书中结合大量的UI实例讲解Photoshop 软件中一些抽象的概念、命令和功能。在写作方式上，《APP UI设计之道》紧贴软件的实际操作界面，使用软件中真实的对话框、操控板和按钮等进行讲解，使初学者能够直观、准确地操作软件进行学习，从而尽快上手，提高学习效率。

《APP UI设计之道》内容全面，条理清晰，实例丰富，讲解详细，适合UI设计爱好者阅读，也可供想进入UI设计领域的读者朋友，以及设计专业的大中专学生阅读。

 

前言

我国互联网行业目前已经进入高速发展阶段，各行各业都在进军互联网行业，互联网产业的规模在不断扩大，用户体验越来越受到重视。随着技术领域的发展，产品的人性化意识日趋增强，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 章由李雪老师编写。杨宇璇、张婷、封素洁、代小华、封超等也参与了本书的编写。由于作者水平所限，本书错误在所难免，敬请广大读者批评指正。

编 者

 

 

目 录

第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