今天这篇文章来给大家分析一下tab。其实tab隶属于产品导航体系的一部分,所以你要了解tab,必须要它放在导航体系中来分析。希望这篇文章可以帮助大家以后更合理的去使用tab。

原文出处: elaine90   

tab的分类

为了更好的了解tab,我们首先要对tab做一个分类,这里我所分类的依据是位置。那么根据tab在界面中所处的位置我们可以把tab分为顶部栏tab、侧边栏tab底部栏tab,当然在导航体系中我们会说成顶部栏菜单、侧边栏菜单和底部栏菜单,都是一个意思。

虎扑的这个界面非常具有代表性,因为三种tab样式出现在同一个界面里,方便我们进行分析。从导航体系的层级来说,底部栏属于一级导航,顶部栏属于二级导航,而侧边栏属于三级导航。这种划分标准的其实是跟用户的拇指活动范围来决定的,或者说是拇指法则。

“拇指法则”是资深交互设计大神Steven
Hoober在2013年对1300名手机用户的调查研究后提出来一个新名词。他通过研究发现,49%的用户都是单手拿着手机,使用拇指进行操作。甚至某些大屏手机使我们不得不进行双手持握的时候,多数人也还是倾向于使用自己的拇指。Josh
Clark在另一项研究中也得出了类似的结论,他指出:75%的手机交互都是由拇指完成的。因此我们也可以说,对触摸屏手机进行交互设计,用户主要使用的就是拇指。

一级导航用户使用最频繁,所以用户的拇指必须很容易就能操作,而侧边栏和顶部栏相对来说都属于“边陲地区”,用户拇指很难够得着,手小的用户甚至要借用左手或改变握持姿势。这肯定不是一个令用户满意的体验了。

其实这个也给了我们一个启发,在给移动端产品设计界面的时候,你一定要把图放在手机上看,自己尝试”操作”来测试易用性。你的产品必须要让用户的手指操作起来很舒服,或者可以解放用户的手指,让用户可以单手很方便的完成操作。我可以给大家举一个例子,我之前听到一个朋友抱怨说,微信发语音不方便,因为右手单手握持操作的时候拇指很难够得着。我尝试着把语音和表情的图标对调了位置,发现并不理想。

虽然发语音更方便了,但是斗图就很困难了。现在这个全民斗图的时代,用户发表情包的频率肯定要比发语音的要高得多(我瞎猜的)。所以微信这里语音功能放在左边虽然难点击,但是我觉得没有毛病。

对于侧边栏tab,我们一般习惯于出现在界面的左边,但是也有放在右边的,QQ空间的月份tab就是这么做的,这样做的一个好处就是用户(右手单手握持)更容易操作了。而且放在左边的话会挡住动态的发布时间,而这个功能的使用场景就是用户想要看到老秦某个月的状态,你挡住了发布时间还看个毛。

既然侧边栏tab在右边更方便操作,为什么大部分界面设计中侧边栏还放在左边呢?在我看来,侧边栏tab放在界面左边还是右边取决于tab标签与内容的关联性。

举个例子,如果你想在虎扑里找到金州勇士队的专区,那么你得先找到NBA论坛,再去找勇士专区。从上往下,从左到右,符合Z型浏览习惯。

如果你把侧边栏tab放在左边,那么用户的浏览方向是反Z字的。而QQ空间的话,用户不用看左边的tab项也能知道这条动态的发布时间,所以放在右边更加合适。

根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。与大家共勉。

tab的两种状态

上面主要说位置对于tab的重要性,接下来我们主要说tab的设计。在设计tab之前,我们可以进行一个解构,任何一个tab项其实都可以由文字和icon组成,其中icon是非必需的。从信息传递的角度来说,再牛逼的icon也比不上文字。

Tab可以分为选中状态和非选中状态,一般来说为了凸显选中状态,我们主要有三种方法:字色,线条和背景色,其中线条的位置可以在文字上方也可以在下方。

我看了一下目前手机的应用,发现使用线条的频率要远远的大于背景色。在我看来,导致这种现象的原因有两个。

其一,加线的tab的样式都是全贯通的,比较适合用于展示层级较高的导航。而导航都是由上而下的,所以设计师会优先考虑使用线条,然后层级较低的导航为了区分会使用背景色来区分。

