美文网首页用户体验UI设计创业扶持
10条必知的网页导航菜单设计原则

10条必知的网页导航菜单设计原则

作者: 张安松 | 来源:发表于2017-06-27 11:32 被阅读46次

网站的导航菜单是用户阅读了网页后想进一步了解网站其它部分时最重要的指示,对留住用户至关重要。

网站的导航菜单是用户阅读了网页后想进一步了解网站其它部分时最重要的指示,对留住用户至关重要。设计导航菜单的方法有许多,每个网站都必须有自己的导航菜单。想要设计出一个出色的导航菜单,设计师必须突破传统限制来展示自己的创意。网站的导航是决定这个网站可用性的主要因素之一。

容易找到

视觉上要容易区分并且能让用户一眼就能找到,导航文本与你的正文文本不要使用相同的颜色,字体和大小。导航文本应该突出和显眼。对于菜单按钮,使用高对比度颜色和清晰的文字。导航区域要保持一定的大小,用户容易发现。导航的位置要使用惯用的位置,例如页面顶部,左侧等。

简单

一定要简单易操作,能够帮助你的用户快速查看哪些信息可用,以及在哪里可以找到所要查找的内容。用户需要能够预测你的网站的工作原理,而无需学习怎么做!如果他们需要考虑如何做,那么你已经失去了他们!避免让用户点击一个很小的倒三角然后展开二级菜单的方式,他们可能根本找不到它。

可点击

确保所有导航中元素可点击。在导航中使用多个分类目录时,所有标题元素都应该是可点击的链接。即使使用下拉菜单,点击子类别链接也可能是访问者的自然倾向。不要觉得这一条可笑,我经常发现有些网站的导航点击后无法跳转。

一致性

尽量在所有页面中使用相同的导航模式,这是非常重要的,因为没有一致的设计,用户可能会认为他在另一个网站。确保使用相同的导航模式,以便用户可以轻松地访问你的网站而不会丢失。

清楚

你的菜单文本必须描述清楚,使用简单明了的术语,不要让用户思考这里的文本意思是什么,保持你的文字简短,具有描述性并且重点突出。如果需要五秒以上的时间来思考文本含义再去点击链接,那么这将会造成糟糕的用户体验。

保持简洁

可以在垂直导航中添加更多的项目,但是主菜单中的项目不必过多,会分散用户的注意力。一般最好不要超过8项。

互动

反馈对于任何交互都是至关重要的。当人们点击或鼠标悬停在菜单项时,请确保提供下一步操作的指示。及时给予用户任何操作的反馈能让用户更愿意去点击导航。你可以通过更改链接的文字颜色,背景颜色,或对其加粗,使其与其它内容不同。

排序

需要确定网站提供的主要功能,最重要的是什么,将最重要的项目按照重要度放在主导航中,次要的项目可以放在二级导航中。

风格

极简主义仍然是网页设计的趋势,独特视觉风格会使你的菜单看起来很酷,但要确保它与整个网站的整体设计相匹配。

无障碍

网站可访问性永远是衡量一个网站质量的重要标准,请确保对障碍人士友好,如果你希望使用大量酷炫的 CSS 技术,请同时考虑对屏幕阅读技术等的兼容。

下面是一个导航设计的检查表,你可以按照下表对你的导航菜单进行检查:

1. 导航位置在页面上容易找到

2. 只需要使用鼠标滑过,鼠标点击就可以操作整个导航菜单

3. 每一个菜单项都是可以点击并正常跳转的

4. 导航文字简短清晰

5. 整个网站只使用一种导航菜单

6. 鼠标移到对应的菜单项上时能凸显对应项

7. 导航的菜单项不超过8个

8. 导航的菜单项已按照重要度排序

9. 导航的风格和网站整体风格一致

10. 导航菜单项可以被屏幕阅读器正确识别

相关文章

  • 10条必知的网页导航菜单设计原则

    网站的导航菜单是用户阅读了网页后想进一步了解网站其它部分时最重要的指示,对留住用户至关重要。 网站的导航菜单是用户...

  • 10条必知的网页导航菜单设计原则

    网站的导航菜单是用户阅读了网页后想进一步了解网站其它部分时最重要的指示,对留住用户至关重要。设计导航菜单的方法有许...

  • 浮动

    网页布局 网站基本上都包括网站导航、网页主体、网站版权部分这3个部分。网站的导航一般包括网站logo、导航菜单及一...

  • Meterial design与Ant design规范对比分析

    价值观及目标 设计原则 设计原则-布局 设计原则—导航 设计原则—视觉(颜色) 设计原则—交互模式 设计原则—动效...

  • 移动应用UI设计模式图示

    移动应用UI设计模式: 1.导航设计模式:主要导航和次要导航模式。 1)主菜单导航模式: 跳板式 Springbo...

  • 重新认识组件-面包屑导航

    什么是面包屑导航 面包屑导航是网页设计中极为常见的一种设计方法,我们经常使用面包屑导航来作为网页导航框架中的辅助手...

  • Android开发(37) 使用DrawerLayout实现抽屉

    概述 最近流行 左侧抽屉式的导航条菜单,知乎,360,QQ都使用了这样的导航菜单,我们也了解下: Android ...

  • 页面元素之导航栏

    1、导航栏(菜单) 导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存...

  • CSS实现常用菜单(一)

    在写网站的时候,每个网页的导航菜单都是必不可少的,下面我们就把实际开发经常会遇到的菜单总结一下。 1、普通菜单 把...

  • 第38周+《交互设计 - 常用导航控件集》+林灿业+新学霸社群

    梳理了产品交互设计中常用到的导航栏控件,有系统级别的导航、页面级别的导航,具体如下: 1、导航菜单 - 系统级别 ...

网友评论

    本文标题:10条必知的网页导航菜单设计原则

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