网页设计实例:超级下拉导航菜单

【摘要】

导航菜单不一定是一个文字链接的简单集合,它可以丰富地表示导航信息的层级, 甚至反应整个网站内容的层次结构。由于普通下拉菜单存在很多可用性问题,促使Mega drop-down menu应运而生,由于这种菜单真的很牛X,所以我叫它超级下拉菜单。相关测试证明了超级下拉菜单克服了普通下拉菜单的缺陷,值得推荐广泛使用。

【正文】

首先结合实例,我们先分析一下超级下拉菜单是什么样子的。

1.巨型的、二维的面板将导航选项明确的信息分组;

2.通过布局、版式和图标等手段来组织导航选项的内容;

3.一次性、快速地发现所有信息,无需滚动;

4.当主导航在页面顶部时,可垂直或水平展开菜单;当主导航在页面左侧时,可以飞出的形式展开菜单。

其次,我们来看看超级下拉菜单之于普通下拉菜单的优势。

1.一目了然

对于大型网站来说,普通下拉菜单通常隐藏了大多数用户需要看到的选项。虽然通过滚动可以解决展示的问题,但由于用户无法直观比较所有的选项,他们不得不依赖短期记忆来记下扫视过的信息,记忆力的好快直接影响了完成任务的效率。尤其是下拉菜单过长时,普通下拉菜单就更让人苦恼。

而面对复杂的网站(尤其电子商务网站)超级下拉菜单充分体现了“一目了然”的原则,全部信息尽收眼底,用户无需承担记忆的负担。

2.明确分组

普通下拉菜单层级和分组都不明确,一般是在二级菜单名称前加一个“ – ”,或者缩进处理。

而超级下拉菜单由于包含的信息众多,所以从信息组织、布局、视觉表达上均强调了选项之间的层级和分组关系,帮助用户了解他们的选择。

3.信息可视化

普通的下拉菜单一般只适用文本链接,我们需运用排版、文本样式来区分不同选项的层级关系和重要程度。

而超级下拉菜单可以通过使用图标、图片、提示等丰富的形式,让选项信息可视化,更直观,更容易理解。在windows Word 2007的下拉菜单中用图标代替了文本,且鼠标移上每个图标时显示提示信息,帮助用户做选择。

接着,重点切具体地研究下超级下拉菜单的应用规则。

我所说的规则是针对超级下拉菜单的,对普通下拉菜单同样适用的规则此处省略××字。

1.响应速度

响应速度是设计用户界面时要重要考虑的因素之一,之于超级下拉菜单也不例外。一般界面元素必须在短时间(0.1秒内)作出反应,好让用户觉得是他们操作导致了屏幕上的变化,过慢的响应使他们感觉操控电脑与自己无关,所以响应需要及时。但是针对超级下拉菜单的特点,速度过快也不太好,用户要浏览的信息众多,如果鼠标不小心移出菜单就关闭菜单的话反而干扰用户的操作。

因此,在设计中我们应该注意响应速度的设置,并且针对不同的系统和浏览器予以测试,保证它的可用性。如何设定这个时间呢?根据尼老爷多年的实验得出以下建议:

A.鼠标在导航的某个选项上悬停0.5秒。

B.如果鼠标仍停在这个选项,则需要在0.1秒之内展开超级下拉菜单。

C.如果鼠标移出导航选项,且停留在导航以外区域超过0.5秒,则在0.1秒内收起超级下拉菜单。

D.对角线原则:如果鼠标如下图的路径左上至右下滑行,期间会移出导航选项和菜单的区域,在这种情况下应该保持超级下拉菜单的展开状态。虽然多数用户不存在这个问题,但是针对老年人和行动不便当用户应该适当的加长这个时间。

2.合理的组织菜单中的众多信息

超级下拉菜单包含的信息从形式上有文本、链接、图标、提示等,从内容上又包含多级导航选项、网站流程、具体的产品信息等,合理的组织这些信息,明确了分组,才能是超级下拉菜单发挥真正的作用。从主要分组的准则是:

A.按照信息的相关度打包。例如可以通过卡片分类的方法研究用户心智模型,从而将相关度高且用户认可的信息集合在一个组。
B.保持中等水平的粒度。不要在一个分组提供过多的选项,降低用户扫视这些信息的时间。相反,也不要划分的太细,这样用户需要花更多时间去了解每个分组的含义和区别。

C.使用简洁、描述性、标签化的文案。Web产品的文案有个准则:让用户在扫读时通过关键词抓住意思,避免使用专业术语。
-使用简洁、直白的文案;
-不要在同一个菜单中使用雷同的用词。

