手机产品设计之用户引导

在手机产品的设计过程中,由于手机界面的承载能力有限,产品功能的不断膨胀,必须要在用户打开应用之后告知他某些新奇的功能,引导他完成某些主要任 务流程,让用户不至于迷失在陌生应用中不知所措。帮助用户快速掌握应用的使用方法,体验到应用的乐趣,新手引导成了一个必须考虑的设计环节。

用户引导的直接目标是帮助用户更好的使用产品,终极目标是提升用户满意度。虽然,大多数情况下,我们可以通过合理的设计,尽可能的简化功能,让用户 无需引导和帮助,就可以完成必要的任务。但是实际上,手机产品的限制和对强大功能的追求,导致这个目标很难达到,因此越来越多的应用开始使用用户引导来帮 助用户快速熟悉产品。

一、文字说明类

第一类最简单的用户引导方式,就是文字说明类。用文字描述的方式,帮助用户理解产品的功能和所需要执行的操作。文字说明类用户引导如下图的几个例子:

从左到右依次是Memento、Instapaper和Jamie Oliver

Menento是一个日记程序,当你没有给日记增加tag的时候,这里就会有文字说明,告诉你tag是用来浏览和搜索的,可以在创建和编辑日记的时 候创建。告诉你可以把好友加为tag,可以把地理位置加为tag,可以把事件加为tag,可以创建自定义tag;Instapaper是一个阅读工具,当 你首次打开应用,没有文章的时候,这个页面会有文字说明,告诉你你可以通过朋友、作者、浏览器找到可阅读的文章。当你通过浏览器书签或者Email发送的 方式增加文章到Instapaper后,文章会显示在这里;Jamie Oliver是一个美食工具,如果你没有创建美食购物清单的时候,这个页面会文字提醒你改如何增加Shopping list。

适用情况:

聪明如你,肯定已经发现了,这里提到的例子都是出现在无数据的时候。无数据的时候,是文字说明一个很重要的出现场景。很多设计师会忽略无数据时的界面设计,产品人员也会忽略无数据的时候,该怎样引导用户使用产品,导致用户看到空空的面板,拂尘而去。

其实,文字说明也可以用在超过5s的启动界面(Splash Screens)上 ,也可以用在某个操作按钮的下面,也可以用在某段数据加载的弹出框中。它可以用在你能想到的任何地方,只要是合情合理的设计需求。

缺点:

当然,文字说明的劣势也显而易见,长篇累牍的赘述功能,很少有人能耐心的看完,何况枯燥的说明书一向是Apple产品所反感的东西,所以文字说明要慎重,不要滥用。

设计指南:

  • 要使用用户语言而不是程序语言
  • 在无数据的时候可以给出文字说明
  • 不要长篇累牍,要简明扼要
  • 可以利用等待的时间用文字说明功能
  • 可以用文字说明描述复杂的功能操作

二、功能提醒类

因为某些功能设计成ICON不利于识别,某些功能隐藏在手势操作之后不易察觉,某些功能是产品主打功能需要用户知晓,在这种情况下,越来越多的应用采用功能提醒类的浮层做用户引导,如:

从做到右依次是Tweetbot、QQ通讯录和Talkbox

Tweet用带箭头的小浮层告知用户,点击navigation bar可以切换关注列表;QQ通讯录用带用动效的小浮层提醒用户,向左滑动可以展现右侧隐藏的屏幕内容;Talkbox用带Gif小动画的浮层告诉用户,把收集放到耳朵旁可以从耳机收听。

使用场景:

用来告知重要功能、不易识别的功能图标、不易察觉的隐藏操作

缺点:

有时候需要提醒的太多了,往往无从下手。如果你的应用没有清晰的重要功能,还是小心设计,慎用提醒的好。因为你提醒的可能不是用户需要的,让新手用 户无所适从,老手用户觉得你太过肤浅。不过还好这类提醒不会打断用户的操作,也不会强迫用户一定看完,但是也正是因为这类提醒稍纵即逝,也很容易不小心错 过,导致之后再也无法查看,所以要谨慎的设置一个重复频率,避免被漏看。

设计指南:

  • 不要打断正在进行的操作
  • 判断需要提醒的时机
  • 持续3~5s自动消失
  • 可以重复出现3次左右
  • 用来提醒隐藏的操作或重要的功能

三、操作引导类

