美文网首页
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导航研究:搭建符合情境下的导航体系

    现在不少企业都在推出自己产品的web版,也就是我们俗称的移动站。各种数据表明现在移动站的数据量增长十分强劲,有些页...

  • Web导航设计

    Web导航基础,导航设计的框架,特殊情境下的导航 1.导航的作用:提供获取信息的途径,显现站内的位置,显现网站的“...

  • 学习HM微博项目第1天

    步骤:搭建基本环境 -> 展示子控制器 -> 项目分层 -> 增加导航功能 -> 增加导航栏按钮。 搭建基本环境...

  • APP导航设计模式

    导航主要分为两大类,横向和纵向。横向的导航有:标签导航、舵式导航、tab导航、轮播导航;纵向的导航有:宫格导航、下...

  • Tab设计总结

    今天这篇文章来给大家分析一下tab。其实tab隶属于产品导航体系的一部分,所以你要了解tab,必须要它放在导航体系...

  • vuejs入门-子路由(三)

    上次说了整页导航,这次我们说页面局部导航局部导航白话就是:页面局部刷新或是视图局部刷新 1.搭建项目:vue in...

  • Android隐藏和显示虚拟导航栏

    隐藏导航栏 显示导航栏 沉浸式状态下显示导航栏

  • 2017年2月工作计划

    项目 完成赛点WAP端优化和样式调整。目前需要调整的方面是导航的不统一和细节方面的调整,导航不统一是因为制作过程中...

  • 直播项目笔记(一)

    颜色封装 + ClOPageView + 瀑布流 搭建主题框架 导航栏布局 改变导航栏的颜色 改变状态栏的颜色 设...

  • 亲子沟通秘诀

    通畅的交流才是有效的沟通。 情境模拟,上班,最堵的路,导航。输入目的地,发挥车技,到达会议现场。晓松导航。代入还原...

网友评论

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

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