提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
近几年,各种新兴技术如雨后春笋般出现,尤其是以云计算为主的IT业发展迅速,对后台类产品的设计需求也越来越多。本文将为新手设计师分析B端产品常用组件,帮助大家更好的进行toB产品的交互设计工作。
目前市面常见的且比较成熟的组件库包含阿里设计的Ant Design、TalkingData设计的iView、饿了么设计的 Element,这些组件库经过大量的项目实践和总结,可以支持大部分的 B端产品的设计。
本篇文章将重点分享导航类的控件及适用范围等。
Breadcrumb面包屑
本篇文章将重点分享导航类的控件及适用范围等。
概述:显示当前页面在系统层级结构中的位置,并能向上返回。
使用场景:防止用户在浏览过程中迷失;方便用户定位在页面中的位置;帮助用户理解所处位置与整个系统的关系。
模式描述:一级导航菜单名称+分隔符+二级导航菜单名称+分隔符+.....
基本样式:
带图标样式:
交互效果:当前层级菜单默认不可点击,其他层级的菜单可点击跳转
Dropdown下拉菜单
概述:将动作或菜单折叠到下拉菜单中。
使用场景:当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。
模式描述:操作名称+下拉箭头+操作菜单
交互效果:点击或移入触点,会出现一个下拉菜单,点击下拉菜单中的某一项,执行相应的操作。
表格中有多项操作时的应用:
Menu导航菜单
概述:为后台系统提供全局的导航及菜单切换
使用场景:一般分为顶部导航和侧边导航,根据菜单类目多少来选择相应的导航结构。
模式描述:
顶部导航菜单:适合信息内容层级比较简单明了的应用。一级类目建议在 2-7 个以内。屏幕宽度有限,类目数量及标题文字长度不宜过长,菜单类目太多时导致用户切换困难。
一般主导航放置于页面的顶端,从左自右依次为:logo、一级导航项、辅助菜单(用户、设置、通知等)。通常将内容放在固定尺寸(例如:1200px)内,整个页面排版稳定,不受用户终端显示器影响;上下级的结构符合用户上下浏览的习惯,也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率,但在纵向空间上会有一些牺牲。此外,由于导航栏水平空间的限制,不适合那些一级导航项很多的信息结构。
侧边导航菜单
垂直导航较横向的导航更灵活,易于向下扩展, 且允许的标签长度较长。类目数量不限,可配合滚动条使用,适合信息层级多、操作切换频率高的管理性质的后台。侧边导航占据一定的屏幕宽度,一般配合菜单缩起/展开功能 。
侧边导航在页面布局上采用的是左右的结构,一般主导航放置于页面的左侧固定位置,辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应,能提高横向空间的使用率,但是整个页面排版不稳定。侧边导航的模式层级扩展性强,一、二、三级导航项目可以更为顺畅且具关联性的被展示,同时侧边导航可以固定,使得用户在操作和浏览中可以快速的定位和切换当前位置,有很高的操作效率。
顶部导航与侧边导航结合:顶部导航提供一级类目的分类切换,侧边导航提供二级、三级、四级等的分类切换;页面结构为顶部-侧边-通栏
交互样式:
当前项应该在呈现上优先级最高;当导航收起的时候,当前项的样式自动赋予给它的上一个层级;左侧导航栏的收放交互同时支持手风琴和全展开的样式,根据业务的要求进行适当的选择。一般当前只有一个展开项。
Pagination分页
概述:应用于列表数据条目较多,来对数据和篇幅进行更好的展示。
使用场景:一般后台系统列表页数据展示等都会用分页控件。
模式描述:统计数字+上下页跳转+每页数量控制+输入框页面跳转
交互样式:默认选中当前页,每页数量控制默认展示第一项,页面跳转页默认展示当前页,当前选中页与跳转页码数保持一致。
Steps 步骤条
概述:引导用户按照流程完成任务的分步导航条。
使用场景:当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。步骤不得少于两步。如复杂的表单填写等。
模式描述:
简单的步骤条:已完成步骤和完成中步骤及未完成步骤要有明显的状态区别。
有描述的步骤条:每个步骤有其对应的步骤状态描述。
竖式步骤条:步骤条是竖向排版
交互效果:默认展示第一个步骤,其他未填写的步骤不可点击,内容填写无误时可点击下一步,也可返回上一步修改
步骤条的常见用法:购买类的多步骤操作同时会提供预览功能
Tabs 标签页
概述:分隔内容上有关联但属于不同类别的数据集合。
使用场景:多运于平级及大块内容的收纳,方便用户快速切换
模式描述:
基础样式:
选项卡式:
卡片式:
交互样式:页面刷新或调整时默认选中第一个,当前选中项与费选中项有颜色等区别,鼠标点击其他标签可切换。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册