美文网首页
WAP导航研究:搭建符合情境下的导航体系

WAP导航研究:搭建符合情境下的导航体系

作者: 刘冻 | 来源:发表于2017-07-18 23:06 被阅读80次

    现在不少企业都在推出自己产品的web版,也就是我们俗称的移动站。各种数据表明现在移动站的数据量增长十分强劲,有些页面甚至达到的pc端级别的数据量,具体移动站重要性我不再赘述,我就结合自己的工作对移动站浅谈一二,内容可能有点学术,欢迎大家批评斧正。

    一、 移动站和移动应用使用导航有何区别?

    移动站和移动应用外观上看感觉差不多,都是在手机上操作,只不过多了一个浏览器的框框,所以有一种声音认为 移动站不就是按照移动应用的思路来做么?如果这么认为就有失偏颇了,下面我来解释下为什么。

    1.1 移动应用:多路径、单通道深入

    应用一般有几个平行存在的分支,就跟经常见到的底部导航类似,每个分支对其他分支不产生影响;在单一分支内,可以不断深入,回溯路径就是不断返回,但是不能跨级别移动,必须一层层返回;但是应用是下载到本地的,所以这个多次返回成本很低。

    1.2 移动站:超文本链接任意门

    移动站则跟移动应用不同,它可以理解为我们上pc端上一些BBS (不打开新网页),在手机浏览器浏览移动站一般不会打开新窗口。还有一点就是它所具有的的html特质,就是任意门特性,这点是移动应用无法比拟的。但是这点也是弱点,就是载入速度,今后如果html5离线缓存技术成熟之后应该会解决。

    二、什么是完整导航体系

    我们分析导航体系可以从一个简单的模型来分析,假设我们走在下图这么一个超大的公园。路径简单理解就是比如你走在公园中游览,你上午从森林出发去沙滩玩了;下午又从森林继续往深处小屋走;而导航就是担当指路牌的功能,在合适位置指引你如何走;走路径方式就是说你是规矩沿路走,还是坐飞机直接飞过去,或者是穿越山林到达?

    下面我们分别讲解 导航(路牌)、路径(走过的地点)、和走路径方式(怎么走)。

    2.1导航:用户来回穿梭所依靠的“路牌”

    o’reilly信息架构书中说的导航的主要三个大类,拿图上PC站上图苹果官网举例:

    顶部红色区域就是全局导航,是全站权重比较大的架构,如公园中沙滩,森林等;

    蓝色区域是区域导航,是子页面下的导航,如沙滩中的绿洲,山丘;

    最后绿色区域就是情境导航,负责在用户当前情境下的相关引导作用,如公园中的便利店,厕所;

    2.2 路径:用户从一个地方到另一个地方的记录

    Ok说完导航下面开始说下路径,前面我们讲人在公园中,是从森林到沙滩,还是说从森林继续王深处走,反应在web上这就是一些级别和板块的区别。我总结的用户在移动站上的路径类别如下:


    跨级别移动,就是从一个低层级移动到较高层级或者相反,如从小屋出村子到森林里;

    跨板块移动,就是从一个分支板块移动到另一个分支板块,如从小屋到游乐场;

    同级别横向移动,就是同等级页面互相移动,如从游艇到滑沙;

    搜索和自定义类页面,是独立于信息架构之下的,所以会出现一个架空图示。


    2.3 走路径方式:搭乘何种交通工具

    逐级返回,就是按照原始的层级一步步返回,多见于APP应用。

    HistoryBack,就是浏览器的后退键,只回到最近的一次页面。

    全局导航,这个很容易理解,就是一个大板块的任意门。

    面包屑, web上经常用的时刻告诉用户在哪的一种工具,轻松实现跨级别返回。

    情境导航直达,这个是web常用的,利用html的特性,不拘泥规则,结合情景给出直达链接。

    三、用例子讲解不同导航如何满足实际需求

    3.1四个例子:跨级别跳转,跨板块跳转,搜索跳转,同级跳转。

    假如我们现在赋予2.2路径种类的实际情景,来看下2.3中的走路径方式横向对比(情景导航直达为直接到达,故不在此赘述).想直接看结果往下翻到表格部分。

    Eg.1如下图所示,我们举得第一个例子跨级别移动。原始操作是从综述页到旗下二级再到三级,然后返回。看下几种方式如何实现。

    eg.1 总结:对比我们发现,在跨级别移动时候,面包屑逐级返回表现出很大的优势。

    Eg.2如下图所示,我们举得第二个例子跨板块跳转。原始操作是从车款点击到价格,然后返回综述页。

    eg.2总结:对比我们发现,在跨板块时候,HistoryBack全局导航表现出很大的优势。

    Eg.3如下图所示,我们举得第三个例子是搜索页面的返回。原始操作是从搜索的某条结果详情,返回之前的结果页。

    eg.3总结:我们知道搜索往往是独立出全局导航的,所以对比我们发现,在处理搜索或者此类自定义界面时候,HistoryBack首先表现出很大的优势,逐级返回适用于更灵活的级别时候才有效,如上图绿色,如果是逐级返回规则此时限定的下方蓝色的架构,则会非常糟糕。但是往往逐级结构只有一种无法全部满足所有情况,此时问题暴露出来。

    Eg.4如下图所示,我们举得第四个例子是横向同级别跳转,原始操作是从车型大板块下的某个车型跳转到竞品(推荐)车型。

    eg.4总结:从上面可以看出,在同级跳转时候,HistoryBack表现出很大的优势,而逐级返回和全局导航以及面包屑,都不能很好的解决此类问题。

    对上方4个例子做个列表总结

    3.2总结:结合情境的导航系统才是最优选择。

    Oreilly在书中有这么一句话我摘抄过来:

    “超文本导航可以让用户立刻链接到某个不熟悉的网站内部去。来自于远程网页的链接和搜索引擎返回的链接,可以让用户完全跳过网站的主页或前门。…综上所述,设计导航系统时,情境是第一位”

    上面所说的最后一句话是关键,情境是第一位。如何理解,我们再回到上面的例子:

    Eg.3的逐级返回,如果按照正确的逻辑,逐级返回它应该回到它所属的板块;但是结合当下情景,它可能更应该回到搜索的板块,用户可能对当前结果不满意想再继续看其他条目;

    Eg.4中的逐级返回,从一个级别跳到另一个等价的级别,此时返回正确逻辑也应该是上一级,但是结合情景,他是不是更应该回到带他过来的,更熟悉的这个页面?

    所以,导航体系,正确的,不一定合理。

    如果我们可以制定一个规则之外的规则,一些特定情景下,做一些衍生层级导航,这样可以解决大多问题,比如我们从百度点到奥迪A4L综述页,返回是回到上一级;而从某一篇文章点击链接,此时返回是回到这片文章;是不是有点应用那种单通道复制层级的感觉?如果能有这种感觉,说明您已经读懂了这片文章开头讲解的部分。

    四、 移易车移动站导航修改建议。

    易车移动站在不同路径属性下可能存在的四个情景:

    1﹜跨级别移动:百度点到综述页,此时点返回,回到上一层级车型板块。

    2﹜跨板块移动:从文章点击超链接点击到奥迪A4L,此时返回做Historyback设计,此时点击返回回到文章链接。(和应用类似)

    3﹜自定义搜索:从搜索点到某一条目,此时返回做histroyback设计。

    4﹜同级别移动:从综述页A点精品点到综述页B,此时返回不回到上一层级,仍回到综述页A.

    经过上述的分析,结合易车网是一个既有深层级,又有广维度的网站的特性,此时面包屑已经不适用于如今可能存在的各种跨板块情境,所以决定,去掉面包屑,用99%的histroyback,以及一直存在的全局导航来解决问题,其他的辅助为情景导航。

    具体的形式不限于上方我给予的唯一形式(也可以展出部分全局导航),但是架构应基本保持这个原型。

    相关文章

      网友评论

          本文标题:WAP导航研究:搭建符合情境下的导航体系

          本文链接:https://www.haomeiwen.com/subject/fhkkkxtx.html