产品设计之界面框架

设计模式

一、标签导航（微信）

标签导航位于页面底部，标签的分类最好可以控制在5个以内

优点：清楚当前所在的入口位置、轻松在各入口间频繁跳转且不会迷失方向、直接展现最重要入口的内容信息

缺点：功能入口过多时，该模式显得笨重不适用

二、舵式导航（微博，底部有【+】标签）

中间用特别的标签，两边是其他操作按钮

优点：需要突出重要且频繁操作的入口

缺点：同标签导航

三、抽屉式导航（知乎）

将菜单隐藏在当前页面后，点击入口即可像拉抽屉一样拉出菜单

优点：节省页面展示空间、让用户注意力聚焦到当前页面、扩展性好

缺点：入口太深，不适合频繁切换的应用

四、宫格导航（美图秀秀）

将入口全部聚合在页面，让用户做出选择，适合各页面之间切换不频繁的应用

优点：直观展现各项内容、方便浏览经常更新的内容

缺点：无法完成入口间的跳转、不能直接展现入口内容、不能显示太多入口次级内容

五、组合导航

用户需要聚焦内容，同时又需要一些快捷入口能够连接到某页面时就可以采用组合导航

优点：布局灵活，能适应架构的快速调整

缺点：不规则容易有杂乱感

六、列表导航（微信发现）

优点：层次展示清晰、可展示内容较长的标题、可展示标题的次级内容

缺点：同级过多时产生疲劳、排版灵活性不高、只能通过排序、颜色来区分各入口重要程度

七、Tab导航(indicate menu)

本质和标签导航相同，层级较多的情况下，可以采用tab导航，典型场景是用于改变当前的视图，或对当前页面内容进行分类查看

优点：对多内容多层级产品适用

缺点：结构复杂，内容繁多

八、轮播导航（viewpage）

应用信息足够扁平，可以尝试轮播导航

优点：单页面简洁内容，整天性强、线性的浏览方式有顺畅感、方向感

缺点：不适合展示过多页面、非主页面不利于展示和查看

九、点聚导航（自定义卫星聚合控件）

主操作选项或导航合并成一个按钮，浮动在页面上

优点：灵活、展示方式有趣、页面更开阔

缺点：隐藏了更多入口和操作

十、瀑布导航

适用于图片为主的内容，下拉自动加载

优点：浏览时产生流畅体验、排版布局多变、沉浸式体验

缺点：不适合层级架构复杂的产品、容易产生疲劳感