恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
BESD2015移动设计趋势白皮书:怎么设计移动应用的新手引导更好?
0.0°
2015-01-06 自译外文 经验/观点 原作者: Germaine Satia 举报 988 17 3 1

如今,当用户首次打开App时弹出引导页面已经是很常见的事。引导页面是用于帮助用户更好地使用App。

如今,当用户首次打开App时弹出引导页面已经是很常见的事。引导页面是用于帮助用户更好地使用App。
鉴于这些往往是用户进行交互的第一组屏幕,他们还设置了用户的应用程序的预期。因此 ,在其中起着至关重要的是那些参与开发APP的人——产品经理、设计师、开发人员——会花时间评估APP的引导页面是否必要,如果是必要的,那么就要很好的实现它。
在这篇文章中,我们将提供一些好的建议以及资源,常见的设计方法来帮助你提升新手引导页面的用户体验。
•是否要提供引导页面
•近年来,我们看到很多讨论引导页面在移动应用的有效性。对引导页面一个流行的讨论是,应用程序是否需要?是否存在根本性的缺陷?是否具备简单和用户友好性的基本元素?
数字设计有很多规则和实例,这些东西都是很好的。这些规则保证了设计人员和开发人员在开发产品时无需自己摸索方向。更重要的是,他们保证了用户在使用一款新的APP时避免了不必要的压力;相反,他们可以放心知道编辑功能将由一个铅笔图标表示,“大拇指”图标则表示“点赞“。所以,规则对设计师有很多的指导作用。
但事实是,每款APP都是独特的,如何去使用,以及和人使用,这些差异在一定情况下使指导造就了可靠,务实,用户友好的特性,让我们一起来观察一下案例。

案例1:交互模糊

如果你开发的APP交互方式与大部分用户之前接触的交互方式有所不同—尤其是手势操作,那指导页面就起着重要的作用。手势操作类型的APP,目前仍处于实验和探索阶段,比如,开发者需要指导用户如何与App进行交互,清楚地展示每个手势及其相应的功能。例如,时钟软件Timely,在屏幕指定的位置可以通过上下滑动来增减时间。

 

 

案例2:空白陈述

Feedly向用户展示了如何去检索第一部分内容

 

案例3:系列产品

如果你的APP是系列产品,也就是说有桌面端和网页端,那么引导页将能对提升用户的体验起到非常重要的作用,尤其是你的手机端APP没有其他版本的全部功能。这点在复杂的商业APP中尤为重要,许多这样的APP扮演者众多用户角色,包括每一个特定的访问权限和安全机制。
通常网页端和桌面端都支持全部的功能,例如如创建,查看,编辑和删除内容,然而移动端将限制这些功能,只能进行查看。在许多案例中,一个简单的陈述将可以帮助用户更好地使用他们的APP。

 

案例4:个人信息

03-fibit-opt

尽管你的APP没有符合以上案例,你的用户通过引导页的指导仍然可以适应。记住一点,用户与产品的互动至少要让他们明白产品的好处。你可以将这些信息在引导页上展示,后面我们将会讨论功能引导页的作用。
当然,我们的职责就是设计出直观,易于使用的产品。然而我们不应该忽略引导页对用户所提供的价值,这将使体验变得更有趣。

使用那种引导方式?
这是最常见的三种方式:
1. 优势指向引导
2. 功能指向引导
3. 逐步引导
我们一起来看看每一种方式使用时的一些法则

方式1:优势指向引导

当使用这种方式时需考虑以下几种准则:
1.显示三条信息为最合适
这个数字并不是基于科学理论,而是因为重点是要让用户快速了解这款APP,“三条”最为合适(不包括屏幕标题)。这种方式可以让用户对这款APP快速上手而不会因为信息的繁杂而感到疲累。

2.应用“一个滑动手势,一个概念”的规则。
回想一下你所保留的大部分所要陈述的信息,一个清晰的滑动手势,集中信息可能更让人记得牢。同样是应用引导页面。“一个滑动手势,一个概念”规则将有助于用户集中和消化信息的每个细节。向用户传达太多的消息将会增添他们对你所要传达的重要信息的视觉疲惫。

划分优先级

