陌北默

小编:APP的导航样式多种多样,但主要的是你得找到一种适合你的APP模式的导航交互。今天分享了25学堂总结的8个APP导航的交互方式,并有分析如何漂亮的应用它们。

首先,我们来看一下一个叫做原始导航的导航。

原始导航是一个最最粗糙的导航,通过纯文字的链接入口来导航。如下图:

1004225N9-0
把它定义为原始导航,是因为如今我们的移动APP导航都是在此基础上通过不断的演变来形成我们常见的APP导航模式。

app导航设计

一、标签导航(选项卡导航)

有了原始导航,你可能会说,原始导航这种入口的摆放方式太占空间了,就五个入口就占据了整个界面。有没有一种更加省空间的导航模式呢?当然有。

首先,我们将五个入口放到界面的下方,就会形成常见的底部标签导航。

10042253S-1
标签导航
目前这样的APP导航是最常见的。

通常,底部标签导航有4~5标签,一般不会超过5个,有更多的选项操作时可将最后一项设置为更多,将一些次要功能放置在更多里。这是一种非常常见的导航模式。如果你的应用需要用户频繁的在不同分页切换,可以采用这种导航。虽然它还是会占用一定的界面空间,但比起原始导航来说好多了。

现在很多APP(包括ios和android)都在用这种模式。也是目前很多移动APP设计大牛和产品经理所推崇的app导航方式。

当然,如果你在五个标签中,有一个标签是最重要或最频繁使用的,想要重点突出,可以使用下面变形的底部标签导航。

1004222S0-2
葡萄社APP设计
这种底部标签导航模式并不常见,但在一些APP中还是可以看到它的应用。比如微博的底部标签导航。

 

其次,我们将标签放到界面的上方,就会形成常见的顶部标签导航。

 

1004222S8-3
美丽加APP
顶部标签导航在ios app中一般当作二级导航。在android app中,这种导航模式以前被用作一级导航,但自从google推出了“抽屉导航”作为一级导航后,顶部标签导航就被常用为二级导航了。

 

作为一个二级导航,顶部标签导航应用于多种情境下,可以固定数量,展示有限的几个标签。也可以扩大一定的数量,变成向左滑动展现更多标签。甚至可以像网易新闻那样,衍生出订阅功能。顶部标签导航也是一种非常常见的导航模式。

二、抽屉导航

说完标签导航,你可能会说,我是有六七个导航,但其中只有一个导航是主要的,别的虽然有用,但用户非常非常少用。这种情况下能不能只显示主要的内容,其它导航隐藏起来呢?这样还可以更近一步地节省页面空间。

当然可以。在这种情况下你可以使用抽屉导航。但是不建议用抽屉导航。至于为什么可以阅读《看完《方寸之间》之后,对APP导航设计的读后感》

 

1004225338-4
抽屉导航是将菜单隐藏在当前页面后,点击导航入口即可像拉抽屉一样拉出菜单。

这种导航的优点是:节省页面展示空间,让用户将更多的注意力聚焦到当前页面。比较适合于不那么需要频繁切换内容的应用,例如对设置、关于等内容的隐藏。

缺点是:对于那些需要经常在不同导航间切换或者核心功能有一堆入口的app不适用。抽屉导航设计需要注意的是一定要提供菜单画出的过渡动画。

三:下拉导航

讲完抽屉导航后,还有另外一种类似的导航模式同样可以节省页面空间,并且隐藏次要入口,这就是下拉导航。

 

10042234U-5
下拉导航,与抽屉式导航的目的相同,都是为了突出内容。一般位于产品顶部,通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层,可通过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置。但由于是位于屏幕上方,相对隐蔽而且不能结合手势操作,所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。

 

下拉导航有一种比较常见的变式,就是下来菜单中展示两级甚至多级(一般就是两级,没见过更多的),很多人称其为超级菜单导航。如下:

nice-APP

100422IA-6
这种导航模式说实话用得比较少。但最近在各种O2O形态的APP中有比较多的使用(可能跟分类级别多而且不好组织有关)。比如:美团、百度外卖等都有用超级菜单。

四、宫格导航

我在原始导航里设定了5个入口。可是,如果有7、8个甚至10多个入口呢?而且这些入口你也不好说到底哪个对用户是最重要的,重要性差不多,怎么办?OK,宫格导航可以解决这个问题。

 

100422L33-7
APP九宫格界面设计
宫格导航将主要入口全部聚合在页面,让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作,用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务,从而选择自己所需要的那个服务。

目前来说,这种导航模式越来越少用在一级导航了。不过,作为二级导航,作为一系列工具入口的聚合,或作为内容列表的一种图形化呈现形式,还是存在在各种APP里。如:zakeer的核心页面就是宫格导航,但其与订阅功能结合,没有让所有宫格斗展示出了。各种手机界面打开后的app展示页面基本上都是宫格模式的。

由于受到卡片式设计的影响,宫格模式的变形也非常多。接下来简单说一下这些变形。

首先,可以将宫格的卡片变大,宫格与宫格时间不留空白,如下图:

 

10042250E-8
  是不是和锤子手机的宫格展示布局一样了?

chuizi1

上面这种展现方式所能展现的卡片数量有限。如果我们将其稍做调整,增加纵向滚动功能,就可以增加卡片数量的展现,可以说是无限的。如下图:

 

1004224243-9
  优酷安卓app里的“频道”模块采取的就是这种模式。

 

如果更进一步,是不是可以对上面这种无限的展示宫格进行分类呢?当然可以。然后我们就有了下面这种导航模式:

 

1004221961-10
当然,每个分类下能够展示的数量可以更多,并不限于3个。

 

这时,如果我们想要在分类下,展示更多的内容,但又想多展示分类,怎么办?可以在以上的导航模式中再进一步变形,如图:

 

1004223P6-11
允许每行宫格横向滑动展示更多,这样就扩展了展示的数量,又不会减少分类数量的展示。

 

宫格导航还有没有别的变式呢?当然有。比如:

可以通过变化宫格导航中卡片的大小,来凸显宫格中内容的不同重要性。

可以将宫格导航和订阅功能结合,形成独特的订阅导航。

……

变化形式根据不同的需要很可能有很多种。一般来讲,常见的这些导航模式就够了。

五、列表导航

列表式APP导航是我们在APP设计种必不可少的一个信息承载模式。当然作为一个APP的导航也是非常方便的。这种导航模式从原始导航中很好转换,只要将列表左对齐,增加向右箭头表明是否还有下级即可。如图:

 

1004222557-12
目前来看,列表导航通常用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。

 

自然,如果你想要对列表进行分类也是可以的。这样逻辑上会更加清晰。如下:

 

1004222205-13
如果说虽然可以分类,但实在不知道如何确定分类名称。把分类名称去掉也是可以的。只是用间距将每一组列表隔开也能起到梳理逻辑的作用。

 

对于列表导航来说,还有一种常见的变式:将列表下内容中的核心内容展示出来,常见的是核心数据展现。如下:

 

1004224418-14
这种变式有时候也被成为仪表式导航,通过标题和核心数据来展现核心内容,同时作为导航使用。这种导航模式可以参见各种互联网金融APP中的产品列表。

六、轮播导航

如果我们将原始导航中的5个入口共处一个页面变成每个页面仅限一个入口可以吗?或者说,我们将宫格导航变成一宫格呢?会有一种新的导航模式吗?

按照上面的假设,我们会有一种常见的导航模式:轮播导航。如下:

app_banner

1004225a8-15
 

当然,只有应用信息足够扁平,可以尝试轮播导航。轮播导航如果应用得当,能够给人耳目一新的体验。轮播导航能够最大程度的保证应用的页面简洁性,操作也是最方便的,只需要手指左右滑动。缺点也很明显:承载入口的数量有限,超过10个可能就优点多了。这种导航常见于查看图片,也经常与其他导航模式结合,作为banner广告呈现。

七、点聚导航

如果一个界面,因为内容或功能展示的需求,需要极端简化其入口,应该如何做?点聚导航是一种选择。

 

100422CC-16
12874
当层级框架比较复杂,几个并列的模块中都有用户频繁使用的核心内容,但有需要简化页面时,会考虑使用点聚式导航。点聚式导航将多个核心功能聚汇到主界面中显示,方便用户呼出使用。由于点聚式占用空间小,一般会融入一些动态的互动效果,让导航更具趣味性。很多图片拍摄及编辑、视频拍摄及编辑类APP会使用这类导航。

 

八、隐喻导航

如果原始导航中的五个入口,变成游戏界面中的五个关卡,只是简单地将其按照上下顺序列出来就会不太适用。游戏对导航的要求不仅要可用,更要和整个游戏的风格等匹配。因此,有了隐喻导航这种模式,用页面模仿应用的隐喻对象。这种导航主要用于游戏,但在帮助导航 人们组织事物(如日记、书籍等),并对其进行分类的应用中也能看到。

 

1004225c2-17
 

文章来源25学堂

 

转载请注明:韦德1946 » APP导航交互设计解析

登录收藏

学UI就上韦德1946!越努力,越幸运!

“韦德1946www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【韦德1946 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
安卓和iOS到底有啥区别?安卓和iOS到底有啥区别?
不可不看的2018UI设计趋势不可不看的2018UI设计趋势
房产类APP「链家」原型分享房产类APP「链家」原型分享
设计一份优秀表单,需要注意的三个要点设计一份优秀表单,需要注意的三个要点
UI项目,你真的做好了吗?UI项目,你真的做好了吗?
【滴滴体验设计研究·实践篇】从 iPhone X 适配说起【滴滴体验设计研究·实践篇】从 iPhone X 适配说起
20个优秀手机界面扁平化设计,让你一秒看懂扁平化20个优秀手机界面扁平化设计,让你一秒看懂扁平化
实战干货:UI设计师与Web攻城狮协同工作必知的8个知识点实战干货:UI设计师与Web攻城狮协同工作必知的8个知识点
帮你搞懂 px,ppi;dot,dpi;sp,dp;pt !帮你搞懂 px,ppi;dot,dpi;sp,dp;pt !
从3个分类出发,深入研究App加载动画从3个分类出发,深入研究App加载动画