操作引导类的用户引导方式被大量应用与游戏和SNS产品中,如果是设置项很多的复杂产品,也必须有合理的操作引导。操作引导分为强制性的和非强制性 的。强制性的主要是注册、验证、激活相关流程,不满足条件无法满足安全性;非强制性的则多是鼓励填写完善的资料或者鼓励完成某个任务的,这类引导最好给予 一定的激励,如积分、徽章、等级等等,至少要有一个“恭喜你,成功了”之类的心里满足暗示。具体案例见下图:

从左到右依次是Albumphoto、Gowalla和With。

Albumphoto引导新用户新建一个相册;Gowalla引导新用户创建一个签到信息并分享图片给好友;With引导用户绑定Twitter账号用以分享照片。如果是复杂的任务流程,每一步都要给新用户讲清楚,这一步处于哪一个环节,该怎么操作,有什么作用。

操作引导需要一定的操作激发,在一定的时机出现,有一定的重复频率,并定义一定的引导样式。

使用场景:

引导用户执行操作、引导用户登录注册绑定账号、引导用户完善资料、引导用户导入关系、引导用户分享应用给好友等等

缺点:

有时候有点过于强势的嫌疑,用户不一定真的需要这种程度的引导,不如只有一个聚光灯聚焦在重要操作上来的直接,否则所有的App都像游戏客户端发展了。

设计指南:

  • 可以引导用户执行主要操作
  • 不要强迫用户执行操作
  • 如果任务是多步骤要关注每一步的设计
  • 主要功能可以在设计上区别于其他

四、操作示意型

操作示意型新手引导,往往是采用一段简单的动画,或是把功能显示出来,然后在平滑的移动到屏幕外边;或是把可点击的按钮做一个点击后的效果动画出 来,或是把某些用户预期要执行的操作提前演示出来。我第一次见到不错的操作示意型新手引导是在Nokia N900上,Maemo操作系统,用一个小亮点模拟手指点击在一个操作按钮上的效果。

上图从左到右依次是Naver、Bump和新浪微博。

Naver的搜索类型切换是下拉搜索框就会出现的,首次启动的时候,搜索框处于下拉状态,提醒用户下拉就可以看到这些功能,然后自动隐藏;Bump 则是在起始界面上,用动画的形式告知用户,碰一碰手机就可以传输数据了;而新浪微博在首次加载数据的时候,会给出一个手势+下拉的引导,告知用户下拉就可 以刷新数据了。

这些示意,用轻松浅显的手法,就传达给用户新鲜的功能好趣味的用法,比生硬的文字或者不合时宜的弹层都来得体贴,鼓励设计师多多尝试这种方式。

使用场景:

复杂或重要操作的动画告知

劣势:

设计实现麻烦,成本略高

设计指南:

  • 注意动画持续的时间和出现的时机
  • 多用来说明隐藏操作或功能
  • 不要影响主要任务流程

五、说明书类

不知道从什么时候开始,说明书式的用户引导用开始流行起来了,这种貌似比较传统的手段,能更全面的展示产品的功能和使用方法,尤其是适用于产品的更 新说明,本次版本迭代了哪些功能,进行了哪些改进,让用户一进来就知晓,知道自己所耗费流量耗费时间更新应用是物有所值的。单页的说明书类引导案例如下:

从左到右依次是Google客户端、Pull Time和today

Google会在一页内给出多个问号,点击问号查看该区域所承载的操作及执行方法;Pull Time用更直观的方法来表示这款交互出类拔萃的产品到底该怎样使用;而Today则用一页图配文的说明来告知本版本更新了哪些内容。

显而易见,一页能承载的内容有限,重点也不是特别突出,为了更立体的讲述产品,出现了一种演示型的新手引导,见下面一个案例:

Layar用一系列动画+文字的方式,即交代了产品能做什么,有交代了使用场景和使用方法。

为了每次更新版本都能对用户有个更好的交代,很多应用开始采用多页的更新说明或使用介绍,见下面一个案例:

Weico的这次改版所采用的新手引导方式,绝对是称得上让人惊艳级别的,用了6页,详细的介绍了虚拟形象功能,简单的提到了微博晒心情、Gif直 接播放、图片进度提醒等等次级功能。虽然从功能上来讲,我并不一定认同虚拟形象,但是从引导上来讲,实在是太有爱了,不愧是设计公司。

使用场景:

产品更新说明、复杂产品用户教育

劣势:

成本略高、具有强迫性

设计指南:

  • 告诉用户现在处于指南的哪个位置
  • 每个页面只讲清楚一个功能
  • 最好可以选择性的跳过
  • 只能出现一次

