在这里先给大家分享一组近期APP使用过程中发现的UI&交互知识点，大家可以一起学习交流，对于个人观点不认同的可以在下面留言探讨，thanks~

产品即场景，体验又贯穿整个产品~孰重孰轻早已分不清

产品即场景，而场景化核心要素之一的“体验”，是其中最重要的一项。

本文从体验出发，结合AARRR（用户增长）模型进行阐述，其中我认为该模型的使用必须是在产品搭建的场景下才能运作的。而其中涉及每一步的良好体验刚好又反哺场景的完善。

从获取-激活-留存-转化-传播每一个步骤中都存在内部因素和外部因素。本文只讲内部因素，产品从最开始的外部获客，转向产品内部的使用体验，再转向外部传播的这么一个过程。

文章不是教案，更不是真理。希望大家带着批判的眼光去看待每一篇文章。毕竟思辨精神才是形成独立思维的法宝。由于文章较长，我会分成上下两部分发布，进入正文：

获取（ACQUISITION）分为三个部分：

一：自然流量的获取

自然流量的获取，我们能干涉其中的体验非常少，只能打磨产品本身。但是自然流入的用户一定是基于以下几个点中的其中一个或多个。我们或许可以干涉体验前~

1.某个社会现象、热点所引发的相关功能性需求（例如前不久滴滴司机杀害空姐事件，引发多少芳龄少女的恐慌。提高了强烈的安全意识，这时候你会发现App Store里面一款app杀了出来“怕怕”（有兴趣的朋友自行下载体验），正是这个社会热点现象引发的自然流量暴增。当然也不排除产品借这个热点营销自己的产品）

2.某个痛点确确实实需要解决（当某类用户存在某个痛点时，会自己通过搜索或者同类产品对比选择一款产品进行使用，如果你的产品刚好能帮助使用者解决痛点，那么你成功吸引了用户。）

3.纯粹进行产品的体验（产品发烧友、同类竞品的体验人员、无意中下载的等）。我们称为无效流量，因为这部分用户一般是不太可能成为产品的忠实粉丝的。他没有明确的目的、没有明确要解决的痛点。

二：运营推广的获取

运营推广这个名词在互联网诞生之前就已经存在了。只是说原来传统的营销手段即产品-价格-渠道-促销开始逐渐失效。转而变为场景化的运营推广。将推广落实到具体的小场景中。

1.线上推广

其中线上推广包含线上营销活动（营销活动又分为已有话题进行营销【可以选择融入当前的热点话题类似节日、娱乐圈大事件等】&【提供话题痛点解决方案进行营销】和制造话题营销【创造业内的话题】【通过深度用户进行制造话题】、优惠活动（包括邀请好友得好礼、会员优惠、某个节日优惠等）。线上推广无非就是通过网络搭建虚拟场景，通过场景边界的不断延伸，覆盖吸引更多的用户参与进来。

2.线下推广

线下推广包含地推（地推不可避免的会带来2部分的人群：被地推活动中的奖品吸引的人；确实被产品的介绍所吸引的人）、海报&代言（同样会有2部分人群：被明星效应所吸引的人；被产品介绍所吸引的人）、门店的互相导流合作。线下推广效率远远没有线上推广来的快。但是对于需要线下场景的产品来说，这又是必不可少的。

三：社群自传播

通过单点击破，这就需要运营团队有很好的洞察能力，找到符合产品调性的社群，通过事件引爆该社群或者社区，让社群成为你产品的拥护者和传播者。

1.通过老带新的模式进行获取用户

当产品与老用户之间建立很好的纽带关系后，老用户自然会以个人为中心，向外帮你宣传产品。

2.引爆社群

通过各类社区，找到符合你产品的目标人群。通过对该社群的研究，运用社群内部语言或者表达，调动整个社群帮你发力。有点及面的扩散，称之为“气球理论（很细的一根针就能戳爆气球）”这同样是能引爆传播性特别重要的一点。

3.参与感（社会关系绑定）

当你周围的人都在转发或者都在使用的时候，如果你不了解或不使用的话，会引起个体的孤独感。也就是说“他们都在玩，我不玩就落伍了”，但是这种情况在产品推广的前期一般不太会出现。当传播势能达到一定程度的时候，才会出现刷爆朋友圈！

激活（ACTIVATION）分为二个部分：

