导航之变—移动网站的导航设计

简介:

 

导航是互联网网站最重要的组成部分之一,它涉及到产品的信息架构、页面布局和用户交互行为等诸多方面。一个网站用户体验的优劣往往和导航的优劣有密切的联系。

随着移动互联网的发展,越来越多的网站以移动网站的形式移植到手机上。在网站移植过程中,导航的重新设计有什么变化和设计要点呢,本文尝试做出一些研究。
 

导航的目的

在研究导航之前,我们不妨从导航的使用目的谈起。如果把网站比成一座大厦,那导航可认作是大厦内的指引系统。导航的使用目的归纳起来主要有以下几个方面:

1. 引导用户在网站页面间移动和浏览,提供获取信息的路径。全局导航、局部导航等都是为了用户浏览相关的页面提供引导,方便用户找到所求。

2. 理清网站各部分内容之间的关系,使用户了解网站全景。最常见于全局导航和站点信息导航,它们展现了整个网站的目录信息,用户可快速理解网站结构,对网站有整体的把握。

3. 定位用户在网站中所处的位置。这个功能常见于面包屑和相关导航中,它帮助用户识别当前浏览的页面与网站整体内容间关系,使用户了解当前页面和网站其它内容的联系和区别。

导航变化的原因

从PC端到移动端导航变化的原因归根结底是由物(设备的软、硬件差异)、景(使用情景和操作方式)、事(用户需求和使用目的)差异。这些因素相互交织,对移动终端的导航设计有显著的影响。

本文尝试从类型、内容、样式等方面结合实例来说明PC端到移动端网站导航设计的变化:


 

一、常用导航类型变化

网页导航的划分有不同的维度。网页导航按照作用范围的不同可以分为三大类:结构性导航、关联性导航和公用程序导航。根据《web 导航设计》,三者的关系可描述如下:

 

根据外在形式的不同,网页导航通常又可以分为顶部横向导航、侧边栏导航、Tab标签导航、面包屑导航、页内锚点导航等多种形式。

由于移动终端特性,移动网站可以采用的导航种类较PC端要少很多,主要有纵向导航、分类链接导航、Tab标签导航、相关导航等。

 

下面就常用的移动网页的导航形式进行一些介绍:

· 纵向导航

 

 

由于移动设备更适合纵向的浏览方式,PC站点的顶部横向导航和侧边栏导航在移动端通常转变为纵向导航。例如下图dell 和hp的移动版网站设计中,均采用这种转换方式,较好地完成了导航的迁移。

 

 

 

 

 

· 分类链接导航

常见的是在首页设置分类链接导航,将网站的主要模块入口放置在主页顶部。如果分类太多可以加入“更多”入口,在更多页面将所有分类全部展现。 图标导航是文字链接导航的衍生,它更适合在触屏手机上,方便用户用手指进行操作。

 

· Tab标签导航

支持HTML5特性的高端机型通常可以实现页面的局部刷新。通过Tab的应用,导航可以在有限的页面空间显示更多的内容。例如 Myspace顶部的导航设计:三个主导航下面各有3-4个二级导航,展现了网站的主要功能。

 

· 相关导航

相关导航一般出现在正文页,推荐与当前页面相关内容,向用户提供类似内容,提升用户粘性。例如百度知道和BBC新闻均在阅读正文页提供了与当前内容相关的推荐。

 

· 页内锚点导航

页内锚点导航是移动终端特有的导航方式之一,它可以使用户快速到达页面顶部、底部和相关板块。例如BBC在底部有返回顶部的快速链接TOP,而谷歌新闻则提供了不同板块之间快速跳转的锚点导航。

 

· 面包屑导航处理策略

面包屑作为一种有效的导航处理策略在移动端使用频率也比较多,但由于移动端屏幕横向宽度有限,通常的处理策略是:保留关键的路径,例如首页、主栏目、关键版块等;如果当前页面标题过长,可以在面包屑上以“本文”或者“正文”表示。尽量控制面包屑在一行之内显示。

 

二、导航内容的组织、缩减和隐藏

· 组织与缩减

导航再设计过程中,必然有导航信息的缩减和重新组织。筛选的标准往往有:

1)用户需求的强度,可以用pv,uv等数据进行判断。

2)与移动使用场景的契合度。例如拍照、语音等功能的入口。

3)用户操作便利程度。

其中第三点往往容易被忽视,亚马逊的移动版在PC版的基础上对导航的内容进行了合并和删减,控制了信息量,使之更适合用户在在移动终端浏览。例如将电器&电脑这一条目在移动端拆分为两个条目(电器、电脑办公),并使子项目的数目由17条缩减到7条。一定程度上也符合了移动端神奇数字7的原则。

 

· 导航内容的隐藏

在导航内容重要性不分伯仲的情况下,常见的处理方式是将相对重要的内容展现出来,而将其它内容放入“更多”,用户可以点击“更多”在当前页面展开或跳转至更多页面。



 

三、导航样式的变化

· 利用系统特性变形

 

常用的变形方式有:

1)  调用系统控件

通过结合移动终端的控件特性,可以在较小的尺寸范围内完成导航的再设计。如上图cnet移动网站中,导航内搜索框用搜索按钮代替,二级项目改用下拉选择器,充分利用了移动端控件特性。

