【现货速发】UI视觉与插画APP/电商/H5/小程序/网页/游戏视觉升华实战

任何视觉设计都需要考虑诸多因素，如品牌契合、体验等。但是，并不是说未来的UI设
计必须佐以插画，比如车机UI设计，就不适合掺杂过多的插画，车机界面讲究整洁、交互快
捷、安全。

再谈谈UI设计师从业问题。大家有没有感觉到，UI设计师开始拼学历了，大厂招聘的
相关岗位已经从名校硕士起步了，这其实也在一定程度上反映出前面提到的问题：UI设计
到了瓶颈了。

作为普通高校毕业生，你如何跟名校设计师竞争？那一定是要有拿得出手的作品。而当
下，立竿见影的提升方式就是插画 UI。

这就是本书的创作背景。

关于设计软件学习

我是一个美术设计专业的毕业生，当我发现有Photoshop绘图软件和Flash动画软件时
就开启了我的软件学习之路。但是，很多优秀的设计作品不仅仅是软件的运用，更多的是内
心的表达和创造。在北京从事设计工作12年，发现在软件学习方面全凭工作需要，所以我并
不是一直买教程学习，反而是更相信实战造英雄，所以在这本书里我想分享给大家一种学习
习惯。

这里会有很多人好奇我初的软件学习是如何开始的，这点跟学校老师要求我们完成
一幅作品、一套作业有直接关系，或许这也是很多设计师的起步。设计技能的学习和提升需
要有一个“热爱”的开始。当我在计算机设计（CG）杂志或《艺术与设计》杂志上看到学

 
前 言

III

长或一些CG艺术家的作品时，作为同专业的设计者是非常向往的，所以会找一些设计类网
站或者设计论坛，“爬”一些大神的设计文章，寻求些高效的设计绝招。工具不在于多，而
在于精。我开始学习的软件不是Photoshop，而是CorelDraw，用得多的操作是钢笔
或者套索工具，上色用得多的是透明形式的渐变。在起步阶段，你会发现软件使用技巧的
提升速度与练习时长成正比，所以那些简单枯燥的练习很有必要。如果设计的内容是你感兴
趣的，则会锦上添花，甚至会帮助你提升得更快，而不至于就此终结你的设计之路。熟练之
后是发现问题的开始。这是设计的第二阶段，这个阶段需要不断解决问题，也是开始对自己
作品提出要求的时候。无论是临摹还是创作，出现的大多问题会来自主体物的形状与色彩搭
配。这个阶段需要设计者解决自身对形的把控问题，解决问题的办法有很多，例如借助互联
网的素材库、实物照片，解决设计中构图、动势以及配色等问题。如果想设计出令人印象深
刻的作品，就需要提升自己的整体能力，这就像游戏中通关的进阶阶段。继续熟用软件，加
强对作品完整度的考虑、画面质感的追求，以及创意逻辑、用户思维和用户体验的深入，都
会让你成为一个有能力、有担当、从全局思考的设计师。设计的学习就像爬楼梯，一个台阶一
个台阶地走，一个脚印一个脚印地留。坚持就是胜利，必须有坚持的过程，方能成就高度。

我并不是职业网师，但是12年的互联网和移动端工作经验告诉我有些事情是可以做的，
例如替一些设计者解惑。在过去3年的教学经历中，我见过很多设计者：有的人求知，有的
人求技，有的人打酱油。UI行业的飞速发展，带来的业内薪资优势大家有目共睹，这是一
个很好的学习目标。有的人带着热情，作为能力并不全面的设计者在学习网络课程中不断完
善自我，从而能更好地创作出具有创意性的作品，这类设计者的共同特点是坚持不懈。任何
事就怕半途而废，每次学一点停一点，走走停停之后好像你什么都懂一点，其实什么都没深
入，也没了高度。所以这本设计书会让大家从每个完整的案例中学会一个简单的操作轨迹，
时间不长，难度不高，操作轨迹相同却又能推出不同的视觉效果，这也是设计的活学活用。
经过反复练习你就会发现，当你能打出一套组合拳的时候，量变到质变的提升效果终将浮出
水面。