其二,色块的视觉权重更大一点,会分散用户的注意力。而tab属于导航体系,是为了让用户更方便找到自己期望使用的功能,所以tab做的太显眼没有必要。这也是设计师优先考虑线条的原因。例如,下图中的tab可以放大,居中,但是会侵占内容区域,所以还是舍弃。

以上就是我自己所总结出来的两个原因,其中第二的原因涉及到信息的优先级。这里我觉得我需要再延伸一点其他的内容。

设计师在日常工作的时候,最讨厌的一件事情莫过于甲方临时改需求。一个稿子来回反复的改,那么设计师如何避免这种情况呢?在我看来,设计师在拿到需求之后一定要跟甲方进行充分的沟通,确认好需求。当然这里的确认需求,不仅仅是跟对方核对字段是否出错这么简单。而是要弄懂甲方这份需求中的信息层级设计风格,说白了就是这个界面/banner风格你想走什么风格,你要突出哪些内容。

很多时候,甲方虽然给你需求了,但是他们自己根本不知道自己想要什么?他们的期望是让设计师先做出一稿,他们在这个稿子上进行反复的修改最后达到他们心中所期望的效果。这种做法无异损害了设计师的利益,因为当甲方都不知道自己想要什么的情况下,你的初稿是根本没有任何通过的可能性。所以通过询问信息层级和设计风格这两个问题,促使甲方具象化自己的需求,这样也省的设计师来回的返工。

写在前面:看了很多总结导航的文章,其实都基本雷同,但是都觉得不够细致,也不是从我们常用的产品去分析的,因此用自己的思路重新分析了一遍,某些段落来自引用,比如拇指热区,某些来自我读过的文章,但大部分的分析来自我的原创。这篇文章应该说是站在巨人的肩膀上,自己的一些浅见。

Tab的使用场景

任何一个设计组件/元素我们进行分析的最终目的都是为了更好的使用。“更好的使用”不仅仅是知道如何使用,也意味着要明白使用的场景,知道什么时候该用什么时候不该用。

文章开头就说了tab属于导航体系,而tab在导航体系中是属于万金油,基本都能用,但是也有用不了的时候。例如QQ邮箱,这是少数没有使用底部栏菜单的产品。这里使用的是列表式菜单,这是因为QQ邮箱是核心功能流程比较单一的产品,主界面就可以满足用户核心场景下的需求,不需要通过底部栏菜单来在几个功能模块之间来回切换。

简单的用不了tab,也不意味着复杂就一定可以用。我再举一个例子,tab项过多情况下用户可以滑动,但是有的情况下tab选项实在是太多了,这时候tab就不太合适。企鹅直播这里可以切换成弹框进行选择,这个解决方法就很棒。

所以说tab的使用场景还是很复杂,一篇文章的篇幅肯定说不了,这里我也只是给大家开了一个头,更多的还是要大家多下app去分析。

任何APP的组织信息都需要以某种导航框架固定起来,就像是建筑工人拔地而起的高楼大厦一样,地基非常重要,之后你想要盖多少层楼、每层楼有多少间房,都在地基的基础上构成。而一个新的产品也是这样,合适的导航框架,决定了产品之后的延伸和扩展。

总结

以上就是我对常见tab样式的总结,希望可以帮助到大家。

不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设计的第一步,就是决定导航的框架设计,框架确定后,才能开始逐渐丰富血肉。

首先,我们要为组织信息分层,在这一步骤,一定要做好信息层级的扁平化,不能把所有的组织信息都铺出来,这样做只会让用户心烦意乱找不到想要的重要操作,也不能把层级做的很深,用户没有那么多耐心跟你玩躲猫猫。一定要将做核心、最稳固、最根本的功能要素放在第一层页面,其他得内容收在第二层、第三层、甚至更深。

之后,根据层级的深度和广度来确定导航的设计模式。不要觉得这有多难,移动端的屏幕尺寸就这么大,操作方式也无非就是点击、滑动、长按这些。因此导航模式一般也就分为以下7种(当然你可以在这七种的基础上互相组合)接下来我们可以具体分析一下这七种导航模式。

一、标签式导航

也就是我们平时说的tab式导航,是移动应用中最普遍、最常用的导航模式,适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。需要注意的是标签式导航根据逻辑和重要性控制在5个以内,多余5个用户难以记忆而且容易迷失。

而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的扩展导航这三种。

1、底部tab式导航

如果此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、微博、美团、京东等全部都是底部tab式导航

