从用户的操作流程上来说，如果用户想使用一个功能，必然首先要发现它。如果连功能入口都找不到，后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位，缩短用户的查找时间，这篇文章我就来跟大家聊一下筛选功能。

 三种常见基本样式

首先要明确一个概念，筛选功能并不是普通的单一功能项，它和导航一样是一个体系。既然是体系，必然有最基本的组成部分。筛选功能（体系）常见的样式有以下三种：tab类，(下拉)列表类，标签类。这三种样式是筛选功能最基本的组成元素，不管你产品的筛选功能做的有多么复杂，都可以看成是这三种基本元素的不同组合形式。

Tab

Tab是最常见的筛选样式，一个tab项代表一个筛选维度，直接平铺的展示出来，用户很容易感知到。

根据方向我们可以将tab分为横向栏tab和侧向栏tab。横向栏tab可展示2-5个选项，如果超过了5个，那么就需要用户滑动才能看到。所以当筛选维度过多的时候，我们可以考虑使用侧向栏tab，京东商品分类这里用的就是典型的侧向栏tab，我数了一下总共40个选项，这里如果使用横向栏tab用户可能要侧向滑动8屏，操作成本过高。

当然当选项过多的时候，我们还有一个法子，就是使用弹框，用户点击后可以看到全部的选项。

列表式

列表式也可称之为list，其特点就是占用空间小。因为它可以将选项隐藏起来，用户需要点击才能看到所有的选项，因此在有限的空间里可以展示更多的筛选维度。碍于手机屏幕尺寸的限制，列表式筛选现在应用的越来越普遍。

列表式筛选的样式其实有很多。可以做成popover类，actionsheet类，activityview类。这些样式很难去说谁好谁坏，这里我就只是列举出来，具体用哪种样式，大家自己来判断。

标签式

对于标签式，很难进行准确的定义，我更倾向于将单选按钮，多选按钮，switch等统称为标签式，标签式只能针对单一条件进行筛选，这点和tab很类似。标签式很少单独出现，多数情况下都是与tab和列表式结伴而行。

在淘宝里用户可以点击视图icon来切换视图模式，这就是典型的标签式筛选。

当然以上三种只是最常见的筛选元素，其余的还有输入框，滑块，地区/日期选择器等主要用于信息录入的组件。 

常见的筛选体系 

了解了最基本的元素，接下来看一些比较复杂的筛选样式。上面我也提到了任何产品的筛选体系都可以看成是这三种基本元素的不同组合形式。为了让大家更好的理解，我一一举例来说明：

tab+tab:

tab之所以受到青睐，是因为其较低的学习成本。每一个tab代表一个类别，而且是直接展示给用户看的，所以很多产品的筛选功能都会优先考虑使用tab。即使功能结构复杂到无法用一层tab来完成筛选任务，设计师也会考虑使用双层tab样式（tab+tab）的样式。（PS.当然下图应该算是segment control+tab）

tab+列表式：

当产品不断的发展，功能结构愈发的复杂，过于扁平的tab已经无法满足筛选的需求。以看电影这个场景为例，用户的需求是找到合适的影片和电影院。对于用户来说，衡量一家电影院会从地址、票价、品牌和特色服务（支持改签、IMAX厅等）这四个角度入手。这些筛选需求很难通过tab来完成，我们需要列表式的协助。

tab+列表式+标签：

当产品的功能结构进一步复杂，这也给筛选功能增加了新的难题。以boss直聘来说，这里的筛选项主要分为四个：排序方式（推荐/）、工作地点、公司规模、岗位要求。其中后三个筛选项包含大量的条件，特别工作地点，需要进一步定位到街道或地铁站。对于这种多维度，深层级的筛选需求我们可以使用tab+列表式+标签的样式。

这里我选择boss直聘的另一个原因在于它的tab数用户是可以自己增减的，每一个tab代表一条求职意向，最多可以添加3条求职意向。

筛选体系的容器

