【工业设计】解密APP导航设计的类型与标准


导航设计是产品设计中非常重要的一部分 , 在APP中导航设计更是直接影响用户对设计的体验感受 , 所以导航菜单设计需要考虑周全 , 发挥导航的价值为构筑“怦然心动”的产品打下基础 。
【【工业设计】解密APP导航设计的类型与标准】
【工业设计】解密APP导航设计的类型与标准
本文插图
所谓导航指的是:引导用户访问栏目、菜单、分类等布局结构形式的总称 。
导航主要是引导用户并告知用户怎么找到自己想要的信息或完成用户自己想要完成的任务 。
导航设计的合理性直接关系着用户是否能够找到信息和完成操作任务 。 APP导航承载着用户获取所需内容的快速途径 。 它看似简单 , 却是产品设计中最需要考量的一部分 。 APP导航设计直接影响用户对设计的体验感受 , 所以导航菜单设计需要考虑周全 , 发挥导航的价值为构筑“怦然心动”的产品打下基础 。
01 导航设计中功能信息的层级划分 随着APP用户的不断增加 , 而设计市场上更多的重视量的积累 , 因而导航设计的形式较为单一 , 导航的操作体验感比较差 , 不能满足现代多元化社会的需求 。 手机界面更能信息的层级划分 , 以及同级界面、上级和下降界面的切换跳转的动态方式比较少 , 不能表现出更加真实的使用层次感和空间感 。
手机APP导航设计的结构模式具体如下几种方式:
【工业设计】解密APP导航设计的类型与标准
本文插图
1. 标签导航 标签类导航位于页面底部 , 通常包含5个标签是比较合适的数量 。 这种导航是非常常见的 , 如果你的应用需要用户频繁的在不同分页切换 , 可以采用这种导航 。 它的缺点是会占用一定高度的空间 。 如微信最新版的APP界面设计图 。
2. 舵式导航 目前流行一种标签导航的变体 , 个人把它称为“舵式导航” , 因为它的样式很像轮船上用来指挥的船舵 , 两侧是其他操作按钮 。 当页面有处于同一层级的几大部分内容 , 同时又需要一个非常重要且频繁操作的入口 , 就可以采用这种APP导航模式 。 如下图葡萄社APP 。
3. 抽屉式架构 抽屉式就是把功能按照一定的分类放在特定的位置 , 像抽屉一样可以收起打开 , 自由伸缩 。 这样的架构不仅节省空间 , 更让用户一眼便知界面的整体布局功能及其子功能 。
这种导航的优点是节省页面展示空间 , 让用户将更多的注意力聚焦到当前页面 。 比较适合于不那么需要频繁切换内容的应用 , 例如对设置、关于等内容的隐藏 。 UC浏览器就是采用抽屉式架构 , 视觉上清晰明了 , 操作上也非常简单易懂 。
4. 宫格导航(九宫格) 这种宫格导航是将主要入口全部聚合在页面 , 让用户做出选择 。 这样的组织方式无法让用户在第一时间看到内容 , 选择压力较大 , 采用这种导航的应用已经越来越少 , 往往用在二级页 。
5. 轮播导航 当你的应用信息足够扁平 , 可以尝试轮播导航 , 如果应用得当 , 能够给人耳目一新的体验 。 这种导航能够最大程度的保证应用的页面简洁性 , 操作也是最方便的 。 但是缺点是不能够快速的定位对应的分页内容 。
6. 列表式导航 列表式APP导航是我们在APP设计种必不可少的一个信息承载模式 。 当然作为一个APP的导航也是非常方便的 。
不过目前来看 , 列表导航通常用于二级页 , 由于它与宫格导航一样 , 不会默认展示任何实质内容 , 所以通常app不会在首页使用它 。
这种导航结构清晰 , 易于理解 , 冷静高效 , 能够帮助用户快速的定位去到对应的页面 。 列表项目可以通过间距、标题等进行分组 。
7. tab结构导航 这是一种扁平化的交互架构 。 选中的标签处于界面的 显著位置 , 并展现整个内容 , 未选中的则只显示标签 ,不显示内容 。 这种界面结构把同一级别的功能用标签 的方式来显示 , 根据需求来展现相应功能 , 把不需要 的页面隐藏 , 但又保留其功能入口 , 既简单好用 , 又 节省了屏幕的使用空间 。


推荐阅读