你对APP导航设计分类知多少?

我们知道APP导航,就是把所有的功能整合贯穿在一起,让用户能够顺利的在产品中畅行,让他们自己时刻清楚自己在应用中所处的位置,以及如何前往目的页面。在移动端产品导航的设计中没有最好之说,只有最合适,根据你的产品采取最合适的导航设计。因此一个导航的选择直接影响了整个产品的功能运作和界面风格的走向。
APP导航设计3大重要性

1、结构化产品内容和功能

如果没有导航,你产品中的内容和功能就相当于一盘散沙,不成体系,用户会在里面迷路,不知所措。导航系统相当于APP的骨架,支撑着内容和功能组成的血肉,导航系统起着组织内容和功能的作用,让它们按照产品的信息架构图进行连接,展现在在用户面前,导航将零散的内容和功能组织成了一个完成的有结构的系统。

2、突出核心功能

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

3、扁平化用户任务路径

如果没有导航,用户为了完成一个任务,会像无头苍蝇一样来回乱撞,即使来个你死我活也完成不了想要达成的任务。分析用户的行为,建立合理的导航系统,设计顺畅的任务路径,让用户不再像无头苍蝇一样,在各模块之间迷失。一个好的导航,能够扁平化用户的任务路径,减少用户操作成本,从而提高用户体验。


导航种类目录
标签式
舵式
侧滑式
宫格式
列表式
轮盘式
下拉式
组合式
一、标签式
所谓的标签式导航其实很好理解,也是我们平时用的APP中使用最多的一类,优缺点非常明显。既对核心功能作了明确分类,又通过分类选项卡实现了主要功能的切换,配合内容列表式呈现,入口可见性较高,整体用户体验较好。

1、底部标签式

优点:
1.入口清晰明显,可见性强,易于发现;可以直观了解到APP的核心功能;
2.操作路径短,便于用户在不同功能模块之间进行跳转,简单而高效;
3.符合习惯、ios原生控件,开发简单;
4.优先级较高、用户使用频繁,直接展示入口内容,曝光率高。
缺点:
1.入口数量有限,常见导航3-5个,不宜超过5个。
2.占据高度空间略大,基本以文字+图标的形式展现。
3.扩展性差,不利于后期功能扩展。
2、顶部标签导航式
顶部Tab是由Google最先提出来的,主要是为了区分和iOS的导航模式,由于在顶部,手指难以触及,所以Google对应地提出了手势操作的解决方法:通过在屏幕左右滑动来切换标签。
优点:
1.扩展性好,标签的个数没有上限,不过太多的话后面点击肯定会较少
2.占据空间小:相比于底部Tab,顶部Tab一般占据的空间更小(因为不需要考虑手指点击,所以可以把区域缩小,只选用图标或者文字即可),可以把更多的空间安排给内容展示。
3.手势操作非常方便。
缺点:
1.可见性不足:这是空间占据的区域变小之后的后果。
、舵式
舵式导航也叫点聚式,跟标签式导航相比,区别在于舵式导航把类似生产内容的主功能按钮放在中间,标签更加突出醒目,同时该主功能标签做了功能扩展,也因此给设计增加了一些个性化的亮点。
优点:
1.在默认加载的页面之外,又能够突出强调中间的入口;
2.入口直接清晰;
3.操作路径短,便于用户在不同功能模块之间进行跳转;
4.直接展示入口内的内容,内容的曝光率较高。
缺点:
1.功能模块之间没有主次之分;
2.入口数量有限,常见的标签导航多为3-5个控件,不宜超过5个;
3.扩展性差,不利于后期的功能扩展,而且占据高度空间略大。
三、侧滑式
侧滑式也叫抽屉式导航、扩展菜单、侧边导航、汉堡导航;现在虽然没有标签式那么多,但是却占着导航界举足轻重的位置。其实抽屉式最早也是谷歌提出来的一种导航模式,由于虚拟按键的存在,所以在安卓上使用底部Tab会造成双底栏,视觉观感不佳;一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能,或者不那么需要频繁切换内容的应用,例如对设置、关于、个人信息等内容的隐藏;
优点:
1.突出了内容的优先级;
2.节省了页面空间,将更多的屏幕空间留给了内容;
3.营造了浸入式体验,让用户的注意力更多的集中到内容上;
4.扩展性好,导航的个数没上限。
缺点:
1.用户不易发现,增加了点击次数,延长了操作路径,使用次功能需要二次点击,给用户在切换功能带来了操作成本;
2.可见性太差,不利于用户在不同的功能模块之间进行跳转;
3.不直观、不适用于主导航、如遇频繁操作的功能,用户不断开关抽屉体验不好。
四、宫格式导航
宫格导航是将主要入口全部聚合在主页面中(因其布局比较像传统PC桌面上的图标排列,又被称为“桌面式导航”),每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,因此现在采用这种导航的APP已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。
优点
1.将入口进行聚合布局,入口清晰直接;
2.操作路径较短,用户可以便捷的在不同的功能模块之间进行跳转;
3.扩展性非常好,能够添加多个入口;(运营位、广告位、内容块、设置等)
4.能够直接给出功能模块的更新提示,跨平台不受平台限制。
缺点:
1.每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通;
2.当排布过多的时候,用户容易眼花缭乱,选择压力较大;
五、列表式导航
列表式导航还是比较常见,作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。适合用来显示较长或拥有次级文字内容的标题,每行可以融入较多信息。与宫格导航类似,常用于二级页面,不会默认展示任何实质内容,所以通常app不会在首页使用它。
优点:
1.结构清晰,易于理解,冷静高效;
缺点:
1.入口之间为平行的关系,无优先级之分;
2.排版方式固定。
3.不利于用户在不同的功能模块之间进行跳转
六、轮盘式导航
轮盘式导航现在见到的还是比较少的,这种导航方式之前盛行一时,值得肯定的是这种导航方式趣味性挺强,增强了人机交互性。
优点:
1.界面清晰,操作简单;
2.交互性效果给人耳目一新的感觉。
缺点:
1.展示的内容数量有限;
2.开发实现难度大。
七、下拉式导航
与抽屉式导航的目的相同,都是为了突出内容。一般位于产品顶部,通过点击呼出导航菜单,其实下拉式导航并不常用,常见在生活服务类,股票类的app中,通过点击一个下拉图标引出一串列表的形式作为二级导航,因其收起来体积较小,能隐藏更多信息,有时会和滑动导航一起出现。
优点:
1.菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置;
缺点:
1.位于屏幕上方,相对隐蔽且不能结合手势操作,不适合于频繁的切换功能使用;
2.考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。
八、瀑布式导航
瀑布式导航这种界面框架设计适用的范围是比较固定的,就是适应这种图片为主的内容,就像我们所说的瀑布流,这种瀑布流的界面框架是一边“拉”一边刷新、自动向下拉自动刷新。
优点:
1.页面浏览时产生流畅感体验;排版布局多变;
2.沉浸式体验。
缺点:
1.不适合层级架构复杂的产品,容易产生疲劳感.


