设计的11种模式、5种场景和6个思考点

释放双眼,带上耳机,听听看~!

无论你使用一样工具的时间有多长,无尽的升级都会把你变成一个菜鸟——也就是说,你会变成笨手笨脚的新用户。在这个“形成”的时代里,所有人都会成为菜鸟。

以上这句话摘自凯文·凯利的《必然》。这看似危言耸听,作为从业者的我们可能不以为然。但事实上,新产品过高的学习成本正一次次地将新手拒之门外。更可怕的是,我们并没有拿它当回事。

优秀的指引带来的极致体验

故事要从一个NS游戏说起。当时正在玩《超级马里奥:奥德赛》的某个关卡,我需要走过一条长长的楼梯去打大龙,在楼梯上面插满着闪闪发光的钥匙。出于好奇,我把钥匙拔了出来,发现拔钥匙会得到金币奖励,当时只觉得是一个游戏的小套路没有在意。

到了打大龙的时候,我被它巨大的形态给整懵了,一个小小的马里奥怎么能拿下这条刀枪不入的大龙呢!?

突然,我发现了它的头上插着三把钥匙。这让我灵光一闪意会到了打大龙的秘诀:先把钥匙拔出来,才能对龙造成伤害。

设计的11种模式、5种场景和6个思考点

钥匙,其实是一个指引。假如在楼梯上没有钥匙,假如钥匙不会发光,假如拔出的钥匙没有奖励,我就不会尝试去把钥匙,也不能意识拔钥匙是战胜大龙的关键。假如,想象一下,在我打大龙的时候直接在屏幕上提示“需要拔钥匙才能战胜大龙”,那么这个游戏是怎样的索然无味。

“钥匙”惊艳的地方在于:让玩家在这无意间学习了游戏机制,指引和游戏融为一体。一个好的指引,能让用户感知不到它的存在,它不言自明,让用户在无意识的体验瞬间中习得所需。

界面设计中的指引模式

在人与系统的交互过程中,信息传递是会损失的。用户不一定能接收或感知到系统的全部信息,而这可导致系统无法被正常使用。而界面中的指引模式,就是为了避免用户错失这些的信息。

与其他界面模式一样,指引模式也着有不少约定俗成的样式。当然这些模式无法达到上述例子的神奇效果,虽然不够优雅,但至少也能解决问题。下面来逐一梳理一下。

1. 弹窗指引

弹窗指引即以弹窗的形式将指引信息呈现在用户眼前。

优缺点/特性:

  1. 弹窗指引可以承载各种各样的内容:文本、图片、动图、插画和视频等,呈现巨大的信息量。
  2. 由于在弹窗模式下用户不能进行其他操作,所以对任务的打断性很强。
  3. 占用着较多的界面空间和占据着视觉中心区域,有很强的吸引性,但同样也可能打扰到用户。

优秀案例:

微软Edge浏览器的做法比较值得被借鉴:在版本更新后,会有弹窗告知用户新版本的特性——可以切换主题。同时可直接让用户切换选择主题,所见即所得,在指引的过程中即完成了配置。

设计的11种模式、5种场景和6个思考点

2. 蒙层指引

蒙层指引指在用户界面上覆盖一层黑色的透明层,然后在透明层上做一些信息的解释。同样地,用户不能在这状态下做其他操作。蒙层所指引的信息必须跟当前界面相关,所以才会用半透明的方式呈现信息。

设计的11种模式、5种场景和6个思考点

优缺点/特性:

个人对这种方式没有什么好感,在我看来它是一种比较鸡肋的指引方式。

  1. 如果一个蒙层上有太多信息,会导致界面非常混乱。信息的承载量有限。
  2. 如果一个蒙层只展现一个信息,那么就必然会有蒙层接连地出现。打断感和干扰性太强,让人十分抓狂。
  3. 如果非要使用蒙层,我觉得需符合以下条件之一:A.信息可用图像化表达而非文字描述。B.被指引的信息是用户难以意会的交互动作(长按、拖拽之类)。C.假如用户没有学会就无法正常使用系统。

3. 气泡指引

气泡是一个流行的指引方式。它以气泡的方式呈现信息,并指向着被指引的界面元素。

设计的11种模式、5种场景和6个思考点

优缺点/特性:

相对于蒙层,我更倾向于气泡指引。

  1. 跟弹窗和蒙层不同,气泡指引允许用户执行其他操作,打断性比较弱。
  2. 因为占用的面积不大,所以也不会过于吸引用户注意。
  3. 但承载的信息量有限,信息类型单一,通常只能是文本类型。
  4. 有些气泡提示可以结合品牌IP,以一种更像“对话”的方式呈现在界面上。

优秀案例:

