小纽扣
之前讲过一篇数据录入的相关组件:《设计B端后台,必须搞清楚这些组件(一)》,今天来看看导航相关的组件。 这篇文章能更好的让刚入门的设计师了解网页导航菜单、标签页、下拉菜单、面包屑、分页、步骤条等功能设计。
 

导航菜单 Menu

导航菜单可以说是一个网站的核心枢纽,用户可以通过它清楚地知道自己所处的位置,以及其他页面的跳转指向。常见的导航菜单有顶导航和侧导航,顶导航能够提供全局性的指引,而侧导航则能够提供更多的层级来满足复杂的网站架构。
考虑到B端后台一般都具有复杂的层级架构,所以推荐优先使用侧边导航。即使产品初期层级划分较简单,侧导航也因为它的拓展性强成为不二的选择。而顶导航可以做为层级补充,在层级较多时添加。
需要注意的是,侧边导航一般分两级,至多三级,但是折叠隐藏第一级即可。
 

标签页 Tabs

标签页常用在内容区域的顶部,用以区分内容上有关联但属于不同类别的模块,比如订单列表的“进行中/已完成/已关闭”。
如果无法判断模块之间在内容上是否有关联,那就在导航菜单Menu无法再进行分级时,再使用标签页Tabs在内容区域进行下一层分级。
标签页Tabs中还有一种很特殊的形式是单选框Radio的按钮形式,类似于iOS HIG中的分段控件,一般用于比标签页Tabs更次一级的分类。
 

下拉菜单 Dropdown

下拉菜单用于将一些次要功能隐藏收纳起来,以保持页面整体的简洁。最常见的就是头像昵称处展开的个人中心,一般账号详情、设置、退出登录都会收纳在此。
此外,当页面中可操作内容过多时,也可以使用下拉菜单。比如列表中对每项内容的“编辑/删除“操作。
 

面包屑 Breadcrumb

面包屑导航用于告知用户到达当前页面的路径,以及便于他们快速向上返回。常用在不新起页面的子级内容中,比如查看列表中某一项的详情时,在详情页面的顶部会有一个面包屑导航以便于返回列表页。
 

分页 Pagination

分页用于数据量较多时分解数据,常见于长列表的分隔。分页最主要的作用就是可以提高列表加载的效率(一次只加载一页的内容)。
除了常见的翻页器分页方式,还有从移动端衍生过来的滑动分页(花瓣也是这种分页方式),不过这种分页形式一般用于以图片为主的列表,不适用于一般的内容列表。当然,这种分页形式超出了导航的范畴,只是说到分页顺带提一下~
需要注意的是,在设计列表页面的时候,很容易忽略分页Pagination。因为在移动端往往是没有这个组件的(移动端一般是滑动翻页),所以我们在做图时要格外重视。
 

步骤条 Steps

步骤条常用于任务复杂或存在先后关系时,将其分解成一系列步骤,引导用户按流程完成。
 

总结

后台常见的导航相关组件一共有6个:导航菜单Menu标签页Tabs下拉菜单Dropdown面包屑Breadcrumb分页Pagination步骤条Steps。他们每个的特点也都很鲜明(比如面包屑是向上返回、下拉菜单是收纳次要功能),不易用混。需要记住的是,利用好这些现成的组件,不要再去造相似的轮子
  
最后,还是奉上各大组件库的官网,里面有各个组件更详尽的呈现形式及使用方法。
Ant Design:http://t.cn/RClMDfd
Element:http://t.cn/Et5YQE0i
View:http://t.cn/R3aImLu
 
注:
1、文中标粗部分均特指某一种组件。
2、各组件库组件中文名各有不同,以英文名为准。 
  

原文地址:海盐社(公众号)

作者: 海舟

转载请注明:学UI网 » B端后台组件详解(二)——导航

登录收藏
 
你可能喜欢的:
数据可视化大屏设计经验分享【高级篇】数据可视化大屏设计经验分享【高级篇】
B端产品 — 秒级监控B端产品 — 秒级监控
系统后台如何“查询”数据更便捷?系统后台如何“查询”数据更便捷?
设计B端后台,必须搞清楚这些组件(一)设计B端后台,必须搞清楚这些组件(一)
最新Dashboard设计实例、技巧和资源集锦,视觉和功能两不误,妥妥的!最新Dashboard设计实例、技巧和资源集锦,视觉和功能两不误,妥妥的!
大屏数据可视化设计指南大屏数据可视化设计指南
大屏监控系统数据可视化界面设计大屏监控系统数据可视化界面设计
真屏实据 | 数据大屏设计实战真屏实据 | 数据大屏设计实战
「后台系统原型资源分享」第三弹「后台系统原型资源分享」第三弹
合理复用组件,解锁数据图表设计新姿势合理复用组件,解锁数据图表设计新姿势