突破平面PHOTOSHOP UI界面设计与制作剖析

本书以Photoshop 2022版本为基础，介绍UI设计的相关内容，包括UI设计的理论知识、案例制作过程，以及课后设计技能的增强练习。

本书内容
本书内容编排如下： 第1章为初学者介绍UI设计的基础知识，包括UI设计的概念、不同UI类型的异同、设计的流程与配色，以及UI的组成元素、设计软件。
第2章介绍界面元素设计，分别讲解按钮、导航、搜索列表、对话框及播放控件的设计理念及绘制 方法。
第3章介绍图标的绘制，以折纸图标、浏览器图标、音量图标及社交软件图标为例，讲解制作过 程，包括理论知识与操作步骤。
第4章以手机APP界面为例，介绍购物APP首页、精选页、个人页及详情页的绘制方法，并提供了不 同类型的课后习题方便读者练习。
第5章以网络直播界面为例，讲解直播界面的设计过程，分别以不同案例为基础，介绍直播界面的 信息编排要点、绘制步骤。
第6章介绍网页界面的绘制，以音乐网站、网上商城、餐厅网站、设计机构网站的网页为例，介绍 不同类型网页的设计方法。
第7章介绍游戏界面的绘制，包括欢迎页、关卡页及闯关成功页，所讲解的内容涉及按钮的绘制、 文字的处理以及图文信息的排版等。
第8章介绍平板电脑APP界面的绘制，以音乐APP为例，讲解首页、搜索页及登录页的设计过程。 第9章介绍软件界面的绘制，介绍杀毒软件界面、截图软件界面、聊天软件界面等不同类型界面的设计方法。

本书由电子科技大学成都学院黄甦编著。由于编者水平有限，书中错误、疏漏之处在所难免。在感 谢您选择本书的同时，也希望您能够把对本书的意见和建议告诉我们。

配套资源及技术支持
本书的配套素材及视频教学文件请扫描下面的二维码进行下载，如果有技术性问题，请扫描下面的 技术支持二维码，联系相关人员进行解决。如果在配套资源下载过程中碰到问题，请联系陈老师，联系 邮箱：chenlch@tup.tsinghua.edu.cn。
编者
2023年7月

《突破平面Photoshop UI界面设计与制作剖析》共9章，第1章介绍UI设计的相关知识，包括UI设计的概念、设计流程以及配色等。第2章介绍APP UI元素设计，如按钮、导航、对话框以及列表等。第3章介绍图标的设计，讲解绘制折纸图标、浏览器图标以及音量图标的方法。第4章～第9章，介绍各种类型UI设计的方法，包括手机APP界面、网络直播界面、网页界面、游戏界面、平板电脑界面以及软件界面。 《突破平面Photoshop UI界面设计与制作剖析》语言通俗易懂，讲解深入、透彻，案例精彩、实战性强，读者不但可以系统、全面地学习使用Photoshop完成UI设计的整个流程，还可以利用课后习题检验本章的学习成果。 《突破平面Photoshop UI界面设计与制作剖析》适合广大Photoshop初学者，以及有志于从事UI设计、平面设计等工作的人员使用，同时也适合高等院校相关专业的学生和各类培训班的学员参考阅读。

第1章 UI界面设计概述1
1.1 认识UI界面设计1
1.1.1 什么是UI界面设计1
1.1.2 UI界面的类型1
1.1.3 UI界面设计的流程4
1.1.4 UI设计的配色5
1.1.5 UI界面设计的原则6
1.2 UI界面设计的软件7
1.2.1 Adobe Photoshop7
1.2.2 Adobe Illustrator14
1.3 本章小结14

第2章 UI界面元素设计15
2.1 按钮15
2.1.1 按钮的设计规范15
2.1.2 绘制开始游戏按钮16
2.1.3 绘制撤销按钮19
2.1.4 绘制立即购买按钮23
2.2 导航25
2.2.1 导航的设计规范25
2.2.2 绘制图标式导航27
2.2.3 绘制列表式导航29
2.2.4 绘制滑动式导航32
2.3 绘制其他类型的界面元素37
2.3.1 绘制搜索列表37
2.3.2 绘制调研对话框41
2.3.3 绘制播放器控件43
2.3.4 绘制宠物网站导航49
2.4 课后习题52
2.4.1 绘制登录按钮52
2.4.2 绘制播放进度条52
2.5 本章小结52

第3章 绘制图标53
3.1 图标设计基础53
3.1.1 图标设计的原则53
3.1.2 图标设计的流程53
3.1.3 图标的风格54
3.2 折纸图标55
3.3 浏览器图标56
3.3.1 绘制轮廓57
3.3.2 绘制指针59
3.4 音量图标60
3.5 社交软件图标62
3.6 网站图标65
3.6.1 绘制矩形65
3.6.2 添加素材66
3.6.3 绘制光影68
3.7 云空间图标69
3.7.1 绘制图形70
3.7.2 添加样式70
3.8 课后习题73
3.8.1 音乐图标73
3.8.2 日历图标73
3.8.3 水晶图标73
3.9 本章小结74

第4章 绘制手机APP界面75
4.1 APP界面的设计基础75
4.1.1 APP界面的设计规范75
4.1.2 APP界面的设计流程81
4.1.3 APP界面的分类81
4.2 认识APP界面的组成元素83
4.2.1 状态栏83
4.2.2 搜索框84
4.2.3 内容区域84
4.2.4 导航84
4.2.5 其他组件85
4.3 制作首页85
4.4 制作精选界面87
4.4.1 整理图形88
4.4.2 添加素材88
4.5 制作个人界面92
4.6 制作详情界面94
4.6.1 整理图形94
4.6.2 添加商品信息95
4.7 课后习题99
4.7.1 绘制美食APP登录界面99
4.7.2 绘制天气APP主界面99
4.7.3 绘制聊天APP界面99
4.8 本章小结100