九、组合式导航
组合式导航很好理解就是将多个导航方式用在一起,因为一个导航方式已经满足不了他的分类了。
优点:
1.各种导航进行组合式排版,适用于内容较多的APP;
2.能直接给出页面的入口,便于用户进行跳转。
缺点:

1.功能入口多,用户找寻不方便,优先级不高。

2.App变“重”

(0)

相关推荐

  • AppStore新增“标签”快捷搜索功能,App获量又有新入口

    据外媒 MacRumors 报道,为了方便用户搜索,苹果正在测试"标签"快捷搜索功能,让搜索结果更精准. 据悉, 目前部分苹果用户(美区A嘉盛外汇平台怎样开户pp Store)已经 ...

  • 基金App首页设计探讨(一) | 导航的多种设计可能

    我们为什么会对首页的导航产生兴趣?除了快捷入口处的导航,你是否还有意识到首页的其他导航设计?有关导航的启发,让我们从一次有趣的首页统计测试说起.▼ 放眼望去,大部分基金app的首页呈现相似的布局样式, ...

  • 台区智能终端数据集采APP的设计和实现

    中国电工技术学会活动专区 CES Conference 台区智能终端是智慧物联网中的边缘设备,满足高性能并发.大容量存储.多采集对象的需求,是集配电台区供用电信息采集.电能表数据收集和设备状态监测等功 ...

  • 你真的了解移动端导航设计吗?来看这篇系统性的总结!

    合理的移动导航设计能够尽可能地减少摩擦,引导用户去他们要去的地方. 这篇文章汇总了移动端导航设计最常见的样式.要注意的设计准则以及优秀的案例分析,一起来系统性地掌握这些知识-  1.什么是移动端导航? ...

  • 从追求理解的教学设计出发 | 知地思理读书馆第三期

    题图:师大资深学长"闪闪"老师与我交换了这本书 一切都源于<当我们谈起1996年的高中地理时,都在谈些什么?| 知地思理读书馆第一期>这篇推送,我在帮忙整理藏书的时候发 ...

  • ‎App Store 上的“知乎

    有问题,就会有答案. [知乎十周年品牌焕新] 知乎发布全新品牌主张「有问题,就会有答案」及全新同名品牌片. 我们相信,你的问题,也是无数人的问题.你的答案,能给无数人答案. 在这个世界上,有人提问,就 ...

  • 我想回农村系列:农村自建房设计必知要点!

    天气越来越暖和了,打算自建房的朋友,也开始忙碌了!说起农村自建房,不得不说自建房设计,只有设计到位,后续的建房工作才可以有条不紊进行.农村自建房的设计最重要的一点就是要根据实际来进行规划设计,并且要符 ...

  • Power BI导航设计:多级下拉菜单

    经常有人问Power BI报表的下拉菜单是怎么设计的,这篇文章就来带你轻松在PowerBI中制作下拉菜单式导航. 以这个财务分析报告为例,改成下单菜单导航以后,效果是这样的: 在导航区,点击财务报表和 ...

  • 导航设计:9个要点教你设计更好的导航栏

    今天为大家带来的是「导航」设计.顶部导航与侧边导航分别具有哪些特点.又适合在什么样的设计中使用呢?一起来看看两者的差异-  01  侧边导航更易于浏览 ▼ 研究表明用户浏览网页时通常使用"F ...

  • 别墅花园设计:做花园设计需知道的4大诀窍,你的花园也能高大上

    相信很多人也听说过这句话"得不到的才是最好的",在花园的打造上也是如此,总是觉得别人的花园更符合自己的品味!但事实上确是,别墅花园设计不是公园花园不一样,是更私人化的产物,所打造出 ...