移动端引导设计技巧1：前置的引导页

本帖最后由 开心单炒饭 于 2013-8-22 12:02 编辑
在引导页设计的泛滥时代，绝大多数的APP在首次运用中都会设计几页引导内容。
设计师需要把控引导的内容。只做必要的引导页内容。没必要的引导内容会增加信息的冗余性，冲淡真正需要用户关注的信息的注意力与精力。
在设计之前，我们要对用户初次运用该APP时的心理与运用行为进行剖析，并不是所有情况都适合运用引导页的，要对不适合的情况say no。
适合与否的依据主要是在真实的运用场景中，用户是希望能对这个产品有个大致的了解，还是希望快速开启产品立即运用，在运用的过程中再慢慢研究。如果用户是希望快速开启产品运用中出现过于的引导会引起用户的方案。
具体较适用的情况：
1.对于一个新概念的新产品，用户需要对这些新的概念或内容有所理解才能更好的运用产品。（下图为Vida的引导截图）
2.竞争力的或有吸引力的内容点的介绍。（下图为支付宝和糯米团购的引导截图）
细致编排当确定了引导的内容后，我们需要对引导的内容进行细致的编排。具体的编排可以分为平铺直叙述和讲故事的方式。平铺直叙是将一个一个内容点罗列，之间没有建立啥联系。而讲故事是将内容串联起来变成一个整体的故事。
1.讲故事的方式，使引导具有情景性讲建立与用户运用情景匹配的场景，让用户能建立一种熟悉的感受，能让用户对引导的功能点感同身受。
串联的故事一般而言都是多页的形式。一步抛出一个需告知的点，循序渐进的解说。故事可以只围绕一个功能点来叙述，也可以将多个功能点串联起来变成一个故事。形成一个完整的故事。
由于每次一个告知点，多会采用聚焦的设计手法，把视觉注意力吸引到每个告知点上。
讲故事的主要目的是希望构建用户与产品之间的联系。让用户感觉到产品与自己是有关系的，现在所说的内容是与我相关的，我需要花费精力来关注一下。如果完全建立不起关联，很容易让用户忽略。
微信4.0的引导就是一个编故事建立关系的好例子。在微信在推出4.0版本的时候，新增加了类似Path和Instagram一样的相册功能，并且可以把相册共享到朋友圈。这个功能的加入拓展了之间仅是沟通聊天工具的产品定义。在4.0版本的新功能引导中，它非常成功的讲诉了一个有关相册功能的故事，并且在设计内容时非常注意建立联系。在故事阐述中它一直强调用户可以咋样，让用户能明确感觉到与自己的关系。
2.讲故事的主要手法——故事可以是以情动人，痛点渲染，角色榜样类比等方式A. 动之以情营造出具有浓烈感情色彩的场景，唤起用户心底的情绪，让用户产生对产品的共鸣。当产品附加了感情的元素，产品就会让用户形成一种情感上的联系，用户对产品的好感也会增加。
打感情牌的手法比较适用于具有社交性的产品引导。
在设计中不论是背景图片还是文案都致力于感情气氛的营造。（下图为人人网的引导截图）
B. 痛点渲染
建立一个用户在实际生活中会遇到的类似的不便的场景，让用户能感受到共鸣，唤起用户对所述功能的需要感。然后给出该产品能给出的解决方案，可以让用户感觉。
戳痛点的手法比较适用于实用的工具性的功能引导。在设计中文案：可采用痛点式文案，或者是非常具有颤动性的文案。
C. 角色榜样类比通过建立用户熟悉的人物角色，来描述其他人会用这个产品来做啥，这种方式可以拓宽对产品功能运用的场景与多种其他可能性。启发用户对这个产品的想象。建立的熟悉的人物形象会让描述变得具体而形象，会从而引发当前运用的用户形成一种类比的心理。
这种方式适用于对产品整体功能的介绍，对于新老产品的功能介绍都适用:  1）老产品用此方法可以启发用户拓宽对既有功能运用的其他的可能性，拓宽运用场景。2）新产品用此方法可以让用户对这个产品的整体功能有更多的认识。
设计要点：1）用户角色渲染得让人觉得可信，能让人很容易联想到自己也会遇到类似情况。2）文案：可采用比较具有亲和力，质朴的文案。
（下图为印象笔记的引导截图）
D. 范例吸引将引导的内容融入真实的界面中，通过合理选择呈现的内容来让用户可以通过界面上的信息来感知产品所具有的功能。这种引导形式可以很好的在第一时间向用户展示产品形态，建立用户的兴趣；范例能让用户预知在运用产品时界面会是啥样子，能让用户对实际界面有充分的了解，并且能让用户看到产品完整的功能与形态。但是这种方式是一种注重界面呈现，用视觉效果去吸引用户的方式，所以对产品本身有一定的要求高手。
适用条件：1）界面本身的设计需具有一定的创新性/美观性/吸引力，这样融入到真实界面中的引导才能具有吸引力。2）产品本身若需要通过用户的经营才能慢慢达到一个完整的形态，那么这种真实界面的范例的方式能勾引用户增加对产品的运用的兴趣，并且能让用户对产品功能理解得比较充分与完善。
设计要点：1）引导中要呈现的内容需仔细挑选，能把产品的典型功能与特征充分展示。2）文案最好是比较亲切的。
（下图为Path的引导截图）
E.平铺直叙的方式如果内容点无法串联，只能一一罗列，那么在设计中我们可以——
1.对每个内容建立场景。
2.放置具有吸引人的或具有竞争力的内容。
3.根据记忆的效果的原则合理排序。将最需要用户关注的内容放在最前面。（记忆的效果：最前面的内容记忆效果>最后面的内容记忆效果>中间部分的内容的记忆效果）
4.精简引导的内容。不要放置太多的引导页。
5.对于每页的设计可以参考下面的有效的注意力里的设计技巧。
有效的注意力注意力是记忆力的基础，记忆力是注意力的结果。没有良好的注意力就没有良好的记忆力，良好的记忆力是建立在良好的注意力基础上的。
我们所设计的引导页也需要能吸引用户的注意力，让用户能够花费精力来阅读我们想告知他们的信息，以达到一种有效的注意力。具体可以咋做呢吗？
我们可以从不同的内容与设计方式上提高效果，以下一一阐述。