不要过分去炫耀你的APP有多酷,应该关注用户的数据和提醒自己用户的真正需求和所有可能要面临的问题。然后,寻找可以解决的方法通过引导回答他们。

语言一致性

 

登陆,注册前先引导

因为引导页面意味着对整款APP的全局观览,所以把它放在注册和订阅服务页面的前面。一旦他们决定订阅,那用户已经做好体验这款APP的准备,提醒他们这款APP的好处就变得无关紧要了。

 

保持简洁

也许你会疑惑,引导页面是否真的必要。究竟是否应该在应用商店里提及这些?无需这样做,应用商店的描述只是APP的类型,大小。而引导页面必须简短,因此,焦点必须是重要的内容。除此之外,很多人跳过应用商店的描述,直接去下载体验。所以,在用户首次打开APP时,一个简单的说明能帮助用户整体上了解APP的功能。

 

注意事项:

 

方式2:功能性引导

另一个选择就是放弃优势指导,集中选择APP重要的功能进行引导。这类似于coach marks,如果你采用这种方式,请看一下几点:
1. 什么是重要功能?(例如,如何去启动或最常见的行为)
2. 什么时候去使用这些功能(例如,当你查看搜索结果时)
3. 如何去使用这些功能(例如,双击或向左拖动)

 

Carousel 着重介绍了这些主要功能

不要解释被广为人知的概念
自从互联网普及开始,从桌面应用到网页应用再到移动APP,“×”这个符号一贯代表着关闭,退出或取消的意思。所以,除非这个符号在你的APP上有特殊的含义,否则不要向用户说明它的其他意义。

Adobe Kuler没有展示其他的含义

三张幻灯片,每张各展示一个主要功能
如果你在每张幻灯片放映的时候展示一个主要功能,那么最大三张幻灯片,每一张展示一个主要功能。

帮助用户开启APP之旅
如果的的APP默认是空的,针对于这一点在你的引导页面上。不要让用户一打开APP就面对一个空白的页面。包括通过一条便签引导用户入手,用户不想这样,即便是一秒钟,他们都会认为这是一个Bug。

Spendee通过告诉用户如何入手使用户感到安心

引导页面放于登陆或注册页面之前
与最后一种方式一样,在用户进行注册或登陆之前进行引导。

不应该做的事:
照片展示类APP,500px拥有一些惊人的内容和丰富的功能。然而,iphone 平台上的APP在引导上则犯了一些错误:
1. 导航栏及其功能展示。告诉用户他们可以通过导航栏以下的区域进行导航。
2. 一些幻灯片展示的按钮,如“链接”,“喜爱”,“分享”。这三个功能通过按钮图标来展示,这些图标通常都能让人联想到它的功能。所以在引导页面解释它们的用处完全是多余的。让我们来猜想一下,对于500px一部分目标观众对这些图标不熟悉。在这个案例中,逐步地通过在context中展现APP的功能引导用户以提供更好的服务(例如当用户在查看图片是,他们下一步可能会点“赞”)。
3. 一张幻灯片展示的“流程”,一个记录用户活动变动的时间轴。一旦你跟随别人就能从这些“流程”中获益。
通过告诉用户这种特性来引导他们,至少有些人能从中得到帮助。

 

500px避免在单张幻灯片上展示过多的功能,保证信息的简洁,重要

 

方式3:逐步引导

总的来说,人们学习的最好方式就是实践。这点在逐步引导中可以得到验证,一张真实的引导页面当用户使用APP时起到将信息展示给用户的作用。例如,当用户在仪表盘界面时,他们看到的仅仅是与仪表盘相关的信息;当用户查看搜索结果时,仅仅是相关的搜索结果显示在他们眼前。

Feedly 当用户首次打开APP时会有一些提示

当你在逐步引导用户时记住以下几点:
在复杂的工作流程中使用
如果你的APP工作流程相当复杂或者是处理复杂的事物(如财政),逐步引导是一个很好的选择。只有当信息恰当并且合乎逻辑时,用户才能更好地消化它们。