本书的创新性

1. 本书的前三章分别介绍了作为视觉设计师需要了解的UI行业流程，扁平风格插画的
不同形式，以及扁平风格设计作品在多种艺术形式下的衍生品。这三章内容的介绍就像找对
象，你需要先大致了解对象的基本条件，例如身高、体重、样貌和家庭条件。紧接着是接
触，两个人合不合适需要互相接触，在接触的过程中你会发现在生活中对方有很多与你并不

 
UI视觉与插画

相同的经历，但终的“三观”是一致的。

2. 这是一本针对UI视觉设计中插画部分所做的案例教程。案例部分做了细分，例如第4
章人物部分，不仅讲人物从头到脚的设计思路以及人物姿态，还会将人物与场景结合，生成
完整的Banner案例。卡通形象部分设计中，会讲从扁平风格到手绘风格的轻松转换。在第5
章场景部分除了让大家学会量化素材，还有如何去拓展思路，通过欣赏其他设计师的作品得
到更多灵感。

3. 打好基础，学会独立面对项目。本书中的案例除了对常规UI设计中图标、页面的讲
解，在后半部分还非常详尽地讲解了设计项目从初思考的草稿，到之后一步步搭建，再
到调整完成的过程，以及掌握必要的字体设计技巧，例如修改字体和手写字、3D字体的设
计。行业内有句话是“技多不压身”，但技能多且更具备专业性，才是作品完整度的良好
基础。

希望大家不要荒废时光，即便是疫情期间，也要多学习，多读书，多思考。如果要永葆
设计的青春，那就一起加油吧！

业精于勤荒于嬉，行成于思毁于随。后希望大家能深刻理解这句经典名言，点亮自己
心中的目标，义无反顾，勇往直前。

 
付尧（扶摇直上）于沈阳

本书约定

y
y 
本书写作和操作基于苹果电脑（Mac），软件界面与PC基本一致。提醒注意：在快
捷键的使用上，Mac的Com键=PC的Ctrl键。
y
y
本书中，Photoshop简称为PS，Illustrator简称为AI。
y
y
本书部分素材和部分源文件，请扫码下载。

y
y 
本书内容尽可能保留干货，操作步骤仅保留关键步骤，比如带参数的步骤，具体操
作请到相关章节中扫码观看操作视频。

UI设计理论与技法，已经到达了相当完善的水平，传统UI设计很难有大的视觉突破，而插画风格的UI设计，可以立竿见影地改善UI视觉的干涩与千篇一律，于是，UI插画很快成为了UI设计师的常备技能。 《UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战》就是这样一本关于UI视觉设计中关于图形、插画的案例解析教程。阅读之后你会发现，单一的软件操作在创意思维的引领下将创造出更有品质的设计作品。 《UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战》共10章，非常详尽地讲解了扁平风格插画在设计中的技巧以及各种风格把控要义。内容分为4部分，分别为关于UI设计、插画设计在UI、插画风的UI周边设计、插画设计在行业（案例），包含人物设计、场景设计、UI图标设计、字体设计、H5电商设计、网页插画设计、小游戏/小程序设计等。除了详细的案例解析，《UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战》还会解读一些国内外优秀作品，让读者从中感受更多关于UI视觉设计的创意灵感。 《UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战》适合想进入UI行业的职场小白学习，也可作为UI从业者的职业突破参考书和Photoshop、Illustrator软件爱好者的案例学习参考书，还适合作为院校教育、社会培训、企业内训的教材。

付尧  视觉设计师，曾任职多家互联网公司。热衷于UI设计、插画、字体艺术、传统书法。性格佛系。

