APP UI设计手册（第2版）

本书是笔者从事APP UI设计工作多年的一个经验和技能总结，希望通过本书的学习可以让读者少走弯路，寻找到设计捷径。书中包含了APP UI设计必学的基础知识及经典技巧。本书不仅有理论和精彩的案例赏析，还有大量的模块启发读者的思维，锻炼读者的创意设计能力。
希望读者看完本书后，不只会说“我看完了，挺好的，作品好看，分析也挺好的”，这不是笔者编写本书的目的。希望读者会说“本书给我更多的是思路的启发，让我的思维更开阔，学会了举一反三，知识通过消化吸收、变成了自己的”，这才是笔者编写本书的初衷。
本书共分7章，具体安排如下。
第1章 APP UI设计的原理，介绍了APP UI设计的概念，用户体验，点、线、面，尺寸与规则，设计的原则，设计的法则，是最简单、最基础的原理部分。
第2章 APP UI设计的基础知识，其中包括UI与色彩、APP UI设计的布局。
第3章 APP UI设计的基础色，介绍红、橙、黄、绿、青、蓝、紫、黑、白、灰10种颜色，逐一分析讲解每种色彩在APP UI设计中的应用规律。
第4章 APP UI设计的元素，其中包括标志、图案、色彩、字体、导航栏、主视图、工具栏。
第5章 APP UI 设计的行业分类，其中包括9种不同行业的APP UI设计的详解。
第6章 APP UI设计的风格，其中包括12种不同的视觉印象。
第7章 APP UI设计秘籍，精选14个设计秘籍，可以让读者轻松、愉快地了解、掌握创意设计的干货和技巧。本章也是对前面章节知识点的巩固和提高，需要读者认真领悟并思考。
本书特色如下。
轻鉴赏，重实践。鉴赏类图书注重案例赏析，但读者往往看完还是设计不好，本书则不同，增加了多个动手的模块，让读者可以边看边学边练。
章节合理，易吸收。第1~3 章主要讲解APP UI 设计的基础知识；第4~6 章介绍APP UI 设计的元素、行业分类、风格等；最后一章以轻松的方式介绍14 个设计秘籍。
由设计师编写，写给未来设计师看。了解读者的需求，针对性强。
模块丰富。案例解析、设计技巧、配色方案、设计欣赏、设计实战、设计秘籍都能在本书中找到，一次性满足读者的所有求知欲。
本书是系列图书中的一本。在本系列图书中，读者不仅能系统地学习APP UI的设计知识，而且还可以全面了解创意设计规律和设计秘籍。
本书希望对知识的归纳总结、丰富的模块讲解，能够打开读者的设计思路，启发读者主动多做尝试，在实践中融会贯通、举一反三，从而激发读者的学习兴趣，开启创意设计的大门，帮助读者迈出创意设计的第一步，圆读者一个设计师的梦！
本书以二十大提出的推进文化自信自强的精神为指导思想，围绕国内各个院校的相关设计专业进行编写。
本书由刘丽编著，其他参与本书内容编写和整理工作的人员还有杨力、王萍、李芳、孙晓军、杨宗香等。
由于编者水平有限，书中难免存在错误和不妥之处，敬请广大读者批评和指正。
编 者

《APP UI设计手册（第2版）》是一本全面介绍APP UI设计的图书，特点是知识易懂、案例易学，在强调创意设计的同时，应用案例博采众长，举一反三。 《APP UI设计手册（第2版）》从学习APP UI设计的基础知识入手，由浅入深地为读者呈现出一个个精彩实用的知识、技巧。本书共分7章，内容分别为APP UI设计的原理、APP UI设计的基础知识、APP UI设计的基础色、APP UI设计的元素、APP UI 设计的行业分类、APP UI设计的风格、APP UI设计秘籍。同时，本书还在多个章节中安排了案例解析、设计技巧、配色方案、设计欣赏、设计实战、设计秘籍等经典模块，既丰富了本书内容，也增强了实用性。 《APP UI设计手册（第2版）》内容丰富、案例精彩、版式设计新颖，既适合从事APP UI设计、平面设计、广告设计、网页设计等专业的初级读者学习使用，也可以作为大中专院校平面设计专业及平面设计培训机构的教材。此外，还非常适合喜爱平面设计和APP UI设计的读者参考使用。

致力于研究视觉设计，有多年平面设计、色彩设计等教学经验，因教学方法独特、讲解细致而得到广大学员的认同。参与多个设计项目的策划及制作，曾服务过国内多家公司。

