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

现在不少企业都在推出自己产品的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,以及一直存在的全局导航来解决问题,其他的辅助为情景导航。


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,384评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,246评论 19 139
  • 想做什么,想买什么就特么去啊! 宁可事后后悔,也不要以后遗憾。 我有一个朋友是这样一个人,在她看上什么东西或者想干...
    Titania阅读 779评论 0 0
  • 汉江边明月夜空现信步人间思无念,梦无言不知天上宫阙何时见
    浔古阅读 192评论 0 1
  • 2016.6.15,真正意义上的大学毕业。 我想如果在任何社交网站上搜索毕业季,应该会有数不清的词条、文章。也许我...
    Navy祝阅读 266评论 0 4