手机软件新手引导画面设计的思考

hikui posted @ 2013年5月10日 21:57 in 感想 , 2662 阅读

最近财富通的新版本做了一个新的新手引导画面,虽然不是我做的,但是我想从APP设计的角度来谈谈这块内容。当然我不是专业人士,大家就权当笑话看吧。

最早的新手引导画面是非常简单的,最最常见的方式是scrollview上面贴了好几张教学图片,用户第一次进入某个界面的时候,就显示这个界面,滑到最后就让引导界面消失。我之前做的“记词助手”便是这样搞的。说实话,我自己用软件的过程中,从来不会去看这些教学图片,弹出新手引导界面的时候,我第一个想找到的就是“跳过”按钮,如果找不到,就会飞快地把它划到最后一页然后让它消失掉。我想很多人应该都是像我这样对待新手引导画面的,我把这个本身视为使用软件的一个障碍。因为这就像中国式灌输教育一样,先把一大堆东西灌输给你,希望你全部掌握之后再去做实用的事情。这对于学习软件操作来说基本上是不可能的,因为一个用户下载好软件之后,肯定希望马上就动手试试,出来一长串新手引导界面,显然是大煞风景,而且我想普通用户肯定不会像背单词一样地去记住每一个操作是怎么做的,因为用软件不是考试。

后来出现的真实界面+蒙版+提示语的引导画面,虽然更加接近实际操作的环境,但我认为在本质上和上面一种新手引导画面没有多少差别。

财富通的新的引导画面则是更加进了一步,因为引导的是新的手势操作功能,所以使用了真实界面+自动操作+手的示意图的组合。这样一来是最贴近实际操作的效果的。

不过我认为这不是新手引导的最佳方式,我认为的最佳方式是没有新手引导界面。这颇有无招胜有招的意思。最佳的情况是——你的软件不需要任何教学,别人上手凭着直觉就会用。这是苹果比较推崇的方式,所以它的iDevice都没有什么特别详细的说明书。不过要做到这点是相当有难度的,完全要看软件设计者的水平,并且有些东西是要做点取舍,这一点,苹果也不总是做得特别好。

我认为要做出这样的设计,需要考虑以下几点:

1.随大流:

有时候随大流不一定代表着平庸,而是代表习惯。当某个操作已经成为大多数软件的共同点时,去改变这个操作的习惯性效果往往使得用户体验非常糟糕。我之前一直在诟病财富通的“返回逻辑”使得返回按钮的点击行为不是正常系统默认的行为,却是想了自己一套复杂的逻辑,可谓是在APP里面独树一帜。但是这样好吗?我觉得非常糟糕,每次我点了返回按钮,页面没有返回却跳到分时图了,我总会觉得一定是我点了不该点的地方。所以遵循系统常用的默认的行为,这是一个软件设计的基本要素,只要遵循了,那么有很多的新手指引可以省去。

不过这里特别强调了“常用”,有些系统行为本身没有设计好,导致很少有用户知道它,那么将它定义为新的意义便是一种创新。这里有个很典型的例子就是“摇一摇”的功能。在苹果最初的设计里,“摇一摇”的含义是“撤销”的意思,有兴趣的同学可以拿苹果的程序(比如“邮件”)来测试一下。然而事实上是这个功能因为比较隐蔽,几乎很少有用户知道它,于是便有微信就重新定义了这个操作为“随机配对”的新含义,取得了非常好的效果。非常巧的是,摇一摇的新手指引非常简单,只需要在那个界面上写“摇一摇”就行了,既不影响用户操作,也不会对用户造成理解上的障碍,“摇一摇”三个字本身其实根本算不上是新手指引画面,而是实体界面的一部分。

所以在软件设计的时候,尽可能设计成用户习惯的操作,这样可以省去新手指引。

2.过渡:

所谓过渡,就是如果想引入一个新交互方式时,需要保留原有的习惯性的交互方式。事实上,UI设计中的拟物派保持的也是这种思路,即通过模仿自然世界的事物存在形式,引入到软件UI操作中去,对于一个电子产品小白来说,拟物化的UI就是一种过渡。

当然过渡不仅仅只有这样的例子。最近很流行手势化划屏菜单操作,它的鼻祖就是Path。

如果将手指向右滑动,左边就会出现被覆盖的菜单。这显然比点击左上方的按钮方便很多。然而path并没有去掉左上方的按钮,也没有对这个功能做新手指引。因为即使用户不知道有手势操作,也一定会习惯性地试试左上方的按钮是干嘛的,那么它并不影响用户的正常使用,所以不需要有用户引导界面。这就是一种过渡的设计。

不过你总是希望用户会学习到这个手势操作,否则这个精巧的设计就白做了,这时候就需要考虑到“暗示”了。

3.暗示:

所谓的暗示,是要通过一些动画效果,提醒用户可能会有某种交互设计,然后使他尝试,这样,便可不制作教程动画。这主要是用于手势交互的教学。再拿上面的path为例,点了左上角的菜单按钮,整个中间的主界面会有一个动画往右移,显露出被遮盖的菜单。那么用户自然会想,是不是拿手指划一下也能划出这个菜单呢。这就是暗示的效果。

再回想一下iOS早先的版本,在App Store安装软件的时候,会有一个动画效果:显示主界面,然后滚动屏幕到软件安装好后图标所在的分页,然后将软件图标显示出来。这个设计一直被人诟病,然后在iOS6里面改掉了。不过我觉得苹果在最初设计这个交互的时候,他们的主要考虑点是暗示iOS系统的主屏是可以滚动的。因为最初拿到iOS设备时只有两个分屏,如果你是世界上第一个iPhone用户,又没有使用说明书的话,也许并不会知道一屏软件装满之后,会产生第二个分屏,新的软件会显示在那里。那么这个交互动画便是暗示性的教学了。而当这个操作已被人所熟知的时候,撤掉这个动画就成了明智的选择。

现在国内的一些软件也都加入了手势操作,比如网易新闻、新浪微博。我认为网易新闻的设计是个非常好的暗示性教学+过渡型设计的范例:网易新闻点击进入一条新闻之后,可以通过向右划屏的手势返回到新闻列表界面。但是它保留了返回键,这是属于过渡。而它进入新闻详情,和电了返回键之后,会有一个类似栈的push, pop动画,会让人联想到是否可以使用手指滑动来操作页面栈,这就是暗示性的教学设计。

网易新闻的暗示性设计

而新浪微博虽然也有手势操作,然而它点击返回按钮时,遵循了最简单的navigation 的back效果,并没有暗示性的效果,这便属于设计失败了。

我认为,一个应用如果在设计上考虑到了上面三点,就能够大幅度地减少引导画面的使用,从而得到一个更好的用户体验。

創用 CC 授權條款
本著作係採用創用 CC 姓名標示 2.0 通用版 授權條款授權.
nevin 说:
2014年1月06日 16:29

这样当然好,我也讨厌一上来就一大堆的引导,直接跳过


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter