- 设计理论 -

App顶部导航类型分析

作者:角马 原文出处:海盐社
2018-07-20

1.jpeg

去年我曾经写过一篇关于App导航栏的不同类型的文章,大致分为标签式导航(顶部标签式导航、底部标签式导航、舵式导航)、抽屉式导航、宫格导航、列表式导航、悬浮Icon导航。这里我想对以上不同类别的导航进行详细的讲解,这篇主要是针对顶部标签式导航,即顶部导航的不同形式进行分类、汇总和分析。

关于顶部导航可分为以下6种类别:A.单张切换样式/B.多张切换样式/C.功能类样式/D.特殊排版一致类布局/E.特殊背景处理/F.复合拓展类

那么我们就不同类型进行举例并说明其运用场景。

A.短线导航

短线导航通常文字底部会有一个跟随文字滑动切换的小滑块,长短、造型各异。通常分为:常规短线/异形短线/左侧文字+滑块Tab切换

640.jpeg

常规短线

常规短线通常与文字保持左右居中状态,在滑动的时候一般情况会保持大小、长度、颜色不变。如果想要左右切换的效果更加流畅通常会在短线上加入动效,即由短变长,再变短且与原先长度保持一致。

640-1.jpeg

异形短线

异形短线通常跟常规短线不同的是不一定与文字保持居中,且形状与颜色都有可能存在差异。例如上图的土豆App的推荐页面短线是紧紧压在文字下方或底部对其的基本没有什么间距,且短线短于文字的长度。类似的还有大众点评app短线甚至与文字底部重合,且颜色为渐变色。

640-2.jpeg

除了常规短线的变异外还有斜角短线如图三。当然还可以变换其它造型,这个就要根据我们产品的特性来进行设计了,比如马蜂窝采用的弧形短线提取的是马蜂窝的Logo造型的弧线特点。

640-3.jpeg

虾米采用的直接是通栏的声波线,而且根据文字的大小切换还可以变大变小,且在动态切换过程中声波还会发生动态效果,这里就非常符合音乐声轨的特性。

左侧文字+滑块tab切换

还有一种情况是当文字切换不能撑满或者超出APP的横屏的时候,一般最多不超过5个切换模块。这种情况通常会将文字放置在页面左侧,并加上常规或者异形的滑块进行左右滑动式切换。

640-4.jpeg

B.文字导航

通常为纯文字tab切换,一般为字体大小、粗细、颜色等变化

640-5.jpeg

文字相对突出类

文字相对突出类通常采用的是选中的文字加粗颜色和大小不变,或者选中的文字颜色发生变化如上图。

640-6.jpeg

大小差异类

通常选中的文字比未选中的文字大很多,一般除了大小有的还会存在颜色或者文字行数的差异。例如腾讯视频选中效果采用的主色,豌豆公主选中状态文字下面的日语文字消失。

640-7.jpeg

logo+文字切换

通常顶部导航的文字会搭配LOGO进行展示,例如上图MakeAPP的首页的选中状态是LOGO+HOME,当向左侧滑动到LIFE页面的时候LOGO则变换到页面最左侧,文字LIFE单独进行展示。

640-8.jpeg

卡片式文字

将没一个文字单元模块设计成一个个独立的卡片来进行切换,通常适用于期刊、时间分割等。也就是有明显的时间分割,且模块间为同一层级。例如小日常APP的TODAY页面的顶部导航设计就是以时间日期划分的。

C.色块导航

通常为用底部色块来表达当前的选中样式

640-9.jpeg

选中色块

选中色块通常被选中的文字模块底部会放置一个色块,通常是矩形或胶囊的形状,且多数会左右滑动进行切换。例如唯品会的圆角矩形选中样式,淘宝有好货和图三的胶囊选中样式。

640-10.jpeg

分段控件

分段控件是iOS系统中所特有的tab选择样式,需要注意它是不能通过划动来切换的。 如上图地铁通APP的选择导航页面的顶部导航样式。

D.图形导航

图片加文字导航,选中样式一般为短线或者底部色块。

640-11.jpeg

图标类

纯图标类导航,一般是以图标来进行模块区分,被选中的图标底部有的还会放置底部短线,如上图所示,常用于信息类APP。

640-12.jpeg

图文类

图文类导航一般为图标和文字结合,被选中样式的底部有的也会加上底部短线,不加的一般会用颜色来进行区分。通常购物类APP运用的比较多。

640-13.jpeg

图标收纳类

图文收纳类一般收起的状态没有文字只有图标进行展示,右侧有一个综合类的收纳抽屉按钮。点击之后会展开大图标和底部的文字说明。例如陌陌的首页顶部导航设计。

E.时间效性导航

时间效性导航通常用于电商售卖,商品预告等

640-14.jpeg

时效性导航一般主要以时间轴为切换模块,时间下面通常会放置当前模块的时间状态。例如淘抢购被选中的状态文字表明了抢购进行时。京东秒杀的选中状态写着抢购中。

F.顶部双tab导航

通常为上下双层导航

640-15.jpeg

页面切换类双tab导航

此类导航通常用于导航层级较多的情况,例如淘宝的微淘模块,关注和发现在同一层级下切换,且其中一个或者2者的二级层级拥有多个分类的情况下采用双tab导航。

小图标索引+二级tab导航

这种导航类型较为少见,通常会将一些重要的模块入口收纳到小的色块区域即为小图标索引,与搜索框并排展示,且下部还会叠加一排二级tab导航。当页面向下滑动时小图标索引导航展开,页面向上滑动时,小图标变为索引方便用户快速找到想要的入口,无需再次滑动页面。这种形式通常运用在产品层级较为复杂的首页。

G.顶部导航收纳细节

通常在顶部导航的左侧或者右侧会放置一个小按钮

640-16.jpeg

顶部小按钮通常为导航索引按钮多采用收纳类按钮, 如蚂蜂窝首页的小箭头按钮、陌陌首页的四个点的按钮。此外还有搜索按钮、导航筛选+快捷搜索功能的复合类按钮,例如淘宝的天天特价页面。

以上这些按钮通常点击之后会弹出顶部下拉菜单弹窗居多,此外也有点击弹出抽屉式菜单、全屏浮层,还有跳转到新的页面等。

总结

以上主要是对顶部导航的6大类别进行了分类和总结,分为:单张切换样式、多张切换样式、功能类样式、特殊排版一致类布局、特殊背景处理类、复合拓展类。并且对顶部导航可能出现的按钮图标和运用方式进行了简要的说明。希望本篇内容对您有帮助,欢迎留言补充或交流!

往期文章阅读:App导航栏的几种类型

https://mp.weixin.qq.com/s/tj0AfgvgVNNFXBgQMN-Rkg

2.jpeg

海盐社.jpeg

喜欢就分享
精选评论