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

图书标准信息

• 作者 陈晓历 著
• 出版社 人民邮电出版社
• 出版时间 2020-07
• 版次 1
• ISBN 9787115522221
• 定价 59.00元
• 装帧 平装
• 开本 16开
• 纸张 胶版纸
• 页数 192页
• 字数 380千字

【内容简介】

这是一本讲解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