第1章 APP UI 设计的原理
1.1 APP UI 设计的概念   2
1.2 APP UI 与用户体验   2
1.3 APP UI 设计的点、线、面      3
1.3.1　点  3
1.3.2 线  3
1.3.3 面  4
1.4 尺寸与规则     5
1.4.1 IOS      5
1.4.2 Android      6
1.5 APP UI 设计的原则   7
1.5.1 突出性原则        7
1.5.2 商业性原则        7
1.5.3 趣味性原则        8
1.5.4 艺术性原则        8
1.6 APP UI 设计的法则   9
1.6.1 形式美法则        9
1.6.2 平衡法则   10
1.6.3 视觉法则   10
1.6.4 联想法则   10
1.6.5 直接展示法则    11
第2章  APP UI设计的基础知识
2.1 UI 与色彩     13
2.1.1 色相、明度、纯度  14
2.1.2 主色、辅助色、点缀色    14
2.1.3 邻近色、对比色     16
2.2 APP UI 设计的布局    16
2.2.1 对称式   17
2.2.2 曲线式   17
2.2.3 倾斜式   18
2.2.4 中轴式   18
2.2.5 文字式   18
2.2.6 图片式   19
2.2.7 自由式   19
2.2.8 背景式  20
2.2.9 水平式  20
2.2.10 引导式     20
第3章  APP UI设计的基础色
3.1 红    22
3.1.1 认识红色    22
3.1.2 洋红& 胭脂红       23
3.1.3　玫瑰红& 宝石红      23
3.1.4　朱红& 绛红      24
3.1.5　山茶红& 浅玫瑰红     24
3.1.6　火鹤红& 鲑红       25
3.1.7　壳黄红& 浅粉色      25
3.1.8　勃艮第酒红& 鲜红     26
3.1.9 灰玫红& 优品紫红     26
3.2 橙    27
3.2.1 认识橙色    27
3.2.2　橙色& 柿子橙       28
3.2.3　橘红色& 橘色       28
3.2.4　太阳橙& 热带橙      29
3.2.5 橙黄& 杏黄       29
3.2.6　米色& 蜂蜜色      30
3.2.7　沙棕色& 琥珀色     30
3.2.8　驼色& 咖啡色       31
3.2.9 棕色& 巧克力色      31
3.3 黄    32
3.3.1 认识黄色    32
3.3.2　黄色& 铬黄       33
3.3.3　金色& 柠檬黄       33
3.3.4　含羞草黄& 月光黄     34
3.3.5　香蕉黄& 香槟黄     34
3.3.6　金盏花黄& 姜黄色     35
3.3.7　象牙黄& 奶黄       35
3.3.8　那不勒斯黄& 卡其黄   36
3.3.9　芥末黄& 黄褐色      36
3.4 绿    37
3.4.1 认识绿色    37
3.4.2　黄绿& 叶绿       38
3.4.3　草绿& 苹果绿       38
3.4.4　嫩绿& 苔藓绿       39
3.4.5　奶绿& 钴绿       39
3.4.6　青瓷绿& 孔雀绿     40
3.4.7　铬绿& 翡翠绿      40
3.4.8　粉绿& 松花色      41
3.4.9　竹青& 墨绿      41
3.5 青    42
3.5.1 认识青色   42
3.5.2　青& 水青色      43
3.5.3　海青& 湖青绿      43
3.5.4　青绿色& 瓷青      44
3.5.5　淡青& 白青      44
3.5.6　花浅葱& 鸦青      45
3.5.7　青灰& 深青      45
3.5.8　青蓝& 靛青      46
3.5.9　群青& 藏青      46
3.6 蓝    47
3.6.1 认识蓝色   47
3.6.2　蓝& 矢车菊蓝      48
3.6.3　皇室蓝& 宝石蓝     48
3.6.4　浅蓝& 冰蓝      49
3.6.5　天蓝& 湛蓝      49
3.6.6　灰蓝& 水墨蓝      50
3.6.7　午夜蓝& 蓝黑色     50
3.6.8　孔雀蓝& 海蓝       51
3.6.9　钴蓝& 深蓝       51
3.7 紫    52
3.7.1 认识紫色    52
3.7.2　紫色& 薰衣草紫      53
3.7.3　淡紫色& 雪青色      53
3.7.4　蔷薇紫& 锦葵紫     54
3.7.5　三色堇紫& 蝴蝶花紫   54
3.7.6　藕荷色& 嫩木槿      55
3.7.7　灰紫色& 葡萄紫色     55
3.7.8　丁香紫& 紫藤色      56
3.7.9　紫风信子& 蓝紫色     56
3.8 黑、白、灰   57
3.8.1 认识黑、白、灰     57
3.8.2　白& 亮灰        58
3.8.3　浅灰&50% 灰   58
3.8.4　黑灰& 黑        59
第4章  APP UI 设计的元素
4.1 标志  61
4.1.1 简约素雅的标志设计     62
4.1.2 趣味多彩的标志设计     63
4.1.3 标志设计技巧——图文结合的设计方法    64
4.1.4 标志设计欣赏   64
4.2 图案  65
4.2.1 风格多变的图标设计     66
4.2.2 应用界面的图案设计     67
4.2.3 图案设计技巧——造型独特的图案     68
4.2.4 图案设计赏析    68
4.3 色彩  69
4.3.1 缤纷多彩的色彩设计    70
4.3.2 单一色调的色彩设计     71
4.3.3 色彩设计技巧——统计图的应用    72
4.3.4 色彩设计欣赏    72
4.4 字体  73
4.4.1 应用中的字体设计   74
4.4.2 图标中的字体设计   75
4.4.3 字体设计技巧——文字样式的修改     76
4.4.4 字体设计赏析    76
4.5 导航栏      77
4.5.1 顶部与底部的导航栏设计    78
4.5.2 “汉堡包菜单”的导航栏设计       79
4.5.3 导航栏设计技巧——适用屏幕旋转的设计     80
4.5.4 导航栏设计赏析    80
4.6 主视图      81
4.6.1 骨骼型的主视图设计     82
4.6.2 重心型的主视图设计     83
4.6.3 主视图设计技巧——采用不同的设计版式     84
4.6.4 主视图设计赏析    84
4.7 工具栏      85
4.7.1 固定工具栏设计     86
4.7.2 浮动工具栏设计     87
4.7.3 工具栏设计技巧——带搜索功能的工具栏     88
4.7.4 工具栏设计赏析     88
4.8 设计实战：社交软件用户信息界面设计     89
4.8.1 设计思路    89
4.8.2 配色方案    89
4.8.3 版面构图    91
4.8.4 色彩       91
4.8.5 字体       92
4.8.6 导航栏   92
第5章  APP UI 设计的行业分类
5.1 游戏类APP UI 设计      94
5.1.1 游戏类APP UI 设计——休闲类游戏     95
5.1.2 游戏类APP UI 设计——动作冒险类游戏     96
5.2 社交类APP UI 设计       98
5.2.1 社交类APP UI 设计——电话短信    99
5.2.2 社交类APP UI 设计——聊天交友      100
5.3 购物类APP UI 设计    102
5.3.1 购物类APP UI 设计——服装类    103
5.3.2 购物类APP UI 设计——产品类    104
5.4 工具类APP UI 设计    106
5.4.1 工具类APP UI 设计——地图导航      107
5.4.2 工具类APP UI 设计——天气预报      108
5.5 生活类APP UI 设计     110
5.5.1 生活类APP UI 设计——旅游     111
5.5.2 生活类APP UI 设计——外卖     112
5.6 娱乐类APP UI 设计    114
5.6.1 娱乐类APP UI 设计——音乐播放器     115
5.6.2 娱乐类APP UI 设计——视频播放器     116
5.7 阅读类APP UI 设计    118
5.7.1 阅读类APP UI 设计——小说阅读器     119
5.7.2 阅读类APP UI 设计——漫画阅读器    120
5.8 拍摄美化类APP UI 设计    122
5.8.1 拍摄美化类APP UI设计——相机       123
5.8.2 拍摄美化类APP UI设计——美化图片      124
5.9 新闻类APP UI 设计    126
5.9.1 新闻类APP UI 设计——新闻资讯       127
5.9.2 新闻类APP UI 设计——报纸杂志       128
5.10 设计实战：办公类APP UI 设计流程详解  130
5.10.1 设计思路      130
5.10.2 配色方案      131
5.10.3 版面构图      132
5.10.4 首页    132
5.10.5 收件箱     133
5.10.6 编写邮件      133
第6章  APP UI设计的风格
6.1 安全      135
6.1.1 安全——登录界面的UI 设计    136
6.1.2 安全——界面提示弹窗的UI 设计       137
6.2 清新      139
6.2.1 清新——明亮色彩的UI 设计   140
6.2.2 清新——形象可爱的UI 设计   141
6.3 科技      143