1.聚焦界面中不要有过多的视觉焦点，容易分散用户的注意力，导致用户不知道该看那里。
当界面中的信息聚焦在某一点上时，用户能快速准确定位到需要阅读的信息内容上，达到消化信息的目的。
聚焦的设计手法有很多种，如通过光影的方式，将亮光的部分打在最需要用户关注的信息上；虚化背景的方式，突出前面的信息内容；放大镜方式，将需要用户关注的部分作为放大突出。当然除了所举案例中的常见手法，还可以运用其他的方式来聚焦，只要可以达到效果即可。
信息的聚焦需要设计师对信息的内容进行取舍，尽量剔除不需要的内容。
若精简后依然内容较多，那么可以通过拉开信息的层次来使得信息可以聚焦。在设计中尽量将内容整体化，形成几个大块的信息，不要过于琐碎。琐碎的内容不利于信息的获取。由于用户对信息的认知是有整体到细节，用户在阅读内容的时候，更习惯先将内容先抽象成一个整体，然后再仔细阅读整体中的细节内容。所以我们的设计的过程中需要让用户能够很快地抽象出整体的信息。
图例为反例。案例中的设计让页面中形成了过于多的发散点，用户的阅读时难以梳理成整块的信息，增加了信息获取的难度。
2.优化图片所传达的信息人类对于图片信息的阅读能力是远大于对于文字信息的理解的。图片可以更加直观地让用户感知到所要传递的信息。
在不同的图片中，人们对人脸，美女，笑容，具有动感的照片更容易引起用户的注意。
同样为美肤的功能引导，左侧的设计不需要借助文字就可以让用户理解可以美肤，而右侧的设计若只看图是无法理解的。左侧的引导设计比右侧的引导设计更加直观好记忆。
3.除了静态的视觉画面，我们还可以增加用户对于引导内容的注意力。现在的引导页的设计多为静态的视觉页面。人类对于动态内容的注意力> 对于静态内容的注意力。所以除了静态图片的方式，我们完全可以通过适当增加动态内容来吸引用户的注意力。
图例为QQ水印相机和Flava的引导页。
QQ水印相机的引导页就是运用动态注意力，的每页用一个图钉钉着一副照片，而照片会已图钉为圆心轻微地左右摆动。Flava同样，中间的图片的部分都是动态的演示。这2个设计都非常容易让用户对动态部分的内容引起注意，从而阅读相关的内容。
当然在动态内容中，我们也要注意视觉焦点的，不能让界面中的动态焦点太多。一般1个动态焦点会比较好。
当然除了已有的这些案例，我们也可以思考，除了动态的内容，我们是否可以激发其他的感官来吸引用户的注意力。比如可以通过增加一些音效。目前还没有找到这样的案例，但是个人感觉也是可以尝试的。
4.改变屏与屏之间切换的交互方式现在的引导页的切屏交互方式简单都为左右滑动，我们也可以通过改变既有的交互方式增加用户的注意力。毕竟用户对新的东西的好奇心还是有的。但是不要盲目的为了改变而改变。交互的方式应该要与设计的内容相匹配。改变的交互方式要简单易学，在界面的设计中要有运用的隐喻线索，让这种新的交互方式变得自然而容易，否则会引起用户的反感。
图例为feedly的引导页。改变了常用的左右滑动的方式，运用了向上滑动的方式。每张引导页想一张卡片，阅读过的引导页向上滑动即被滑出屏幕。界面视觉对于新的交互方式有明确的引导，不会增加操作的难度，会让用户感觉到是一家具有创新性的公司。
5.能有效传达的文案A. 字数的控制从心理学的角度，人类对于文案在短时间内能记忆住的字符不超过9个。（这个是人类记忆的特性，人类对于内容的短时记忆的容量有限，一般为7 ± 2项目，一般为7 ± 2，即5 ~ 9个项目，这也就是平常我们所说的记忆广度。）超过9个字符，用户是很难记忆的且容易受到干扰而发生遗忘。文案的设计上应该是挑重点的说，无意义的不必要的冗余文字应果断剔除。
如果精简后依然超出极限字符数，那么可以对文案内容分层次。
通过排版的方式，突出需要用户记忆的字符，弱化其他字符。一般而言突出的字符为2-7个是比较容易记忆的。
通过断句的方式，将长的文案变为短的子单元，这样可以扩大短时记忆的容量。断句可以通过打标点，留空格，断行的方式来实现。
（这个也是运用人类记忆的特性，如果超过短时记忆的容量或插入其他活动，短时记忆容易受到干扰而发生遗忘。为扩大短时记忆的容量，可采用组块的方法，即将小的记忆单位组合成大的单位来记忆，这时较大的记忆单位就叫做块。）
B. 文案的内容与行文风格文案的内容可以融入时下热点或话题，行文风格上也可以具有时代的特征。让用户能感受到产品能紧跟时代，贴近当前的社会生活，比一般的文案容易引起用户的注意度。
构建特色很多的引导页在设计上同质化严重，极度相似的设计手法、设计风格、排版风格、相似的文案内容、让用户很难记忆或引起关注。构建产品引导页的特色是区分于其他产品的好方式，特色可以让引导页脱颖而出。
那么怎样构建特色呢吗？
1.从设计方式上进行特色构建我们可以从引导页面内容的不同组成元素来寻找特色的构建点。
背景图片的摄影角度或风格/后期处理/色调；版式编排的设计风格/版式布局/配色方案；文案的行文风格；多屏切换方式也可以考虑
构建特色并不需要对所有内容的元素都进行，即使只在一个内容点上进行特色构建也是可以的，但是需要做到的是这个点上的特色要非常明显，用户容易感知到。
2.系列化引导设计的特色构建对于一些不断更新迭代的产品，往往在重要版本升级的时候都会给出必要的新的引导的内容。所以我们除了从单次引导内容思考进行特色构建以外，我们还可以把眼光拉远一些，从一个系列化引导设计的角度去构建特色。系列化的引导需要从一开始进行单次引导时就加以思考，为系列化构思一个主题。下图中的新浪微博的引导页的设计就是一种系列化引导设计的特色构建。它选用季节为主题，根据所处的季节的特征进行内容的运营。这种方式可以让用户对多次引导的内容感觉到一种新的整体化的特色，贴近当前生活的方式也让产品感觉具有时新性，易于接受。
最后当然，引导并不是解决设计的方法，引导只能作为一种点到为止的辅助方式。
文章中所总结的5个要点是我在实际的工作中的一些设计感悟与整理，其中必有一些较为主观和不足的地方，欢迎大家拍砖与交流。本次主要整理了一下前置引导的一些设计技巧，后续我还会继续整理出过程中的引导的设计技巧的内容。感谢大家的关注。