移动应用的用户引导模式设计

还记得你第一次使用Photoshop的情景么?我记得初次打开这个软件的时候,首先看到了一片空白的画布,然后就是密密麻麻的功能强大的工具列。

photoshop5

Photoshop 5.5

当然,工具列的功能很强大只是我的感觉而已,实际上,我根本就不知道从何下手去使用它们。但我亟需学会使用它来完成工作,因此我不得不在这个软件学习上投入很多花费,当时购买了一本书叫《Teach Yourself Photoshop in 24 Hours》开始了自学。

转眼已经过了十年左右。现如今已经到了移动应用爆发式涌现的时代,而且这些App在市场上触手可及,很容易下载。在每一个领域,都会有数十款App来满足用户相同的需求。因为它们不少都是免费的,致使很多App成了用户下载来试用的试验品。如果某款App的用户界面不够直观不够友好,一旦用户花费了5分钟试用却依然觉得使用困难,那么用户就会立即卸载它并下载其它的App作为替代品。

手机实境浏览器(Layar Reality Browser)是一款增强现实App,可以思考一下它的初始使用体验。

Layar

Layar Reality Browser(早期版本)

刚开始我究竟应该如何从这个灰色的屏幕进入增强现实的界面呢?这就需要一种引导。引导是指一些有用的小提示,这些小提示通常出现在用户首次打开一个App的时候,抑或是用户进入了一项新的操作的时候。引导模式为用户操作提供建议,并指引用户去接触App预置的功能。一个简单的引导就能够让用户很快从初次使用的困惑体验中走出来,为用户的操作指明方向,使他们达到满意。

移动应用的引导模式包括:

截图00

对话框引导

包含简短引导内容的对话框是移动应用中最常见的引导模式,大概是因为它最容易通过编程来实现吧。不过正是因为它太普通了,很容易被用户错过和忽视。

一定要保持对话内容简短,而且要确保用户在使用一个App时,能通过其它的途径来获得这些引导信息。

dialogs

TargetWeight 和 ActionMethod的对话框引导

小贴士引导

小贴士能够运用在App的每一个地方,这使得它比对话框模式更贴近于用户的使用情境。而且小贴士能够在任意屏幕上使用,并非只使用在主屏幕上。例如在eBay的App中,小贴士用来将用户的注意力引导至“收藏搜索内容”的功能上,如果不加引导的话,这项功能就很容易被用户忽视,因为收藏按钮的位置正是页面标题所在的常见位置。而Android操作系统自带的小贴士不禁让人想起了Windows小帮手,Android上的这个有用的小便签是用来引导用户如何自定义主屏幕。

tips

eBay应用和Android操作系统中的小贴士引导

ShoppingList这款应用运用了越来越多的小贴士引导并贯穿于整个App中。

注意将小贴士放置于所指示功能的附近,保持内容简短,一旦发生交互操作,小贴士就自动消失,(例如,当用户手指敲击屏幕时)

more_tips

ShoppingList上的小贴士引导

游历式引导

一段游历体验能够通过逐屏的操作以及功能解释,为用户提供App使用的整体引导。Nike的GPS游历就是这种引导模式中很棒的例子。凭借简要的页面拷贝、生动的图表、轻松的导航以及清晰的出口,让Nike移动应用的游历式引导体验达到了最优。这段游历引导放在主屏幕上,点开它你就能逐一体验7个关于App操作的提示模块。Nike和CalcBot 使用“页面指示器”和页码累计(如2 of 7)来清楚地标明当前游历体验的阶段。

一段游历引导应该凸显出App的核心特征,要从适宜用户理解的角度进行设计,游历内容保持简短且一定要有视觉上的吸引力。

tour

Nike的游历式引导

more_tours

CalcBot的游历式引导

视频演示引导

视频演示或许是最好的App引导模式,但因为它用动画来展示App的操作过程的,所以它对专业的多媒体交互技术具有很强的依赖性。Roambi使用了可自定义的视频演示来展示它广泛的数据可视化选择,以及如何运用手势来更方便地导航和打开新内容。Google Goggles在它的游历引导中包含了一段视频演示,可以直接播放也可以通过Youtube来观看。

视频演示引导应该展示一款App的核心特征,或者展示如何从标准的工作流程的角度去使用它。对于视频演示引导来说,一般视频播放所具有的操作(如停止、暂停、音量调节等等)都应该包含在内。

videos

Roambi的视频演示引导

more_videos

Google Goggles的视频演示引导

透明注释引导

其它的一些引导模式都存在于桌面互联网网站中,但是透明注释的引导模式迄今为止都只应用在了移动触屏设备上。透明注释尤其常见于App的主屏幕,它通常是放置于用户实际要操作的内容之上的透明图层,图层上包含有许多的图表和文字解释。移动应用Pulse和Phoster都运用了这种引导模式,通过快速和视觉化的方式解释如何在App中进行内容导航的操作。

透明注释要谨慎使用,且不要把它当成是对失败的界面设计的弥补。一旦发生交互动作(例如手指敲击屏幕时),透明注释要即时的移除掉。

transparency

Pulse和Phoster上的透明注释引导

嵌入式引导

与其它的引导模式不同,嵌入式的引导并不放在所解释的屏幕上,而是与界面设计融为一体。它们一直是界面的一部分,直到它所指示的操作发生。许多记笔记的App,比如Mini Diary和PageOnce,就运用了嵌入式的引导来指引用户快速地添加新内容。

多重嵌入式引导模式能并存于同一屏幕中。可以运用图像和其它的视觉线索,这样能清晰地将引导内容与普通内容区别开来(例如,引导内容不要使用与普通内容相同的颜色以及字体尺寸)。

embedded

Android应用Mini Diary和PageOnce上的嵌入式引导

永久式引导

永久式的引导同样与界面设计融为一体,但它是永久可见的。Jamie Oliver Recipes的这个例子向用户展示出如何由景观模式向附加功能转换。不管你是第一次疑惑时第十次接触这个界面,这个引导依旧显示在哪里。Spring Pad 使用了嵌入式且永久展现的引导来提示用户可以通过敲击“+”来添加更多的内容。

对于永久式的引导,一定要让它保持简短,记着使用图像或者其它的视觉线索清晰地将引导内容与普通内容区别开来(例如,引导内容不要使用与普通内容相同的颜色以及字体尺寸)。

persistent

Jamie Oliver Recipes和Spring Pad上的永久式引导

发现式引导

发现式的引导模式听起来似乎很矛盾(引导本来就是为了发现,现在引导却还需要发现),但如果你不想让其它模式的引导内容堆满屏幕的话,发现式引导确实是指引用户完成专业操作的有效的方法。这些引导内容通常在用户进行简单的操作时被发现,例如一些常见的手势操作,像是用手指轻弹或者轻擦屏幕。

发现式引导是一种很保守的做法,这种引导模式常见实例就是用来促使用户刷新界面以获取更多内容。

discoverable

eBay和Tweetbot上的发现式引导

 

本文译自《A Look Inside Mobile Design Pattens》

 

移动应用的用户引导模式设计》上有 5 条评论

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

使用新浪微博登陆