手机上能不跳转就不跳转

标签: 全部文章 | 发表时间:2013-04-06 00:59 | 作者:chouyu
出处:http://www.chouyu.com.cn

跳转太多了,就搞不懂了。
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网页上那样复杂的页面间彼此互通,那就只能无限的“返回”了。手机系统提供的导航规范实际上也暗示了我们,就是不能把产品做得太复杂了,太复杂了搞不定。

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

相关 [手机] 推荐:

手机防尘塞

- Zoe - 玩意儿
如果你的 iPhone 平常不插耳机,那么如何防止耳机孔进灰尘呢. 其实不仅仅是它,很多手机的耳机孔太大,容易进入异物,时间长了,积累很多灰尘又不容易清理. 日本一家名叫 hashy-topin 的公司推出一款 Plugy 产品,专门堵 iPhone 耳机口. 它的插头设置成了耳机插头的样式,可以填充满耳机接孔,外面是一个个可爱的造型装饰,共有嫩芽、螺丝、发条、水龙头、蘑菇、钥匙6款.

手机:非工具

- 達 - 《商业价值》杂志
手机正在改变世界,因为它正在改变人类本身. 如果有外星人真的在观察人类,他们或许现在正在写下这样的记录:“这个物种正在经历一个剧烈的习性与形态变革期. 其过去100年来的科技爆发已经开始把这个物种带入‘体外进化’阶段——半导体技术正在让这群碳基生命体融合硅基基因,而这种融合已经从被称作‘手机’的沟通设备的‘器官化’开始了.

癌症与手机

- Yishen - 科学松鼠会
原作:http://xkcd.com/925/. 注:《美国流行病学期刊》2011年6月28日发表了一项研究,认为手机使用并不增加癌症发病概率. 该研究针对290万丹麦人,历时十余年. 此文主要作者在WHO下属国际癌症中心任职,正是该组织在六月把手机归入了“可能致癌”一级……. 另外,据我查到的资料来看,漫画里的第三张图似乎相当准确.

手机抓包HTTPS

- -
之前也介绍过 Charles 抓包神器,详细可以看这篇文章: 抓包神器. 这个神器主要是解决在开发过程中快速定位异常,到底是界面展示 Bug 还是接口数据异常. 这样借助这个神器,基本上在开发过程中就能解决很多问题了. 学会手机抓包也能解决开发中很多问题,不仅如此,还能解锁去广告、白嫖 VIP 等骚操作.

冀勇庆 。 华为云手机 。阿里手机 。小米手机

- nobush - 弯曲评论
[陈怀临注:原文作者是大名哼哼的,我的朋友冀勇庆同学. 其博客的URL是:http://jiyongqing.blog.techweb.com.cn. 勇庆同学曾任《IT经理世界》首席记者,专注企业商业模式及企业家管理能力的研究. 著作有《华为的世界》、《狼战》、《平台征战》、《头寸》等. 近期,云手机的概念可谓大行其道.

创意手机APP汇总

- ArBing - 月光博客
  在知乎上有人讨论“如果由你来创意一个手机app,它是什么样的”,网友有很多有意思的想法,因为对移动互联网这一块很感兴趣,所以把网友们的想法汇总一下,一来通过整理的过程想想app实现的可能性和实现后的潜力,二来抛砖引玉,希望能引发网友更多的思考. 分析提取照片中人物的衣着,列出每项价格及其相关服装对比,支持在线购买.

极简 GTD 和手机

- 盛开 - 爱范儿 · Beats of Bits
那么这篇 Blog 就是为了你写的. GTD 等个人管理方法论,恐怕也是一种效率迷思:有用与否从没有实在的证明,花费的代价却不少. 极简后的 GTD 可能才更加适合普通人. 人做事的目的千差万别,为了很好的抽象, GTD 没有”内心动力”这一块. 但是,为了办成点稍微超越你舒适区域的事情,意义是必须的.

手机应用创意

- 活土匪 - 滯銷書
为了回答知乎上的问题而整理的精简集合,有一些是和其他人撞车的. 最关心的是,定位功能和手机结合起来能够有什么好玩法. 现在的 LBS 服务普遍功能单调,实用性不够,签到的操作麻烦. 至少以前签到过的地点以后再去能不能自动签到,除非设置例外. 如果签到还要发感想,能不能定时提醒为当天的自动签到做补充,或者干脆和当时当地往其他平台发的公开消息绑定.

Google推手机钱包

- Andy - 月光博客
  2011年5月26号,Google宣布即将发布自己的手机钱包应用. 笔者来说说google往这个旧酒瓶里装了点什么新内容.   Google的手机应用将率先登入Nexus S 4G by Google 在硬件上依托NFC和智能手机的系统平台. 在它的宣传页上Google将这一产品比作继贝壳到硬币,硬币到纸币,纸币到塑料卡片后的另一次革命.

小米手机动手玩

- xcv58 - Engadget 中国版
此文章网址 | 转寄此文章 | 回应.