当我们确定好了一款移动APP的设计需求和产品的整体设计结构之后,要着手开始规划和制作APP的原型图及UI界面。一款APP的好与不好,很大部分取决于APP界面布局的合理性。这个时候就要想出以最优的设计结构将APP的内容展现给用户,那么,如何将信息以最优的形式展现出来呢?这就涉及到了APP的导航应用方式,可以说一个优秀的导航设计对一款APP的核心体验起到了决定性的作用!

“APP设计常见的导航模式”
优秀的APP导航设计,能够合理地完美展示产品的功能,并快速引导用户使用,增强用户的识别度。合理的导航设计,会让用户轻松达到目的而又不会干扰和困扰用户的选择。

一、APP导航的优点

优点一:结构化产品内容和功能

导航系统就相当于APP的骨架,支撑着内容和功能组成的血肉,导航系统起着组织内容和功能的作用,让它们按照产品的信息架构图进行连接,展现在用户面前,导航将零散的内容和功能组织成了一个完成的有结构的系统。

优点二:突出核心功能

每一个APP都有一个核心功能,其他的都是次要功能和扩展功能,像微信的核心功能是即时聊天,京东是购物,猫眼是买电影票等等,核心功能对目标用户来说是最重要的,把核心功能放在用户最能接触到的位置,给予充分的展现,而其他功能应该适度隐藏、甚至是删除。导航就起到了突出核心功能,适度隐藏次要功能的作用。

优点三:扁平化用户任务路径

导航可以的清晰指引用户达到目标,建立合理的导航系统,设计顺畅的任务路径,让用户能够快速的在各个模块之间进行切换,一个好的导航,能够扁平化用户的任务路径,减少用户操作成本,从而提高用户体验。

二、APP设计常见的6种导航模式

结合产品的深度和广度来共同探讨一下目前APP界面常见的6种导航形式,并分析其优缺点,从而进一步判断每一种导航形式更适合应用于哪种类型的APP。

第一种:底部标签导航

标签导航的一种,多采用文字与图标相结合的方式展现。底部标签导航是目前最常见的导航形式。底部标签导航,一般采用3-4个标签,最多不会超过5个,彼此之间层级相同,用户可以迅速的实现页面之间的切换且不会迷失方向,非常快捷高效。

优点:

•入口直接清晰,操作路径短,便于在不同功能页面之前进行切换跳转。

•直接展示入口内容,内容曝光度高,可以快速识别产品的主要功能架构。

缺点:

•功能之间无主次

•扩展性差,不利于后期的功能扩展(一般最多5个)

“APP底部标签导航”

第二种:舵式标签导航

底部标签导航的一种拓展形式,就像轮船上用来指挥的船舵,两侧是其他操作按钮。普通标签导航难以满足于导航的需求,就需要一些扩展形式,和标签导航相比,舵式导航一般会将核心功能放在中间,使标签会更加突出醒目,如发布、上传等。

核心标签还会承载一些其二级扩展功能,通过点击后引导用户来采取进一步操作。使用场景:产品需要特殊的引导,如58同城,引导用户发布任务。

优点:

•在默认加载的页面之外,又能够突出强调中间的入口。

•入口直接清晰,操作路径短,便于不同功能模块进行跳转。

•直接展示入口内容,内容曝光率高可以充分曝光产品的核心功能,操作非常高效。

缺点:

•舵式导航中一般只有一个核心功能可以突出显示,功能之间无主次。

•拓展性较差,不利于后期的功能扩展。

“APP舵式标签导航”

第三种:顶部标签导航

顶部标签导航一般用于二级导航页面,当页面内容分类较多时,一般采用顶部标签导航设计模式。其功能与底部标签导航类似,可以清晰地展示功能层次和信息架构,选中的标签会被高亮显示,若标签过多时一般采用左右滑动查看。

优点:标签数量可以随意根据需求而发生变化,可以左右滑动,衍生更多标签,数量几乎没有限制。

缺点:操作热区有限,且后位标签需要用户左右滑动才能感知,功能曝光率较低,容易造成误操作的困惑。(不知道当前在哪个标签下)

“APP设计舵式标签导航”

第四种:抽屉导航

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能,让用户更专注于核心的功能操作上去,一般用于二级菜单,点击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航模式比较适合不需要频繁切换的次要功能,例如对设置、个人中心等功能的隐藏。

抽屉导航是将菜单隐藏在当前页面后,点击入口即可像拉抽屉一样拉出菜单,这种导航的优点是节省页面展示空间,让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用,例如对设置、关于等内容的隐藏。这种导航设计需要注意的是一定要提供菜单画出的过渡动画。

优点:

•节省页面展示空间,使主页面更加简洁美观。

•用户将更多的注意力聚焦到当前页面

缺点:交互热区单手操作时难以触发,对于新用户难以感知,降低了用户对产品部分功能的参与度。

“APP设计顶部标签导航”

第五种:宫格导航

宫格导航多用于二级功能聚合页面,将主要功能入口全部聚合在页面中。而且个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合,如金刚区、工具箱等。

优点:

•将入口进行聚合,各入口功能都能清晰直观的展示给用户。

•操作路径较短,用户可以便捷的在不同的功能模块之间进行跳转。

•扩展性好,方便增加多个入口。

缺点:

•用户无法第一时间看到内容或者执行操作、功能缺乏主次,且当功能较多时会增加用户的选择成本。

•返回路径较长,容易产生用户不良情绪。

“APP设计抽屉导航”

第六种:列表导航

列表导航是APP设计中一种主要的信息承载模式,与列表导航和宫格导航类似,常用于二级导航页面。列表导航的每个列表均指向对应的功能或内容选项,一般展示过多功能内容。列表式导航分为3类:标题式列表、内容式列表、

•标题式列表:一般只显示一行文字,有的显示一行文字加一张图片等等。

•内容式列表:主要以内容为主,所以在列表中就会体现出部分内容信息,点击进去就是详情。

•嵌入式列表:嵌入式其实就是由多个列表层级组合而成的导航。

列表式APP导航是我们在APP设计种必不可少的一个信息承载模式,当然作为一个APP的导航也是非常方便的。不过目前来看,列表导航通常用于二级页。由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。

优点:

•结构清晰,易于理解。

•拓展性强,可展示数量多。

•使用高效,能够帮助用户快速的定位去到对应的页面

缺点:

•缺乏层次之分、排版方式较为单一。

•选项过多时搜索成本较高。

•比较占用空间。

“APP设计抽屉导航”

总结

以上就是关于APP导航模式的分享,在产品设计中,可以根据自己产品的功能和特性,采用不同的导航模式。每个产品迭代发展和变化,也会导致产品导航在过程中不停的产生变化,就必须依据用户属性和使用场景进行调整。不拘泥于任何模式,解决问题才是根本。