导航菜单设计B端设计指南 导航菜单设计方法( 二 )


二确认菜单广度和深度
导航菜单广度和深度的区别
菜单广度:导航菜单中每一个层级包含的菜单项数目为广度
菜单深度:导航菜单层级的数目为深度深广度均衡帮助玩家进行迅速选择 。通过能够对整个业务架构具有第一眼的知道
2.1当菜单广度过大时 。怎么办?
当菜单广度过大 。人类也能够通过设计的途径来优化导航菜单
我举一个比较具有代表性的举例:腾讯云

导航菜单设计B端设计指南 导航菜单设计方法

文章插图
腾讯云目前坐拥大约那么100+个云业务。他们都分布在导航菜单上 。因此在导航设计上 。它采取一种新的模式:1.全部菜单导航+2.查询搜查菜单+3.自己定义设置导航
在全部菜单中 。展示了腾讯云100+个云业务项目 。通过查询搜查进行筛选获得玩家想要的菜单 。同一时间在导航目录栏上 。接受玩家去自己定义设置5个菜单选项 。也因此玩家将常用的菜单添加至此 。也更方便玩家去找到。这样在满足业务的前提下 。通过有些特别的设计 。使100+个菜单也能够塞得进整个导航中
2.2菜单深度过深时 。怎么办?
当受到菜单深度过深时 。一般需要从几个方面去思考:
与业务经理沟通交流是否到位这里一般是想通过与业务经理的沟通交流。知道到菜单的架构设计的原因 。以及能否为你的设计进行一次从头开始的梳理 。找到有些值得优化的点
反馈在找到业务经理之间 。自己能够通过有些思维导图的应用将自己业务的菜单目录全部罗列出去。能够先多思考 。为下面的沟通交流节约时光、提升效率
玩家体验地图的绘制在一个B端业务中 。玩家的目的即便杂乱。但是集中玩家每一步操作 。还是会查找出有些规律 。人类可以从这些规律中 。做些文章
比如人类之前在一个医疗系统中 。根据角色的不一样。将医疗角色分为:前台、询问师、医生、商家这四种角色 。每一个角色所在意的点都会有所不一样。比如
商家:最在意每一个门店目前的的情况资料。比如门店营业额、门店待客数、每一个医生的疗伤量以及疗伤最少的医生 。这些都代表着他不一样场景下使用的习惯 。
将这些情况解析之后。提炼出核心的要求点 。
之后跟着绘制完成他们的玩家地图后 。根据角色 。明确每一个角色的日常操作有哪些 。从而确认人类任何菜单所展示的位置以及整个菜单的层级关系
导航菜单设计B端设计指南 导航菜单设计方法

文章插图
三菜单层级有区分
我将常见的导航区分进行总结 。分为以下三种形式:
3.1颜色区分
颜色区分作为最直接最有效的一种形式 。这个形式也是后台管理者用户页面最开始的情况。我一般会用颜色区分和移动wap端顶部情况栏的演变史做比较。就其功能而言他们都有很多差不多的点:
微信在2018年12月份时 。发布微信7.0 。将顶部导航由黑色转变为白色 。引得各位争论不休 。而经过时光不停洗礼 。各位也逐渐接受这个了事情。渐渐忘去
导航菜单设计B端设计指南 导航菜单设计方法

文章插图
2019年也有类似的事情发生 。有几个业务的WEB端进行了一系列的大改 。YouTube、Twitch、Twitter都进行了从头开始设计 。他们也不约而同的将块面去除 。去掉多余的的灰色 。通过留白和空间将页面拉开
导航菜单设计B端设计指南 导航菜单设计方法

文章插图

导航菜单设计B端设计指南 导航菜单设计方法

文章插图

导航菜单设计B端设计指南 导航菜单设计方法

文章插图
这是否是下一个WEB端所要追寻的趋势 。我还不得而知~
如果WEB端都有此变化。那么B端业务还会远吗?
说回B端设计 。颜色上的区分和移动wap端类似 。再多体现在导航层和内容层之间的区别 。因为从本质上讲 。这两个本身就属于不一样的业务模块 。通过颜色的区分 。是最为直接 。最简单的一种方法。
这个形式常见于很多杂乱系统 。比如:飞书
小唠一句:飞书的文档功能以及协同事情比钉钉好用太多 。如果各位现在还在找到协同应用。可以试试飞书~
导航菜单设计B端设计指南 导航菜单设计方法

文章插图
左侧导航为深 。能够让玩家更沉浸的体验 。因为屏幕边缘都为深色 。玩家在使用时能够真正做到有区分
3.2 投影区分
在现如今的移动wap端业务。投影大行其道 。弥散投影 。超级投影随处可见 。也逐渐波及再多WEB端的业务使用投影 。增加本身业务Z轴空间

推荐阅读