产品设计中「引导页」的相关思考

早些年入行做交互的时候,会对任何类型的页面都做一些分析与总结,旨在提升自己的思考能力吧。所以当然也写过关于引导页的文章,但是比较浅,今天我想更深入的谈谈这个话题。

1. 引导页的类型

引导页定义比较广,往小了讲,我们一般会认为在用户初次打开应用时跳出的几张介绍应用功能的页面就叫做引导页;那往大了说,在用户使用某个功能前就能帮助用户降低学习成本的页面或存在引导属性的弹窗都可以称为引导页。

下面我们来看看市面上存在哪些引导页,并分析其优劣。

1.1 传统引导页的形式

多数时候,我们初次打开应用会看到下面这样的引导页:

可以看到一个共通点 ——即页面呈现的内容为该 App 的主功能或新功能推荐,或者是对刚迭代的功能做了哪些优化的说明。

理想情况是:用户能了解这次产品做了哪些优化,帮助用户更清晰地了解产品。

有些应用的引导页呈现的是下列内容:

这类内容纯粹是对于品牌的推广,包含类似市场专题推广、情感化内容运营两类。为了给用户植入品牌的理念,只要涉及类似场景,就希望用户能想到自己的品牌。

以上这些引导页希望传递出的作用,仅仅只是产品人的理想情况,实际上这类引导页基本甚至完全起不到他们希望达到的效果。

那为什么市面上的各家产品都要接入这类引导页呢?一类是跟风,另一类则是为了「仪式感」。意在于应用更新之后能起到一种感知 —— 我们更新了。

受传统 PC 时代软件说明书的影响。PC 时代的一个软件,用户往往不知道如何操作,甚至需要上专门的课程学习某个软件才行,比如 office 系列。因此,每个软件一旦售出,必然会配备使用说明书,以帮助用户学习。但是,在移动互联网时代,对于轻量级的 App 来说,说明书就太重了,所以使用了引导页这种轻量级的方式。但即使如此,许多用户仍然不买单,希望能「跳过」引导页。

各位可以想想,你买了冰箱,会看操作说明书么?好的体验情况当然是插上插座就能使用了。

所以有些产品甚至会出「操作流程图」来教用户如何使用 App,出现这种情况的产品人员应该反思,为什么用户使用你的产品需要你教?操作成本未免太大了吧。

1.2 内容操作引导

这类引导会出现在内容页面,直接引导用户去操作相关功能,如图:

蒙版引导通常紧贴着界面流程进行而出现,使用透明色间隔形式加上简单指示性文字与图形,总是能够简洁明了地告知用户产品的功能或者使用方法,并且由于其轻量的属性会大大减少用户的阅读时间。设计得当的蒙版引导不仅可以与其他引导相辅相成,同时也能够增加用户对产品的好感度。

广义上,这也能叫引导页,但我更希望叫它「操作引导」。它的好处就是清晰明了,直接让用户知道你想表达什么。它的实际效果会比纯内容引导页好很多,但同时也会有一个问题,即打扰用户操作。

许多小伙伴会以为这样的方式已经解决了内容操作引导的问题,但其实这种方法也会使用户厌倦,所以内容不易过多。

1.3 卡片式说明

卡片式的引导其实跟第一个说的引导页类型形似,无非就是在主页弹出本次更新的内容说明,如图:

如果是重要内容需要用户操作,直接进入产品引导用户去使用,且呈现出一种惊喜感,不要强制给用户产生过多无意义的打扰,或者冗余式的推送与呈现,否则体验无法尽如人意。

这类引导的好处是可关闭,如果用户有兴趣自会前往了解,如用户不感兴趣,则直接关闭不对其进行任何操作。

我们出引导页的目的是提供更好的东西给用户让他知道,当然用户也可以不知道,因为他的目的不是用新功能,而是该 App 满足了其基本的诉求。所以不要做我出了新功能就一定要让用户使用的强引导。

但这类引导也有缺点,即没有直接与功能产生联系。

1.4 视频讲解

昨天在 Mac 上更新 Nucleo 这款软件的时候,更新完弹出一个视频操作说明,告诉我如何使用新功能:

因为我这张是截图,所以没法播放视频。这类内容比较直接,之前在手机上发现一款照片 App Enlight 也是如此,在我使用没用过的功能时,它会直接通过视频的方式告诉我如何操作,时间短,内容清晰,一看就懂。基本没什么阅读障碍,就跟刷抖音一样爽。

弊端是什么呢?对于内容型产品的新功能介绍来说,它不像工具产品,可以通过视频就轻易展示出来,但是可以借鉴。

所以可以从 1.1-1.4 循序渐进的讲解中发现,用户希望得到的引导是内容少且清晰、呈现快且直接的内容,而不是好几张引导页、不相关的弹框来引导用户去做他自己都不知道的功能。总结下来就是四个点:

  1. 使用文字少;
  2. 引导内容与功能产品关联;
  3. 最好是有趣,
  4. 如视频或给予奖励;
  5. 通俗易懂;

2. 这样的引导页要怎么做呢?小结

