根据组件的用途，可以分为六大类：Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。
导航系统相当于整个网站的主架构，导航系统起着组织内容和功能的作用，让它们按照产品的信息架构图进行连接，展现在在用户面前，导航将零散的内容和功能组织成了一个完成的有结构的系统。
NavMenu导航菜单
定义：将网站的信息架构分组归类并以导航的形式展示给用户，方便用户查找所要获取的信息。
使用场景：
1.需要提供一个流量分发的入口时
2.网站各个功能聚合时
例如，拉钩网顶部导航，分为首页、公司、校园、言职。
顶部导航：顾名思义导航在顶部，这也是目前网站最常见的主导航模式。顶部导航一般会含有个人中心。
如果导航里面存在二级导航则可以聚合在下拉菜单里面，鼠标hover出现下拉菜单，选择下拉菜单里面的选项，则导航栏的标题变为对应选择的导航标题。
侧边栏导航：多用于二级导航。侧边栏导航里面的功能一般会进行分组，一般默认展示出来。为了节省内容区域空间，有的侧边栏会提供点击收起左侧栏功能。
侧边栏的一级标题根据是否有承载的页面，如果没有的话，通常置灰，点击无交互事件。
混合式导航：一般用于复杂的多类目的网站结构。鼠标hover一级分类，出现对应的下一级分类。
Breadcrumb面包屑
定义：显示当前页面在系统层级导航中的结构和层级，并能进入各个路径结构的导航。
使用场景：
1.当系统拥有超过两级以上的层级结构时；
2.告诉用户所处于的层级关系；
3.灵活的在各个路径层级中切换
例如美团web，通过北京美食进入某一个产品的详情页，就出现如下图的面包屑导航。
基本样式：这是是常见的面包屑样式。主要使用场景是针对于路径较短。
超长路径情况：全路径很长，需要收起，用三个点表示，点击三个点可展开全部。
Tabs标签页
定义：并列层级切换的导航组件
使用场景：
1.非主导航
2.切换页面视图
3.并列层级切换的小导航类
例如美团网站后台的我的订单，tabs标签页，用户可以快速的进行切换不同导航下的视图。
基本样式：有含icon和不含icon两类。含有icon则导航的视觉感知更明显。
侧边栏样式：这种可定位页面内容，即点击图中的标签页2则页面固定到标签页2的内容， 也可以用于在不同视图的切换。
pagination分页
定义：用于列表、feed流分步加载的组件
使用场景：
1.信息量过大，加载时间过长时
2.进行快速切换其他加载部分的组件
例如百度搜索，底部就有分页组件，有了分页组件，不需要一次性把所有的信息全部加载拉出，提升产品的性能，同时用户可以在不同部分的信息进行切换，高效快捷。
基本样式：分页组件中最简单的样式，通过点击页码、上一页和下一页完成切换。当在第一页时，没有上一页操作。保持分页有6个跳转页，同时选中态的页保持在第2个。
跳转样式：和基础样式唯一的不同是增加了输入页数跳转，同时处于第1页时上一页置灰。
自定义页面列表样式：可以自定义一个页面的列表可以展示多少条
steps步骤条
定义：引导用户按照流程完成任务的导航条。
使用场景：
1.复杂任务需要分拆步骤时
2.不低于两步
横向样式：适用于多个步骤的业务场景。
纵向样式：适用于较多步骤的业务场景。
dropdown 下拉菜单
定义：将功能入口聚合并隐藏，通过下拉菜单调出。
使用场景：
1.操作聚合
2.功能入口隐藏，点击或者hover出现
鼠标hover出现下拉菜单样式，点击下拉菜单里面的选项，进入对应选项的界面。
设计规范 | Web端设计组件篇－级联、数字输入、单复选框和开关
原文始发于微信公众号（吴轶）：Web端设计组件篇－导航类
评论0