新印象——中文版Sketch图标与UI界面设计实例教程 sketch教程书籍 网页美工 淘宝美工教程书 ui设计书

内容介绍

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

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

Sketch教程，ui设计，一本软件操作，设计理念，设计方法相辅相成的UI界面设计书，配备案例源文件+独立视频课程实斋拓展练习工具书。