app常见的导航模式

导航是用户获取自己想要的信息以及完成任务的重要途径,app导航设计直接影响着用户的操作体验,一个好的导航设计可以让用户快速的了解到产品的功能和信息组织架构。

那么app的导航设计该如何做呢,说实话不同的app根据自己的实际情况采取一种导航或者多种导航结合的形式,比如快手app为了让更多的信息流展示,则采用标签式导航和抽屉式导航结合的形式。

那么我就把常见的导航形式整理出来,给大家做设计的时候提供参考。

1、底部标签导航

底部导航一般采用3-4个标签,最多不会超过5个,有更多的选项操作的时候将最后一项设置为更多,将一些次要的功能放在更多里面,这是一种非常常见的导航形式。

优点:适合在几类信息之间频繁切换使用,彼此之间相互独立,用户可以迅速的在不同层级找到自己想要的信息。

缺点:占用一定的高度,如果用户是小屏幕手机,用户体验不是太好。

2、顶部标签导航

顶部导航在ios app中一般用作二级导航,在andriod app中这种导航模式一般用作一级导航,但自从谷歌推出”抽屉式导航“以后,顶部标签导航一般就用作二级导航,当内容分类较多的时候一般采用顶部标签导航设计模式。

优点:可以固定数量,也可以不固定数量,像网易新闻客户端那样,可以左右滑动,衍生更多标签。

缺点:占有一定的高度空间,小屏手机体验不是太好。

二、底部和顶部双tab导航

标签式导航一般放在底部,如果产品分类内容较多,则采用顶部和底部结合的导航形式,例如下图的今日头条和爱奇艺。

三、抽屉式导航

有的人可能会说,我虽然有6-7个左右标签,但是只有一些标签是主要的,其他标签用户很少使用,这个时候一般采用抽屉式导航。抽屉式导航是指将一些不常用的功能隐藏在当前页面,当需要用到的时候点击入口或者侧滑即可像抽屉一样展开,上面也说了,这种适合不需要经常切换的次要功能,比如设置、关于、会员等,快手和QQ是采用这种导航形式。

优点:节省页面空间,用户更多的注意力集中在当前内容,而且不用担心小屏手机用户体验问题,适合不那么频繁切换内容的应用。

缺点:次功能入口比较隐藏,用户不容易发现,同时次功能需要二次点击,增加用户使用成本。

四、下拉式导航

和抽屉式导航类似,下拉式导航也是隐藏次要入口的一种形式,一般位于产品顶部,点击呼出导航菜单,导航的菜单以浮层的形式位于界面上层,通过点击导航菜单以外的区域使其收起,下拉式导航的面积一般较小,所以采用列表的形式展现菜单内容居多,这种导航形式一般用作筛选内容。比如下图的拍拍贷和美团。

优点:与界面的连贯性比抽屉式导航要好,同时用户能够感知当前位置。

缺点:由于位于屏幕上方,且相对隐蔽,不能结合手势的左右滑动操作,所以也不利于频繁切换使用。

五、宫格导航

宫格导航主要将入口全部集中在主页面中,各个入口之间相互独立,没有太多的交集,无法跳转互通。

优点:让用户整体了解app的服务,从而选择自己需要的那个服务。

缺点:用户无法第一时间看到内容或者执行操作,选择的压力会比较大。

由于上述优缺点,这种导航形式越来越少用在一级导航、一般作为工具入口的集合(例如:美图秀秀)或者内容列表的一种图形化表现形式(比如快手app的视频流)

宫格导航的变式有很多,比如上图的美图秀秀增加横向滑动来增加导航入口的数量,支付宝通过纵向滑动来增加导航入口的数量,快手通过控制卡片的大小来显得不单调和凸显主要的内容。

六、列表导航

列表导航是现有app中一种主要的信息承载模式,列表导航和宫格导航类似,属于二级导航,只不过有时候列表导航太长,不利于用户操作的时候才会采用宫格导航,通常不会展示任何实质功能。

优点:导航结构清晰,易于用户理解,用户能够快速找到自己想要的信息。

缺点:如果列表太多,一屏承载不下,用户需要下拉才能操作,这个时候不如宫格导航的用户体验好。

拍拍贷由于导航内容较多,采用列表导航和宫格导航相结合的方式,而微信发现界面由于导航内容较少,首屏就能展示的下,直接采用列表的导航形式。

七、舵式导航

驼式导航中间加了个+号,像轮船上用来指挥的船舵,故而得名,比如闲鱼、新浪微博,当标签导航难以满足导航的需求,这个时候我们就需要一些扩展形式,和标签导航相比,驼式导航主要将类似生产内容的主要按钮放在中间,标签更加突出醒目,同时对主功能标签做了扩展功能。

优点:突出重要且频繁操作的入口

缺点:功能入口过多时,该模式显得笨重不实用。

八、点聚式导航

当需要更多展示内容和功能,需要极端简化其入口,一般可以使用点聚式导航。(其实我觉得上面的驼式导航就是点聚式导航和tab导航的结合体),点聚式导航将核心功能聚合到主界面展示,方便用户呼出使用,由于点聚式导航占用空间小,一般融入一些动态的效果,让导航更具有趣味性,一般视频拍摄、编辑类app会采用这种导航形式。

优点:灵活、有趣,界面更加开阔。

缺点:隐藏了功能,且隐藏功能不能太多,不然显示后,用户较难反应。

九、轮播导航

app首页的banner广告位就是采用轮播导航,当应用信息足够扁平的时候则采用轮播导航。

优点:页面比较简洁,导航不会占用太多空间,同时左右滑动即可,操作比较便捷。

缺点:承载的入口数量有限,如果超过10个则显得有点多。

总结:现有的app很少有采用一种导航的设计形式,一般是多种导航结合使用,并没有固定的说一级导航必须用哪种导航形式,二级导航必须用哪种导航形式,一切以用户体验为准,最后还是那句话,不要拘泥于形式,所有能达到目的,具有良好用户体验的导航都是好导航!

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

推荐阅读更多精彩内容

  • 当确定了APP的设计需求和产品的整体结构之后,要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好,很...
    设计思考阅读 45,927评论 7 117
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,502评论 25 707
  • 今儿午睡起来,看了几页书,眼睛有点疲倦,于是打开手机,选了《十言微刊》上的一段音频,然后带上耳机,闭上眼睛...
    黯黯红尘一路相伴阅读 276评论 0 0
  • 十年前,青城知名企业家罗生从本市最高的楼观星楼一跃而下的新闻在当时遍满整整一张报纸,直到持续了两个星期之久的新闻被...
    121跑起来阅读 237评论 0 2
  • 昨天二爹家的孙子满月,一大家人又聚在一起,满心喜悦地迎接这个新生命的到来。而上一次同样地方,大家也是这样聚在...
    韦宝妈育儿手记阅读 517评论 1 6