筛选体系是由众多筛选项组成的，这些筛选项需要一个“容器”来承载。上面说的boss直聘用的是下拉列表，这种样式其实还比较简单的，我们可以看一些功能更加复杂一点的产品，比如各大电商平台。这里使用的是抽屉式筛选框，说它是抽屉式，因为它跟抽屉一样，用的时候可以拉出来，不用的时候可以关起来，节省了空间。从某个角度来说，我们可以把抽屉式看成列表式的一个放大版。抽屉式筛选框可以容纳更多的筛选条件，像我在上面提到的输入框，多选按钮都可以在这里使用。

从底部弹出的动作栏也比较常见，这里使用了滑块和单选按钮。

Airbnb的筛选功能以浮层为载体，还使用比较少见的switch和stepper。

当然Airbnb筛选功能最大的亮点在于可以向用户即时反馈筛选结果的数目，用户不太可能会进入搜索结果为0的空页面，避免无效操作。

以上说的筛选体系都比较传统，大部分都是基于对现有结果进行筛选，其实我们可以对筛选功能进行前置。例如，我们可以在用户进行搜索之前就对结果进行筛选。

甚至在新用户第一次使用产品的时候，可以让用户填写一些个人信息以便进行个性化推送。

筛选功能的存在意义在于帮助用户对功能信息进行快速的定位，对筛选功能进行适度的前置可以简化用户的操作流程，同样可以达到节省用户时间的目的。

总结：

大家在日常使用APP过程中也可以带有目的性，发现一些好看的UI或是好的交互点可以截图保存和思考：为什么这么设计？目的是什么？分析其优势之处，还可以和竞品的相似交互进行对比，始终相信“不积跬步 无以至千里”，通过在点滴中慢慢积累，今后当你遇到类似的问题时就可以快速回忆起这些知识点，自然就可以运用自如，thanks~

在这里先给大家分享一组近期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多块钱吗？不然你让他把流程倒过来试试，先充钱，再填信息。保证没多少人会用）。流程设置就像钩子一样，慢慢慢慢的把用户勾住。

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

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

一、什么是峰终定律

峰终定律是由诺贝尔奖得主 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. 确立主题，画草稿

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

确定主题后，把脑海里的画面画出来，可以画在纸上，也可以用数位板在 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. 保存喜欢的配色

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

一、何为版面率

我们都知道一个版面中必定有版心的概念。何为版心呢？版心就是除去天头、地脚和左右页边距余下的区域，也是我们页面内容的摆放空间。下图中灰色块的区域就是此页面的版心。

知道了版心，那么何为版面率呢？版面率就是版心所占页面的比例，通俗一点讲就是版面的利用率。

上面左图中版心的面积非常大，四周的余白少，版面的利用率高，所以版面率就高。右图版心面积小，版面利用率比左图低，所以版面率就低一些。

版面中也有满版与空版的概念。如上图，满版就是没有天头地脚与左右页边距的，此时版心即整个版面，版面利用率为100%。空版就是版面利用率为0%的。从满版到空版之间的版面率是递减的关系。

二、版面率对画面气质的影响

说完版面率的概念我们再来说一说版面率对画面气质的影响。

一般来说版面率越高，视觉张力就越大，版面也会更活泼与热闹；反之，版面率越小，给人感觉就越典雅与宁静，版面也会更有格调。

上图中高版面率的海报相对于低版面率的更热闹与活泼；低版面率的则更典雅。

画册中也是一样的，上图是我早些年做的一个案例。同样的内容跟图片，只是版面的利用率不同，我们可以发现右边低版面率的作品更安静和典雅。

版面率的高低能够影响版面的气质，所以我们实际工作中也要根据项目的气质分配合适的版面率。比方说典雅气质的项目我们就要用低版面率版面，如果用高版面率显然是与项目本身的气质相悖的。

三、留白率

说完版面率我们再来说一下留白，留白的概念大家都懂。而这里所说的留白更多的是指页面的负空间。

页面中去除内容后的空间就是负空间，如下面这个页面。

图中灰色块代表图和文字信息等内容，除去这些图片和文字后，页面中的其他空间都可以看作是负空间，也就是留白。当然，留白并不一定是白色，所有除去页面内容后的空间都是负空间，如上图右侧案例，黑色部分即此页面的留白。

负空间的多少即是留白的多少。留白的多少我们可以用留白率来表示，如上图，负空间小的留白肯定少，留白率就低。负空间大的的留白肯定多，留白率就高。

留白率就是版面留白的多少，实际上与版面率的概念差不多，如下。

空版留白最多，满版留白最少。当然这也不是绝对的，有的作品中虽然是满版，但空间广阔，比如天空什么的，都可以当作留白来看待。

四、留白率对画面的影响

上面说来留白率跟版面率也有一定的关联，所以他们对画面气质的影响也是如出一辙的。我们可以先来看一下低留白率与高留白率的几个作品。

通过这几个作品我们可以看出留白少的信息更丰富，版面更有活力，也更热闹，亲和力也更强。而留白多的更雅致，更安静典雅，更有格调跟品质感，但亲和力稍弱。

五、案例演示

下面进行案例演示吧，首先看一看文案。

这一步我们需要把文案的层级关系拉开，大中小区分的明显一点。这个文案的层级关系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是无尽的森林 ＞ 小文字信息的。

首先我们做一个有张力的版面，那么我们可以想一想什么样的版面是有张力的呢？

首先版面率要大，其次留白要小，让版面中的信息紧凑一点。

上图就是对版面的布局，可以看到图片是出血版的，没留天头与左右页边距。这样做的目的也是使版面率更大。

布局做好之后我们把图片与编排好的文字放置上去就可以了，如下。

上图可以看到留白比较少，符合留白率低的理论，虽然具备张力，但不是很明显。这种情况下我们可以改变一下底色使之感觉留白率更低，如下。

做完了留白少版面率高的，我们再来做一个典雅一点的。

根据本篇文章的内容思考一下什么典雅与安静的的排版版面率与留白率分别是什么样的？

一定是低版面率和较多留白的版面更能体现典雅与安静感。所以我们在版面安排上要使其留白更多，同时版面率要小一点。下图就是一个基本布局。

最后我们再根据版面布局置入图片微调一下就可以了，如下。

总结

版面率跟留白率都能够影响版面的气质，我们做项目的时候具体问题具体分析，根据项目气质去设定版面率跟留白率的大小。

大家好，从今天开始我要以大白话且通俗易懂的方式，来与大家分享我的知识和观点。

主要讲解的是平面设计基础理论知识与实际用法，后期会讲一些高阶的设计思维。

本章节适合设计小白和需要填补设计基础的设计师学习阅读。 

目录

1、理解、提取与布置

2、贴近与远离

3、排列与对齐

4、视线移动方向

5、组织与重复

1、理解、提取与布置

理解、提取与布置指的是根据设计的意图来进行信息的整理，然后再将整理好的信息中重要和不重要的信息按照优先级排列出来，最后再根据排列好的信息按个人美感和美学理念摆放到平面中。

1.1 理解部分

当收到一个海报设计需求时，我们不是要马上动手去做，而是要去思考需要设计的海报受众群体是哪些人，具体要怎么展示它，它展示的目的是什么。 

下面我就简单介绍一下设计思维及方法，首先要设置定一个需求【现代美术馆，需要设计一个简洁大方的海报】。根据这个需求在进行具体的思维延伸。

1.1.1 海报的受众群体

当我们收到设计需求时，要考虑海报的受众群体，男人/女人，少年/青少年/中年/老年，每种受众群体接受教育的程度和经历均不同，要根据不同的受众做合适的设计。当我们按照具体需求定义好受众群体后，就可以考虑推断用哪种风格来展示海报了。

对于现代美术馆需要一个简洁大方的海报，这个需求所涵盖的年龄区间比较大，基本上所有人都可以参观美术馆。那我们只要避免使用“个性化”的表象特征元素就可以解决这个问题了。

意思就是不要加入柔美的线条（除非展品的构成是柔美的线条），游戏和女妆这类具有一定代表性的象征元素，不要夹杂太多表现形式，用最容易让人理解的表象形式来处理就可以了。

1.1.2 怎么展示海报