2)利用系统交互特性

Sevnthsin的首页导航设计巧妙地应用了触屏手机可拖动元素的特性。用户拖拽相应的图标到中心圆点位置即可完成导航,进入该网站。

· 动态效果的变化

Web动态导航菜单也叫浮出菜单(fly-out menu)或弹出菜单(pop-up menu),通常是鼠标悬停或者点击导航选项时出现。在PC上动态菜单一般为横向或者纵向展开。

在移动端:

1)  低端机,不支持折叠展开效果,原网页动态菜单通常处理为列表形式。通过按键控制光标逐步移动选择每个子项目。

2)  高端机,处理成手风琴折叠(Accordion)或者层级目录形式,通过点击展开二级项目。

手风琴折叠的优点:不用跳转页面;缺点:次级展示内容有限;

层级目录形式的优点:可以展示较多内容;缺点:需要进入下一级页面。

下图中亚马逊的导航采用了当前折叠展开的方式而ESPN的则采用了层级导航方式。



 

 、总结

在PC端向移动端转移过程中,页面产品的导航设计要对原导航进行删减、隐藏、组织,特别要把握用户本质需求,结合产品使用场景、用户需求、软硬件特性等进行导航的再设计。

 

参考文献:《Web导航设计》 James Kalbach / 李曦琳 / 电子工业出版社

 











本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/745912 ,如需转载请自行联系原作者
相关文章
|
6月前
|
人工智能 自然语言处理 算法
基于Qwen的法律领域问答方案(Agent+代码生成)
第三届琶洲算法大赛由广州市政府与中国人工智能学会联合主办,聚焦AI大模型和AIGC热点,吸引超5000支队伍参赛。本文提出基于Qwen的Agent+代码生成方案,通过问题重写、命名实体识别、意图识别等步骤,实现法律问题解答、案件信息查询等功能,支持自定义接口以满足不同查询需求。方案利用大语言模型的语义理解和函数调用功能,确保答案可控生成,并已发布于Qwen-Article仓库。
|
Kubernetes 测试技术 应用服务中间件
基于 Nginx Ingress + 云效 AppStack 实现灰度发布
本文将演示结合云效 AppStack,来看下如何在阿里云 ACK 集群上进行应用的 Ingress 灰度发布。
65251 25
|
7月前
|
算法 调度 UED
深入理解操作系统:进程管理与调度策略
操作系统作为计算机系统的核心,其进程管理和调度策略对于系统性能和用户体验至关重要。本文将通过直观的代码示例和浅显易懂的语言,带领读者了解操作系统如何有效管理进程以及常见的进程调度算法。我们将从进程的基本概念出发,逐步深入到进程状态、进程控制块(PCB)的作用,最后探讨不同的调度算法及其对系统性能的影响。无论您是初学者还是有一定基础的开发者,都能从中获得有价值的信息。
|
8月前
|
存储 程序员 开发者
Python编程入门:从零开始掌握基础语法
【10月更文挑战第21天】本文将带你走进Python的世界,通过浅显易懂的语言和实例,让你快速了解并掌握Python的基础语法。无论你是编程新手还是想学习一门新的编程语言,这篇文章都将是你的不二之选。我们将一起探索变量、数据类型、运算符、控制结构、函数等基本概念,并通过实际代码示例加深理解。准备好了吗?让我们开始吧!
|
8月前
|
存储 Linux iOS开发
文件系统选择合适的文件系统类型
【10月更文挑战第8天】
634 4
|
jenkins 持续交付 Linux
jenkins 时区设置
背景 直接搭建好jenkins没有留意时间这块,执行job的时候发现,执行时间和服务器时间不对,需要设置时区 步骤 找到jenkins的启动配置,centos在: /etc/sysconfig/jenkins 修改如下: JENKINS_JAVA_OPTIONS="-Djava.
1995 0
|
IDE Java 开发工具
eclipse使用教程
eclipse使用教程
773 1
|
开发者 iOS开发
苹果证书p12和描述文件的创建方法
新建证书完成后另存文件保存下来,证书就已经制作好了,点击另存到想要保存的位置就好了。 如果出现如下错误,是因为已经制作了两个发布类型的证书了,不能再制作了。
|
安全 PHP 网络虚拟化
windows内存取证-简单
作为 Security Blue 团队的成员,您的任务是使用 Redline 和 Volatility 工具分析内存转储。您的目标是跟踪攻击者在受感染计算机上采取的步骤,并确定他们如何设法绕过网络入侵检测系统“NIDS”。您的调查将涉及识别攻击中使用的特定恶意软件系列及其特征。此外,您的任务是识别和缓解攻击者留下的任何痕迹或足迹。
|
监控 负载均衡 安全
亿级流量架构网关设计思路,常用网关对比,写得太好了。。(2)
本文准备围绕七个点来讲网关,分别是网关的基本概念、网关设计思路、网关设计重点、流量网关、业务网关、常见网关对比,对基础概念熟悉的朋友可以根据目录查看自己感兴趣的部分。
3946 7
亿级流量架构网关设计思路,常用网关对比,写得太好了。。(2)