美文网首页@产品
App导航方式的实用说明

App导航方式的实用说明

作者: iquer | 来源:发表于2020-04-07 17:34 被阅读0次

          ‘”我哪里可以去,我可以去哪里“”这个是使用导航的主要目的。我们要做到知道每种导航的工作方式、优缺点和使用场景,才能在“方寸之间”找到最适合的导航方式,让目录结构和信息排版更加清晰。让我们先直观的了解七种最常见的导航方式。

           不同的导航之间,其实差别都不是特别大,翻来覆去就是可见性、操作性以及是否会挤占内容展示空间这几点。

    标签导航


           轻松在各入口间频繁跳转且不会迷失方向,直接展现最重要入口的内容信息。一般都为5个,通常第一个为“主页”,最后一个为“我的”,用于进行用户相关的个性化的设置。例如淘宝、头条和智远一户通都是采用这种方式。

    优势:

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

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

    劣势:

    1、占据一定屏幕高度,浏览时会阻挡内容

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

    相关APP:

    舵式导航


          在标签导航的基础上中间加了一个导航操作项,这种舵盘很容易区分开旁边的导航模式,能够让用户知道中间这个标志是它主要的导航操作项。 

         点聚式它将多个核心功能聚汇到主界面中显示,方便用户呼出使用。会搭载其他导航样式出现(如标签式)成为舵式导航,例如,墨迹天气,点击中间的舵式导航,会上划出标签导航,包括三种生产内容的主要功能:发布实景、反馈天气和身边此刻。

    优点:

    把类似生产内容的主功能按钮放在中间,标签更加突出醒目;

    缺点:

    占据高度空间略大,一般都是文字 或 图标的形式。

    相关APP:

    列表导航


           iOS和安卓的列表最小高度是不同的,安卓48dp,iOS的是44pt。

           列表导航是在我们这种二三级页面最常见的一种导航模式,或者说二三级功能里面最常见的。 层次展示清晰,可展示内容较长的标题。

    优点:

    由上至下的查看方式,符合传统的阅读习惯;

    结构清晰,能够帮助用户快速的定位去到对应的页面。

    缺点:

    条目太多或分布不合理会导致用户查找困难;

    不适合需要频繁切换任务的情况。

    相关APP:

    这个页面实际是一个组合导航的形式,上面有TAB导航、中间有宫格导航、下面有列表导航

    宫格导航


           宫格导航是将主要入口全部聚合在页面,突出重点,让用户进入界面之后第一眼就能看到 直观展现各项内容。适合用于独立、无功能交叉、不频繁切换的部分,多用于二级菜单。上图APP的宫格导航主要为购买“重点”产品的功能。

    优点:

    分类清晰、入口独立、风格简约、方便抓住客户的眼球

    缺点:

    不能显示太多入口次级内容,它只能展示一级入口,只适合一些功能层级没有太多的APP

    TAB导航


          作为一个二级导航,顶部标签导航应用于多种情境下,可以固定数量,展示有限的几个标签。也可以扩大一定的数量,变成向左滑动展现更多标签。甚至可以像很多新闻类那样,衍生出订阅功能。顶部标签导航也是一种非常常见的导航模式。拓展性是非常好的,可以随自己的心意增减标签。而且相比底部Tab来说,顶部Tab采用的是文字的形式,占据的空间是非常小的。但是要注意标签的个数,否则可见性越差,页面渗透率也会越低。

    优点:

    扩展性好:标签的个数没有上限,不过太多的话,越是后面的页面渗透率会越低;

    占据空间小:相比于底部Tab,顶部Tab一般占据的空间更小(因为不需要考虑手指点击,所以可以把区域缩小,只选用图标或者文字即可),可以把更多的空间安排给内容展示。

    手势操作非常方便。

    缺点:

    可见性略逊:这是空间占据的区域变小之后的后果。

    相关APP(左滑动展现):

    轮播导航


          浏览方式非常顺畅、有方向感,滑动为左右滑动,用户用起来不会困难。不适合展示过多页面,如果功能太多了,层级太多了,都不适用于轮播导航。只有应用信息足够扁平,可以尝试轮播导航,这种导航常见于查看图片,也经常与其他导航模式结合,作为banner广告呈现。

    优点:

    能够最大程度的保证应用的页面简洁性,操作也是最方便;

    缺点:

    承载入口的数量有限,不能够快速的定位对应的分页内容;

    相关APP:

    抽屉导航


          采用将导航主体隐藏在app侧边的方式,以一个按钮来呼出导航,在使用完成之后在使用相同的按钮隐藏起来;将并不是太常用或者切换不频繁的功能隐藏在主界面之后

    优点:

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

    (2)可容纳多个条目,可扩展性强

    缺点:

    (1)用户不容易发现,使用户认知成本增加

    (2)用户容易“迷路”

    相关APP:

    图1可以理解为文件夹,图2理解为文件夹下的文件清单

    相关文章

      网友评论

        本文标题:App导航方式的实用说明

        本文链接:https://www.haomeiwen.com/subject/qgsiuhtx.html