D.按信息分组布局。可以根据分组信息的重要性或使用频度来排序、布局,并通过视觉手段明确分组和层级关系。

E.不要出现重复的选项信息。不要让用户困惑,去除冗余的信息。

3.保持简单有效

按照可用性的标准,让超级下拉菜单“保持简单”,我们可以在菜单上做很多事,但并不意味着我们应该这么做。

A.用户真正需要的是一次点击达到目的,不要为了使菜单看上去很高端就乱用花俏的交互效果和功能。

超级下拉菜单是一个快速跳入跳出的控件,而不是对话框,并非越复杂越好。有的超级下拉菜单有右上角会有一个关闭按钮,用户需要快速的点击-查询-跳转,当用户将鼠标移动到导航的其他选项或页面其他区域时,当前的菜单会自动关闭,所以这“关闭”是没有必要的。而对话框可以很复杂、很炫,如果他们不想用了就关掉它,嫌它碍事可以挪到其他位置。

B.超级下拉菜单适用于网站的导航、浏览,对那些需要持续可见的、不能被中断的操作是不适用的。

举个反例,有的网站把导航栏中“我的帐户”登录设计在一个下拉菜单中,用户在填写表单的时候鼠标可能会移到菜单外,于是菜单就收起不见了,这个设计就妨碍了用户的操作。简单而有效的方案是直接把“我的帐户”登录链接到一个全新的页面。此外,全局搜索框也是个例子,没人会把它放在一个下拉菜单里,当然下图是个意外。

C.尽可能的避免信息过载。

不要因为超级下拉菜单巨型、有很多空间就扔很多的信息进来。越少的选项信息就意味着越少的扫读时间,同时减少理解的成本,少出错。

4.无障碍操作

提高超级下拉菜单无障碍操作,可以通过以下几种方法:

A.简单:不要妨碍下拉菜单的访问,使导航中的每个选项保持可点击,指向的页面链接也是正确的。

B.快捷:通过快捷方式访问。例如Word2007中,按一个字符选择以及菜单中的项目,并显示相应的超级下拉菜单。在菜单的每个选项旁边显示快捷提示。这样用户通过一两个字母就可以顺利快速的操作,无需记忆,而且理解成本更低。

C.兼容:完成超级下拉菜单的设计后,实现阶段我们应该注意显示器和浏览器等的兼容问题。保证大多数的用户可以顺利浏览到超级下拉菜单的所有信息。

【后记】昨天在工作中遇到一个关于导航的问题,一小撮er不明真相的群众就“是否需要引入超级下拉菜单”的话题热烈讨论。本想作为论据把尼老爷的文章翻译一下的,不过看了看太麻烦,还是在自己消化的基础上小结了一下。如有跑偏,请大力拍砖^_^。

时间: 2024-10-22 21:12:58

网页设计实例:超级下拉导航菜单的相关文章

CSS+DIV设计实例:纯CSS制作下拉导航菜单

css|菜单|设计|下拉 纯CSS制作的下拉导航菜单-这是一个老外的作品,基本上全是用CSS+HTML写出来的,值得大家学习 以下是引用片段:<style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;lis

纯CSS实现超简单的二级下拉导航菜单代码

本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: 具体代码如下:   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

jQuery实现淡入淡出二级下拉导航菜单的方法_jquery

本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,鼠标移动到包括二级子菜单的主菜单上,会立即渐显出二级的子菜单,鼠标在二级子菜单上划过,子菜单项的背景会改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/ 具体代

jquery 竖向二级下拉导航菜单

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery 竖向二级下拉导航菜单<

jquery实现可伸缩的竖向下拉导航菜单

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>可伸缩的竖向下拉导航

JS+CSS实现简单的二级下拉导航菜单效果_javascript技巧

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

利用.net控件实现下拉导航菜单制作的具体方法

这篇文章介绍了利用.net控件实现下拉导航菜单制作的具体方法,有需要的朋友可以参考一下,希望对你有所帮助   今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下: 将鼠标移到父菜单上弹出3个子菜单,而且每个子菜单都有超链接. 以下是我自己做的代码: 复制代码 代码如下:     <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="10

使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效_jquery

这是一款仿windows10开始菜单的下拉导航菜单特效.该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果,它的代码简洁,效果非常时尚. 查看演示      源码下载 该下拉菜单的HTML结构非常简单,基本的HTML结构如下: <div id="top-bar" class="top-bar"> <div class="bar"> <button id="navbox-trig

asp.net 控件制作下拉导航菜单

asp教程.net 控件制作下拉导航菜单 今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下: 将鼠标移到父菜单上弹出3个子菜单,而且每个子菜单都有超链接. 以下是我自己做的代码: <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="100%"         Font-Size="14px" ForeC