当用户从外部导流进产品后，这时用户的去或留都跟产品&业务有关。如何让用户在进入产品后自然而然的进行使用也就是防呆原则。对，通过引导或者吸引使用者进行下一步操作。（打个比方，你去一家陌生的餐厅，进去后没任何人招呼你，没人告诉你要去选位置或者点菜，是不是有不知所措的感觉，我想你很快就会另寻他家吧）

一：进入产品后的操作引导

1.视觉引导（包括页面元素优先级、页面元素突出强弱进行视觉上的引导，很常见的就是：在你第一次使用某个产品时，会引导使用者进行第一步第二步的操作，降低用户对产品的陌生感）

2.动效引导（通过页面浮层的形式教育用户如何进行操作，这也是在产品设计中，对新用户的一种引导方式）说到底就是为了消除用户对新鲜事物的陌生感和手足无措感。

二：产品本身是否能激起用户的探索欲

当然这个问题本身是建立在是否能真正的帮助用户解决某些方面的痛点。否则再强的探索欲，也跟你产品本身没有关系。如何激起用户的探索欲？

1.产品整体视觉表现、使用流程的体验是不是够吸引人，是不是有属于产品本身吸引人的点。（当年的path效果，直接将它送上全民热潮之巅）

2.产品是否对使用者产生持续的吸引能力，产品前期只有不断的通过各种方式刺激用户。（产品体验优化、活动力度、宣传方式、让惠让利等）但需要注意的是：过度营销不等于有效刺激。

3.产品的任务流程设置是否合理，正常情况都是由简单到复杂的程度设置任务，由于用户的沉默成本，当完成一定任务后，就会沉淀下来慢慢成为产品的忠实用户。（摩拜产品是先让用户填写个人信息，最后才提示充值押金，站在使用者的角度来看，已经把个人信息都出卖给平台了，还在乎那200多块钱吗？不然你让他把流程倒过来试试，先充钱，再填信息。保证没多少人会用）。流程设置就像钩子一样，慢慢慢慢的把用户勾住。

上半部分先到这里，下半部分会从“留存”“转化”“传播”角度进行展开~

多数人能够成为很厉害的设计师，很厉害的产品经理。凡事都会有所谓的套路，当你熟知了解某个行业，或者多个行业的套路时。你会站在更高的视角看待问题，同样你会走的比人家更远更快。所谓的套路，是基于个人而言，可能你有个很好的导师能够告诉你以往的经验。但是我更认为，套路是通过一步步看似笨拙的努力不断总结不断归纳

众所周知，相较于平淡无奇，毫无重点的网页UI设计，具有良好视觉层次结构的网页UI设计更受用户青睐。为什么呢？答案其实很简单。极赋视觉层次感的页面设计不仅极具设计美感，取悦用户身心。而且还建立了清晰直观的视觉层级， 方便用户简单快速的识别和读取需要的页面内容，从而提升用户体验，降低跳出率。

一、什么是峰终定律

峰终定律是由诺贝尔奖得主 DanielKahneman 提出的，百度百科上它是属于心理学上的定义。

我把它结合了自己的理解应用在设计学上可以解释为：

用户在使用某个硬件产品，软件产品或者服务系统来完成自己目标的过程中，用户情感地图曲线的波峰（体验最好）、波谷（体验最差）、结束点的体验，决定用户对整个过程的体验评价。

而在过程中体验好与不好体验的比重，好与不好体验的时间长短，对记忆几乎没有影响。

这一定律主要是阐述人对过去体验的记忆由两个因素决定，一个是「高峰」，一个是「结束」。

把用户情感地图曲线和峰终定律结合起来，简单画一张图：

既然用户整体体验与整个过程中好坏综合无关，只跟几个关键点有关，那么可以得到一个公式：

用户整体体验评价（E）=（y1-y2）+y3

y1，y2，y3 可以称为关键时刻 MOT（Moment Of Truth）

二、日常生活中的峰终定律

这两天和包子聊到宜家的峰终定律，突然明白了为什么我们有些课程调研，大家都喜欢去宜家调研了。

虽然它的店员很少，找货物也要自己找椅子搬下来，就算只买一件家具也需要逛完整个商场，但是每次逛完结束的时候都可以吃那个特别好吃的「一元冰淇淋」呀，这就是它的「终」。

而在逛的过程中，就像包子讲的，它的体验模式很棒，把产品作为空间的一部分。曾经有一位宜家的老顾客也说，宜家商品物有所值，展区实用，产品随意试用，大概这就是它的「峰」吧。

扔一个我的学习小伙伴包大佬的分析：

三、互联网产品中的峰终定律

如果说峰终定律怎么影响互联网产品的用户体验的话，可以先举几个体验差的例子。