PART 1 关于UI设计
第1章 UI设计前景及趋势
01-01 UI的灵魂——插画设计
01-02 UI的设计流程
01-03 UI的设计规范浅谈
PART 2 插画设计在UI
第2章 UI中的插画浅谈
02-01 插画的价值
02-02 设计需要的习惯
02-03 UI插画中的风格
02-04 插画软硬件工具
第3章 从点线面开始
03-01 设计的起“点”
03-02 线的可塑性
03-03 “面”上那些事
03-04 视觉中的色彩
3.4.1 色彩的三要素
3.4.2 UI设计中的色调
第4章 卡通，人物设计
04-01 卡通形象设计
4.1.1 动势与比例基础
4.1.2 扁平人物从“线”开始（AI）
4.1.3 渐变人物小品（AI）
04-02 Banner中的人物（AI）
04-03 卡通——猫
4.3.1 插画中用AI线条起稿
4.3.2 从扁平风到手绘风（AI PS）
4.3.3 手绘一只猫（PS）
4.3.4 喵星人的表情包（AI）
第5章 空间，场景设计
05-01 插画场景
5.1.1 一棵盆栽（AI）
5.1.2 素材里的一片丛林（AI）
5.1.3 场景小品（PS）
05-02 风格转变与光源运用
5.2.1 风格转变--盖小屋（PS）
5.2.2 插画场景中的光源运用（PS）
5.2.3 场景中的植物系（AI）
PART 3 插画风的UI周边设计
第6章 UI图标设计
06-01 从UI图标入门学习
6.1.1 应用图标小常识
6.1.2 PS软件UI特训
6.1.3 所谓轻拟物（PS）
6.1.4 轻拟物——渐变的升级（PS）
06-02 “重”拟物设计
6.2.1 如何增加材质（PS）
6.2.2 相机案例（PS）
06-03 风格偏向设计
6.3.1 晶白风格（PS）
6.3.2 水晶风格（PS）
第7章 字体设计
07-01 字体艺术
7.1.1 英文字体中的混合
7.1.2 英文字体混合实践（AI）
07-02 手写字浅谈
7.2.1 毛笔字（PS AI）
7.2.2 Q版字体（AI）
7.2.3 3D字体设计（AI）
7.2.4 手写艺术字体（AI）
7.2.5 三维空间字体设计案例（AI）
PART 4 插画设计在行业（案例）
第8章 电商类插画设计
08-01 电商插画灵感与设计
08-02 手绘风格——双十一购物节（AI PS）
08-03 新年活动——闪屏页面（AI PS）
08-04 插画在不同用途中的转换（PS）
第9章 网页插画设计
09-01 电商设计师的自我要求
09-02 网页设计速成
09-03 电商头图设计（PS AI）
第10章 小程序/H5/小游戏/App插画设计
10-01 小程序/H5插画设计（PS）
10-02 小游戏插画设计
10-03 App插画设计（PS）
PART 5 行业围观
附录 设计师作品整理集
5-01 学生作品选登
5-02 抗疫作品选登
5-03 UI设计师面试宝典
5-04 Ul插画设计资源

UI设计理论与技法，已经到达了相当完善的水平，传统UI设计很难有大的视觉突破，而插画风格的UI设计，可以立竿见影地改善UI视觉的干涩与千篇一律，于是，UI插画很快成为了UI设计师的常备技能。 《UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战》就是这样一本关于UI视觉设计中关于图形、插画的案例解析教程。阅读之后你会发现，单一的软件操作在创意思维的引领下将创造出更有品质的设计作品。 《UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战》共10章，非常详尽地讲解了扁平风格插画在设计中的技巧以及各种风格把控要义。内容分为4部分，分别为关于UI设计、插画设计在UI、插画风的UI周边设计、插画设计在行业（案例），包含人物设计、场景设计、UI图标设计、字体设计、H5电商设计、网页插画设计、小游戏/小程序设计等。除了详细的案例解析，《UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战》还会解读一些国内外优秀作品，让读者从中感受更多关于UI视觉设计的创意灵感。 《UI视觉与插画：APP/电商/H5/小程序/网页/游戏视觉升华实战》适合想进入UI行业的职场小白学习，也可作为UI从业者的职业突破参考书和Photoshop、Illustrator软件爱好者的案例学习参考书，还适合作为院校教育、社会培训、企业内训的教材。

付尧  视觉设计师，曾任职多家互联网公司。热衷于UI设计、插画、字体艺术、传统书法。性格佛系。