也许纷繁复杂的各种引导,在帮助新用户快速熟悉应用的同时,也让老用户不厌其烦的反复瞻仰一些已经耳熟能详的功能,尤其是某些应用还在应用内教育用 户怎样使用系统级别的功能,就更显得累赘。曾经电脑软件的帮助文档也许是一个很好的思路,当你有不明确的地方的时候,点一下帮助,快速查阅遇到障碍的问 题,一切迎刃而解。iPhone里也有预设的帮助图标,可是被利用的情况不是很好。

当然,我更崇尚的,不是以上那些简单直白的引导,而是一种更简单更直白的引导,类似于深泽直人的无意识设计,让用户不知不觉间受到了某种操控,不自觉的产生某些行为。这就需要设计者懂一些心理学或营销学的东西了。

一、数字引导

数字引导设计几乎都是在利用和发掘用户的心理影响用户行为。在很多时候,这种数字的激励方式确实对用户产生好的引导,让用户按照设计的轨迹行动。但是数字引导并不是万能的,在一些情景下这种引导设计如果不当的话,很可能会产生负面效果。

从左到右依次是街旁、淘宝和QQ邮箱Wap版

街旁用几条未读消息、几个好友请求来引导用户去查看新消息;聚划算采用了一个非常有紧迫感的倒计时的设计,旁边紧跟在一个参团按钮,同时还刻意把价 格和折扣标红,显示出多少人已购买,这些数字共同营造了一种,时间紧迫、折扣低廉、多挣争抢的假象,让用户快速抉择去购买一个商品;QQ邮箱用很多红色气 泡的设计,一下子把焦点聚集在你有未读消息的模块上。

二、小秘书类

不知道源头是哪里,越来越多的应用开始增加小秘书、XX客服、XX产品团队之类的官方账号用于用户引导了。这种方式有明显的好处就是把冷冰冰的机械引导变成了有血有肉的拟人化引导。小秘书会在你开启应用后第一时间告诉你,你可以做一些什么,非常体贴。如下面这些应用:

从左到右依次是微信、米聊、TalkBox

这三个应用都属于IM类的,在你的好友里,多出一个系统账号来,用来跟你沟通,教你使用应用。当然都还不够智能,沦为广告发布渠道,而不是真的答疑解惑的小秘书。

三、内容教育

内容教育的意思是,在用户使用应用之初,应用内可能没有数据也没有用户,用户不知道应用能带给自己什么好处。这时候,阅读类的客户端就会增加基本预 设的书籍,比如产品说明书;GTD类的客户端就会增加几个待办事项,用待办事项的方式告知你可以做什么,怎么做;社交类的就会给你预设几个好友,你看着他 们都做了什么,就知道自己该干什么了;搜索类的可能会给出搜索热词,你看到他们怎么去搜索,自己就知道该输入什么样的内容了。

四、文字口号

不要以为这种方式老土或者过时,这种方式是最行之有效的办法。如果你告诉用户“好的主厨最爱做的菜”,他就会选择那个菜;如果你告诉用户“优秀的人 都会管理自己的消费计划”,他就会给自己制定消费计划;如果你告诉用户“优秀的相册至少有10张照片”,那么用户就会凑够十张照片上传,他们渴望被承认, 你如果在他的潜意识里植入这种优秀的意识,他会为此买单的。

五、激励机制

好的引导是让用户自己探索发现,获得乐趣。乐趣哪里来呢?一方面是用户发现了隐藏操作,自我成就感膨胀,一方面可能是,用户完成了某项任务,系统赠与用户某些奖励。如Foursquare当初的积分、市长和徽章。

记得米聊有一个页面做的特别的好,就是个人名片页,当你资料填写不完善的时候,它没有强硬的引导你去填写,而是在界面上放了一个进度条“完成度 10%”,并且告诉你,完成度越高,越容易找到更多朋友,于是在那个沮丧的10%面前,我不得不为了让它好看一点,添加了更多的资料,直到它显示100% 为止,就像完成了一项伟大的任务。

时间: 2024-10-12 19:19:46

手机产品设计之用户引导的相关文章

手机产品设计禁忌

手机产品设计禁忌 在做手机产品设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的产品心生怨念.刚出道的朋友没有经过实战,对细节注意不多,往往都会遇到类似的问题,强调多次后,觉得不如写下来,给新人共勉. 1.没有不可点击的效果 一般按钮会有四态,不可点击效果.可点击效果.聚焦状态.按下状态.如果你的按钮此时处于不可用状态,那么一定要灰掉,或者拿掉按钮,否则会给用户误导. 2.菜单层次太深 菜单项以5~7个为宜,如果有二级菜单,就要注意合理的菜

