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的信息架构和具体功能而定,最适合用户的才是最好的!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,387评论 25 707
  • 导航是页面结构和界面设计的重要一部分,它可以结构化产品内容和功能、突出核心功能、扁平化用户任务路径,下面举一些案例...
    Mooooon_n阅读 5,211评论 1 11
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 今年我迷上了写写小文章,出于时间有限,文章并不多产,自己也不是写作高手,每篇文章质量也没有多高,但每一篇我都认真对...
    清心倾心阅读 553评论 0 5
  • 夜色起。 风拂过草地,转而向上。 天空染上草香。 流星匆匆划过,妄想摆脱缠绕的时空,却惊扰了沉入黑寂的现世。 险些...
    奶奶灰灰灰阅读 247评论 3 0