恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
web导航菜单,还有哪些可行性的方案
0.0°
2017-08-22 原创文章 经验/观点 举报 6390 27 12 2

写在前面:

      对于双休,把自己好好的放纵一把,这种诱惑实在难以抗拒。可是倘若真的躺尸一天,或者综艺、追剧,还是农药,心里又怎能心安。


      倒不如,撸起秀来,“学习一把”。你说,不是吗?也花不了多少时间,毕竟那样更心安理得。


      因为做得更多的项目还是以B端产品为主,业务庞大、复杂。而web导航菜单问题就是其中的一个小知识点。所以想结合自己项目中的思考做一个总结整理、分析,从中去发现一些更加深入的思考,在过程中有所收获。


web导航菜单还有哪些可行性方案:


分为以下几大部分:

1.web导航菜单有哪些基本的形式,各自有哪些特点?

2.web导航菜单,还有哪些可能性?


1.web导航菜单有哪些基本的形式,各自有哪些特点


1.1水平导航


因为导航菜单存在顶部(最不容易忽略的地方),易读性更强,最常见也最容易上手。

Image title


优点:减少对内容区的干扰,可以更好的强化内容区沉浸式的阅读。因为留给内容区域的空间是最大的,所以对于横向版面要求比较大的内容(例如:后台信息总览大图、大型的列表、类似基于图片的业务)比较适合。


缺点:横向tab数量、以及没给tab的字符数都存在限制。另外层级扩展性也相对较差,单单水平导航层级最好不要超过2级。


思考点:水平tab在视觉形式选择上,需要注意什么?


下面是5种tab样式:

Image title

当导航菜单字符书较少时,适当的强化视觉效果(图标,标签,下划线),可以做出适当的差异化,但是不能增加视觉负荷(因为加图标而加图标,图标语义不够,反而显得拥挤)。


1.2垂直导航


优点:限制性更小(菜单字符数,菜单数量),另外具有一定的扩展性(图标+文字,单纯图标,两者之间的切换);菜单的自定义;菜单层级可以更加深(树状导航)。

缺点:菜单层级上仍然存在限制,占用内容区域,减弱了沉浸阅读。


1.3混合型导航


混合型导航主要解决了水平/垂直导航的菜单层级问题,在复杂的B端产品较为常见。


2.web导航菜单,还有哪些可能性


2.1弹出式导航栏


例子:https://www.weareimpero.com/


随着响应式技术普及,弹出式导航渐渐走出传统陈旧的导航方式,导航移动化。减少了页面干扰元素,为页面腾出更大的空间。适用层级浅,注重追求极致的的视觉体验的产品。

Image title

2.2首屏导航栏


因为网站信息层级浅,这种新型导航并不会引起网站功能性的不适,反而起到一个脱颖而出的效果。

Image title

例子:http://create.bang-olufsen.com/create/project/loud


以上两个例子,因为信息层级浅,新式的导航给web带来了特有的调性。但是对于B端产品,这种方式是完全不适用的,多而深的层级下是不是就没有其他的可能性了呢?


2.3B端产品导航菜单可能性1:“浏览器菜单”


适用信息架构“浅而广、并没有明显的优先级“的产品。为了导航的简洁性,提高效率,菜单根据用户需要显示。

Image title


2.4B端产品导航菜单可能性2:“当前导航菜单”


适用信息架构“广而深”的产品,“当前导航菜单”可以在广而深的菜单中独立出来,便于用户的业务操作,减少因为菜单切换带来的行为负荷,也一定程度的减少了视觉负荷。


Image title


2.5B端产品导航菜单可能性3:Windows 10风


模块之间完全相互独立,区分明显,并且切换频率低,内容区对于沉浸式的操作要求较高(例如视频业务)。

Image title


2.6B端产品导航菜单可能性4:我的导航栏


例如OA系统,模块海量级,深不可测,用起来尤其痛苦。我的导航栏+树型导航更配。


Image title


最后:

抛砖引玉,如果给你带来一些帮助,或者思考,那是极好的。

你怎么看?欢迎探讨,互相学习。


Image title




更新:2017-08-22

收藏

27人已收藏

  • 3

    作品

  • 14

    粉丝

  • 21

    关注

  • Axure使用心得(进阶版)附元件库下载
  • 功能性动效,如何助推用户体验?

    猜你喜欢

      2017-08-22 原创文章 经验/观点 举报 6390 27 12 2

      web导航菜单,还有哪些可行性的方案

      0.0°

      你确定要举报web导航菜单,还有哪些可行性的方案

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      27
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录