国外B端产品Odoo的气泡指引做得非常出色。在一些需要指引的地方,浮动着一个“小水滴”的标记,这能很好地吸引用户,但又不会有很强的干扰。当鼠标悬停在“水滴”上时,会展开变成一个带有解释内容的气泡。当用户完成指引的步骤后,水滴就会消失。过程安静自然,完全没有系统把我当傻瓜的感觉。

设计的11种模式、5种场景和6个思考点

4. 浮层指引

浮层指引更像是气泡指引的一种独特呈现方式。

设计的11种模式、5种场景和6个思考点

优缺点/特性:

  1. 继承了气泡的弱打断、弱干扰等特性。
  2. 可以承载更多的信息量,以及除文本外的更多信息类型。
  3. 浮层可带有操作按钮,而且所指引的功能可以是非当前页的功能,这可以让用户直达功能。

优秀案例:

在虾米APP的播放器中(上图右),连续切换5首歌时就会出现浮层指引用户收听其他推荐歌曲。值得借鉴的是,虾米考虑到了用户更细致的行为并做了自己的预判,让指引更适时地出现。

5. 流程面板

流程面板更多出现在复杂的B端系统中。在面板上描绘着用户需要操作的流程,并表明一二三步该做什么,还会有一些按钮或链接,让用户直达功能。用户只要一步步按流程操作就可以顺利让系统跑起来。

设计的11种模式、5种场景和6个思考点

优缺点/特性:

  1. 可以应对复杂且巨大信息量的场景。
  2. 可以让用户更容易地理解系统架构和关键任务。
  3. 但占用太多的界面空间,当用户熟悉系统时或者对于老手用户是个鸡肋。

优秀案例:

国外财务处理系统Intuit Quickbooks的流程面板有着精美的插图和流畅的动效,在用户完成每个流程节点时都有明显的正向反馈。而且允许用户隐藏面板(左红框),隐藏之后会有一个小小的进度条提示(右红框),并且能让用户轻易地找回来。

设计的11种模式、5种场景和6个思考点

6. 向导组件

向导组件可以算是流程面板的简化版,在很多C端系统也可以看到它。通常在一些操作流程较长任务中使用到,若同时此任务出现频率很低,那么向导组件就尤为重要。

设计的11种模式、5种场景和6个思考点

优缺点/特性:

  1. 能让用户有全局概览和心理预期,不会迷失在一个长长的任务链条中。
  2. 能把任务拆分,简化每个任务难度。
  3. 但值得注意的是,向导通常只是一种信息的展示,不具有可交互的操作。

7. 空态指引

空白状态是系统必备的状态之一,是指当前情况下系统无数据的状态。空态指引是指在空白状态下给予一些操作引导,一方面可避免出现一个尴尬的空白页面,另一方面可让用户直观地知道下一步应该干嘛。

设计的11种模式、5种场景和6个思考点

优缺点/特性:

  1. 空白的页面留出了大量的空间,所以可让空态指引玩出各种花样。
  2. 但用户未必会细心阅读空态下的内容,而是选择自己摸索。
  3. 空态指引的适用场景比较局限,一旦系统有了数据,就不能作其他指引。

优秀案例:

一款笔记工具Notion上的指引比较有意思。它在指引上直接用了笔记的方式,上面列了一条条ToDoList,用户通过ToDoList就可学习工具上的主要功能,而ToDoList本身也是此工具的功能之一。(这种做法感觉有点接近那个马里奥游戏了呢!)

设计的11种模式、5种场景和6个思考点

8. 加载态指引

加载态也是系统必备的状态之一,但在这状态下做指引比较少见,在游戏或大型产品上出现较多。因为加载时间通常很短,根本不能阅读完里面的内容。

优秀案例:

一个熟悉的例子就是王者荣耀在加载的时候,有一小段文字提示游戏的小技巧。

设计的11种模式、5种场景和6个思考点

9. 控件状态切换

控件可以在某些条件下切换自身状态,新的状态表现出更强引导性,从而达到指引用户的目的。

设计的11种模式、5种场景和6个思考点

优缺点/特性:

  1. 控件状态切换是一种比气泡更为优雅的指引方式,因为他没有额外增加新的界面元素。
  2. 但它的适用场景就更为苛刻,并不是所有控件都可以这样搞。

优秀案例:

卡噗APP的编辑按钮有两种状态(上图):当刚切入页签时为展开态,从而解释按钮的功能并吸引点击;当上滑屏幕时,按钮收起为普通状态,可以避免内容遮挡。

10. 动画

优秀的动画能让产品品质提升不少。例如:网易云音乐7.0进入后,会有动效告知用户界面布局的变化,同时解释了横向滑动查看更多的交互,相对于以上的各种引导模式都优雅一大截。

设计的11种模式、5种场景和6个思考点

11. 预置任务

