借助设计B端产品导航的机会，我对导航进行了一次彻底的分析( 四 ) 编辑导读：导航栏是用户对产

宫格式结构是信息或平台的入口，所以具体的信息往往隐藏在下一级界面，用户无法第一时间看到信息，会增加用户的认知成本；同时多个入口的情况下用户选择压力大，不同入口之间缺乏联动性，有可能会增加用户的操作。
文章图片
3.2.8卡片式导航栏
宫格式导航的一种延展形式，通过增加内容的可视化程度让每个条目呈现更多的信息。它能根据页面内容的变化及时更新图片，适合以图片为主的内容，像新闻、美食、旅行、视频图片等经常使用，常作为二级导航。
优点：对运营量的要求比较低，而且单个条目的转化率会相应的提高。
缺点：当运营量较大的时候，这种结构会降低用户寻找信息的效率。

文章图片
3.2.9轮播（平铺）式导航
适用于足够扁平化的内容和随意浏览的阅读模式，将所有信息平铺在一个页面，很容易带来高大上的视觉体验。
优点：最大程度的保证了页面的简洁性和内容的完整性，且一般都会结合滑动切换的手势，操作起来也非常方便。
缺点：用户只能切换的相邻页面，很难跳转到非相邻的页面，容易迷失位置。

文章图片
四、设计落地-以PC端为例4.1第一步：整理层级框架制定出一个能满足层级显示和操作的交互结构出来，值得注意的是，导航选项中，并不是所有的选项都是用来跳转的，有的菜单是用来辅助区分内容和用来展开的，我们可以在菜单上标注说明。

文章图片
4.2第二步：思维导图提取信息现状：一级菜单11个，二级菜单37个，最多有三级，产品经理反馈二期会有新增功能
分析：一级菜单目前11个已经超过顶部导航的显示范围，且后续会不定数量新增，考虑到导航的扩展性及容纳性，侧边导航可能更适合产品本身
4.3第三步：设计导航栏整理好上方的内容层级，到具体设计步骤里，首先要做的，就是制定出一个能满足层级显示和操作的交互结构出来。
再整理一遍，侧边栏的内容包含：
不可点击的分类标题可以展开的一级分类可以实现跳转的一级分类可以点击的二级分类而可交互的元素，对应的交互状态就包括：
鼠标悬浮一级菜单样式鼠标悬浮二级菜单样式选中一级分类，一级分类高亮展开一级并选中二级分类，二级分类高亮先用原型做个示意，它的状态包含了默认、选中一级、选中二级三种情况：

文章图片
4.4第四步：导航栏的选中样式菜单的选中样式是指示用户当前所处位置的重要因素
设计时要注意：
子级和父级之间的区分悬停状态与选中状态的区分如果有悬停展开的子级，就要注意，显示悬停菜单时，一级菜单尽量不出现背景填充的样式。
文章图片
4.5第五步：功能拓展前面提到，产品二期会有新功能上线，后面还会有三期、四期…需要考虑导航栏的可拓展性，功能太多该怎么调整？
思考方向：侧栏如何容纳超过一屏的菜单？如何快速找到我想要的功能？
解决方案1：单一用户或角色所需要使用的功能菜单一般只有几个，管理员可以针对角色或用户进行权限配置，特定角色展示特定菜单；