赞助商
立即赞助

如何设计出优秀的「引导页」?来看高手是怎么分析的!

UI设计3年前 (2021)更新 流光
2K 0 0

@Daidai丶呆 :早年行做互的时,对任何类型的页面做一分析与总结,旨在提升自己的思考能力。所以当也写关引导页文章,是比较浅,今天我想更深入谈谈这个话题。

一、引导页的类型

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

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

1. 传统引导页的形式

数时,我们初次打开应用看到下面样的引导页:

如何设计出优秀的「引导页」?来看高手是怎么分析的!

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

理况:用户能了解这次产品了哪些优化,帮用户清晰了解产品。

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

如何设计出优秀的「引导页」?来看高手是怎么分析的!

这类内容纯粹是对于品牌的推广,包含类似市专题推广、情化内容运营类。为了给用户植入品牌的理念,只要涉及类似景,就希望用户能想的品牌。

上这些引导页希望传递的作,仅仅只是产人的想情况,实际上这类引导页基本甚至全起到他们希望达到的效果。

那为什么市上各家品都要接入这类引导页呢?类是跟风,另类则是为了「仪感」。旨在于应用更新后能起到感知——我们更新了。

受传统 PC 时代软件说明书的影响。PC 时代的一个软件,用户往往不道何操,甚至需要上门的课程学习某个软件才行,比 office 系列。因此,每个软件一旦售出,必备使用说明书,以帮助用户学习。但是,在移动互联网时代,对轻量级的 App 来说,说明书就太重,所以使用引导页种轻量级的方式。但即使此,许用户仍不买单,希望能「跳」引导页。

各可以,买了冰箱,会看操作明书么?好的体验况当然插插就能使用了。

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

2. 内容操作引导

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

如何设计出优秀的「引导页」?来看高手是怎么分析的!

蒙版引导通常紧贴界面流程行出,使用透明色间隔形式加简单指示性文字与图形,总能够简洁明了告知用户产品的功能或者使用方法,并且由于其轻的属性会减少用户的阅读时间。设得当的蒙版引导不仅可以与其他引导相辅相,同时也能够增加用户对产品的好感度。

广义,这也能叫引导页,但我希望叫它「操作引导」。它的好处就清晰明了,直接让用户知道表达什么。它的实际效果会比纯内引导页好很多,但同时也会一问题,即打扰用户操作。

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

3. 卡片式说

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

如何设计出优秀的「引导页」?来看高手是怎么分析的!

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

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

我们出引导页目是提供更好东西用户让他知,然用户也可以不知,为他目不是用新功能,而是该 App 满足了其基本诉求。所以不要做我出了新功能定要让用户使用强引导。

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

4. 视频讲

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

如何设计出优秀的「引导页」?来看高手是怎么分析的!

因为我是截图,所以没法播放视频。类内容比直接,之前在手机上现一款照 App Enlight 也是此,在我使用没用的功能时,它直接通视频的方式告诉我何操,时间短,内容清晰,一看就懂。基没什么阅读障碍,就跟刷抖音一样爽。

弊端什么呢?对于内型产品的新功能介绍,它不具产品,可以通过视频就轻易展示出,但可以借鉴。

所以可以从1-4循序渐进的讲解中发现,用户希望得的引导是内容少且清晰、呈现快且直的内容,而不是好张引导页、不相关的弹框来引导用户去做都不知道的功能。总结下来就是四个点:

  • 使用文字少;
  • 引导内容功能产品关;
  • 最好是有趣,如视频或给予奖励;
  • 俗易懂。

二、这样的引导页要怎么做呢?

有候可以在游戏计中借鉴多值得学习的内容。《好玩的计》这本书就通过普通产品游戏产品的对比,互相借鉴,总结出不少知识共通点,如能直让用户产生兴趣的操作才是理的计。

1. 传统引导页的形式

「传统引导页的形式」中提的引导页,内容表达抽象,许多用户无法理解这个功能表述的思,或者说这个功能用户有什直关系?但是对于新功能展示来说,确实还是有形式的义存在。

2. 内容操作引导

「内容操作引导」中提的操作引导,会扰用户的正常操作,所以内容尽量少,描述简直,品牌代入要少。

3. 卡片式说

「卡片式说」中提的弹框引导比较适新用户对于新功能的提示,如完成什操作,就给予什奖励,直引导用户去使用,会比纯的显示文字告诉用户本次更新了什要更好。

4. 视频讲解

「视频讲解」中提的视频引导直的对功能做了说,它在 App 中的使用景更好的是新老用户在第一次使用这个功能,给予提示,而不是一开始就弹出,此刻用户可能不知道这个视频所对应的底是什思。

《界面设计模式》这本书里单独说过引导页这个话题,中就通过4个点来告诉户该如何设计引导页,容与上述总结的个点很相:

  • 使用的文字要越少越好;
  • 要太多容描述功;
  • 让它变接有趣;
  • 最能通游戏来学习。

那么过以上内容结,我们分析出:引导页常出现在用户初或更新后使用品过程,我们要做到以最轻量快速指引用户了解品使用法或者新功能。

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

小结

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

这样于我们设功能时,底气的运用其中一种方式解决问题,否则盲目风,无法配得「设师」这称呼。

呆呆是前阿计,学能力超,在网络上输出过多干货。最近推出了《呆呆邮报》,每周 1 – 2 篇会员期刊,通过邮箱发送,内容涵盖产品设计、科技、领域,牛近距离接触,这可绝机会 → 订阅《呆呆邮报》

欢迎关注作者的公众号:「呆呆U理」

如何设计出优秀的「引导页」?来看高手是怎么分析的!

图片素材作者:André Ferreira

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

很多人说看过很多设计道理却依然做不好设计,还不如直接看设计案例来的简单粗暴。今天为大家找到一篇实战好文,一个人,3天时...
APP 设计
本文根据笔者的心得体会,跟大家分享,产品经理工作中做数据埋点的一些经验和看法。 作为一名产品经理,你必然知道数据分析...
产品经理
作为UX从业人员,我们的工作是代表用户发声,挖掘出用户的诉求和真实想法。为了做到这一点,我们不仅必须深入了解我们的用户...
产品设计
“大而全”还是“小而精”的观点争论,相信大家肯定都听到过,抑或是正在深陷其中。传统的观念认为,一个产品的功能越多,似乎就...
产品设计
「小宇宙」是即刻团队开发的播客App,目前已上架各大应用商店,仅能通过邀请码使用,导致一时间微博上出现「一码难求」的情况...
产品分析
不知大家有没有和我一样的疑惑:日常产品的信息引导到底该如何设计? 可能有人第一时间会想到浮层、动效、弹窗等等,但这些...
产品设计
近年来,互联网进入下半场,C 端流量红利逐渐消退,很多企业转向了 B 端服务,随之而来的是产品设计者的转型,现在越来越多的...
B端产品
设计师就是只会设计版面会画图的吗?答案是否定的,现在的设计师需要懂点数据,那么为什么还要看数据?从京东云年终采购季项...
产品设计