很多时候，用户在某个平台完成某个任务后，会出现很多引诱用户点击的赞助商的内容。比如问卷星，每次填完，任务结束的时候，它还会打着抽奖的名义接广告……

再举个例子，你有没有过在某些 app 注册账号，登录 or 注册很多次却失败的情况，或者花了很久时间才注册 or 登录成功？原因可能是账号密码错误，可能是注册流程过多跳出率过高，可能是填写信息冗杂……

如果这款产品不是用户刚需的话，最终会导致很多用户卸载它，就算你之后流程的体验再好，用户根本无法体验到最后。

四、利用峰终定律打造「爽点」

一款好的产品不仅能够解决用户的「痛点」，也能刺激用户的「痒点」，更能打造用户的「爽点」。

有一些产品能在用户使用的过程中利用峰终定律打造 「爽点」，提升用户体验。

如果用外卖这个来举例子的话，应该算是一个大的服务系统，它会涉及到很多方，比如消费者，商家，骑手等，而这一整个服务系统的设计，只针对消费者而言，流程也会十分复杂，其中利用峰终定律考虑的就更多了。

那就其中用户（消费者）与饿了么 app 的交互流程来举例的话，用户点外卖这个任务：

从打开 app——选择店——选择美食——付款，用户的任务已经结束了，但是饿了么会在结束的时候，给用户一个分享领取红包的福利，用户会觉得自己获得了很大的优惠，体验会十分好，这也就是利用了峰终定律的「终」。

我发现游戏里面对峰终定律是用得最多的，曾经玩过 lol，王者荣耀，吃鸡手游……

如果问曾经玩 lol 或者王者最爽的时候是什么时候，那大概是：比赛过程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等这些配音和画面的视觉刺激吧。

按照常规的模式是，杀人后系统直接提示「您已经杀灭了一名敌人」，但是它会去强化这种杀人的体验，将杀人的场景分为多种类型，通过视觉上的弹框击杀提示与配音上的激励叠加，把杀人的体验不断深化，做到，另外在推塔和偷掉水晶的时候是不是也是最爽的时候呢？我觉得这里就利用了峰终定律的「峰」。

我记得在游戏结束的时候，比如 lol 里面推掉水晶的时候，游戏画面会停止几秒，然后再出现水晶慢慢破灭，加上大大的「胜利」二字，有的时候回到大厅还需要等几秒的时间。

王者荣耀，吃鸡这类在游戏结束的时候也会给用户很多激励，明明可以在结束后直接回到大厅，但它们会延长这些胜利或者失败的体验，如果胜利，当然是爽，还想再拥有这样的体验，继续打；如果是失败，那再接再厉，想拥有赢的体验，继续打……

总之就是会让用户上瘾。它们会把这些用户体验做到，在游戏结束的时候这些的体验就利用到了峰终定律的「终」。

五、利用峰终定律改善体验步骤

「峰终定律」改善用户体验的步骤：

• 进行可用性测试；
• 绘制用户旅程图；
• 找到「峰」，「终」时刻；
• 通过用户研究的方法找到用户心中的关键时刻；
• 将「峰」、「终」，「用户心中关键时刻」的体验优化至。

在《用户体验的要素》一本书中，Jesse James Garrett 将用户体验分为了五个层级，战略层，范围层，结构层，框架层，表现层。

其中在框架层里面有一个很重要的概念就是导航设计，作者对导航设计的定义是：元素的组合，允许用户在信息架构中穿行。

我觉得可以把导航设计理解为：我们从用户的心智模型出发，结合业务目标，对信息架构的一个梳理，来帮助用户完成目标。

通过自己手机里几十款 app，总结了以下六种导航设计模式，包括：标签导航，宫格导航，侧边导航，列表导航，菜单导航，轮播导航……

简单介绍了它们的优缺点，适用场景，以及一些衍生导航与相关案例……（不过导航设计一定是视产品和情况而定的，并没有确定的依据与理论）

一、标签导航

标签导航分很多种，有底部标签导航，顶部标签导航，底部标签导航又可以衍生出舵式导航，顶部标签导航又可以分为静态或者是动态导航……

底部标签导航是最基本的导航，几乎绝大部分 app 中都在用，tabbar 位于页面最底部，一般3-5个 tabbar，有文字+icon，也有纯 icon 形式，但大部分是文字+icon 的形式，我想是减少用户记忆负担吧，如下：

而关于底部标签导航的优点，缺点以及适用场景也简单整理了：

