突破平面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