想来说说我的具体工作，来这家公司一直负责无人酒店的后台系统设计。下面给大家讲得是我来这家公司第一份任务，对原来的系统进行改造。下面我就来分享下我的一些心路与经验，也当做一个复盘。
下图是旧的页面
上面给的任务是“现在系统的导航太复杂了，层级太多了，小屏的电脑一打开只能看到菜单，内容只有一点点,你来帮我们优化下”
1.收集反馈，简单的用户研究
第一步我做的是问了很多相关人员对现在页面的意见，因为刚接手，要求迅速出图，我就简单的收集些用户反馈，并没有做专业的用研。不过最重要的还是老板的意见。
收集主要关键词：太复杂、占的面积太大、切换时要找很久
2.分析页面结构
解析现有的页面
区域划分分析下页面，层级过多、视觉上也没有很好的进行划分，所以让人看起来很乱。
总结的问题：
1.导航占位太大，主要信息被视觉干扰
2.导航占了主要视觉点，无效信息被强调
3.导航预内容侧层级关系不明确
4.模块切换对单一角色来说很少操作，无需被强调。
3.对结构进行分析
网站地图，将所有页面层级关系写出来，我一般用XMind，了解整个系统的结构。
4.开始动手画
一般我还会去搜一下什么“年度最佳导航菜单设计”“导航设计的十大原则”等等。补充下理论知识，从业久了一般都很清楚那些原则。我就不多说了，不了解的可以百度下，很多文章。
设计方案
我给出了两个方案，顶部横向导航、左侧竖向导航，各有优缺点。但是最重要的是做到层级一目了然。内容、菜单、公共区域都要有很清晰的结构。
顶部导航设计
顶部导航
左侧导航设计
左侧导航
5.罗列所有可能出现的菜单情况，做出典型页面
切换样式、二级、三级菜单、内容级页面跳转等
顶部导航
顶部导航状态
左侧导航
左侧导航状态
6.方案优势
顶部导航
1.最大程度加大横向视觉，一屏展示更多信息
2.一级导航与二级导航层级清晰
3.隐藏未选中导航，减少视觉干扰
4.二级导航随时可看，切换方便
5.整体导航区与内容区分离，视觉层级明确
6.主要切换集中于顶部，易于养成视觉惯性
左侧导航
1.所有菜单可全部显示，菜单逻辑清晰
2.在同一形式下承载多级菜单
3.菜单在不需要频繁切换时可收起
4.结构上清晰，导航区与内容区分隔清楚
5.给更多空间承载搜索，消息等公共功能区
7.模块切换的设计
根据对业务的了解。用户角色一般很单一，多数用户是不用进行切换，所以我将切换模块动作作为二级操作，唤起时有较大的变化。但同样是菜单，所以应该与导航在一个区域。
顶部导航
顶部模块切换
左侧导航
左侧模块切换
以上是我做导航改版的思考和实施，有不足或者没有考虑到的欢迎交流，也希望能帮助大家。
网友评论