移动应用的5种引导形式和设计要点

  • A+
所属分类:经验思维

本文来源: 焱小玖(公众号:海盐社), 共 2186 字

引导是一款产品中不可或缺的一部分,一般是对产品特色、操作和新功能的介绍或展示。通过引导可以吸引用户关注产品主要功能并降低其学习成本,让用户在短时间内迅速上手,提升产品体验的愉悦度。对于产品来说有着重要作用,可以说引导是产品与用户之间的一种交流连接。

今天我们就来梳理一下移动应用中都有哪些引导形式和它们的设计要点吧。

引导的形式

引导的形式主要有引导页、蒙层引导、气泡引导 、嵌入式引导和互动式引导五种。

移动应用的5种引导形式和设计要点

· 引导页

引导页又称幻灯片引导,展示区域是整个页面且底部常伴随进度的显示。使用场景多为用户第一次打开APP或下载更新后,是为用户展示产品的主要功能特色或操作方式的页面。通常由3-5个页面组成,页面元素包括标题、图文内容、进度和按钮。引导页不会自动消失,需要用户通过滑动或点击的操作才能结束并进入APP,属于强引导。

移动应用的5种引导形式和设计要点

不过需要注意的是,引导页虽然是一种强引导,但用户心理普遍更倾向于迅速进入体验产品,因此对引导页信息的吸收程度并不高。所以引导页的内容上、设计上都需要做到简单明了、突出重点以最大限度地降低用户认知负担,使其在快速浏览的过程中也能轻松理解页面所传达的信息。

同时也应为用户保留跳过引导过程的权力,比如在页面加上“跳过”按钮,或始终伴随“立即体验”的按钮,以供用户选择。

移动应用的5种引导形式和设计要点

· 蒙层引导

蒙层引导的形式是在页面上覆盖半透明蒙层以弱化页面其他信息,让用户聚焦于蒙层上方显示的文字、手势、插图等引导内容。同样的,蒙层引导也不会自动消失而是需要依靠用户的操作(点击指定/任意区域后)才能消失或进入下一步,也属于较为强势的引导。

移动应用的5种引导形式和设计要点

游戏或工具类产品中的教学过程经常使用这种形式,为用户提供一步一步地引导,让用户可以一边学习一边操作,迅速掌握。

移动应用的5种引导形式和设计要点

· 气泡引导

气泡引导又称浮层式引导,常用于新功能上线、核心功能说明或是介绍隐藏操作等。形式一般为半透明的气泡浮层,配文字说明、图标、按钮等,出现于功能旁边。由于没有蒙层它对页面其他内容影响较小,但出现位置和气泡的箭头又让它带有很强的指向性,是对用户干扰较小,又能成功吸引其注意的引导。

移动应用的5种引导形式和设计要点

气泡可以分为模态和非模态两种,模态通常带按钮,或是需要点击相关功能后才消失,而非模态则是3-5秒后自动消失,具体可以根据引导的重要程度而定。

移动应用的5种引导形式和设计要点

· 嵌入式引导

嵌入式是将引导内容嵌入原有的界面中,在空状态或出错状态使用较多,以引导用户如何开始,或是如何处理当前情况。嵌入式引导通常会在视觉上与当前页面UI做区分处理,使其更好地引起用户的注意。

移动应用的5种引导形式和设计要点

空状态下的引导也是至关重要的,既是对当前情况的反馈,也告知用户接下来该如何的操作,摆脱空状态,成功使用该功能变得活跃起来。

移动应用的5种引导形式和设计要点

· 互动式引导

互动式引导是一种较为隐蔽的引导,通常在用户使用产品的某些特定过程中才会触发。其形式一般为简洁的文案或图形说明,如下拉刷新、手势互动等,用以引导用户完成当前操作。比如淘宝在下拉过程中,随着下拉幅度的不同而对应两个不同的操作,小幅度是刷新,大幅度则进入淘宝二楼,其引导在下拉的时候出现并变化,帮助用户选择要进行的操作。

移动应用的5种引导形式和设计要点

微信中发送语音消息时,也会随当前操作出现相应的引导。

移动应用的5种引导形式和设计要点

引导的设计要点

虽然每种形式的引导都有其特点与适用场景,但它们的设计目标和要点都是相通的,都是为了帮助让用户更顺利的使用产品,完成操作。所以不管我们选择的哪种形式的引导,都可以注意以下三个设计要点。

1.功能层

内容简练表述准确,通俗易懂。

从功能层来说,引导的目的就是向用户传达信息、提供帮助,让用户可以顺利完成操作。为了让用户能够高效准确地接收引导所传达的信息,就要求引导的文案需要简练精准 ,使用的图标、图形、插图等除了视觉上的美观,更要契合主题以辅助文案的表达,使其内容更加容易理解。

比如搜狗浏览器的引导页只有一页,无论从文案、插图的内容都围绕着该版本中的主要功能——有声朗读,排除不必要的干扰突出重点,让用户更容易记住。

移动应用的5种引导形式和设计要点

2.交互层

触发场景准确,出现时机恰当 。

交互层面需要考虑引导的触发场景,在用户使用到的场景下触发引导是最有效的。尤其注意不要把所有引导一股脑推给用户,这样用户很有可能会觉得厌烦没有耐心观看而直接关闭,没有起到引导的作用。

移动应用的5种引导形式和设计要点

如果当前内容需要的引导较多,则可以考虑分步骤引导,让用户更好的聚焦于当前操作。同时显示分步的进度,让用户对当前进度有心理预期。

移动应用的5种引导形式和设计要点

3.情感层

让引导更有产品特色,更有趣味性。

每一款成熟的产品都有其品牌风格,很多优秀的视觉哪怕只是一小部分也能让用户马上识别出这是哪款产品,从视觉上加强产品在用户心理的认知。比如引用产品的IP形象,文案的风格等,尝试让引导的过程变得更加有趣,让用户保持愉悦的心情,提高其对引导的接受程度,让用户更愿意看引导的内容。

比如紫禁城600中的引导,手势说明没有使用惯用的人手的形象而是采用了猫爪的形象,与紫禁城中的御猫联系起来,“知道了”按钮模仿古代印章的形式,这些都是与产品主题风格相关的元素,从视觉上突出了品牌的特色,成为独特的记忆点。

移动应用的5种引导形式和设计要点

的引导则贴心的提醒用户注意音量,为用户避免声音而带来的尴尬情况,从细节处体现了产品的用心与关怀。

移动应用的5种引导形式和设计要点

划重点

· 引导有引导页、蒙层引导、气泡引导 、嵌入式引导和互动式引导五种形式。

· 设计引导的时候需要考虑准确的触发场景,使其在适当时机出现,并注意内容的简练表述,做到通俗易懂。同时可以尝试让引导更有产品特色,增加趣味性,让用户更愿意看引导的内容。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: