标签归档:导航

APP返回键的进化

先说一段绕口令,

产品设计,大部分的事情是在考虑信息与流程设计;流程设计,大部分的事情是在考虑导航设计;导航设计,大部分的事情是在考虑如何让用户「返回」…

那,今天来聊一下 APP 的「返回」设计。

关于返回,在主流的移动平台上,在很长一段时间内,是所有产品经理和设计师们争论的焦点。这些争论包括但不限于,Android 版本到底要不要完全依赖物理键的返回、为什么 ios 的返回键一直在左上角、手机端浏览器的返回应该放在哪儿….

很遗憾,这几个问题我都回答不来。

在实际项目过程中,我们也遭遇到 Android 初期设计规范的混乱,所以,为了保证项目的进度,直接采用了跟 ios 一致的返回设计方式。

当然,根据一些设计原则,如果用户进入的信息层级过深,会直接在左上角提供一个「回首页」的功能,方便用户跳转导航。

不过,最近关于 APP 的「返回」似乎有了一点不一样的进化,几个例子:

APP 返回键进化

1、部分 APP 开始将返回挪到了底部

具体说就是,返回按钮从左上角挪到了左下角,典型的 APP 如,淘宝、知乎日报。

我不知道具体的用户研究结果如何,从我个人的体验来看,我很喜欢。这种改动似乎跟手机硬件要么越来越长要么越来越宽有关系,硬件变得让人无法一手掌握,掌机越来越无法掌握,所以,相应的影响到了 APP 的设计。

2、手势操作有替代按钮的趋势

具体的说就是,用户可以通过滑动来完成返回,而不是一定非要去点击返回按钮,典型的 APP 如,知乎、豆瓣小组。

Android 坚持了好久,始终不肯放弃物理硬件,所以,Android 的返回问题依旧没能完美解决。不过,从整个移动生态的发展来看,用户对这种手势操作越来越习惯,同时,手势的操作确实要比点击效率更高。

所以,可以预见的是,在未来,将会有更多的 APP 加入手势返回操作,甚至成为主要的返回入口。

一般的产品,如果我们把他的信息流程抽象出来,基本可以归纳为。起点——>列表——>详情,详情返回到列表,继续到详情,比如购物类应用、微博类应用等等。将这个流程连接起来看,用户需要不断的以列表为起点进入,再出来,再进入。在这种情况下,返回的效率尤为重要。

向右滑动页面,返回上一个层级,看上去会很大的提高用户的操作效率。不过,在 ios 上对部分列表有右滑出现删除功能的手势操作,所以,如果应用滑动页面返回的话,这个问题需要去考虑。

3、其他高科技的返回

好像某个手机有眼动来着?我曾经一直想来着,万一一边玩手机,发现旁白站了一漂亮姑娘,这个时候该怎么控制啊….

 

说说抽屉式导航

导航始终是产品设计的重头戏,不管在Web端设计还是在mobile的设计中。之前曾经在读《触动人心》的时候写过一篇“移动产品设计之ios导航模式”,其中的导航模式基本都是基于ios系统自身的一些模式,随着ios新产品的不断出现,新的导航方式也随之更新,这里说一下“抽屉式”的导航方式。

当然,抽屉式导航是我自己给这种导航方式取的名字,至于学名叫什么,我也不知道。这种导航模式一般采用将导航主体隐藏在app侧边的方式,以一个按钮来呼出导航,在使用完成之后在使用相同的按钮隐藏起来。一拉一缩,从形象上与抽屉类似,于是我这样称呼他。

根据我不完全的考证,这种导航方式始于Facebook。在最早的Facebook App中,一直采用了比较保守的九宫格导航方式,随着FB的发展,这种很重的导航方式会导致用户Timeline的展示被很大程度上弱化,虽然FB也曾尝试在用户进入App的时候直接进入Timeline而不是这个九宫格导航,但是,显然这种优化还不是足够好。于是,在2011年11月左右,FB发布了新的ios和android客户端,其中一个重要的变化就是导航模式的变化,推出了新的抽屉式的导航,同时强化了对Timeline的展示。

