2015-12-4 用心设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每一个扁平化界面设计，都是我们的心灵碰撞致力于最棒的 metro ui 设计
来源：莫贝网
如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里
在接触一款新应用的时候用户常常会看到一些引导页，但在操作的时候直接当透明的就快速滑过或跳过了，这种时候，大家一定会有“这些引导好无用啊”的无力感，目前甚至有着“如果一个产品需要引导，说明该产品缺乏友好的元素”这样的说法，看似有理， 但我觉得这并不能一概而论，在不少的app中，除了引导用户操作，引导还影响用户对产品第一印象的好坏，只要这引导设计得好，人见人爱之余，还对整个 app中的体验感受能起到巨大作用！“来电”是一款基于语音沟通的应用，作为一款不断探索并创新的应用，也有不少需要用到引导的地方，接下来我们通过一些 案例并结合来电的引导来告诉你如何炼成人见人爱的好引导。
现在，引导的种类形式随着硬件和系统的拓宽有了更多的表现空间，引导页、缺省引导、视频引导、H5引导等都能起到引导用户认识或者使用新应用的作 用。一方面从产品的角度考虑，产品希望用户能够方便得理解产品的特性，减少对产品的陌生感；另一方面，从用户角度来看，一个应用里好的引导不仅能使他们对 一个应用有好感，也可能更容易得留住他们。但不论什么形式的引导，好的引导都能够让用户对产品有一定的认知并拉近用户与产品的联系，通过对不少做得好的引 导（这里主要讨论的是页面形式的引导和H5）进行分析，我们发现大家喜欢的app引导都会有一些共性，通过归总提炼，得出以下几个用户看了都喜欢的原则：
通俗易懂
一个APP的引导不论什么类型，它们的目的都是为了让用户更好得去使用APP，就好比一个贴心的管家或者朋友，给你介绍或者教你使用一个新事物，减 低认知和摸索学习的门槛。但如果这个朋友说得太多太杂，你可能就会记不住他说了什么；而如果这个朋友为了想更凸显这个新事物的逼格而形容得“深不可测” （自嗨型引导），那么就很可能让你因为听不懂而失去兴趣了解下去。简单不复杂、信息表达通俗易懂的引导可以让用户抓取到我们想传达的信息并更容易理解 APP的特性或操作，比如以下的案例：
界面来自Dropbox
Dropbox的缺省引导是我比较喜欢的一组引导，在用户一开始使用这个app的时候，通过在初始缺省页（空白页）上结合操作去引导用户，大大避免 了一进去空空如也的尴尬感。而且这组引导的文案不是生硬的功能讲解，而是通过一些通俗易懂的语句配合与之相对应有趣的图示传达相关的的信息，让用户在看和 操作的过程中感受轻松，而且这套引导整体风格都保持一致，让人对产品印象稳固起来，倍显亲和。
具有一致性
好的引导在多个方面都是具有一致性的。视觉风格的塑造、表达的产品理念和产品特点都应该和它所属的产品、定位与品牌相符合，这样用户在使用产品的时 候就会对产品有一个大致的基调认识和感受。产品的定位会决定引导的方向和路线，以及最终引导的表现形式上，所以引导是最能体现产品基调和品牌性的地方。引 导的一致性除了保证了产品与使用体验相互一致，同时也能进一步强化用户对产品的认知以及延续品牌印象。如下例：
界面来自Telegram
从一致性来看，Telegram的前置引导是我觉得比较有代表性的，这组引导页面里，每一页元素看似简单但是很有细节，图示风格统一，主标题都是一 个词，表达很干脆简练。这组引导页整体与Telegram的产品所透露的特性一致，，干净，这种传达出来的气质贯通整个产品。特别是每个图示都做了小 动画，让用户更加直观得感受到它所传达的信息，这种细节更容易触动到用户，获得用户对产品品质的认可。
产生共鸣
前面有提到一个应用里好的引导不仅能使他们对一个应用有好感，也可能更容易得留住他们，而这里的关键就是能够让用户产生共鸣。通过对产品自身的深刻 了解并洞察目标用户心理，结合产品特性与用户的痛点，进而以视觉和文案渲染出氛围从而传达出相关的理念，勾起用户情感打动用户。让用户产生共鸣，有利于用 户对产品在情感上的认同，这种认同感会增进用户对产品的进一步使用和探索。如下面这例子：
界面来自【留白】
这是“留白”APP的引导，之前这款应用被称为最美应用之一，作为一款极具文艺范儿的应用，它的引导也延续了它的文艺气息。除了好看的图和与之搭配的字体所渲染的氛围，这组引导里面，文案占据了很重要的比重，也正是这些文案使得这组引导上了一个档次，文案用的字词通俗，让用户觉得不疏远，引导中不仅说明了产品特性一边强调了格调同时也宣扬美好，十分走心，后面的文案更是带起了情怀，让人动容。
根据上面所说，可以大概得出好的APP引导应该具有“通俗易懂、产生共鸣、具有一致性”这3个原则，这3个原则之间的关系如下图。有这3个原则，引 导也就具备人见人爱的特性～当然，这3个原则仅仅是个大概参考，应用引导的好坏与否并不能一概而论，其中还有很多其它的影响因素，但是篇幅有限，在本文暂 不作细说了。
通过上面得出的相关原则，我们回观来电的引导是怎么做的。作为一款依然在不断探索的应用，来电经历了几轮方向的变化和调整，产品的方向变化也影响着 来电的设计，由于这些原因，来电的引导设计在整体的一致性上面有所不足，但是在此之外，来电的引导遵循着另外2个原则（通俗易懂、产生共鸣），结合产品的 特性，并以此形成了它自身的特点，那就是直观和具有情感。
这上面是来电的缺省页引导。第一张是“无痕聊天”的缺省引导，“无痕聊天”（也就是阅后即焚）在国内对不少用户来说还是个比较陌生而且略为抽象的概 念，为了让用户更易于理解这个概念，我们通过把这个概念细解，转化发散，然后收拢成一个在大家认知中较为熟悉的具象事物－碎纸机，使得用户可以通过它对 “无痕聊天”有个通感式的理解，达到直观的效果，结合文案给了用户使用后有什么好处的理由，使得激励用户去点击“找朋友聊聊”进行操作；第二张是来电 AIO内的缺省引导，这里的主要作用是告知用户可以调整无痕聊天内容的消失时间，这里可以说是对之前“无痕聊天”概念的补齐，初次使用进到AIO，这个图 会进行动画缩小到左下角对应的钟表位置，告知用户操作的位置，直观得引导用户进行操作，让用户一看就明白。
这一组是引导用户开放权限的引导页。作为初始引导，因为开放权限有时候需要用户多次反复操作，所以这是一个容易让用户感觉到厌烦甚至反感的地方，为 此在这组引导的设计上，我们创造了一个小雪人形象，结合产品的需求以及引导的目的，塑造出一些小场景让这组引导更具有情感，加上目的清晰的文案，营造出轻松的氛围，让用户在看到页面的时候具有共鸣感，以此感到亲和，减少反复操作带来的厌烦感。
前面大概得讲了好的app引导的一些原则以及来电的引导特点，接下来我们针对一个实践案例来细说来电引导的设计过程。这次的案例是叫“班级通讯录”的h5引导，“班级通讯录”是来电团队通讯录功能的传播式推广引导，通过引导来电用户发起，分享到微信、空间、QQ等平台，让来电用户可以通过链接引导去了解并使用这个功能，非来电用户则引导去下载达到拉新的目的。
定位
在之前，通过手机QQ平台进行了一轮大范围推广，直到9月份之后，来电的用户进度放缓，我们开始思考有没有更好的推广方式引导用户去进行新一轮的用 户增长。通过和产品童鞋的讨论分析，我们也从大量的竞品中去挖掘一些其它的推广方式，将目标聚焦定位在熟人推广这一块。关于熟人，其中也能分出好几块人 群，由于这次的推广需要通过熟人关系拉动用户参与，并且得拉起新用户，那么这就需要熟人之间的信任度高并且这个人群的人数要多。对此我们对每个可 以想到的人群进行了发散和分析：
通过分析，我们对每个人群的信任度还有人数进行了对比（如上图），可以看出在对比值中，“同学”是2者中都相对较高，落差最小的人群，加上推广时间是在9月左右，正值开学的时间，因此我们就聚焦在“同学”这个人群里，延伸去拓展和设计。
设计方向
确定定位之后，我们开始进入到设计前期。首先确定交互流程，通过发起分享、接受者进行注册参与形成闭环，如下（由于本文主要讲诉引导部分，篇幅有限，流程部分不在此细讲）：
这一套引导里面一个流程下来起到重要作用的就是发起页和接受页，这2个页面一个需要引导用户分享出去，另一个需要用户参与并引导用户去进行接下来的操作。因为具有运营与功能结合的性质，因此它比起一般的引导页需要更多的包装，以此来吸引用户。
风格包装
我们对这套引导进行主题包装，使其富有情感特点，这是来电引导的特点之一，让用户具有情感的认同。这一套引导是为了结合团队通讯录这个功能来进行推 广的，而且加上“同学”这个人群，我们得出“班级通讯录”这一个概念，针对这个概念，我们需要挖掘这个相关的特点与印象元素，发散后我们收拢出一个风格主 题：Party。
“班级通讯录”在我们看来就让失去联系或者久不联系的同学再一次联系回来的概念，因此我们希望营造出一种聚会的氛围感受，摆脱一般通讯录干巴巴的冰冷感，让用户在感受上是欢快愉悦的，因此在设计的风格上，我们倾向用一种欢快的party主题来表达，以此触动用户情绪。
具体设计
有了方向和主题，接下来就是进行更为具体的设计。在这之前，我们需要思考产品的目的以及这个页面所要起到的作用，再结合上面提到的3个原则以及来电自身的特点，使得这组引导有来电的DNA并达到产品目的。首先从交互稿分析下我们是怎么考虑这2个引导的：
文案
首先要强调一点，在引导中，文案是特别重要的，因为它是直接获取引导信息的关键。发起页的引导是要让来电用户去主动发起邀请传播，一方面我们要清楚告知用户要做什么，引导用户去操作，另一方面，我们通过一些奖励刺激用户积极性，增加用户参与率，所以我们把发起页文案定 为“创建同学录 领1000分钟通话时长”。而接收页的目的是引导用户接受邀请进行下一步操作，那么，这需要用户对这个页面有足够的信任，才会接受邀请， 因此这里的引导文案需要真实信息作为支撑，而这些真实信息来源于发起人通过引导所填写的内容，2者的结合使得这套引导完整流畅。
画面
这一块是最能体现情感化特点的地方，主题风格的渲染也能带动用户情感共鸣，这一块决定了页面能否在感觉上吸引用户。根据party的主题，要突出的 是集体感以及欢快的氛围，在发起页面我们做成拍班级集体照一样“排排站”的效果，凸显同学会的感觉；在接受页，我们则是做成有种开欢迎party的感觉， 欢迎同学的加入，整体营造欢快感，小人和发起页呼应，产生联系。发起页在来电应用发起，所以和颜色和来电app融合些，而接受页则用来电自身品牌色为主体 来突出品牌感。设计过程中的草图如下：
操作
最后是操作，在这组引导里面，操作的作用很关键，特别是在发起页。发起页里面的操作部分会直接影响到接收页的被信任度，因此这里需要填写学校班级信息的文案引导用户填写真实信息，这些真实信息会作为接收页的文案显示，关系到用户看到这个页面（接收页）会不会接受邀请；而接收页的操作则是以“我要加入”给予用户代入感，刺激用户点击欲望，增加参与率。
通过上面几个层面的考虑打磨，我们不断的比较和考虑，从颜色、字体、元素等等对每一个细节都斟酌一轮并调整优化，才有最终的输出，如下。这就是这个案例的流程和思考。
这一段时间，我除了运营和基础之外，引导相关的设计还是做了不少的。虽然来电上线一段时间了，但一直在不断得摸索前行，这其中碰撞出不少火花，也有 不少新的东西出现，也因此使得来电不少的地方需要引导。先不讨论引导的实用与否，但就从设计的角度而言，每个细节都应力求做到最好，并让用户可以感受到。 通过这段时间的工作，在做引导相关设计的时候，有些小经验和感触，和大家分享一下：
1. 要清楚确定产品的要求和引导的目的
引导的类型虽然不少，但是针对不同的产品要求和引导目的，选用的引导类型也不一样，因此一定要清楚产品的需要，是为了展示产品、让用户学习操作、还 是为了推广，只有清晰的方向才能选择最合适的方式和风格去进行引导，产品方向的多变容易让产品的引导变得不一致，不利于固化整个产品的具体印象，影响品牌 化。
2. 要多观察生活的每个细节
能够打动用户的设计一定是和生活、和身边的人事物相关的，因为相关，所以才不突兀。好的引导是怎样的，在前面已经细说，但起说到底，它的核心还是做到自然。这个自然是通过它符合人对事物的常识理解、符合生活经历、符合内心感受等共同作用的，因此，设计师需要对生活有敏感的洞察。
3. 文案！文案！文案！
重要的事情说三次。在不少的文章中都已经强调了文案的重要性，而在引导中，文案更是直接作用于用户的操作和对整个产品的理解，对此，引导的文案一定要多打磨，好的文案可以省去不少事情。
4. 能不用引导的话就不用引导
虽然我认为引导图是有存在必要的，但是若一个app内引导太多的话，用户会对整个产品的体验有质疑，另一方面也打击用户使用产品的积极性，物极必反。所以若非是新功能上线，大版本更改以及必要的缺省页引导，能不做引导的话就不做。
好的app都是能够善用引导这一块利器，为用户服务之余更是把品牌和产品的气质传达给用户，来电在这一块也在不断得思考，一方面保持自己的特点，另一方面也在学习并弥补自己的不足，更加得完善自身让用户有更好的体验。
原文地址：腾讯ISUX
作者：里奥