这是符合拇指热区操作的一种导航模式,那么什么是拇指热区呢?当你走在路上、单手持握手机并操作;站在公交车上,一手拉扶手,另一只手操作等等这些场景时,你最常用的操作就是右手单手持握并操作手机,因此,对于手机来说,为触摸进行交互设计,主要针对的就是拇指。

但在手机操作中,拇指的可控范围有限,缺乏灵活度。尤其是在如今的大屏手机上,拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。当用右手持握手机的时候(左撇子毕竟是少数,我们还是要为主流用户设计,拇指的热区如下图所示)

图片 1

随着手机屏幕越来越大,内容显示变多了,但是单手操作变难了。这也就是为什么,工具栏和导航条一般都在手机界面的下边缘,而将导航放置在屏幕底部即拇指热区,这样的方式为单手持握时拇指操作带来了更大的舒适性。

将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性,还关系到另一个问题:如果放在上面,用手指操作时,会挡住阅读的视线。如果控件在底部,不管手怎么移动,至少不会挡住主要内容,从而给予清晰的视角。呈递内容的屏幕在上方,控制按键在下方。

这也是为什么我是个果粉的原因,iPhone把一个需要按压的home键放在手机底部比Android手机将三个触摸式物理按键放在底部高明多了,这些接近屏幕边缘的物理按键挤在一起,手指非常不便于操作。(华为甚至直接将3个物理按键放在了屏幕里),尤其是在我玩游戏的时候总会误触发这3个物理按键,造成无意退出,非常不爽。如果再将导航也放置在底部,只能对舒适性说拜拜了(市面上的主流Android手机)

图片 2

 2、顶部tab式导航

Android的物理按键已经放在底部了,为了不产生堆叠,很多Android应用运用了顶部tab式导航,这是一种妥协下的行为。(下图为微信Android和iOS图)

图片 3

而如今,在妥协物理按键和拇指操作舒适中,微信Android版抛弃了顶部导航的方式,和IOS保持了一致

图片 4

当然顶部导航也不是那么一无是处,QQ音乐和酷我音乐现在用的就是顶部Tab式导航,为了更好的浏览基本信息(歌手、歌曲名)、以及支持快捷操作(播放/暂停)播放器需要固定在底部,那么顶部tab导航不失为一个好选择(如下图)

图片 5

 

还有腾讯新闻和网易新闻这种新闻类APP,由于内容、分类较多,运用顶部和底部双tab导航,而切换频率最高的tab放在顶部,这是为什么呢?因为新闻在每个tab都是沉浸式阅读,最常用的操作是在一个tab中不断地下滑阅读内容,将常用的tab放在顶部,加入手势切换的操作,反倒能带来更好地阅读体验。(如下图)

图片 6

小结:在两种情况下可以选择顶部tab式导航,

某项功能必须固定在底部,那么其他tab只能固定在顶部,但为了方便操作,顶部tab导航最好支持手势操作,即滑动即可切换;

该APP是沉浸式体验,如新闻、小说等,为了带给用户更好的阅读体验,可以将tab放在顶部

3、底部tab式导航的扩展形式

  
在有些情况下,简单的底部tab式导航难以满足更多的操作功能,这个时候我们就需要一些扩展形式来满足需求。如微博和QQ空间、闲鱼都做了这种扩展,也因此给设计增加了一些个性化的亮点(如图)

图片 7

图片 8

图片 9

在这些APP中,为了让用户更简单的贡献内容,突出了按钮的设计,让平淡的标签栏多了几分趣味。

标签导航总结:

实际上,底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式,他不怎么出彩,但是绝对不会犯错。在大屏幕时代,底部Tab模式的导航更能适应,也更好设计。

适用于:入口分类数目不多,可以控制在5个以内,且用户需要在入口间频繁切换来执行多个任务

需要注意:结构太过复杂而且不稳定的应用不适合标签式导航

二、抽屉式导航

经常和底部tab式导航结合使用的抽屉式导航,我们可以称之为优雅的隐喻。抽屉式导航将部分信息内容进行隐藏,突出了应用的核心功能。设想你的产品信息层级有非常多的页面和内容,难以在一屏内显示全部内容,那么你一定首先会想到去设计一个底部或顶部的tab导航,但导航太多无疑显得臃肿,而且使用户难以点击,那么这个时候,抽屉式导航是个不错的选择。

但是,抽屉栏式导航有两大缺陷

1、在大屏幕手机上,单手持握时处于操作盲区,难以点击

