当前位置:主页 > 网页教程 > 网页制作 > 制作技巧 > 内容欢迎大家投稿

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

时间:2009-11-06 08:40来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

【摘要】

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

【正文】

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

2009-09-30_mega drop down

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.合理的组织菜单中的众多信息

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



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接