在某些功能被隐藏的情况下使用
在开发移动APP时,我们总是关注在小屏幕上高效率的功能,这时就不得不将菜单和一些功能隐藏。我们只有通过语音,双击或长按调出这些功能。在这种情况下,我们就要引导用户使用这些隐藏功能。
例如,以Pocket为例,如下所示。可供使用的功能都在阅读列表里,用户只有通过向左拖动才能看到这些功能选项。因为用户与APP的内容相关联,用户必须至少在阅读列表里添加一项功能才能进行点击,这时APP会提示用户向左拖动来显示这些隐藏的功能。

 

Pocket可以通过提示隐藏功能逐步引导用户

最理想的是用手势操作APP
如果你的APP严格依赖于手势操作,那么这种实践的方式是最好的。让用户随着功能的介绍而采取相应的手势动作。

Solar 采取每一个手势提示,让用户通过实践掌握相应功能

引导连续性
对于手势操作APP,为一系列手势在设置界面中提供一种捷径和相应的动作,文字提示。
记住,你的APP的手势越多,用户要记住的手势也就越多。用户手机上装的手势操作APP也多,他们也将也困惑。用户不得不去记住每款APP之间双击的意义。这时就得做一些标注让信息更易理解,让用户感到更加地舒适。

 

Beats Music为一系列的手势提供永久的快速访问的方式

 

注意事项:

因为逐步引导是对用户使用APP的辅助,最大的风险就是用户在使用APP时不断地提示用户,这将破坏用户更美好地体验APP。所以,要以温和,人性的态度应用这种方式向用户展示有用的信息。
除此之外,在每张引导页面中亮度不宜过高,给用户更多呼吸的空间,目的是让他们能更美好地体验你的APP。引导不是掩饰糟糕的设计,而是辅助用户更好地体验。

 

替代方案

以上提到的方式都是最常用,最流行的。但是你也可以新创自己的方法,更好地引导用户!

选择1:混合

混合方法—-混合一种,两种或三种方法。这种方法有时也可行,例如Flink所展示的:

Flink结合的引导方式

选择2:视频

视频引导也常用于一些APP,这种方法也值得考虑。这是一种不同的方向,应用一些视频更加实用,看起来像一个教程,然而也有一些纯粹是广告。与网页上的视频相比,这些视频将自动地播放,无意识地侵入用户的视觉。当用户在公共场所时,来自手机设备的爆炸性声音显然是不和谐的,不恰当的。

Fifty-Three使用声音和视频的力量来展示他们的APP–Paper

选择3:示例数据

为用户提供一些示例数据也是值得做的。特别是APP要处理的敏感数据,例如财政和人类资源数据。如果APP加载这些示例数据,用户将能更舒服地进行实际操作,学习如何使用APP,并且能为更好地输入真实数据做准备。

提供一些示例数据给用户,供参考学习APP的应用

 

结论:

文章中的指导方针和实例将对你的引导项目有所帮助,然而,一如既往,用户是一切的核心。所以,无论你运用那种方式,请记住,重新审视你自己的角色,用户使用场景和你所持有的用户数据,是否经过市场调研和分析。
如果你仍不清楚用那种方式,可以在用户中用一两中方式进行测试并且分析反馈,看那种可行那种不可行。没有哪一种方法放之四海而皆准。所以,一如既往,用数据来做最理智的决定。

 

想查看更多的2015移动应用设计趋势?点我马上查看哦!

原文:Germaine Satia
翻译:BESD设计实验室

 

 更多有趣研究和翻译可以关注我们的官方微信哦!

1346167525

更新:2015-01-06

收藏

17人已收藏

t-baby

点评家主编,每周更新文章

  • 45

    作品

  • 438

    粉丝

  • 0

    关注

  • 《产品经理进阶》林中翘:产品经理如何面对人工智能带来的挑战
  • ECOUX 姚梓鹏:资本寒冬下我开了一家设计公司 | 点评家
  • BESD:颜色vs反差——哪一个更能吸引眼球
  • Rainbow Cup金奖作品-寄.忆

    猜你喜欢

      2015-01-06 自译外文 经验/观点 原作者: Germaine Satia 举报 988 17 3 1

      BESD2015移动设计趋势白皮书:怎么设计移动应用的新手引导更好?

      0.0°

      你确定要举报BESD2015移动设计趋势白皮书:怎么设计移动应用的新手引导更好?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年01月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      17
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录