我们看到随着iPhone6和iPhone6
plus的推出,到今年6S的持续推进,大屏幕手机时代就这么不可阻挡的来了,而屏幕顶部左上角的抽屉栏位置,一个需要被经常操作的入口,现在,处在了操作盲区。(如下图)

图片 10

2、 抽屉式导航可能会降低你产品一半的用户参与度

抽屉栏为页面带来干净的设计的同时,也让用户忽视隐藏的信息,既然你第一眼看不到这些入口,那么你也就会时常忘记它们在哪儿。这也导致了隐藏在抽屉栏内的信息内容用户点击率下降,参与感降低。

那么,问题来了,到底什么时候适合用侧导航呢?

我们总结一下:


如果应用主要的功能和内容都在一个页面里面。只是一些用户设置这类低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观,可以把这些辅助功能放在抽屉栏里。


如果你的应用有不同的视图,且他们是平级的,需要用户同等地对待,抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。


在大屏时代使用抽屉栏,手势操作显得尤为重要,从屏幕边缘唤出抽屉栏是个不错的选择。

需要注意的是:需要用户有一定参与的信息层级,最好不好放置在抽屉栏

三、列表式导航

如果说标签式导航是APP中最普遍的导航方式,那么列表式导航就是最必不可少的一种信息承载模式,这种导航结构简单清晰、易于理解、冷静高效,能够帮助用户快速定位到对应内容。在APP中的应用也分为两种

1、 作为主导航使用

如果该APP主要表达的信息层级较为单一,且并不会在入口间频繁且反复跳转,那么将列表式导航作为主导航是一种不错的选择。例如杂志Elle,作为一个杂志APP,他以文字、图片表达为主,层级浅且内容评级,用列表式导航作为主导航来构架内容,简单而直接。(如下图)

图片 11

2、 作为辅助导航来展示二级甚至更深层级的内容

你几乎在所以APP中都能看到它的应用,作为信息梳理条目,列表数量尽量保持在一屏以内,超过一屏最好再分一级,而且按照人一次只能记住4项事物的心理法则最重要的内容归纳在前4个列表更容易被人们记住。如果不同种类的内容放在同一页面,那么要注意为这些内容分类,比如微信的设置页面,用留白的方式来区分内容的不同(如下图)

图片 12

总结:

列表式导航大多作为辅助导航来展示二级甚至更深层次的内容,若要作为主导航,必须满足层级浅且内容平级的条件

需要注意的是:

l  列表式导航的数量保持在一屏以内,超过一屏最好再分一级,

l  将最终要的内容归纳在前4个列表更容易被人们记住

l  要注意为列表内容分类。

四、平铺式导航

当你的信息足够扁平,可以尝试平铺式导航。这种导航方式很容易带来高大上的视觉体验,最大程度的保证了页面的简洁性和内容的完整性,且一般都会结合滑动切换的手势,操作起来也非常方便。PChouse是一个家居杂志的APP,杂志休闲随意的特质,非常适合平铺式导航,最大限度的保持了图片的完整性。(如下图)

图片 13

但缺点是用户只能切换的相邻页面,很难跳转到非相邻的页面,很容易迷失位置,因此平铺式导航都会添加几个小点来指示当前位置。如墨迹天气中切换城市的操作就运用了平铺式导航,优点是可以在一个页面完整展示当前城市的情况,快速切换到其他城市。但如果你设置的城市比较多,就很难快速定位到某个城市,但所幸手势操作切换方便,且正常情况下,用户最多只会设置2-3个页面,不会造成太大的负担。

图片 14

淘宝中的店铺推荐也使用了平铺式导航,推荐店铺虽然有40个之多,但用数字表达出了明确位置的同时,也加入了手势切换,增加了易用性和趣味性。

图片 15

总结:

轮播式导航比较适用于足够扁平化的内容和随意浏览的阅读模式

需要注意的是:无法跳转至费相邻页面,如果入口间需要反复跳转,则不适合这种模式

五、宫格式导航

这种导航模式非常常见,但是却不常用。

常见是因为,无论你用的是Android还是iOS,每天一打开手机,宫格式导航就会对你说hello了(就是下图啦)

图片 16

每一个APP都是一个宫格,这些宫格聚集在中心页面,用户只能在中心页面进入其中一个宫格,如果想要进入另一个宫格,必须要先回到中心页面,再进入另一个宫格。每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面,这就是为什么说他常见。

