设计一个成功的导航菜单:想法和启示
就像在现实生活中一样,网页设计中的导航非常重要,并且在网站的可用性以及用户体验中起着重要的作用。
您必须先知道自己的位置,才能到达目的地。
网站上的导航菜单就像街道上的路标或购物中心的楼层目录。
看起来怎么样?
但是,如何在网站中进行有效导航会是什么样子?
如今,您可以看到具有有趣,创意和不寻常设计的许多不同类型的导航菜单。
还将提供一些有效的导航菜单示例,以使您了解如何计划下一个设计。
我将揭示一些简单的技巧,您可以使用这些技巧来改善网站的导航和可用性。
今天,我想分享我对导航在网页设计中的重要性的看法和知识。
信息架构
您必须弄清楚网站提供了哪些功能,最重要的功能以及可以放置在信息层次结构中较低级别的功能。
坐下来集思广益讨论网站的信息体系至关重要。
导航计划应从信息架构开始。
您可以在Cameron Chapman在“ 信息体系结构101:技术和最佳实践”一文中阅读有关信息体系结构的更多信息。
信息架构包括功能,用户需求,站点地图,测试和线框 。
使用用户支持的技术
在构建导航栏时,避免使用Flash,JavaScript,jQuery或其他任何有可能禁止访问您的网站导航的风险,或者至少确保它们能够正常降级。
有关javascript正常降级的更多参考,请参阅关于CSS和Javascript的10种有用的后备方法的帖子。
使用简单易用的条款
任何花费用户一秒钟或两秒钟以上才能弄清楚的链接都可能不适合使用。
最好使用易于理解的简单明了的术语,而不是将导航菜单保留为仅限行业的术语。
如果用户需要单击链接以弄清楚链接将导致什么,那么这将给访问者带来不良的用户体验。
例子
用户不会感到困惑,因为他们已经具有使用此类菜单的经验。
Larissa Ness网站的导航菜单中的术语易于理解并且足够通用。
这是csupport上使用常用术语的干净,清晰的网站导航菜单的另一个很好的示例。
这个术语可能表示作品集或作品,但不清楚,访问者别无选择,只能单击签入。
创意代理商“ Eighty8Four”使用“陈列室”一词,这可能会使访问者感到困惑。
标准化导航设计
确保使用相同的导航模型,以便用户可以轻松访问您的网站而不会迷路。
这一点非常重要,因为如果没有一致的设计,用户实际上可能会认为他在另一个网站中。
在所有页面中使用相同的导航模型 。
唯一的区别是颜色指示器,该指示器显示访问者当前所在的页面。
如下所示, Bluegg使用简单干净的导航设计,在所有子页面中都保持不变。
指出你在哪里
您可以通过更改链接的背景,页面名称的颜色或在导航菜单中将文本变为粗体来使其与众不同来实现。
让用户始终知道他在哪里很关键。
该指示器还可以用作细微的设计更改,例如,通过使用不同的导航背景 ,可以使人感觉到其他菜单项已深入。
Austin Eastciders使用不同的颜色和背景来指示用户所在的页面。
简单但有效。
Media Surgery使用较深的颜色作为打开的子页面的指示器。
使用网络约定
大多数用户会单击网站徽标以返回首页,因此可以设计徽标来做到这一点。
Web约定使设计师更轻松地进行设计工作。
都是关于易于使用和直观的网站导航。
如果您不这样做, 您就是在使他们花费时间学习新知识,或者在某些情况下不提供他们期望的公认导航规范,从而给他们带来不便。
您可以在此处了解有关网络约定的更多信息:
测试:参与第三方
当他们浏览您的网站时,请观察他们的喜好,并分析他们寻找所需页面所花费的时间。
您可能需要引入与设计过程无关的人员来进行测试。
务必与曾经使用过Internet的任何人一起测试您的导航设计。
您可能会得到一些意想不到的想法和建议,否则,如果没有运行此测试,这些建议和建议将无法被发现。
如有必要,请进行测试后调查。
为了获得更高的准确性,请更多的人参与,收集数据,对其进行分析和汇总以使其更合适。
提供背景
您可以放置与您链接到的内容相关的小图标或简短说明,以概述该页面的内容。
为了与您的内容和导航保持一致,为网站用户提供了一些上下文,以便他们快速找到所需的内容。
SEO目的
拥有一致的导航不仅可以让用户理解并获得如何浏览您的网站的想法,而且还可以使搜索引擎为您的网站建立索引,这是很好的。
Google喜欢一致的导航。
如果要显示出来,请注意良好的导航设计并获得更多流量。
搜索引擎机器人将在您的网站中进行爬网,以便为您的网站建立索引并将链接放在搜索引擎结果页面中。
免费的导航脚本(CSS和jQuery)
通过添加一些不错的功能并使其易于使用,这些脚本将使您的产品的用户体验更好。
这是您可能对项目有用的最新导航菜单的简短列表。
精美的水平导航展示
检查这些令人惊叹的网站及其导航菜单解决方案,以找到适合您项目的新想法。
最后但并非最不重要的是,一些鼓舞人心的水平导航菜单。
如果您有任何想法或不同意,请在评论部分中分享您的意见。
希望您会发现本文有用和有益。
翻译自: https://www.hongkiat.com/blog/navigation-design-ideas-inspiration/