对于手机网站WAP页面的跳转的设计的一些建议.pdfVIP

对于手机网站WAP 页面的跳转设计的一些建议 碎碎念 跳转太多了，就搞不懂了。 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页面的出现是翻过来的，是当前页的背面。 这些特别的方式，虽然没能减少页面间的跳转，但却把跳转润色的不那么生硬了， 使得跳转更生动，更好理解。它们共同的思路是：让当前页与目标页的关系更具 象。目标页盖住了当前页；目标页把当前页推到旁边去了；目标页在当前页的背 面。 产品的结构要简单些才是关键。 如果运用这些表现方式，是不是就能把最开始的那个微博里不断跳转的问题处理 好