移动端TAB你了解多少?

用户头像
长沙/UI设计师/5年前/1390浏览
移动端TAB你了解多少?

APP中的TAB导航你了解多少?下面

APP中的TAB导航你了解多少??


导航在移动端app中是非常常见的入口处理手法,目的是为了让用户更快的获取内容,提升用户操作效率

导航其实都知道是什么不过多解释,但是你知道导航又有多少种么,每个导航适用什么场景



知道的需要看看因为你需要巩固一下可能还有你未发现的秘密(互相学习一下)不知道的你更要看看,你会发现个新世界




一、底部标签导航

    

     1、常规型导航

     常规导航就是我们经常见到的底部tab切换,一般数量限制在4-5个,从视觉层看过多或者过少都会造成视

     觉上不平衡,从交互上看- - -请了解(7±2 法则)-。-

     

     优点:这类导航适合在相同等级页面之间进行切换能够提升用操作效率,并且此类导航触发范围大能够降低

     用户错误触发,如下图中有道、得物首页

     

     缺点:数量限制,如果产品同等级核心功能超过6个就不宜用这种tab,视觉上标签占比范围会缩小造成页面

     的头重脚轻,交互上会降低用户记忆点,提升学习成本

   

    


    


    



    2、船舵式导航

    船舵式顾名思义跟船舵一样,突出产品核心业务功能,另一种是把具有操作性的功能聚集在一点进行收缩展开

    如下图中的闲鱼,也有一种是不包含子级功能例如8.0版本美图秀秀


    优点:聚焦用户目标、提升用户效率

    缺点:底部变高增加占比面积,会遮挡部分内容

    

  

   再说一句此类型导航更多适用于工具型和社交型app

   

   

   



   3、浮动导航

   这类导航在移动端场景运用中属于极少数,就一个字 “大” 这里的大是指屏幕占比面积大并且不容易融入页面中

   达不到一个平衡点

    


   

   例如下方脉脉的最新版本,还有一种和船舵式类似的收缩型现存app中很难找到图片(找了张安卓风格)

   脉脉这个底部tab通过了解评价是挺突兀的,我个人理解这么做的目的是为了引导用户去更频繁的切换进入二级

   页面,因为二级页面中机遇人脉以及个人中心都涉及到付费点


     

 





二、顶部切换导航

 

    1、文字式导航

    这类导航是经常见到的应用比较广泛,几乎打开一个app都会见到这类导航,使用较多的通常是电商类和

    新闻类app

    

    优点:场景运用多变、分类少、用户聚焦更效率

    缺:形式单一、功能拓展性差、引用少

  

   


   



    2、轮播式导航

    轮播导航顾名思义是可以跟banner一样轮播滑动,当业务二级入口较多的情况下可以通过横向列表把信息藏到

    页面之外,能够充分利用顶部空间,区别于文字导航它可以是icon、图片等形式去做视觉展示


    优点:节约页面空间,同时设计手法多变

    缺:如果产品业务入口过多,会降低用户操作效率,用户没有目标预期

  

  



    


   

    3、分段式导航

    分段式导航也叫平铺导航就像一块布铺在地上,最经典的就是ios系统自带的标准控件可以作为当前页面无缝切

    换使用如果进行跳转用户对页面的感知会降低

    
    优点:一般适用于2-3条类别进行切换,触发范围增大、降低用户错误触发

    缺:视觉样式展示方式较少、数量限制是优点同时是缺点


   


   




   4、宫格式导航

   宫格导航是把页面多个入口单独组成一个页面,大部分使用场景是在二级页面,也有部分app把首页作为入口

   承接页;下图toplife是把入口单独组合成页面进行排列,虽然占用页面空间但是每个入口都是独立的对用户而

   言能够增加效率快速筛选;唯物app是把首页作为     二级承接页以大图+文字形式进行排列同样能提高用户效

   率聚焦功能,但是占用首页的黄金面积更多内容无法展示


   优点:信息整齐简洁、层级分明、触发安全区域大

   缺:信息独立无法互通、页面之间无法衔接、增加用户操作步骤

   

    


   

    




    5、复合式导航

    复合式导航是在同一页面之下增加二级入口进行跳转,如下图蜗牛app和知乎app,复合式导航可以作为更多入      口的承载,也可以作为筛选进行使用,现在市场上大多产品还是把复合导航作为筛选使用


    优点:结构分明、界面简洁

    缺:呈现内容不宜过多,用户聚焦困难

  

     






三、侧边导航

    

    1、列表导航

    侧边导航就一种抽屉式列表导航,它把用户操作频率低的功能进行隐藏,通常会使用在用户的个人信息展示和      功能性入口,如下图滴滴是把个人信息以及功能入口代替个人中心隐藏在侧边,小红书是在个人中心中增加侧      边导航用来承放操作频率低的入口

   

    优点:节省页面占用空间,信息层级分明,提升用户聚焦能力

    缺:部分功能隐藏较深,用户可能会忽视

    

    







以上就是移动端产品中常用到的各种导航,导航没有好坏之分只有适合和不适合,产品是多变的不同产品根据特性进行使用导航,导航样式在产品中不是单独存在的,有时候需要打破规则进行设计,多种导航也可以同时存在于产品中













10
举报
|
14
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI 登录界面设计模板包
【新年UI图标】钱包icon
盲盒APP UI设计
户外旅行飞机情侣假日出行
【新年UI图标】会员icon
高级感金属拟物 UI设计组件库
新能源APP应用UIKit
【新年UI图标】秒杀icon
高级表盘系列UI源文件
我的钱包-UI界面设计-app
拟物风质感写实UI卡片合集源文件
【新年UI图标】旅行icon
UI通用设计素材1
3D渐变流体抽象矢量UI背景图
【新年UI图标】体育icon
手表表盘UI系列
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】礼物/活动icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
钱包ui模板
【新年UI图标】汽车icon
【新年UI图标】30个图标
智能家居中心 简约 UI设计组件库
你可能喜欢
相关收藏夹
大家都在看
登录注册