第5章 绘制网络直播界面101
5.1 网络直播界面设计基础101
5.1.1 网络直播界面概述101
5.1.2 网络直播界面的设计流程101
5.1.3 网络直播界面的设计原则101
5.2 制作中国风直播预热页102
5.2.1 绘制背景102
5.2.2 绘制窗口103
5.2.3 绘制边框105
5.2.4 绘制文字107
5.2.5 绘制弹窗108
5.2.6 最终结果109
5.3 制作休闲食品直播界面111
5.3.1 绘制背景111
5.3.2 添加素材112
5.3.3 绘制大标题113
5.3.4 绘制装饰元素115
5.4 制作美妆直播预告界面116
5.4.1 绘制背景117
5.4.2 添加图形与文字素材118
5.4.3 最终结果121
5.5 课后习题122
5.5.1 绘制双11直播界面122
5.5.2 绘制6·18直播界面122
5.6 本章小结123

第6章 绘制网页界面124
6.1 网页界面设计基础124
6.1.1 网页界面的设计原则124
6.1.2 网页界面的设计流程124
6.1.3 网页界面的类型125
6.2 APP界面与网页界面的异同127
6.2.1 尺寸差异127
6.2.2 习惯差异128
6.2.3 精准度差异128
6.2.4 按钮位置128
6.2.5 按钮类型129
6.3 制作音乐网站主页130
6.3.1 绘制背景130
6.3.2 添加素材131
6.3.3 输入文字133
6.4 制作网上商城首页134
6.4.1 绘制背景134
6.4.2 添加图形与文字素材135
6.4.3 最终结果138
6.5 制作餐厅网站首页140
6.5.1 绘制背景140
6.5.2 绘制栏目内容141
6.5.3 最终结果144
6.6 制作设计机构网站首页147
6.6.1 绘制背景147
6.6.2 添加素材148
6.7 课后习题151
6.7.1 绘制北欧家居网站首页151
6.7.2 绘制旅游网站首页151
6.8 本章总结151

第7章 绘制游戏界面152
7.1 游戏界面设计基础152
7.1.1 游戏界面的概念152
7.1.2 游戏界面的设计流程152
7.1.3 游戏界面的设计原则152
7.2 制作欢迎页154
7.2.1 绘制背景154
7.2.2 绘制标题文字154
7.2.3 绘制按钮158
7.3 制作关卡页160
7.3.1 绘制背景160
7.3.2 绘制“上一关”按钮162
7.3.3 添加其他按钮165
7.3.4 绘制游戏区域167
7.3.5 绘制解锁按钮167
7.4 制作闯关成功页169
7.4.1 绘制背景169
7.4.2 绘制内部框架170
7.4.3 绘制标题172
7.4.4 绘制星星173
7.4.5 添加道具174
7.4.6 绘制询问按钮175
7.5 课后习题177
7.5.1 绘制商城页177
7.5.2 绘制通关页178
7.6 本章小结178

第8章 绘制平板电脑界面179
8.1 平板电脑界面概述179
8.2 绘制平板电脑音乐APP首页179
8.2.1 划分区域179
8.2.2 绘制轮播区域181
8.2.3 绘制主打歌曲内容182
8.2.4 绘制侧栏183
8.2.5 绘制播放进度区域184
8.3 绘制平板电脑音乐APP搜索页187
8.3.1 整理图形187
8.3.2 绘制键盘189
8.4 绘制平板电脑音乐APP登录界面190
8.5 课后习题193
8.5.1 绘制平板电脑视频APP首页193
8.5.2 绘制平板电脑健身APP首页193
8.6 本章小结194

第9章 绘制软件界面195
9.1 软件界面概述195
9.2 绘制杀毒软件界面197
9.2.1 绘制背景198
9.2.2 绘制控件198
9.2.3 添加元素200
9.3 绘制截图软件主界面202
9.3.1 绘制背景202
9.3.2 添加按钮202
9.3.3 绘制控件203
9.4 绘制聊天软件界面206
9.4.1 绘制背景206
9.4.2 添加元素207
9.5 绘制网盘软件登录界面209
9.5.1 绘制背景210
9.5.2 添加元素211
9.5.3 载入图标212
9.5.4 最终结果212
9.6 绘制压缩软件界面213
9.6.1 规划界面213
9.6.2 添加图标214
9.6.3 绘制其他内容216
9.7 课后习题218
9.7.1 绘制翻译软件界面218
9.7.2 绘制输入法软件界面218
9.8 本章小结218

《突破平面Photoshop UI界面设计与制作剖析》共9章，第1章介绍UI设计的相关知识，包括UI设计的概念、设计流程以及配色等。第2章介绍APP UI元素设计，如按钮、导航、对话框以及列表等。第3章介绍图标的设计，讲解绘制折纸图标、浏览器图标以及音量图标的方法。第4章～第9章，介绍各种类型UI设计的方法，包括手机APP界面、网络直播界面、网页界面、游戏界面、平板电脑界面以及软件界面。 《突破平面Photoshop UI界面设计与制作剖析》语言通俗易懂，讲解深入、透彻，案例精彩、实战性强，读者不但可以系统、全面地学习使用Photoshop完成UI设计的整个流程，还可以利用课后习题检验本章的学习成果。 《突破平面Photoshop UI界面设计与制作剖析》适合广大Photoshop初学者，以及有志于从事UI设计、平面设计等工作的人员使用，同时也适合高等院校相关专业的学生和各类培训班的学员参考阅读。

内容涵盖：UI设计的概念、流程、配色、设计原则、元素、图标等。
案例包括：手机APP、网络直播、网页、游戏、软件、平板电脑界面等。