现代美术馆，需要设计一个简洁大方的海报这个需求，可以根据主关键词“现代”和“美术馆”，次关键字“简洁”和“大方”来推断要采用哪种设计语言。“现代”的表现形式是无衬线体、干练（有棱角）、简洁、没有太多情绪。而“美术馆”只要在图片的处理上让主题与图片串联共通就可以了。

简洁大方的设计需求可以采用直线（字有时也是线）或大留白、配色多些白色、舒适的高纯度高明度、整体干净清爽，同时也要注意禁止添加太多颜色（如撞色）。

1.1.3 运用理解部分生成原型

根据前面的分析大概有了个原型，分为上下构图。上部分是美术馆的部分场景图片，下部分是具体的内容信息部分。所有要素均以现代感、简洁干练、配色不复杂、线性、整洁、清爽、专业、无太多情绪为基础进行设计的。

以上就是“信息的整理”中的“理解部分”，当设计师收到需求时，不要马上着手去做。先思考采用哪种表现形式（视觉语言）更适合需求，分析后再去做设计，这样才能准确表达具体的需求，也能做出更符合需求的设计。

1.2 提取部分

提取部分就很好理解了，顾名思义是将整理好的信息中重要和不重要的信息按照优先级排列出来。我们只需要根据优先级进行排序，并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】这么多种信息，把最重要的【CGIL】提取出来再排列优先级【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】这个过程就叫“提取信息部分”。

1.3 布置部分 

把提取并排列好优先级的信息规整好，就可以布置在平面上了。用之前设计好的原型套用已提取好的信息就可以了。特别要注意重要的内容放大，不重要的内容弱化。

* 要点

理解：首先要理解作品的受众群体、要怎么展现、目的是什么。

提取：其次要明确作品内容中什么是最重要的、根据优先级排序。

布置：最后把排列好的信息加以布置，重要的内容放大，不重要的内容弱化。

2、贴近与远离

贴近和远离的概念也是比较好理解的。与格式塔视知觉的亲密性与远离性是一个道理，初期只讲一些通俗易懂的概念，像格式塔视知觉以后会讲。

2.1 贴近和远离的 基础概念

贴近是指同类要素摆放在一起会呈现出一种共通性或产生某种规则，而远离是指同类要素分开摆放看上去就没有共通性或不会感到有某种规则。

当把同类要素（男人女人）放到一起，会觉得他们有一定的共通性，而且看上去像一对情侣。相反把同类要素（男人女人）分开来放，会觉得他们毫无关系。

我们把这种概念应用在平面设计上，如下图所示。

相同的要素摆放在一起会有一定的共同性，相反分开摆放则看上去没有关联。

贴近与远离基础概念的实际案例

2.2 贴近和远离的 进阶概念

把同类要素放到一起有种井然有序的感觉。如果要处理较为规整传统的版式时，可以考虑多将要素放到一起形成规则。另外把同类要素分开摆放，会感到没有共通性和规律规则，但是能为平面增加节奏感和冲击力。

贴近与远离进阶概念的实际案例

其次远离能使平面产生留白，通过留白也能使平面具有关联性。

虽然说远离能使要素看上去没有共同性和规则，但如果要素处在一个平面中，利用留白呈现出一种关联性。这就像吵架的夫妻一样，同在一个床上，女的偏床左侧，男的偏床右侧，呈现一种远离性。但他俩还是处在“床”这个平面中，也会呈现一种关联性。

贴近与远离进阶概念的实际案例

* 要点

同类要素贴近摆放在一起相互关联，同类要素远离摆放相互排斥。

同类要素贴近摆放在一起平面有规则，同类要素远离摆放增添节奏。

留白也能使要素有一定的关联性。

3、排列与对齐

排列与对齐的概念比较简单，也很容易理解。转化一下思维，把排列比作军队队伍中的“集合”，把对齐比作队伍中的向前/左看齐，就很好理解了。

3.1 排列

排列是指将要素按照一定的规则进行布置，使平面达到一种平衡与和谐。道理与收拾屋子一样，杂乱无章的屋子会让人感到不舒服且很压抑。整理的井然有序的屋子会让人心情舒畅很安心。平面中的“排列”就是屋子中的“整理”，目的是使杂乱的屋子变得规矩整齐。收拾屋子的方法就是“规则”，用规则的方法来排列就叫“布置”。

