美文网首页99Design华章程序开发
App导航设计——主导航模式解析

App导航设计——主导航模式解析

作者: 大鸽子Z | 来源:发表于2015-04-12 00:27 被阅读2112次

 都说好的导航是产品成功的一半,在研读了《移动设计》、《方寸之间》以及《移动UI设计模式》之后,又结合自身平日的观察积累,今天斗胆也来详细解析下目前主流的作为主要导航的几大模式。

一、标签式导航

标签式导航是IOS主推的导航模式,位于屏幕的底部,在安卓上常见于顶部。这种布局方式能让用户直观地了解到app的核心功能。同时,使用上能在几个标签间快速的跳转。标签分类可以根据逻辑和重要性控制在5个以内,通过视觉表现用户的当前位置,页面之间的切换快速又不容易迷失,简单高效。

试用项:入口选项数目不多,且用户需要在选项见频繁切换执行多任务。

注意项:这种模式不适合太过复杂和不稳定的结构。

标签式导航,也经常融合一些个性化设计。例如,在标签栏的中间位置融合Logo或产品最核心的功能,丰富了标签栏的样式。

同时要注意的是,如果要实现该导航模式要遵循不同操作系统的操作规范(在此仅列举Android和IOS)。

二、抽屉式导航

抽屉式导航追求核心内容的突出,弱化导航界面,常见于一些信息流产品(知乎、path、facebook等)。抽屉式导航在形式上一般位于当前界面的后方,通过左上角的按钮或手势滑动呼出。由于隐藏在屏幕在外,所以导航界面的空间较大,为可扩展性和个性化带来了更多可能。由于导航默认是隐藏的,在选择后需要有明确的提示来告知用户的当前位置。

适用项:以当前内容为核心展示的应用。

注意项:隐藏的导航内容,需要更好的方式调出(如手势)。

ios版path应用

就目前而言,关于究竟使用抽屉式导航还是Tab式导航,争论不断,但随着大屏时代的到来以及facebook等多个移动应用回归Tab式导航的形式来看,Tab模式导航将重新受追捧。

传送门:http://www.ikent.me/blog/4960

三、桌面式导航

桌面式导航,是一种类似于手机桌面各个应用入口的导航方式。一般是将全应用信息进行独立分类,做到信息互斥,类别各自有独立入口,内容间基本并列。用户进入到一个入口之后,只处理与此入口相关的内容,如果要跳转至其他入口,必须回到入口汇总界面。这种导航方式在工具类app中比较适用,每个工具都有一套独立的体系。带来的问题是用户需要更多的操作路径,且不适合在多任务中使用。

适用项:分类清晰,入口独立且固定。

注意项:不适合在交叉类别中使用。

ios版淘宝

随着移动产品内容的丰富,纯粹的桌面式导航开始减少,更多的是开始融入到其他主导航中,承担起二级导航的作用。

四、点聚式导航

点聚式导航最早来自于应用path,它将用户最频繁使用的多个核心功能点汇聚在主界面中显示,方便用户随时呼出使用,它不同于传统标签栏那样占据界面最下方一栏,而是通过一个点的方式汇聚这些功能的入口。由于点聚式导航所占用的空间较小,所以它常出现在一些主要流程界面中,作为全局导航使用。

适用项:需要提取最核心的几个点来展示产品特性。

注意项:汇聚后将使部分导航隐藏,需要良好的引导。

目前能够想到的就是这些,以后有想到的会持续更新,后续会出二级导航方式的总结。

有错误或不准确处欢迎指正! 

                                                                                                                                  ZYG

相关文章

  • App导航设计——主导航模式解析

    都说好的导航是产品成功的一半,在研读了《移动设计》、《方寸之间》以及《移动UI设计模式》之后,又结合自身平日的观察...

  • APP导航设计模式

    下图是八种导航设计模式对比图: 一、列表式导航 列表式导航是最常见的主导航形式之一,是APP设计中不可少的一个导航...

  • 移动应用UI设计模式

    本书主要介绍以下设计模式: 导航模式:了解主导航和次级导航的设计模式 表单模式:改掉行业内表单设计的不良习惯 表格...

  • 移动应用设计细节分析——导航

    移动设计模式整理分析——导航篇 产品导航设计优缺点分析 8种移动APP导航设计模式大对比 1.扁平式导航 1.1 ...

  • APP导航设计

    良好的APP导航设计模式决策对整个app的核心体验起到关键作用。几种常见的移动APP导航设计模式对比图。 ☆ AP...

  • APP导航设计模式

    导航主要分为两大类,横向和纵向。横向的导航有:标签导航、舵式导航、tab导航、轮播导航;纵向的导航有:宫格导航、下...

  • App导航设计模式

    1.抽屉式导航 抽屉式导航就是当前比较流行的导航样式,是应用选择比较多的一种导航方式,这种导航的核心思想就是隐藏,...

  • 让APP中内容呈现更友好易用的5种常见导航设计模式

    今天的文章会着重介绍移动端APP导航的设计模式。无论你所设计的APP是什么样的类型,或多或少都绕不开导航设计。作为...

  • 解析十种APP导航设计模式

    1.标签导航(标签导航位于页面底部 ,标签的分类最好在5个以内,比如微博、微信、淘宝) 优点:清楚当前所在的入口位...

  • 移动应用UI设计模式图示

    移动应用UI设计模式: 1.导航设计模式:主要导航和次要导航模式。 1)主菜单导航模式: 跳板式 Springbo...

网友评论

    本文标题:App导航设计——主导航模式解析

    本文链接:https://www.haomeiwen.com/subject/rnktfttx.html