web系统多层级复杂导航的修改方案

想来说说我的具体工作，来这家公司一直负责无人酒店的后台系统设计。下面给大家讲得是我来这家公司第一份任务，对原来的系统进行改造。下面我就来分享下我的一些心路与经验，也当做一个复盘。

下图是旧的页面

上面给的任务是“现在系统的导航太复杂了，层级太多了，小屏的电脑一打开只能看到菜单，内容只有一点点,你来帮我们优化下”

1.收集反馈，简单的用户研究

第一步我做的是问了很多相关人员对现在页面的意见，因为刚接手，要求迅速出图，我就简单的收集些用户反馈，并没有做专业的用研。不过最重要的还是老板的意见。

收集主要关键词：太复杂、占的面积太大、切换时要找很久

2.分析页面结构

解析现有的页面

区域划分分析下页面，层级过多、视觉上也没有很好的进行划分，所以让人看起来很乱。

总结的问题：

1.导航占位太大，主要信息被视觉干扰

2.导航占了主要视觉点，无效信息被强调

3.导航预内容侧层级关系不明确

4.模块切换对单一角色来说很少操作，无需被强调。

3.对结构进行分析

网站地图，将所有页面层级关系写出来，我一般用XMind，了解整个系统的结构。

4.开始动手画

一般我还会去搜一下什么“年度最佳导航菜单设计”“导航设计的十大原则”等等。补充下理论知识，从业久了一般都很清楚那些原则。我就不多说了，不了解的可以百度下，很多文章。

设计方案

我给出了两个方案，顶部横向导航、左侧竖向导航，各有优缺点。但是最重要的是做到层级一目了然。内容、菜单、公共区域都要有很清晰的结构。

顶部导航设计

顶部导航

左侧导航设计

左侧导航

5.罗列所有可能出现的菜单情况，做出典型页面

切换样式、二级、三级菜单、内容级页面跳转等

顶部导航

顶部导航状态

左侧导航

左侧导航状态

6.方案优势

顶部导航

1.最大程度加大横向视觉，一屏展示更多信息

2.一级导航与二级导航层级清晰

3.隐藏未选中导航，减少视觉干扰

4.二级导航随时可看，切换方便

5.整体导航区与内容区分离，视觉层级明确

6.主要切换集中于顶部，易于养成视觉惯性

左侧导航

1.所有菜单可全部显示，菜单逻辑清晰

2.在同一形式下承载多级菜单

3.菜单在不需要频繁切换时可收起

4.结构上清晰，导航区与内容区分隔清楚

5.给更多空间承载搜索，消息等公共功能区

7.模块切换的设计

根据对业务的了解。用户角色一般很单一，多数用户是不用进行切换，所以我将切换模块动作作为二级操作，唤起时有较大的变化。但同样是菜单，所以应该与导航在一个区域。

顶部导航

顶部模块切换

左侧导航

左侧模块切换

以上是我做导航改版的思考和实施，有不足或者没有考虑到的欢迎交流，也希望能帮助大家。