03-产品策划-导航设计

当我们确定了移动APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来?

都说好的导航是产品成功的一半,良好的APP导航设计模式决策对整个app的核心体验起到关键作用。

本文总结了目前通用且流行的模式,并分析了这些模式适用的场景和优劣势,希望帮助产品同学更快的作出较合理的信息组织决策。

下面来详细解析下9种移动APP导航设计模式:

一、Tab导航

又称为“标签式导航”,分上、下两种。

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

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

举例:


左:多看阅读右:网易云阅读

1.适用场景

①上面的tab导航,一般适用于对当前页面的分类查看,或者改变当前视图。可以滑动,所以数量可多可少;

②下面的tab导航,一般是用来展示App的核心功能,可以迅速切换,适合用于需要频繁切换的功能。受限于屏幕宽度,数量一般控制在5个以内,4个为最佳,(以4个举例)其中第2、3个最好操作。当有更多操作的时候,可以将最后一项设置为“更多”,来将一些次要功能进行隐藏。

2.优势

①让用户快速了解app的核心功能,且切换页面方便,简单高效,用户不易“迷路”

②所有入口都可以看见,容易寻找

3.劣势

①占据一定屏幕高度,如果是下方tab,浏览时会阻挡内容

②可展示功能数量少,最多只有5个

4.注意项

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

二、抽屉式导航

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

举例:


左:知乎日报右:36Kr

1.适用场景

将并不是太常用或者切换不频繁的功能隐藏在主界面之后,对于那些需要经常在不同导航间切换或者核心功能有一堆入口的app不适用。

在整体上:适用于功能较多,需求层级较多的软件。

在功能上:同类弱需求的组合排列。

2.优势

①导航界面隐藏在主界面之后,有助于用户集中注意力,营造沉浸式体验

②可容纳多个条目,可扩展性强

3.劣势

①用户不容易发现,使用户认知成本增加

②用户容易“迷路”

4.注意项

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

三、宫格导航

这种宫格导航是将主要入口全部聚合在主页面中,每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,除了常见app如支付宝和美图秀秀,其他的app采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

举例:


1.优点

功能入口直观,且功能模块多。

2.劣势

①功能多、杂,无重点突出。

②各个入口之间的跳转不够灵活。如果某个功能的层级路径较深时,用户不能快速跳转到自己忽然想要完成的任务页面。

3.适用范围

①在整体上:适用于功能模块多的平台性软件。

②在功能上:较多重要功能,以展示列的形式显示功能。

四、列表式导航

典型网易、知乎,较常用导航模式。列表式导航作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。列表导航与宫格导航类似,常用于二级页面,不会默认展示任何实质内容,所以通常app不会在欧冠买球官网使用它。这种导航结构清晰,易于用户理解,能够帮助用户快速的定位去到对应的页面。


1.优点

①层次清晰,展示内容多,展示内容性软件。

②一次性可加载展现的内容条数较多。

2.劣势

①需注重编排

②内容过多时,无法突出重点

③灵活性不高

3.适用范围

①在整体上:适用于资讯类软件。

②在功能上:常用于2级页面,对各种内容的展示,需保证清晰、明了。

五、舵式导航

也称“点聚式”导航,点聚式导航最早来自于应用path,它将用户最频繁使用的多个核心功能点汇聚在主界面中显示,方便用户随时呼出使用,它不同于传统标签栏那样占据界面最下方一栏,而是通过一个点的方式汇聚这些功能的入口。标签更加突出醒目,同时该主功能标签做了功能扩展,也因此给设计增加了一些个性化的亮点。由于点聚式导航所占用的空间较小,所以它常出现在一些主要流程界面中,作为全局导航使用。

举例:


1.适用场景

适用于非常重要且用户操作频繁适用的功能点,将这些功能点汇聚,放在底部tab的中间或者右边(根据app的具体功能确定)

2.优势

突出的表现入口,能够吸引用户注意力,使得频繁使用的入口容易被用户接触到

3.劣势

入口数量有限、可扩展性差

六、轮播导航

典型Iphone天气、花田,较常用导航模式。


1.适用场景

常用于查看图片类,适用于功能单一、统一的工具型软件,适用于随意看看。

2.优势

(1)操作方便,只需手指左右滑动即可

(2)内容突出展示,增加了曝光率

3.劣势

只能查看相邻卡片展示的内容,并不能跳跃性地进行选择,不能展示多页,只能顺序查看。

七、组合导航

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


1.适用场景

当前很多app都使用了组合式导航。当一种导航方式已经不能满足app的复杂功能时,组合导航就能很好的安排信息的排列方式,以最优的方式来引导用户使用app

2.优势

可以根据app的功能需要,进行多种导航方式的组合,来达到最优的信息展现

3.劣势

app变得厚重,入口数量较多时,用户容易眼花缭乱,给用户造成心理压力。

八、瀑布式

典型花瓣、壁纸10000+,较少用导航模式。


1.优点

浏览式查看、目的性不强。

2.局限性

布局需设计,会造成视觉疲劳。

3.适用场景

图片、壁纸软件,偏向信息展示

①在整体上:适用于信息展示,偏向于图片而非文字类,浏览性质强。

②在功能上:同类内容的展示,用于随意看看,与轮播式导航类似,但是展示内容更多。

九、陈列式

典型猫眼、大众点评,较常用导航模式。


1.优点

直观、方便,内容陈列。

2.适用范围

①在整体上:适用电影、书籍等陈列展示。

②在功能上:相同内容的展示,现基本都是用于展示电影内容

小结:

不同的导航方式都有各自的优缺点,导航方式的选择要依据自己app的信息架构和具体功能而定,最适合用户的才是最好的!

推荐阅读更多精彩内容