我发现很多用户发布或者生产内容的 app 会将底部标签导航进行变体，很多人把它称为舵式导航，就像这种：

中间的「+」一般是发布的意思，并且是 app 里面使用最频繁的一个功能，一般都会重点突出。并且，该标签中很多时候会有二级导航，二级导航里可扩展性就比较强，如图：

而顶部标签导航顾名思义就是 tabbar 位于顶部，最早知道它是在 Material Design 里面，因为 Google Pixel 手机底部存在物理导航，所以将标签导航置于顶部不会显得突兀。它很少用作一级导航，一般是二级导航比较多，而且我发现顶部标签导航，几乎都是纯文字的形式，比如：

突然想到今天交互设计课上的时候，老师讲的人机交互里，重要的操作放在大拇指可触达的范围内。

而顶部标签导航，如果是点击标签进行操作的话，用户单手操作就十分不方便，所以我发现体验好的 app 的顶部操作导航都是可以直接通过左右滑动屏幕的交互来切换。

而当标签类目过多的时候，可以通过左滑展现更多标签，比如很多新闻阅读类的 app：

如果是可以滑动查看更多的话，一定要通过一些方式告诉用户可以滑动查看更多，比如最后一个标签隐藏一半的方式等：

关于顶部标签导航的优缺点以及适用场景，如下：

二、宫格导航

宫格导航，也是十分常见的导航形式，除了一些工具类 app 外，大部分是作为二级页面展示出来，并且以 icon+文字的形式居多。

如果将宫格的 icon 换成 picture 的形式的话，可以衍生出一种新的类似于卡片式导航的形式 ，可以通过垂直滑动来切换，比如：

那，如果宫格信息太多，我发现很多 app 会采用分类展示的形式，并且通过水平滑动的方式来切换，比如：

但是上面两种可以垂直或者水平滑动的形式，一定要让用户知道是可以水平或者垂直滑动的，采取的是边界地方信息只展示一半的形式，告诉用户可以继续滑动……

除此之外，宫格导航还可以在电商里面运用，在首页的运营内容块，它可以根据内容的重要性调整模块的大小，比如：

关于宫格导航的优缺点和适用场景，如下：

三、侧边导航

有些书里面会把侧边导航叫做抽屉导航，这类导航其实比较少了，原本也是从 Google Material Design 里面提取出来的概念，一般会在首页呈现一个主要功能，将其他不常用的功能收纳放到侧边导航里，比如：

而关于侧边导航的优缺点以及适用场景，如下：

四、列表导航

列表导航也是十分常见，几乎在每一个 app 里面都会存在，大部分时候是作为二级导航存在，但是也会存在于一级导航的时候，比如邮箱，iOS系统自带的设置等。

一般在列表导航里都会有下一个层级，可以通过箭头来告诉用户是否有下级菜单。

当列表信息比较多的时候，可以对列表进行分类，可以添加小标题或者直接分隔开。比如：

而在有些列表导航里，我们还需要展示给用户一些预览信息，比如 iOS系统里的健康，个人信息里的一些基本数据展示，如下：

关于列表导航的优缺点以及适用场景，如下：

五、菜单导航

其实菜单导航也可以称为下拉导航。这也是今天上交互设计课的时候，老师以微信的「+」为例子介绍的一种导航形式。最初了解这种导航形式也是来源于 Material Design 里面的 Menu。

Menu 是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。

比如：

当信息层级变多的时候，菜单导航里要展示一层或者两层信息，比如大众点评采取的形式：

关于菜单导航的优缺点以及适用场景，如下：

六、轮播导航

还有一些导航比如轮播导航，完全的沉浸式体验，高度简洁的导航，比如天气，但是这种导航因为轮播点的大小不会很明显，所以用户很难快速感知自己所在位置，并且轮播导航轮播的数量也不宜过多 。

其实导航的类型应该还有很多，并且在一个 app 里面几乎不可能只使用一种导航，哪怕只是一个页面，也会存在多种导航的组合形式，比如：

总结

