新印象 中文版Sketch图标与UI界面设计实例教程

优设网主编 程远 站酷推荐设计师/《网页设计那些事儿》作者 王晖 《大话设计师》作者影天酱，百度前UI 设计师 王东 深圳市知行一信息技术有限公司联合创始人 袁宗保 UI中国认证推荐设计师/站酷百万人气设计师/ 百度设计师 黄俊杰 “菜园子”产品经理社区创始人/蜻蜓FM产品总经理/万达网络科技产品总经理/微软互联网研究院产品经理 /SAP中小企业部门的产品负责人 生菜众多大咖联袂推荐； 软件操作，设计理念，设计方法相辅相成的UI界面设计书； 配备案例源文件+独立视频课程实战＋拓展练习，更快更好学会。

这是一本讲解Sketch图标与UI界面设计的实例教程。全书根据日常生活中移动App界面的常见功能，分类讲解UI图标与界面设计的技巧与方法。全书共6章，以案例的形式分别讲解了图标设计、引导页设计、主页设计、图表页设计、个人中心页设计及登录页设计。针对图标的设计，分为线性图标、扁平图标和拟物图标的绘制；针对界面的设计，分为插画类型的引导页、不同功能的主页、色感强烈的图表页、不同形式的个人中心页及不同风格的登录页的制作。本书实战案例均配有拓展练习，同时提供了案例设计源文件及一套独立视频课程，目的是帮助UI设计学习者了解和掌握UI设计的规范、配色思路及具体的设计方法，同时使有一定UI设计经验的人得到提升。 本书适合UI设计初学者、有一定设计经验的UI设计师和交互设计师阅读。

陈晓历（Kiki），曾参与《爸爸去哪儿》《宫爆老奶奶》手游UI项目设计，以及《火影疾风坛》网页游戏项目设计。曾负责“星巴克”小程序设计项目。 搜狗签约皮肤设计师，作品多次被UI中国首页推荐。

