搜索

去翻从简!一起让导航变得更轻!

2012-3-14 09:28| 阅读次数: 3165| 发布者: w123

摘要: 网站的导航是互联网产品中应用最广泛的基础元素之一,引导用户了解到网站的内容结构进而找到所求。作为基础控件,导航看起来简单,但却是产品设计中最复杂繁琐的一部分。因为我们想要让网站结构更清晰、想要向用户传 ...
  B. 合并导航层级

  导航的庞大往往是由于层级过多导致,那么减少层级的一种有效方法就是合并导航层级,例如把二级和三级导航合并,就减少了三级导航,让导航轻便一些。
 

 

 
  如上图,图片库包括动态图片和静态图片,每个分类下面又有小的分类,这样的导航层级在产品中十分常见,略显臃肿。那么通过合并层级就可以把导航精简到两级,处理后的导航如下:
 
 

 
  瘦身后的导航看起来结构也比较清晰,而且没有影响到信息的传达。

  对比下美团和糯米的导航:
 

 

  美团把注册登录和个人信息等功能性导航和网站主导航做了合并处理,为网站首屏节约出了宝贵的空间。

  C. 隐藏部分导航

  简化导航结构的第三种方法是把部分层级或者导航内容隐藏起来,使得导航看上去轻便一些。

  当导航里的内容特别多的时候,可以选择把主要内容留下,次要内容隐藏的方法来处理。例如:
 

 

  当页面空间有限,无法容纳更多层级的时候,可以选择把次层级隐藏收起,鼠标滑过或者点击后触发此层级的方法处理,这样的例子有很多:
 



  2. 优化形式

  有些时候,我们无法判断用户在浏览产品或网站时是否是线性思维,也无法对导航结构进行再精简,那么我们怎样让导航再“瘦”那么一点呢。

  A. 将一维导航变为二维导航
 

 
 



  将一维导航转化为二维导航,能够有效的减少层叠导航带给人的重复感和复杂感,能够让操作富有变化,进而提升体验。

  类似的列子也有很多:

 

  B. 将复杂的层级单独处理

  当某一层级的导航内容丰富到一定程度,他就可以充当一个独立控件来单独设计了,他们可以作为页面的元素来单独存在,可能看起来都不太像是导航。

 

  3. 打磨UI

  说到让导航轻盈,UI是最为常用的手法,在此笔者不做太多的陈述,但是需要注意的是,导航的轻盈与否与导航所处的页面以及重要程度有很大关系。比如在首页,用户需要对页面有整体认知的情况下,导航的UI就不能改太轻薄,而是应该先声夺人,让用户直接注意,并浏览发现所求;同样的,当用户进入到相关的页面开始浏览时,导航的作用就是路灯和司南,这时的导航就不如在首页时那样重要,那么导航就需要轻轻的、悄悄的在用户旁边随时等待着被注意并使用。

  电商首页的导航UI上吸引了不少眼球,但是到了结果页导航变成了几乎没有装饰的效果,因为在结果页,用户主要是来浏览产品,所以导航的作用就弱了。

 

 



  综上,是笔者对导航塑身的一点认识,清晰的导航能够让页面简单易用,反之也会大大影响页面的信息流畅度,所以在导航设计时要精心处理,一点浅见与大家分享。

鲜花

握手

雷人

路过

鸡蛋

最新评论

回顶部