FB推出这种新的导航模式不久,Gmail的ios版本同样采用了这种导航模式,再之后path 2.0版本也采用了这种抽屉式导航并将其演变到极致。至此,这种抽屉式的导航模式迅速窜红与ios产品设计中。

简单的定义

一般控制抽屉的把手出现在App的左上角,以按钮的形式出现,点击按钮之后抽屉被拉开,按钮被拉到App的右上角,左侧区域被拉开(抽屉)后显示出导航内容。导航的内容可以是以列表形式展示的常规2级导航,也可以将一些非常用的快捷操作入口直接放进来,如FB的搜索。具体形式如下图

当然,这种抽屉也存在一些变种,目前以path和sparrow较为突出。path不仅将主导航作为一种抽屉,同时底部的操作按钮也是一种变种的抽屉;而sparrow则增加了抽屉的层级,在一级抽屉被打开之后还可以再继续拉开一层抽屉。另外,米途订酒店则将全部的酒店预订过程化作一种抽屉,也是一种很不错的形式。

 

另外,对于一些需要用到消息提醒的应用,抽屉的出现会给消息的展示带来新的麻烦,因此,很多的抽屉导航会将消息展示在Title区域里,以一个入口的形式来展示。典型的如Facebook、快捷酒店管家。

抽屉导航的核心思路

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能,让用户更专注于核心的功能操作上去。个人认为,隐藏的思维是移动产品设计中最核心的一个思想。上周在极客公园分享了关于如何应用缩小、隐藏、赋加的思路来做移动产品设计的话题,而这个思路中最最核心的恰恰是隐藏。

Facebook中,用户核心的操作是阅读Timline,所以抽屉里隐藏了所有其他的操作;Path中,用户的核心操作还是看好友的Timeline,所以抽屉里隐藏了其他的操作,同时UGC的操作又必不可少,因此path在左下角也用了一个抽屉;在Sparrow里,用户看新邮件的频率大于查看归档邮件的频率,因此抽屉里隐藏了邮件类型等操作,同时为了平衡发邮件的需求,在右下角单独留了一个入口;在快捷酒店管家里,用户的核心操作是通过地图寻找附近的快捷酒店,所以抽屉里隐藏了切换城市等其他操作…..

3月份的时候我曾在微博上说,这种导航方式会逐渐流行,推测的依据就是随着移动产品设计的演进,越来越多的产品设计师开始认识到只有让核心更突出才能提高整体产品的体验,只有不断降低用户的干扰才能不断提高用户的使用效率。

不适合抽屉式导航的App

需要用户不断在导航间进行切换的App、没必要有太多导航的App、或者核心功能就是一堆入口的App。

说说那些商城的导航

简单说,设计就是要解决问题,这是设计的本质与落脚点

电子商务网站的主导航设计是整个网站最最最核心的模块之一。导航需要解决的问题就是,告诉用户如何快速准确的到达他想要去的任何地方。

在所有电子商务网站中,Amazon(注意,不是卓越亚马逊)的导航设计向来是所有电子商务网站学习与仰慕的对象。Amazon的导航在经过数次变迁之后被从顶部挪到了左侧,从横向Tab变成了纵向Tab。Amazon的这种Tab页签式导航,相对与卓越亚马逊的标签列表式导航而言缩短了主导航的高度,在第一屏的时候就能把所有商品大类全部暴露出来,降低了用户的寻找成本。因此,这种模式的导航被越来越多的电子商务网站所接受。