但是为什么不常用呢,大家可以翻一下手机里的APP,看看哪个APP的主导航用了宫格式导航?你可能只能找到一个最常用的,尤其是爱自拍的亲们-美图秀秀(如下图)

图片 17

经常使用美图秀秀的人都会有一个共同的烦恼,例如我拍了一张图片,我需要美图一下,我的心理模型是这样的:进入美图秀秀-打开一张图片-先祛斑祛痘、放大眼睛、瘦个脸-最后加上特效(自然/甜美可人/粉嫩系)-保存图片。

但是美图秀秀给我的实际模型却是这样的:进入美图秀秀-打开一张图片-进入人像美容-祛斑祛痘、放大眼睛、瘦个脸-保存图片-再进入美化图片-加个特效-再次保存。这样做的结果是流程复杂,而且我多存了一张没用的照片,还要到照片里进行删除。

这就是宫格式导航的缺陷,信息互斥,无法相互通达,只能给用户带来了更多的操作步骤。

总价一下:

宫格式导航适合入口相互独立互斥,且不需要交叉使用的信息归类

一旦入口需要有所交集,必然导致更多的操作负累,这个时候只能根据产品特性做出权衡,如果不适合,建议果断拒绝这种方式。

六、悬浮icon导航

悬浮icon导航,是将导航页面分层,无论你到达APP的哪个页面,悬浮icon永远悬浮在上面,你依靠悬浮层随时可以去想要去的地方,同时,为了让悬浮icon不遮挡某个页面的操作,通常悬浮的icon都可以在屏幕边缘自由移动。

iOS系统就运用了这种导航模式-Assistive Touch, Assistive
Touch是在iOS5出现之后搭载的新的辅助功能,知乎上很多人吐槽这个悬浮方块非常碍事,还有很多人说这是因为home键质量不佳而且官方并没有明确提出有效的解决方案,所以AssistiveTouch是曲线救国,此处应有笑声…我最早的一部4S用了2年,摔碎屏2次,home键都依然坚挺,撇开home键不谈,单说悬浮icon在大屏幕时代发挥的作用,当你单手持握手机,拇指在手机中部浏览,你想回到主屏幕,但是手指却难以到达屏幕底部,悬浮方块在这个时候就能为你提供快捷操作。

图片 18

而且你可以在AssistiveTouch里自定义顶层菜单,我比较喜欢里面的屏幕快照功能,不用按住电源键和home键就能截屏的感觉棒棒哒!

Assistive
Touch从iOS5一直活到iOS9,真不是一个鸡肋的功能,关键看你怎么用。

在Android的Material Design中,同样提出了悬浮icon的设计概念。

图片 19

尽管现在很难看到悬浮icon作为导航的设计,但我相信随着大屏的发展,悬浮式icon一定会越来越广泛的使用

总结:

悬浮式icon是一个非常便捷的操作入口,也适应大屏幕时代。

但需要注意的是

l 悬浮式icon会遮挡某些页面的操作,在设计的时候应该考虑进去,比如无论在那个页面永远为悬浮icon留有位置。

l 在某些信息层级繁多且复杂的APP,让用户自主决定是否需要调出悬浮式icon,或者让用户自定义菜单会更加符合用户的心理预期。

七、更多自由

我总结的导航其实只有6种,但大家一定不能被现有的导航模式所束缚,未来会有新的导航模式,新的操作手势…,设计的心应该是自由的,若你羽翼未丰,就在规则的天空中飞行,可能不会出彩但不至于犯错;若你已成雄鹰,便可自由飞翔,突破规则,甚至建立自己的规则。

最后总结一下:

标签式导航:最常用、最不易出错,请第一时间考虑它

抽屉式导航:如果你的信息层级繁多,可以考虑将辅助类内容放在抽屉中

列表式导航:作为辅助导航来展示二级甚至更深层级的内容,每个APP必不可少,但请注意数量与分类

平铺式导航:如果你的内容是随意浏览,无需来回跳转的,可以考虑它。

宫格式导航:不建议在APP中作为主导航使用,如果非使用不可,请增加跳转的关联性

悬浮式导航:更适应大屏的导航模式,不妨试一试,但注意不要让它遮挡住某些页面的操作

最后,根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。与大家共勉。吐血总结了这么多,如果觉得对你还有所帮助,点个赞呗!如果有争议,在评论区讨论一下,我会不断修改。O(∩_∩)O

1 赞 1 收藏 1
评论

相关文章