自定义Angular插件 - 网站用户引导

最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所以在开发这个任务之前,博主尝试将其抽象化,独立于现有系统的业务逻辑,将其封装为一个通用的插件,使得代码更容易扩展和维护. 无图无真相,先上图: 关于这款trainning插件的使用很简单,它采用了类似Angular路由一样的配置,只需要简单的配置其每一步training信息. title:step的

手机产品设计方向

摘要:伴随着手机系统越来越多越来越杂,以及不断的推出新的手机系统,对于手机产品设计来说都将会 是新的挑战,是一套多用,还是设计多套?K-JAVA是否将死亡?WindowsPhone7能够带来多少 伴随着手机系统越来越多越来越杂,以及不断的推出新的手机系统,对于手机产品设计来说都将会 是新的挑战,是一套多用,还是设计多套?K-JAVA是否将死亡?WindowsPhone7能够带来多少惊艳?Android和iPhone的战争谁是 胜者……但有一点可以确定,手机产品设计的方向将迎来新的起点. 首先认清

.NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程

写在前面 这篇我们对用户权限进行极简设计并保留其扩展性.首先很感谢大家的阅读,前面六章我带着大家快速入门了ASP.NET Core.ASP.NET Core的启动过程源码解析及配置文件的加载过程源码解析并引入依赖注入的概念.Git的快速入门.Dapper的快速入门.Vue的快速入门.不知道大伙掌握的怎么样了!如果你有兴趣的话可以加入我们的.NET Core实战项目群637326624跟更多的小伙伴共同进行交流下. 接下来我们就正式进入.NET Core实战项目之CMS的设计篇了.在设计篇呢,我们

Android用户引导页实现,圆点实现动画效果

当前市面上比较流行的应用,用户引导页已经是一个必不可缺的功能点了,简单的介绍下应用的基础功能或者版本升级功能点介绍. 那么常用的用户引导页是如何实现的呢?这篇文章就说说我个人用到的,并且觉得使用不错的效果. 1.首先定义布局文件guide_layout.xml文件,主要使用ViewPager做页面显示,使用一个圆点布局显示圆点,圆点根据图片数目动态添加. guide_layout.xml文件的代码如下: <?xml version="1.0" encoding="utf

iOS开发 首次启动显示用户引导,第二次启动直接进入App,UIScrollView,UIPageControl,NSUserDefaults

首先创建一个引导图的控制器类 UserGuideViewController.h和UserGuideViewController.m #import <UIKit/UIKit.h> #import "firstViewController.h" #define WIDTH self.view.frame.size.width #define HEIGHT self.view.frame.size.height @interface UserGuideViewControll

用扁平化的界面设计吸引用户

在传统的网页开发乃至现在针对移动设备所做的设计,复杂炫目的效果对产品而言未必是一个好的选择. 尤其在移动设备上,过于复杂的效果非但很少能为应用吸引用户,反而时常让用户在视觉上产生疲劳,对产品界面中最基本的功能产生认知上的障碍.因此我们在设计中就需要参考“扁平化”的美学.UI界面设计 什么是扁平化设计 在实际当中,“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变.阴影.高光等拟真视觉效果,从而打造出一种看上去更“平”的界面.北京UI设计 Layervault的设计师Allen Grinshte

使用 StoryBoard 的时候加入用户引导页面

如果想让一个APP加上引导页面是一个非常完美的举动 但是,总会遇到一些问题 (不要忘记在APDelegate里面加上用户引导页面的头文件和程序启动时的第一个页面哦) 情况一:纯代码 判断是否是第一次启动应用程序 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 2 { 3 self.window = [[UIWindow al

Android实现用户引导界面

在众多应用中,几乎每一款应用都有自己的Splash用户引导界面,该界面在用户首次启动展示,之后不会显示,主要向用户展示新功能. 分析 主要使用ViewPager+Indicator实现 主要是实现一个圆形指示器,这个圆形指示器继承LinearLayout,需要有一些属性可以自定义,比如指示器的颜色,大小,边距等 这个指示器也可以自动滚动,比如应用在幻灯片展示的地方 指示器是圆形的,需要我们自己绘制 这个圆形指示器实现了ViewPager.OnPageChangeListener接口 实现 定义自