• 导航的形式一定是根据你的产品的诸多因素进行选取，并不能完全按照我上文的适用场景为依据；
• 几乎每一个 app，每一个 app 的每一个页面，都会涉及到多种导航模式，需要结合具体场景进行组合选取；
• 导航的具体展现可以通过：文字，icon，文字+icon 的形式；
• 有些导航比如标签导航在设计的时候有多种状态，比如 unselected，selected 等状态；
• 导航在 iOS 和 android 里面的应用会不一样，比如标签导航适配 iOS系统，侧边导航适配 android 系统；
• 导航设计必须传达出它的内容和用户当前浏览页面之间的关系；
• 能够引导用户以很好的体验完成目标的导航设计都是优秀的。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1：mutations触发状态 （同步状态）

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> </p> </template> <script> import {mapState,mapMutations} from 'vuex' export default{
  name:'hello', //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用 //方法三 computed: mapState([ 'count' ]),
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

    

 // 计算 const getters = {
  count(state){ return state.count + 66 }
} export default new Vuex.Store({
  state,
  mutations,
  getters
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

    

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义常量 const state = { count: 1 } // mutations用来改变store状态 同步状态 const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} // 计算属性 const getters = {
  count(state){ return state.count + 66 }
} // 异步状态 const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被执行了，然后两秒后调用jian的方法') }, jianplus(context){ context.commit('jian') }
} export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

    

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> <p> <button @click="jiaplus">+plus</button> <button @click="jianplus">-plus</button> </p> </p> </template> <script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{ // 这里是数组的方式触发方法 ...mapMutations([ 'jia', 'jian' ]), // 换一中方式触发方法 用对象的方式 ...mapActions({
    jiaplus: 'jiaplus',
    jianplus: 'jianplus' })
  }
 } </script> <style scoped> h5{ font-size: 20px; color: red; } </style>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

    

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} const getters = {
  count(state){ return state.count + 66 }
} const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被执行了，然后两秒后调用jian的方法') }, jianplus(context){ context.commit('jian') }
}

//module使用模块组的方式 moduleA const moduleA = { state, mutations, getters, actions }

// 模块B moduleB const moduleB = { state: { count:108
  }
} export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})

描边插画：可以简单理解为众多线面结合图标组合在一起，互相呼应而组成一个大画面。画面中的元素除了面以外，还具有描边，因此也叫描边插画。

本文内容：文章会详解如何画一张描边插画，教程素材没有用我之前的插画来做步骤分解，而是新画了一张插画以作示范，绘画原理都一样，理解原理就好。除了具体步骤以外，会针对一些易犯错误的地方添加重点标记。

一点建议：看完文章后，可以按照我分享的方法来临摹一遍，但我更趋向于小伙伴们能够发挥自己的想象力，做一张属于自己的原创插画。画完后若有不清楚的地方，欢迎在我的公众号中添加微信并附带插画，可给予建议。

一、草图阶段

1. 确立主题，画草稿

这次插画的主题源自于我的一个梦：在草地上，遗落的帆布鞋里面长满了鲜花，小鸟守在花的旁边歌唱。

确定主题后，把脑海里的画面画出来，可以画在纸上，也可以用数位板在 ps 里面画，按照个人习惯就好。我比较喜欢手绘，因此在纸上画。

2. 打开AI，调整设置

新建画布1600*1200

视图-勾选对齐点

3. 把草图拉到画面中，调整大小

二、线稿

1. 描边设置及要注意的问题

在描边插画中，常见的问题之一就是描边的粗细问题. 以及描边间关系的处理问题。

描边粗细问题（下图以之前的四季插画为例子）

描边间关系处理

描边设置

描边的粗细是根据画布大小而决定的，1600*1200的画布，我习惯用 8pt 的粗细的线条，但是如果画布是1200*900，8pt 则显得过粗。具体的粗细可以根据情况而调整。

2. 线稿画法

布尔运算法

形状断点重连法

形状生成器

钢笔勾勒法

钢笔勾勒法顾名思义就是用钢笔直接描出物体的外形。在这个插画中，植物的形状比较随性，因此用钢笔直接勾勒比形状剪切要快。绘制的过程中，注意调整线条的平滑度. 弧度，使其规整。在此不作示范。

三、色稿

1. 增加背景色

2. 色稿层的绘制

3. 颜色调整

4. 高光与暗部

5. 经过高光与暗部塑造后的画面

四、 风格塑造与整体调整

1. 风格塑造

最近看到 kit8 大神的画，突然想到如果白线运用在线性插画会怎样，就尝试了这种风格。把线稿复制一层置于顶上，改成白色，2px 粗细的线，然后向旁边移动错位，破一下画面沉闷的感觉。

2. 整体调整

看到这里，你应该也发现了，画面是比较灰的，因为我都是选择低饱和度的颜色，如果需要调整，就在 AI 中把插画导出 SVG 格式。然后拖到 PS 里面进行色相饱和度的调整。

3. 保存喜欢的配色

在颜色调整过程中，遇到喜欢的配色就保存下来，这样一张插画就完成了。