web导航设计详解(前端和网站设计详解)

seoxin 09-04 14:45 11次浏览

根据组件的用途,可以分为六大类:Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。

Web端设计组件篇:导航类

导航系统相当于整个网站的主架构,导航系统起着组织内容和功能的作用,让它们按照产品的信息架构图进行连接,展现在在用户面前,导航将零散的内容和功能组织成了一个完成的有结构的系统。

一、NavMenu导航菜单

定义:将网站的信息架构分组归类并以导航的形式展示给用户,方便用户查找所要获取的信息。

  1. 需要提供一个流量分发的入口时
  2. 网站各个功能聚合时

例如:拉钩网顶部导航,分为首页、公司、校园、言职。

Web端设计组件篇:导航类

顶部导航:顾名思义导航在顶部,这也是目前网站最常见的主导航模式,顶部导航一般会含有个人中心。

如果导航里面存在二级导航则可以聚合在下拉菜单里面,鼠标hover出现下拉菜单,选择下拉菜单里面的选项,则导航栏的标题变为对应选择的导航标题。

Web端设计组件篇:导航类

侧边栏导航:多用于二级导航。侧边栏导航里面的功能一般会进行分组,一般默认展示出来。为了节省内容区域空间,有的侧边栏会提供点击收起左侧栏功能。

侧边栏的一级标题根据是否有承载的页面,如果没有的话,通常置灰,点击无交互事件。

Web端设计组件篇:导航类

混合式导航:一般用于复杂的多类目的网站结构。鼠标hover一级分类,出现对应的下一级分类。

Web端设计组件篇:导航类

二、Breadcrumb 面包屑

定义:显示当前页面在系统层级导航中的结构和层级,并能进入各个路径结构的导航。

  1. 当系统拥有超过两级以上的层级结构时;
  2. 告诉用户所处于的层级关系;
  3. 灵活的在各个路径层级中切换。

例如美团web,通过北京美食进入某一个产品的详情页,就出现如下图的面包屑导航。

Web端设计组件篇:导航类

基本样式:这是是常见的面包屑样式,主要使用场景是针对于路径较短。

超长路径情况:全路径很长,需要收起,用三个点表示,点击三个点可展开全部。

Web端设计组件篇:导航类

三、Tabs标签页

定义:并列层级切换的导航组件

使用场景:

  1. 非主导航;
  2. 切换页面视图;
  3. 并列层级切换的小导航类。

例如美团网站后台的我的订单,tabs标签页,用户可以快速的进行切换不同导航下的视图。

Web端设计组件篇:导航类

基本样式:有含icon和不含icon两类。含有icon则导航的视觉感知更明显。

Web端设计组件篇:导航类

侧边栏样式:这种可定位页面内容,即点击图中的标签页2则页面固定到标签页2的内容, 也可以用于在不同视图的切换。

Web端设计组件篇:导航类

四、pagination分页

定义:用于列表、feed流分步加载的组件。

使用场景:

  1. 信息量过大,加载时间过长时;
  2. 进行快速切换其他加载部分的组件。

例如:百度搜索,底部就有分页组件,有了分页组件,不需要一次性把所有的信息全部加载拉出,提升产品的性能,同时用户可以在不同部分的信息进行切换,高效快捷。

使用场景:

  • 暂无推荐