腾讯ISUX:移动端引导设计技巧1:前置的引导页

分类栏目:经验 - 设计文章

发布于 暂无评论


  前言:

  

  引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品遇到障碍之前给予及时的帮助。在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。为了完成不同的引导内容和引导的目标,移动端的引导设计会根据需求进行不同的多样化处理。根据引导出现的时机,可以分为前置型的引导与过程中的引导。

  

  前置型的引导:在用户还没有正式开始使用这个产品时给出的一系列帮助内容。主要的设计方式为引导页的设计。过程中的引导:在用户使用产品的过程中给出的一系列帮助内容。主要的设计方式有空白页的内容引导,loading等等待状态中的引导,拆分包袱的逐步引导,巧设默认值的功能引导,tips引导,浮点引导,遮罩聚焦式引导,触发式引导,任务演练式引导等。

  

  由于篇幅所限,本篇博文主要针对前置型引导的引导页的设计详细论述,而对于过程中的引导会在后续博文中奉上。

  

  引导页的设计探究

  

  引导页作为前置型引导,必然具备前置型引导的特征。用户是在使用前看到引导页的内容,此时用户对这个产品的了解并不多,对于如产品的功能/页面布局/具体使用等还没有建立起完整的认知。所以引导页更适合阐述产品的概况内容(如具有产品的概念,产品的核心功能,具有竞争力的功能点或用户痛点,以及会影响到初次使用的操作方式的内容),建立起用户对产品的大致认知;而不太适用于阐述过于细节的产品内容,因为此时用户还无法进行相应的信息匹配,细节内容会不容易理解。

  

  虽然引导页有上述的限制,但是由于它具备的很多优点,让它作为一种非常常见的方式来使用。

  

  具体的优点:1)篇幅设置可自由设定,在一定范围内可多可少;2)全屏或几乎全屏的信息呈现的方式,使得信息的可承载量多;3)内容的编排自由,设计师可以自由发挥。

  

  所以引导页是一种在设计上较灵活自由的方式。但是在实际的使用中,我们还是常常会发现设计的效果并不容易达不到预期。用户常常不会仔细浏览这些引导的信息,对于引导的内容信息的接收程度会打折扣,很难全部吸收;还有不少情况下用户会跳过引导,忽略引导想提供的帮助信息。那么,如何做能让我们设计的引导才能引起用户的兴趣,让他们花费一点精力去吸收引导的内容信息,这需要一些技巧

  

  最核心的技巧有4点:精简与合理使用&细致编排&有效的注意力&构建特色。

  

  精简与合理使用

  

  在引导页设计的泛滥时代,绝大多数的APP在首次使用中都会设计几页引导内容。

  

  设计师需要把控引导的内容。只做必要的引导页内容。没必要的引导内容会增加信息的冗余性,冲淡真正需要用户关注的信息的注意力与精力。

  

  在设计之前,我们要对用户初次使用该APP时的心理与使用行为进行分析,并不是所有情况都适合使用引导页的,要对不适合的情况sayno。

  

  适合与否的依据主要是在真实的使用场景中,用户是希望能对这个产品有个大致的了解,还是希望快速启动产品立即使用,在使用的过程中再慢慢学习。如果用户是希望快速启动产品使用中出现过于的引导会引起用户的方案。

  

  具体较适用的情况:

  

  1.对于一个新概念的新产品,用户需要对这些新的概念或内容有所理解才能更好的使用产品。(下图为Vida的引导截图)

  

  

  2.竞争力的或有吸引力的内容点的介绍。(下图为支付宝和糯米团购的引导截图)

  

  

  细致编排

  

  当确定了引导的内容后,我们需要对引导的内容进行细致的编排。具体的编排可以分为平铺直叙述和讲故事的方式。平铺直叙是将一个一个内容点罗列,之间没有建立什么联系。而讲故事是将内容串联起来变成一个整体的故事。

  

  1.讲故事的方式,使引导具有情景性

  

  讲建立与用户使用情景匹配的场景,让用户能建立一种熟悉的感受,能让用户对引导的功能点感同身受。

  

  串联的故事一般而言都是多页的形式。一步抛出一个需告知的点,循序渐进的解说。故事可以只围绕一个功能点来叙述,也可以将多个功能点串联起来变成一个故事。形成一个完整的故事。

  

  由于每次一个告知点,多会采用聚焦的设计手法,把视觉注意力吸引到每个告知点上。

  

  讲故事的主要目的是希望构建用户与产品之间的联系。让用户感觉到产品与自己是有关系的,现在所说的内容是与我相关的,我需要花费精力来关注一下。如果完全建立不起关联,很容易让用户忽略。

  

  微信4.0的引导就是一个编故事建立关系的好例子。在微信在推出4.0版本的时候,新增加了类似Path和Instagram一样的相册功能,并且可以把相册分享到朋友圈。这个功能的加入拓展了之间仅是沟通聊天工具的产品定义。在4.0版本的新功能引导中,它非常成功的讲诉了一个关于相册功能的故事,并且在设计内容时非常注意建立联系。在故事阐述中它一直强调用户可以怎么样,让用户能明确感觉到与自己的关系。

  

  

  2.讲故事的主要手法——故事可以是以情动人,痛点渲染,角色榜样类比等方式

  

  A.动之以情

  

  营造出具有浓烈感情色彩的场景,唤起用户心底的情绪,让用户产生对产品的共鸣。当产品附加了感情的元素,产品就会让用户形成一种情感上的联系,用户对产品的好感也会增加。

  

  打感情牌的手法比较适用于具有社交性的产品引导。

  

  在设计中不论是背景图片还是文案都致力于感情气氛的营造。(下图为人人网的引导截图)

  

  

  B.痛点渲染

  

  建立一个用户在实际生活中会遇到的类似的不便的场景,让用户能感受到共鸣,唤起用户对所述功能的需要感。然后给出该产品能给出的解决方案,可以让用户感觉。

  

  戳痛点的手法比较适用于实用的工具性的功能引导。在设计中文案:可采用痛点式文案,或者是非常具有颤动性的文案。

  

  

  C.角色榜样类比

  

  通过建立用户熟悉的人物角色,来描述其他人会用这个产品来做什么,这种方式可以拓宽对产品功能使用的场景与多种其他可能性。启发用户对这个产品的想象。建立的熟悉的人物形象会让描述变得具体而形象,会从而引发当前使用的用户形成一种类比的心理。

  

  这种方式适用于对产品整体功能的介绍,对于新老产品的功能介绍都适用:1)老产品用此方法可以启发用户拓宽对既有功能使用的其他的可能性,拓宽使用场景。2)新产品用此方法可以让用户对这个产品的整体功能有更多的认识。

  

  设计要点:1)用户角色渲染得让人觉得可信,能让人很容易联想到自己也会遇到类似情况。2)文案:可采用比较具有亲和力,质朴的文案。

  

  (下图为印象笔记的引导截图)

  

  


上一页12下一页