设计导航
网络是真实世界的虚拟映射,我们在网络上浏览就好像在逛商店一样。我们进入网站:
通常是为了寻找某个目标
一个耳机? 一部电影? 一条资讯?会决定先询问还是先浏览
在现实世界,我们会先问问导购。用户在web上的等价服务是搜索。用户如果选择浏览
用户需要在导航栏之间选择,点击。运气不错的话可以在几次点击之后就找到自己想要的内容
关于网络浏览的事实:
- 感觉不到大小。即使在频繁使用某个网站之后,除非它特别小,否则我们很难感觉到它有多大( 50个页面? 1 000个页面? 17 000个页面? )。我们只知道,可能有很多的角落我们从未涉足过。同一本杂志,一间博物馆,或者一家百货商场相比,在那些地方你通常有个大概的“ 视野之内”/“视野之外”的规模估计。
实际上,你很难知道是否已经看到了这个网站上所有感兴趣的内容,因此也很难知道什么时候该停止寻找。- 感觉不到方向
在网站上,没有左边,也没有右边,没有上边,也没有下边,我们可能会说往上(Up),往下( Down),但我们的意思是层次结构的上一级和下一级,即更一般或更具体的层次。- 感觉不到位置
在物理空间里,当我们四处走动时,不断积累着对周围情况的了解,我们会知道东西的位置在哪儿,然后抄近路到达那个地方。
这就是书签如此重要的原因。也是为什么后退按钮是浏览器上用的最多的按钮的原因。
导航跟两件事有关。从一个地方到另一个地方,还有你当前所存处的位置。
导航容易被忽视的用途。
- 告诉我们这里有些什么。
- 告诉我们如何使用网站。
- 给了我们对网站建造者的信心。
持久性导航
站点名称
一种独特的字体,一种可以识别的图形栏目
栏目就是一级导航,通常鼠标放上去会出现一级导航下的二级导航实用工具
帮助我们使用站点,通常包括注册,登录,帮助,站点地图,购物车等等主页
持久导航最重要的袁元素之一就是主页的按钮和链接。-
搜索
避免:- 花哨的用词
- 指示说明
- 选项
页面名称
名称引人注目,和点击的的链接一致
image.png
所处位置
image.png
面包屑
下面是面包屑设计中的几项最佳实践:
把它们放在最顶层。面包屑在它们出现在页面顶端, 高于所有内容时最有效,
- 使用“>”对层级进行间隔。各种尝试似乎已经确认,最好的分隔符就是大于号(>),可能是因为“>”在视觉上就暗示了沿着层级向前移动的动作。
- 加粗最后一个元素,层级清单中的最后一个元素应该是当前页面的名称,让它变粗正好得到了应有的突出。而且因为这就是你所在的页面,因此不用添加链接。