手机上能不跳转就不跳转

四月 6th, 2013 19 Comments »

跳转太多了,就搞不懂了。
PC上的网页,页面间反复跳转是再正常不过的了,从首页进入搜索结果页,再到详情页,再跳到相关内容的详情页…不过到了手机上,无节制的跳转就有点儿问题了。

从首页列表->单篇微博详情页->个人主页->单篇微博详情页->个人主页…可以一次接一次的深入,但跳转了三、四次后,再看左上角的“返回”按钮,你已经很难判断出将会返回到哪里了。
如果是传统的PC网站,能展示层级导航,能在跳转到其它栏目时交代清楚,当然这样的情况也应该尽量减少,但总归还是能交代清楚的。
页面小,没太多地方摆多层的tabs导航或者面包屑导航,就只剩下左上角的一个“返回”按钮作为导航了。对于微博这种情况,明显就不够用了。还要像传统PC网站那样错综的链接,就比较容易绕晕了。

更多层级,更多点击操作,降低了使用效率。
即使没有绕晕,更多的层级,更多的深入,更多的点击操作,也降低了使用效率。
掘图志的手机版,在列表页直接就可以看到图片、打开视频:

你肯定被上面的化学老师吸引了注意力,其实我高中时也见过化学老师拿500毫升的烧杯喝水。吭吭~这里要说的是:这个手机版网站不需要进入到详情页,只是浏览列表就可以了,看到感兴趣的视频,直接点击就打开那个全屏的视频播放页了。如果每篇文章在列表页上只显示前面一小部分内容,要进入到详情页才能看全文、播视频,那样做虽然也没啥不对,但用起来就比较累了。
相比于有些网站的手机版只是把页面做的小了些,掘图志的手机版更多的考虑到了手机用户的使用情景,不仅看上去简单,而且用起来也效率高。

层级太多了看不懂;即使看得懂,层级多了用起来也麻烦,因此:手机上能不跳转就不跳转。那我们就来看看有没有办法减少跳转…

对于从列表页打开详情页这种情况,Google reader的方式是个典型:

直接在页面内展开,没有进入详情页这回事儿了,自然也就没有了进入后再返回的操劳。
Google reader将进入详情页这个页面间导航的问题变为了页面内导航的问题。于是,它页面内的导航就出了个小问题:打开一篇长文后,看到一半,不想看了,想滚下去或滚上去,都比较辛苦。(当然这也源于它原本是给PC设计的网页。)还好这个问题不需要去解决了,google reader要关闭了。不过这种设计并非只是google reader独有,使用类似的页面内展开的产品或许可以单独为自己的页面内展开做一些自己独有的页面内导航功能,让用户能在展开长文且滚到中间的时候可以直接收起此篇长文。

变“进入详情页”为“在当前页内展开”,这是专门给列表->详情这种情况用的。前面提到的微博,用这个办法似乎也解决不了什么问题,其实我们面对的多数产品都很难保证一个页搞定。
能不跳转就尽量不跳转,如果不得已,非得跳转呢?如果非得跳转,可以假装不是跳转。这样的例子也有不少:

假装不跳转例子1:Feedly的详情浮出。

点击后,它浮现出来了,点左箭头按钮,或者点详情页上的任何无链接位置都能收起来。
要把这种方式理解为是打开了一个弹出窗口,或许也可以,那它就是十恶不赦的模式化窗口了,实际上传统的进入详情页都可以被认为是等同于模式化窗口的,或者说,模式化窗口这种概念在现在的设计中已经不那么有意义了。(呃,这话题似乎相当有点儿复杂,应该单独拿出来好好聊聊,在这儿就不再往下说了吧,在这括号里是说不明白了。)
如果把这种形式理解为是一种更形象化的详情展示方式,那么它就显得挺可爱的了。原本的列表页似乎并没有消失,只是被盖住了,详情页的打开让人不是那么害怕了。
这个形式更像是手机上的微博里点击一张图片,图片直接浮现出来,再点击图片就又还原了。

假装不跳转例子2:Path的左右滑动。

点了一个tab,右侧的页面滑动过来,其实还是跳转页面,但是这样的形式让跳转看上去更像是滑过来的,不是离开了当前页去到了另外一个页。
另外,滑到了feeds页面,再点击某个图片,就又是微博里浮出图片的效果了,或者说是feedly的浮出详情。牛X了,组合拳啊~

假装不跳转例子3 “i”的翻转。

“i”页面的出现是翻过来的,是当前页的背面。

这些特别的方式,虽然没能减少页面间的跳转,但却把跳转润色的不那么生硬了,使得跳转更生动,更好理解。它们共同的思路是:让当前页与目标页的关系更具象。目标页盖住了当前页;目标页把当前页推到旁边去了;目标页在当前页的背面。

产品的结构要简单些才是关键。
如果运用这些表现方式,是不是就能把最开始的那个微博里不断跳转的问题处理好了呢?或许能有些帮助,但要完美,恐怕也够呛。
在feedly的详情页里再点击其中的链接,还是得规规矩矩的打开新页面,上面的其他例子也类似。也就是说,这些巧心思的设计也只能处理有限层级的页面关系。

“能不跳转就不跳转,非得跳转也尽量假装不是跳转。”这其实都有一个前提:产品的结构得简单点儿。
手机系统只提供了简装的页面间导航,我们费尽心思也只是处理了一、两层的页面关系,要做到像PC网页上那样复杂的页面间彼此互通,那就只能无限的“返回”了。手机系统提供的导航规范实际上也暗示了我们,就是不能把产品做得太复杂了,太复杂了搞不定。

当然我并不赞同以现有的局限作为产品设计的依据,产品要做什么,不做什么,仍旧应该以用户的目标、使用情景、用户任务为依据。手机上的局限或许可以理解为:我们不得不在这样的局限下去做“以用户为中心的设计”。

有19 条对“手机上能不跳转就不跳转”的评论

  1. 雅秋 说:

    沙发~~其实还是为了让用户和产品结构的心理预期一致:比如ios的主任务流程也许就是向右向右边,但是页面中间的其他辅任务流程可以浮现、自下而上滑出,甚至是path对主屏幕和左右两侧导航屏幕的区分。当然也要借助动画效果和视觉效果。也可以说是产品信息架构时候对功能优先级的定位相关。这样想不知道合理不?

  2. 臭鱼 说:

    在不得不跳转的时候,滑动、浮起都是为了优化生硬的跳转,既然是优化,是得做出来的效果让用户更好接受才算有价值。
    PS:关于心理模型,我觉得更准确的说法是:设计的让用户更容易形成好的心理模型。多数时候,用户在使用之前并不会事先有个心理模型。如果说事先有想象,恐怕也是对这个产品总体的期待,比如:要使用一个任务管理工具之前,会想象着那应该是一个列表,至于这个产品具体的表现似乎很少会有人去预测,也是因为很难预测对吧。

  3. 政委 说:

    哈哈,看到你的手机充满电了。

  4. […] Via:作者博客 […]

  5. 手机上的交互设计,能不能跳转 | 易资讯 说:

    […] VIA:臭鱼 […]

  6. 汪子臻 说:

    产品的结构要简单些才是关键。
    http://wangzizhen.com

  7. […] VIA:臭鱼 […]

  8. @fanzrb 说:

    结构简单跟内容填充是矛盾

  9. 阿幸 说:

    所以还是要围绕一个核心的目标做内容和结构的权衡与取舍

  10. richardxie 说:

    说的不错,因为手机上的多任务管理既不明显,也不容易操作,而跳转,往往导致程序的切换。
    但是,跳转的需要是有的。
    所以,如果是在同一个程序里,可以像文中说的,使用展开等方法。在程序间,可以通过保证基本交互框架的统一,来减轻跳转带来的困惑。返回按钮的混乱,是造成跳转混乱的重要原因。

  11. 繁星 说:

    学习了,真心说的有道理

  12. 匿名 说:

    看到煎蛋过来踩一脚

  13. SS 说:

    Path的模式在path火了之后,不断被争相模仿。虽然证明是成功的,不过我还是担心这种“假装”可能会让一些用户感到一点点不适,比如不论干什么都喜欢全屏的用户,对于页面留一小半我目前不需要的部分,易用性还是会受一些影响

  14. perfect is shit 说:

    貌似微博的例子跟后面“假装跳转”的例子混淆了,点击列表中一条微博,微博详情页也是右到左滑过来的。

  15. blue tree 说:

    微信的结构,臭鱼怎么看?

  16. chouyu 说:

    @bluetree:微信中基本不会出现文中微博那样的情况。其实微信中也提供了类似微博那么复杂的链接,人->内容->人… 但是显然微信在设计时是很小心的,意识到了无情无尽跳转的问题,所以在微信中这种不断深入的跳转是有个尽头的,使得它并不是网状的结构,而是深入,然后再一层层的退回来。虽然退回来的时候有点儿累,但总比绕晕了要好。

    是不是可以这么说,微信提供的功能也足够多,多到已经足可以使得表现混乱了,但微信在表现上很注意,有节制,有技巧,使得它并没混乱。

  17. 考生在线 说:

    本来跳转只是一个导向,但是在手持设备上,他的表现形式必须要更加符合手持设备。

  18. 阿萨 说:

    说的 不明白

  19. 尽快 说:

    说的 不明白