分享

UI设计师必知的APP导航类型

 小雨又来袭TSG 2020-08-21
我们知道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变“重”

总结

以上就是今天APP导航设计的全部内容,总的来说,App的导航可以分为两大类:一类是内容的优先级较高,可采用抽屉式导航;另一类则是功能的优先级较高,可根据自己的产品属性,功能特点以及用户的使用习惯来选择合适的导航。因此不能选哪种导航你认为好看的去做,一定要符合自己的产品和用户的使用习惯,而且不要过度设计,追求一味的炫酷为了设计而设计。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多