欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

网站导航设计指南

发布时间:2018:01:04 02:15:02 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1664个文字,预计阅读时间5分钟
导语
如何设计出“清晰,简单,一致”的导航呢?

  如何设计出“清晰,简单,一致”的导航呢?

  “如果人们在浏览网站时遇到困难,他们就会犹豫是否要回到该网站。”

  你以前可能经历过类似的情况,如果你下载了一个app,却要花时间去寻找你想要的东西,那么你不可能长期呆在这里,甚至不会回来。

  那要如何设计出“清晰,简单,一致”的导航呢?

推荐阅读:网页感知价值研究:UI中的感知价值

  想象一下,你周日早上出去买自己喜欢的巧克力。走进商店,你首先看到的是货品分区的名字挂在墙上。(它们够大,可以在商店的任何地方看到他们)。

  “啊,杂货区。”你一边想一边朝着这个方向走去然后找到了你想要的巧克力。

  在完全相同的场景下,只需一点小小的改动,去掉货品分区,那你可能对巧克力放在哪一无所知了。

  现在,将商店比作你的Web应用程序,将你视为访问Web应用程序的客户。

  当你在访问Web应用程序时,你将经历与商店中相类似的感受,并试图在其中找到一些东西。

  “一个用户没有必要记住他在你的网页应用上浏览的方式,导航应该是在最前面的,而且应该非常明显。”

  网络应用程序和商店之间的一个区别就在于,前者是没有导购站在客户的身边,引导客户。 而导航栏就要充当导购的角色:搜索 - 在搜索框中输入关键字,然后跳到需要的链接列表。

  在Web应用程序中,您可以通过一个层次结构,使用导航栏来作为引导。

  

网站导航设计指南

 

  通常,在整个Web App中都有一个静态全局导航(Global Navigation),其他主要部分都有一个子导航栏。

  导航的两个主要目的是显而易见的:

  帮助我们找到想要的东西,并告诉我们在哪。

  但导航也有一些重要且容易被忽视的功能:

  它告诉我们这里有什么。

  通过让层次结构可见,导航可以告诉我们该应用程序包含了哪些内容,即导航显示的内容!而且,揭示这款应用的功能可能比指导我们更重要。

  它帮助我们如何使用该应用程序。

  导航的主要任务就在于,它会告诉你从哪里开始,以及你要选择什么。如果做的正确,它应该符合你所需要的所有指令。(这听起来不错,但是大多数用户都会忽略其他指令。)

  它让我们对创造它的人更有信心。

  每当我们进入一个网络应用程序的时候,我们都会有一种精神冥想:“这些家伙知道他们在做什么吗?”这是让我们返回应用程序的主要因素之一。

  简单明了,经过深思熟虑后的导航是应用程序可以利用的最佳机会之一,从而给用户创造良好的第一印象。

  为回答如何创建众所周知的“清晰、简单、一致”的导航,我总结了以下网络的基本导航惯例:

  全局导航——什么与为什么?

  现在不要急着往下看,毕竟他会跟着我们的。

  Web设计人员使用“持久化导航”(或全局导航)来描述在应用程序的每个页面上出现的导航元素集合。

  持久的导航——用一种平静、理性的声音说:

  “这个元素在这里。有些部分会根据你在网页应用中的位置而有所改变,但它会一直在这里,,而且总是以同样的方式引导用户。”

  就像商店里的各个部门的名字一样,不管你在哪里,如果你想知道你的位置,你总是会抬起头来,然后你可以以自己的方式找到你最喜欢的巧克力。

  只要导航出现在每个页面的相同位置,并且保持一致的外观,就可以立即确认你仍然在同一个应用程序中——这比你想象中的更为重要,在整个应用程序中保持一致意味着你只需要知道它是如何工作的。

  关键部分:

  关键部分——有时被称为“主导航”——是应用程序主要部分的链接,也是应用程序的层次结构的最高级。

  在某些设计中,持久导航还将包含显示二级导航的空间:当前部分中的小节列表。

  在其他情况下,指向一个名称或点击它会显示一个下拉菜单。而在某些情况下,单击它将带你到该部分的首页,在那里你会发现辅助导航。

  面包屑导航——您的导航指南

  就像“你在这里”的指示器一样,面包屑导航会告诉你你在应用程序的具体位置。

  其作用当然是不言而喻的,不占用太多空间,却提供了一个方便和一致的方式来做你最需要做的两件事情:回到上一个页面或者首页。

  他们之所以被称为面包屑,是因为它们让人想起汉斯在树林里掉落的面包屑,使得他和格莱特尔可以找到回家的路。

  面包屑向您显示从主页到您所在的位置的路径,让你轻松地在应用程序中移回到更高的层次结构。

  很长一段时间,面包屑导航是一个奇怪的现象,只在应用程序中才有大量的数据,但现在它们在UI/ UX中是必不可少的。

  以下是一些最佳实践方法:

  1、置顶

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:设计规范 | Web端设计理念篇

下一篇:Google对话式交互规范指南(四):对话UI设计流程与步骤

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信