预置任务是游戏里特有的模式,它强制性地给用户安排了一个极为简单的任务或关卡,只有通关了才可以真正地展开游戏。当然,通关了也基本会了解游戏机制。之所以游戏敢这么搞,是因为游戏中玩家的容忍度比较高,其次是虽然游戏系统复杂,但往往可以抽象出最简单的逻辑。

这方式在产品中很难运用,但不妨可以作为开拓脑洞的思路。

指引模式的使用场景

一般来说需要用到引导模式的场景会有一下几种:

  • 上新说明:当有新的内容或功能上线,需要让用户知道时。
  • 信息告知:当需要告知用户一些隐藏功能或亮点功能时。
  • 行为诱导:当需要刺激用户执行某个操作时。
  • 障碍辅助:当用户可能无法进行下一步时。而系统刚启用时的新手指引就是一个典型场景。
  • 概览提供:当需要让用户全局了解某个对象时。

场景一到三,用户的心理模式是一致的:如果用户不知道被指引的信息,大概率不妨碍正常使用。用户对这些信息的需求不高,更多的是产品业务希望能让用户看到。此场景下,如果用户知道这些功能后能提升他的使用体验,那么对指引的容忍度会较高。如果接连的指引没有让他感知价值,就会造成反感。

场景四和五反而更需要我们关注。因为我们很难预判用户什么时候会无法进行下一步,这需要我们更多地调研和用户测试去挖掘用户行为和痛点。而且,此场景下的指引模式需要更容易发现。

所以,不同场景下应有不同的指引模式,而每个场景下可以使用的引导模式如下图。空的格子表示暂时没有找到实例,说不定用好了是一个创新方式。

设计的11种模式、5种场景和6个思考点

一些思考点

1. 减少不必要的打扰,使用合适的信息载体

我前一篇文章也说过,尽管是一个很显眼的东西,只要它频繁地打扰用户,用户就会将其视而不见。所以最好的策略应该是让重要但强打扰的模式尽量低频出现。另外,指引的作用就是传递信息,能传达多少信息量也是一个重要维度。所以可从干扰度和信息量两个维度来选择合适的引导模式。

设计的11种模式、5种场景和6个思考点

2. 适时地出现,合理地消失

出现的逻辑有很多种:首次打开时出现、基于某个动作触发、基于某个状态触发、一直显示、用户主动打开等等。消失的逻辑也有很多:持续某个时长后消失、用户执行操作后消失、用户主动关闭等等。还有其他逻辑:是否允许再现、超过几次后不再现等等。无论如何,在设计的时候都应该结合用户场景的上下文考虑。

举个例子,在游戏《光·遇》中,当玩家突然地调大音量时,会出现指引告诉玩家可能手机调了静音,几秒过后或调小音量时,指引消失。

你会发现这个逻辑非常合理:正常情况的音量调幅不会过大→突然调大音量是异常动作→猜测是因为用户不能听见声音→原因可能是静音或连上了耳机→提出建议。这个设计背后其实是对用户场景的合理推敲,不仅不会打扰用户更能让用户感到贴心。

设计的11种模式、5种场景和6个思考点

3. 允许用户随时跳过

“用户经常会在使用功能的时候发生误操作,这时需要一个非常明确的“紧急出口”来帮助他们从当时的情境中恢复过来。”

这是尼尔森十大可用性原则之一,用户可控原则。同样地,指引模式的突然出现其实是用户没有预期的情境,在这种状态下需要允许用户随时跳过或取消指引。特别是,那种会接二连三出现的或者持续时间比较久的指引,如果没有一个“紧急出口”,用户可能会因此抓狂。

4. 保持风格的一致性

努力回想一下,我们在系统中遇到的弹出层有哪一些?

一些选择浮层、一些反馈的弹窗、一些录入的表单,还有今天介绍的指引……我们的用户已经需要辨别这么多东西,如果还要他们去认知各种风格迥异的指引模式,那是怎样的一场灾难?

保持一致,是让他们最低限度地减少认知负担。

5. 精炼的文案,更可视化地表达

用户阅读指引的时间非常短暂,所以文案必须精炼简洁。最好使用插图和动效等辅助,将信息更可视化地表达出来。避免在用户的主任务上打断太久。

6. 给予明显的正向反馈

指引用户完成某个任务阶段时,给予一些积极的反馈能够建立信心,从而更好地执行下一任务。这个做法在游戏中特别常见,例如,完成后会有等级提升积分奖励等等。为用户设置符合其水平的任务,并给予正向反馈帮助他成长,能更容易形成心流效应。

最后

指引并不是在产品设计完之后才打上去的“补丁”,而是在开始设计的时候就需要思考的事情。在设计核心功能的时候,不要忘了去消灭用户触达核心功能前的层层障碍。

人已赞赏
产品设计

什么是设计系统?价值观和原则

2020-2-28 10:14:20

产品设计

设计冲刺经历,2018俄罗斯世界杯主题设计

2020-3-7 10:52:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索