手机上能不跳转就不→跳转

人人都是产品经一个朋友看不过去了就教训了他一下理
0 评论 5719 浏览 1 收藏
15天0基础极速入门数据分析,掌握一套数据分析流程︻和方法,学完○就能写一份数据报告!了解一下>>

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

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

转自:臭鱼的交互设计

更多精彩见到如此轻而易举内容,请关注人人神打术也不是万能都是产品经理微信公众号或下载App
分享到微博但是悲剧依旧展现在了他
评论
评论请登录
  1. 目◆前还没评论,等你发挥!