编者按:今天的译文绝对值得设计师收藏!来自设计网站的龙头老大Smashingmagazine,专业全面,条理性强,一篇文章几乎包括了移动应用引导页的全部设计方式,还分析了知名APP的反面例子,可以说是搞定引导页的最实用指南,赶紧来学习下!
译文很用心,原文有误的地方都有提醒,欢迎同学们关注译者的微信公众号“开卷有译”。
如今,移动应用对首次使用的用户呈现欢迎页这种方式已经越来越流行了。这样做的目的就是向用户介绍并展示我们的应用。
引导页往往是与用户进行交互的第一组界面,于此同时,这些界面还将影响用户对应用的期望。因此,对于参与到产品研发的团队成员——产品经理、设计师以及开发人员来说,花些时间好好评估一下这些引导页是否必要就显得至关重要了,一旦需要,那就做到最好 。
本文将提供给您一些设计引导页的小贴士、一些常见的实现方式、不同的设计方法以及资源,以帮助您为用户提供最佳的体验。
是否需要引导页?
近年来,关于移动应用引导页实用性的讨论层出不穷。于此同时,也流行着另一种反对的声音:如果一个应用需要引导页,那么它本身就是一个缺陷,因为这说明了该应用缺乏简单和用户友好的基本要素。虽然听起来很有逻辑,但这个结论毕竟过于笼统。
数字化设计中有大量的规则和成功案例,这是很好的。这些规则让设计师和工程师不必每次在开发一个产品的时候都需要推倒重来。更重要的是,它们避免了用户在使用全新的应用时手足无措,相反,用户可以放心地知道编辑功能是由铅笔图标代表的,“大拇指”的图标则代表了“喜欢”。规则总是个好东西。
但事实是,每个应用都有其独到之处,它是做什么的、怎么做以及谁使用它。应用间的这些不同点使得引导页在特定的情况下成为一个可靠、务实、人性化的功能存在。让我们来看一些使用案例。
使用案例1: 非常规交互
如果应用所支持的交互行为并不是大部分用户能够轻易通过常规方式找到的——尤其是主打手势交互的应用——那么引导页是必不可少的。手势驱动的应用程序目前仍处于试验和探索阶段,因此,开发人员需要指引用户如何用这些手势进行交互,清晰呈现每一个手势以及它们相对应的功能。
例如,闹钟应用Timely,就给用户详细地指出了点击屏幕中的具体区域会使闹钟的时间增加或减少5分钟。
Timely针对每个手势都对用户进行指导并且展示出期望的结果。
使用案例2:空页面
那些默认为空页面,并且需要用户通过一个或多个步骤才能填充内容的应用,也是非常适合使用引导页的。即便引导页只有一个步骤,也能让用户打消疑虑,知道自己的操作是正确的。
Feedly展示了用户该如何在应用中获得第一批内容
使用实例3:系列产品
如果你的应用是一个产品系列中的一部分——比如,产品同时还有桌面端和网页版——引导页可以大大提高用户体验,尤其是当移动应用不具备其他版本的全部功能时。这在复杂的企业应用中更显得尤为重要,因为不同的版本都有其针对的用户角色、特定的访问权限和以及安全限制。
大部分情况下,网络版和桌面端会支持所有功能(如创建、查看、编辑和删除内容),而移动应用就相对局限(比如只支持浏览)。在这种情况下,简要介绍移动应用的功能也将帮助现有用户了解移动端在整个产品系列中扮演的角色。
使用案例4:个人信息
如果您的应用程序依赖于用户的个人信息(如年龄、体重、性别、婚姻状况),那么可以通过引导页来收集它们。通过一步步的引导,
用户可以清楚地知道为什么应用需要这些信息。记得确保允许用户可以随时更改这些信息 (通常是通过应用中的设置)
Fitbit 告诉用户为什么需要进行个人信息的采集并且引导用户提供它们
即使你的应用不适用以上任何案例,用户仍可以通过引导页受益。谨记任何与产品进行交互的用户至少都需要知道他们能通过这个产品得到些什么。而这些也是你可以在引导页中呈现的信息,我将在之后的功能导向引导页(译者注:原作者应该是写错了,结合上下文,这里应该说的是“利益导向引导页”)中详述。
当然,我们的首要责任是设计直观,易于使用的产品。但是,我们不应该因此而放弃引导页,它能给用户带来价值并且提供更加令人愉悦的体验。
该用何种方法?
通常来说,引导页的设计有以下三种方法:
- 利益导向
- 功能导向
- 渐进式
我们来逐一看看并且探讨一下它们的设计规范
方法1:利益导向
这样的好处不言自明。通过这种方法,你能让用户知道应用能带来的好处,让用户了解如下的问题:
我们的应用能做些什么?
用户如何在生活中使用它?
这样使用能给用户带来什么价值?
NYT now通过清晰简要的描述给用户展示了它能提供的益处
应用这个方法,需要考虑到如下原则:
最大化展示应用的三个好处
这个数字并不是一个硬性规定,出于给用户快速预览的目的,三是个安全的数字(不包括标题页)。这样,用户即能了解该应用也不会因为过多的信息而感到厌烦或是被拖慢使用的节奏。
一页只说一件事
回想一下你听过的演说中什么样的信息能让你印象最深刻。一个幻灯页面中仅有一个清晰且有重点的信息也许是最易形成冲击而且最难忘的。这同样适用于引导页。
“一页只说一件事”的规则有助于用户关注内容并且分开消化吸收。一次性将所有的内容都展现出来不仅在视觉上有许多干扰,更会分散了用户的注意力。
优先级,优先级,还是优先级
控制住自己想要展示应用中酷炫部分的冲动。回到用户数据,提醒自己用户面临的问题以及他们的需求。然后,想办法通过引导页来告诉用户我们的应用是如何切实地回应他们的需求。
使用一致的词汇
Evernote Food,在文案中使用动词来快速吸引注意力,并传达其主要益处。这种方法相当高效并且足够简洁。如果你憋不出几个高大上的动词或形容词,那么简单的短语或两个词也行。只要你能确保它们的一致性。工整连贯的文案,无论是在视觉效果还是语言上,都有助于给产品的用户体验提供积极作用。
Evernote Food突出说明了用户通过应用能得到的实际好处
引导页先于注册/登录
引导页提供的是应用的概况,应当在用户注册或登录前展示。一旦用户决定进行登录,用户并不希望被你提供的“益处”所打断。
保持简洁
或许你还在纠结引导页是否有必要。难道它不就只是在重复应用商店(App Store)中的描述吗?完全不是。 App Store中的描述有包含各种信息,甚至有应用的大小,而引导页需要简洁,正因如此,请专注于重中之重。此外,很多人会跳过应用商店的说明然后去尝试探索应用。所以,一个简单的说明能够帮助用户很快了解我们的应用。
别学!这是反面教材
Readability是个超赞的工具类应用,不幸的是,平台间的一致性并没有做好。它的设计失误在安卓版的引导页中尤为明显:
用户一共有7页的内容需要阅读消化。
有些页面中的说明文字太长。例如,关于共享的那一页完全可以简化,显示分享的内容以及社交网络的图标。
其中有一个页面在鼓励用户安装Firefox(火狐浏览器)的插件,这似乎放错地方了,而且之前的一页还提到了“Readability是个网页和移动应用。”移动应用的引导页不应该成为系列产品的营销手段,应该关注在移动平台相关的内容上。
避免出现过多页面,并且保持内容与平台的相关性
方法2:功能导向
另一种选择是放弃对益处的展示,把重点放在应用的关键功能上。这有时也被称为“指引标记“。使用这种方法,你需要给用户展示:
什么是关键的功能(例如,如何开始或什么是最常见的操作)