排列的目的是让平面变得有序和规则，当平面达到有序和规则就会呈现出一种舒适感，好比自然中的和谐。

3.2 对齐

对齐也可以理解为将要素按照一定的规则进行布置，使平面达到一种平衡与和谐。对齐与排列的差别在于，对齐是在排列的基础上进行操作的。先将要素按照一定规则进行排列，然后再将要素进行对齐。排列是画一个大体的框架，而对齐是做框架里的精细操作。

排列与对齐的实际案例

* 要点

排列与对齐的目的是让平面变得有序和规则，当平面达到有序和规则就会呈现出一种舒适感。

把排列比作军队队伍中的“集合”，把对齐比作队伍中的向前/左看齐，就很好理解了。

4、视线移动方向

设计书籍或排版布局时，要考虑通过设计让读者以怎样的顺序去阅读作品，通常情况下人的视线是从上到下移动的，所以在设计时要考虑到这一基本原则。阅读横排文章时视线是【由左至右】，阅读竖排文章的视线是【由右至左】。

视线的移动方向分为三个知识点，横排阅读、竖排阅读、流水式阅读。流水式阅读以后会讲。

随便补充一下啊，我读过的设计文献中提到的阅读方法只有“Z字视线移动方向”，而没有“T字视线移动方向”。有一种学习方法叫“T型阅读法”，与视线移动方向的“T字视线移动方向”不是一个概念。视线本身就是从上到下从左到右的形式阅读的，形成了Z字阅读方式，我觉得是国人是把这些概念给曲解了，如果有说的不对的地方，也请大佬们多多指点。

4.1 横排阅读

横排阅读是指作品的排版布局是以横向的排列方式让读者来阅读作品。横向的排列方式就是文字是横着的，大家现在读的这篇文章就是横向排列的文章。阅读横向排列的文章时视线是从上至下【由左至右】依次阅读的，如图所示。

懂得了横向排列的方式来阅读文章会有什么用呢？由于人们的阅读习惯，一般情况下阅读读物，都会遵循从左到右阅读文章的方式，这也就间接影响了文章内容的重要性。采用横向排列的方式进行排版布局，重要的内容要放在最左面，也就是最方便引导人们视线方向的地方。

如果不把重要的内容放在视线方向的地方，读者不仅阅读作品时会感到很吃力（可读性），而且会不理解作品是什么含义，视线也随之错乱，作品也会失去原本的含义。

横排阅读的实际案例

4.2 竖排阅读

横排阅读是指作品的排版布局是以竖向的排列方式让读者来阅读作品。阅读竖向排列的文章时视线是从上至下【由右至左】依次阅读的，如图所示。

一定要注意，竖向排列方式内容区在平面的最右面，与横向排列方式不同。这个规定就像地球为什么是圆的的道理一样。

竖排阅读的实际案例

* 要点

阅读横排文章时视线是【由左至右】，阅读竖排文章的视线是【由右至左】。

不要打破规则，一切以引导读者视线为主。

5、组织与重复

按照一定规则构成布局来编排要素，能使种类繁多的要素显得整洁有序。

5.1 组织

没有共通性的杂乱图形汇聚一起会造成视线混乱，读者注意力会被分散，也会降低理解力。将图形用框圈起来，按照等距进行排列，整体就会显得很整洁，也便于找出想要了解的图形。

组织规则的实际案例

5.2 重复

这里的重复不是指复制粘贴，而是元素上的重复构成。例如重复相同的格式，风格、文字、颜色、线、图案等。为了让平面具有条理性，用风格统一的要素做修饰，让排版符合流水式，视线清晰自然。

重复规则也可以应用在平面中、元素中、要素中、形状中等，灵活运用重复能使平面具有统一性，也能制造趣味性，增加读者对作品的印象。

重复规则的实际案例

* 要点

将图形用框圈起来，按照等距进行排列，整体就会显得很整洁，也便于找出想要了解的图形。

灵活运用重复能使平面具有统一性，也能制造趣味性，增加读者对作品的印象。