后台设计

后台管理系统的导航设计归纳总结

2019-05-30  本文已影响87人  bbsxyi

最近在做后台管理系统的页面设计,设计系统返回上一级按钮引发思考,后台系统本身是一个系统嵌套多个系统的存在,那么对于重量挤系统和轻量级系统他们是怎么引导用户实现自己的需求。下面是我的总结,欢迎大家补充,共同交流学习

阿里云

一级菜单展现形式:一级菜单处于收起状态,鼠标移入出现,可能因为导航和内容区域都为浅色,为了减少视觉干扰加黑色遮罩。阿里云页面设计也是最近才更新为浅色,之前导航菜单一直是深色。

二级菜单展现形式:页面处于二级菜单页面的时候,鼠标移入汉堡按钮出现一级菜单,此时可以从二级页面操作切换一级菜单,鼠标点击黑色遮罩部分一级菜单收回

鼠标点击二级目录,跳转新页面此时导航页面只显示三级目录,点击上面的返回按钮可返回到上一级

阿里云购买页面,左侧导航消失,可通过右上角返回控制台,返回上一级页面

京东云

一级和二级导航是可收缩状态,常态处于收缩,三级导航展开,鼠标移入一级导航自动展开,移出自动收起,点击切换三级导航

展开

京东云购买页面跟阿里云一样,导航消失,减少用户操作干扰,可通过左上角返回按钮返回上一级操作

百度云

跟京东云导航类似,区别在于京东云一二级导航可伸缩,百度云可伸缩区域是一级导航,固定二级导航,红框区为一级导航,蓝框区为二级导航

点击二级导航,页面跳转到三级导航,点击左上角返回上一级

QINGYUN

一二级导航固定在左侧为展开样式,点击导航底部收缩按钮导航收起来

三级页面为弹窗或者跳转页面点击左上角面包屑按钮返回上一级

滴滴云

相对于上面更轻量级的面包屑设计来说,还有更轻量级的就是把侧面导航栏,固定到页面顶部,这样做首先页面看起来给人的感觉更轻松,比较适合业务轻量级,系统业务固定,这种设计可能之后的延展性会差一点。

下面是一级导航设计,

二级导航设计浮在卡片中间,类似页签的设计点击切换下面的页面。

点击右上角的创建按钮页面跳转至三级页面,没有返回按钮。同一位置页签点击切换为上一级页面

此类页面看起来简单,实则操作复杂,我个人觉得学习成本比较高。

综上所述:面包屑按钮适合轻量级的企业系统,操作简单,认知减负,页面跳转自然。较复杂的嵌套导航适合重量级的企业系统,可以把庞大的一级二级三级页面区分清楚,让用户在复杂的业务中快速定位找到自己想要的部分,提高用户操作效率。

上一篇 下一篇

猜你喜欢

热点阅读