大约在1年前,QQ商城改版,借鉴了Amazon的这种导航模式,同时做了创新式的扩展。QQ商城在每个Tab页签里不仅展示了二级类目,同时还展示了品牌,这使得整个主导航从纵向上进一步缩短同时往横向上扩张。
随后而来的京东商城淘宝商城(扩展有分类推荐与品牌推荐)以及淘宝电器城纷纷相仿并采用了这种扩展式的Tab导航模式。

不过,我觉得这种创新在某些交互细节上有待改进,我们先来看一下QQ商城的主导航截图:QQ商城的这个主导航在Tab页签的标题上显示的形式是“一级分类标题+二级分类推荐”的形式。
从这个表现形式上看,“运动鞋”、“棒球帽”是2个标签,我这么认为是没问题的吧?

我们假设这样的一个场景:你来到QQ商城,很明确的就是想购买“棒球帽”,你肯定是会直接奔去点击“棒球帽”(注意,是点击)。因为这个“棒球帽”长的跟一个标签一模一样,我们之前的Web使用经验告诉我们,标签就意味着是带超链接的,是可以点击的。可是,当你把鼠标移到“棒球帽”这个标签上的时候,你发现,他是个伪娘!
你点击了半天,发现没有反应,你再仔细一看,他引导你打开了整个“运动户外”下的二级分类….这个时候,你的鼠标需要在做一次长途奔袭,去弹出来的弹层里寻找“棒球帽”,当然,你还得小心点别奔袭到界外,不然整个弹层就关闭了,你需要再来一次(图中虚线)。
这个场景里,我们经过几个动作:1、准备点击;2、无数次点击后觉醒;3、鼠标小心翼翼的滑过弹层去寻找;4、点击。
P.s:其实,图中这个例子我们在弹层里也找不到“棒球帽”,因为它被变异成了“运动帽”?

我们再来看京东商城和淘宝电器城(注意,不是淘宝商城)。其实跟QQ商城差不多,只不过样式上做的难看点….当我目标明确的奔着“洗衣机”去的时候,鼠标所到之处弹层出现了一级分类“大家电”下的所有二级类。同时,“洗衣机”、“平板电视”这2个处在Tab页签标题上的推荐二级类被覆盖了。
这个场景里我们经过的动作:1、准备点击;2、发现要点的家伙没了,开始寻找;3、点击

从这个意义上讲,我认为,京东商城和淘宝电器城的这种处理方式要比QQ商城在体验上更好。QQ商城在鼠标Mouse on之后给了我2个道路:点击,拼命的点击、鼠标奔袭到弹层;而京东商城和淘宝商城直接覆盖了之前那2个长的像标签的家伙,我只有一个道路:鼠标奔袭。
有的时候,给用户越少的选择更能让用户集中起来完成目标任务

OK,案例观摩完毕,分析一下为什么会出现上面的问题?
很简单,我觉得就是没有把一个东西做到极致,随心所欲的使用表现层的东西去覆盖了框架层与结构层的事情。展示在Tab页签标题上的那些(洗衣机、平板电视)其实并不是标签,但是,他们在展现上跟标签一模一样(京东使用了灰色字体,说明他们意识到了这不是标签,但是我觉得还不够)。

解决方案?
请参见Amazon的做法。
把那些长得像标签的家伙砍掉,使之不具备标签的属性,换成文字描述就OK了。

最后,几句题外话:
1)不知道京东商城暴露在每个Tab页签标题栏里的那2个二级分类是怎么来的?我仔细看了一下,似乎是程序直接调用而不是经过人工编辑的?如果是让程序来调用这个黄金地段的内容,那就真太可惜了。
2)京东商城在首页左侧主导航里的一级分类都是可以点击的(如数码手机),但是在全部分类页面却变成了不可点击的,Why?
3)QQ商城暴露在每个Tab页签标题栏里的那2个二级分类似乎是经过编辑的,但是这种标签式的展示让我很挫败,比如我想买个棒球帽,结果找了半天只发现个类似的运动帽….
4)最后, 大熊哥主导的淘宝商城在此次主导航比拼中最终胜出!