有时候我们可以在游戏设计中借鉴到很多值得学习的内容。《好玩的设计》这本书就通过普通产品与游戏产品的对比,互相借鉴,总结出不少知识共通点,如能直接让用户产生兴趣的操作才是合理的设计。

  • 1.1 中提到的引导页,内容表达抽象,许多用户无法理解这个功能表述的意思,或者说这个功能与我有什么直接关系?但是对于新功能展示来说,确实具有形式感的意义存在。
  • 1.2 中提到的操作引导,会打扰到用户的正常操作,所以内容尽量少,描述简单直接,品牌代入感要少
  • 1.3 中提到的弹框引导比较适合新用户对于新功能的提示,如完成什么操作,就给予什么奖励,直接引导用户去使用,会比单纯的显示文字告诉用户本次更新了什么要更好。
  • 1.4 中提到的视频引导很直接的对功能做了说明,它在 App 中的使用场景更好的是新老用户在第一次使用这个功能时,给予提示,而不是一开始就弹出,此刻用户可能不知道这个视频所对应的到底是什么意思。

《界面设计模式》这本书里单独说过引导页这个话题,其中就通过 4 个点来告诉用户该如何设计引导页,内容与上述总结出的四个点很相近:

  1. 使用的文字要越少越好;
  2. 不要用太多内容描述功能;
  3. 让它变得直接且有趣;
  4. 最好能通过游戏来学习;

那么通过以上内容的总结,我们分析得出:引导页通常出现在用户初次或更新后使用产品的过程中,我们要做到以最轻量的方式快速指引用户了解产品的使用方法或者新功能。

现阶段用户打开一个新的产品通常会遇到各种引导提示(前置引导页,视频引导,弹窗提示,活动浮层介绍等等),区分这些引导,正确去使用,且合理设计,才是设计师应该做的事情。

小结

当我们在分析一个或一类功能,甚至是一款产品时,要以从旧到新的思路去分析这个功能的发展路径,这样就能看到其迭代优化的原因,从而推理出用户使用习惯的改变。

这样才有助于我们在设计功能时,有底气的运用其中一种方式来解决问题,否则盲目跟风,无法配得上「设计师」这个称呼。

我的文章不是要教各位怎么做设计,而是与各位说明设计过程中需要注意的点。

希望我的文章能帮助你深度思考,谢谢阅读:)

呆呆U理(公众号)

作者: 呆呆U理

(0)

相关推荐

  • 动效在日常产品设计中的实际应用

    本文分享作者C端产品设计中总结的动效使用,归纳出比较实用的6点技巧.利用小技巧有效吸引用户注意力,增加点击率,降低运营成本:用最简单的视觉表现方式说明其中的关系,增加产品易用性等. 几年前随着国内移动 ...

  • 重复与突变在产品设计中的应用

    设计中的重复是什么? 在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐.统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感. 排版的四大原则:对比.对齐. ...

  • 产品设计中的游戏化设计策略

    游戏行业是有巨大商业价值的,腾讯在2018年第一季度的财报就公布日赚2.66亿元,年收入破1000亿.一款好的游戏可以让用户持续数小时,数天,甚至数周一遍又一遍地玩同样的游戏.我并不经常玩游戏,但是, ...

  • 产品设计中的可拓展性原则

    可拓展性原则是我自己瞎起的一个名字,高兴的话你说弹性原则也行.主要意思是指 界面设计要足够的灵活,具有弹性,以满足将来可能出现的场景.我第一次考虑这个问题是从去年7月份开始,当时接到领导的一个临时需求 ...

  • 如何在产品设计中利用心智模型

    不管是创造新产品还是优化现有产品,产品设计师都应该利用用户对熟悉的产品和界面有一定的理解这一点来进行创作.这样做的好处是产品会有更流畅的交互,更高的使用率和更好的产品可用性.用户应该在在你设计之前就知 ...

  • 产品设计中的破窗理论

    [优秀外文翻译 第40弹] 几年前,我第一次通过Spotify的同事介绍了"破窗理论".这个理论最先说的是,维护城市环境可以防止诸如故意破坏或在公共场合饮酒等小型犯罪,营造良好的秩 ...

  • 细数那些精彩纷呈的引导页

    UI设计中的引导页就是一个APP的门面.而一个好的引导页不仅会让新用户很快能够上手你的APP,还能带来良好的用户体验,给用户留下深刻的印象,从而留住用户.但是怎么给自己的APP做一个好的引导页呢,今天 ...

  • APP引导页怎样才能设计的高大上?

    一个优秀的App引导页,能够最迅速地抓住app用户的眼球,让他们快速了解App的价值和功能,起到很好地润滑和引导作用.俗话说的好,好的ui视觉界面可以造就App的点击率.点击率是啥--是钱呀!   请 ...

  • 降低用户成本的产品设计方法总结

    最近在整理接下来几个月的业务体验事件规划,发现产品无论 B/C 端,在新用户上手这块都存在较高的门槛,而目前已有的版本在降低用户认知.学习.操作成本方面,挖掘得并不够深入,便计划把降低成本作为接下来体 ...