第1章 图标设计 017
1.1 实战：绘制一套日记App 的线性图标 018
1.1.1 绘制“私信”图标 018
1.1.2 绘制“定位”图标 020
1.1.3 绘制“相机”图标 020
1.1.4 绘制“分享”图标 022
1.1.5 绘制“对话”图标 023
1.1.6 绘制“心”图标 024
1.1.7 绘制“个人”图标 026
1.1.8 绘制“支付”图标 026
1.1.9 绘制“闹钟”图标 027
1.1.10 绘制“Wi-Fi”图标 028
1.1.11 绘制“点赞”图标 029
1.1.12 绘制“图片”图标 031
1.1.13 绘制“购物车”图标 032
1.1.14 绘制“删除”图标 033
1.1.15 绘制“设置”图标 035
1.1.16 绘制“手机”图标 036
1.1.17 绘制“放大镜”图标 037
1.1.18 绘制“天气”图标 038
1.1.19 绘制“锁”图标 039
1.1.20 绘制“包”图标 040
拓展练习：绘制一套线性图标 041
1.2 实战：绘制一套社交App 的扁平图标 042
1.2.1 绘制“相机”图标 042
1.2.2 绘制“旋转”图标 045
1.2.3 绘制“圆形”图标 047
1.2.4 绘制“聊天”图标 048
1.2.5 绘制“闪电”图标 049
1.2.6 绘制“多色气泡”图标 050
拓展练习：绘制一个扁平化图标 052
1.3 实战：绘制一套工具类型的拟物图标 053
1.3.1 绘制“钟表盘”图标 054
1.3.2 绘制“按钮”图标 058
1.3.3 绘制“渐变色开关”图标 062
1.3.4 绘制“相机”图标 067
拓展练习：绘制一个拟物图标 078
第2章 引导页设计 079
2.1 实战：“ 心沟通”引导页的制作 080
2.1.1 绘制背景 080
2.1.2 绘制图形装饰背景 080
2.1.3 绘制心形图案 081
2.1.4 添加文字 082
2.1.5 绘制翻页元素 082
2.1.6 制作立体效果 083
拓展练习：绘制一个以实物图为背景的引导页 083
2.2 实战：“ 爱护鲸鱼”引导页的制作 084
2.2.1 绘制背景 084
2.2.2 绘制鲸鱼 087
2.2.3 绘制桥头 089
2.2.4 绘制小女孩 091
2.2.5 添加倒影 092
2.2.6 添加文字和斜线 093
2.2.7 制作立体效果 093
拓展练习：绘制一个“鲸鱼”主题的引导页 093
2.3 实战：“ 海上日出”引导页的制作 094
2.3.1 绘制波浪 094
2.3.2 绘制太阳 098
2.3.3 绘制浪花 099
2.3.4 添加文字 100
2.3.5 制作立体效果 100
拓展练习：绘制一个与案例同类型的引导页 100
2.4 实战： “萌胖减重”引导页的制作 101
2.4.1 绘制海浪 101
2.4.2 绘制救生圈 103
2.4.3 绘制卡通人物 104
2.4.4 添加小黄鸭 106
2.4.5 添加文本 107
2.4.6 制作立体效果 108
拓展练习：绘制一个“中秋赏月”主题的引导页 108
第3章 主页设计 109
3.1 实战：相机主页的制作 110
3.1.1 绘制背景 110
3.1.2 绘制操作栏图标 111
3.1.3 制作立体效果 112
拓展练习：绘制一个黑色效果的相机主页 112
3.2 实战：酷炫音乐播放器主页的制作 113
3.2.1 绘制背景 113
3.2.2 编辑图片 113
3.2.3 绘制状态栏和操作栏的图标 114
3.2.4 绘制播放器 115
3.2.5 制作立体效果 117
拓展练习：绘制一个紫色炫酷类型的播放器主页 117
3.3 实战：音乐播放器主页的制作 118
3.3.1 绘制背景 118
3.3.2 编辑图片 118
3.3.3 绘制顶部操作栏 119
3.3.4 绘制播放器 120
3.3.5 制作立体效果 121
拓展练习：绘制一个极简风格的播放器主页 121
3.4 实战：微故事主页的制作 122
3.4.1 绘制背景 122
3.4.2 绘制标题 122
3.4.3 绘制卡片 123
3.4.4 制作立体效果 124
拓展练习：绘制一个卡片类型的电影App主页 124
3.5 实战：推荐文章主页的制作 125
3.5.1 绘制背景 125
3.5.2 绘制页边 125
3.5.3 绘制状态栏 126
3.5.4 绘制底部操作栏 126
3.5.5 添加正文 126
3.5.6 制作立体效果 128
拓展练习：绘制一个图文混排的好文章分享App主页 128
3.6 实战：直播App主页的制作 129
3.6.1 绘制背景 129
3.6.2 绘制操作栏图标 129
3.6.3 制作立体效果 132
拓展练习：绘制一个渐变效果的视频剪辑App主页 132
第4章 图表页设计 133
4.1 实战：简约水波图表页的制作 134
4.1.1 绘制背景 134
4.1.2 绘制顶部水纹 134
4.1.3 绘制定界框并放入图标 136
4.1.4 绘制圆圈部分图标 136
4.1.5 添加文本 138
4.1.6 绘制底部列表 139
4.1.7 完善细节 140
4.1.8 制作立体效果 141
拓展练习：绘制一个渐变发光效果的数据图表页 141
4.2 实战：渐变互动指数图表页的制作 142
4.2.1 绘制背景 142
4.2.2 绘制定界框 143
4.2.3 添加文本 143
4.2.4 绘制指数图部分 144
4.2.5 制作立体效果 145
拓展练习：绘制一个蓝紫色的图表页 145
4.3 实战：渐变活力评分图表页的制作 146
4.3.1 绘制背景 146
4.3.2 绘制操作栏 148
4.3.3 绘制圆环部分 148
4.3.4 绘制卡片部分 149
4.3.5 制作立体效果 153
拓展练习：绘制一个极简风格的图表页 153
4.4 实战：渐变业绩图表页的制作 154
4.4.1 绘制背景 154
4.4.2 绘制状态栏 154
4.4.3 绘制卡片部分 155
4.4.4 绘制列表 156
4.4.5 制作立体效果 158
拓展练习：绘制一个卡片样式的图表页 158
第5章 个人中心页设计 159
5.1 实战：居中形式的个人中心页制作 160
5.1.1 绘制背景 160
5.1.2 绘制定界框 160
5.1.3 绘制用户信息 161
5.1.4 添加图标 162
5.1.5 添加数据信息 162
5.1.6 添加底部图片 163
5.1.7 制作立体效果 164
拓展练习：绘制一个居中形式的个人中心页 164
5.2 实战：侧边形式的个人中心页制作 165
5.2.1 绘制背景 165
5.2.2 绘制定界框 165
5.2.3 添加用户头像 166
5.2.4 添加文本 166
5.2.5 制作立体效果 167
拓展练习：绘制一个侧边栏样式的个人中心页 167
5.3 实战：斜边形式的个人中心页制作 168
5.3.1 绘制背景 168
5.3.2 绘制定界框 169
5.3.3 绘制图标 170
5.3.4 添加用户信息 170
5.3.5 绘制列表 171
5.3.6 添加按钮 172
5.3.7 制作立体效果 173
拓展练习：绘制一个左对齐形式的个人中心页 173
5.4 实战：中心展示类的个人中心页制作 174
5.4.1 制作用户信息 174
5.4.2 制作列表信息 175
5.4.3 绘制“提示”按钮 175
5.4.4绘制“关闭”按钮 176
5.4.5 制作立体效果 176
拓展练习：绘制一个中心展示形式的个人中心页 176
第6章 登录页设计 177
6.1 实战：时尚不规则卡片登录页的制作 178
6.1.1 绘制背景 178
6.1.2 绘制卡片 179
6.1.3 绘制定界框 179
6.1.4 添加登录信息 180
6.1.5 添加细节 180
6.1.6 制作立体效果 181
拓展练习：绘制一个极简登录页 181
6.2 实战：极简风格登录页的制作 182
6.2.1 绘制背景 182
6.2.2 添加导航栏信息 182
6.2.3 绘制头像 183
6.2.4 绘制“相机”图标 183
6.2.5 绘制列表 184
6.2.6 绘制按钮 184
6.2.7 制作立体效果 185
拓展练习：绘制一个极简风格的卡片登录页 185
6.3 实战：透气建筑风格登录页的制作 186
6.3.1 绘制背景 186
6.3.2 绘制定界框 188
6.3.3 添加装饰色块 188
6.3.4 添加登录信息 188
6.3.5 添加按钮 188
6.3.6 制作立体效果 189
拓展练习：绘制一个建筑风格的登录页 189
6.4 实战：渐变小弹框登录页的制作 190
6.4.1 绘制背景 190
6.4.2 绘制卡片 190
6.4.3 添加文本 191
6.4.4 制作立体效果 192
拓展练习：绘制一个卡片类型的登录页 192