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

在《iPad交互设计探索系列:iPad适用产品篇》中,我们认为,娱乐、生产工具、后台产品同样适合装载在iPad端上,那么为iPad产品设计导航时,又经过哪些考量呢?市面上的产品,又采用哪些导航模式?

列表式的导航更容易扩展和分组,常用于设置,消息和承载大数量信息的界面。由于列表左右宽度较大。可以结合图标,标题说明或消息数字提示等。为了让列表信息更有层次,在设计上可以考虑分组或二级列表方式,二级列表可以做到展开的隐藏,方便用户查找信息。列表导航通常用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组

Tab的使用场景

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

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

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

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

【直播】移动产品的导航设计,iPad导航设计篇。2.常见iPad导航设计模式

是一种类似手机桌面各个应用入口的导航方式。每一个都是比较独立的信息内容,用户进入一个入口后,只处理与此入口相关的内容,如果跳转至其他入口,必须先回到汇总界面,桌面导航在工具类app中比较适用。每个工具都有一套独立体系,这种导航不适合需要频繁在几个任务间切换的情况。随着移动产品内容丰富,纯粹的桌面式导航开始减少,更多的是融入到其他主导航中,承担起二级导航的作用(支付宝客户端)因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面,这就是为什么说他常见。

【直播】移动产品的导航设计,iPad导航设计篇。总结

【直播】移动产品的导航设计,iPad导航设计篇。以上就是我对常见tab样式的总结,希望可以帮助到大家。

3.如何选用合适的iPad导航?

iPad端产品要根据自身实际的情况来选择合适的导航模式,如果在原APP端使用标签式导航,在iPad中直接沿用即可;如果是内容为主的产品,优先选择顶部导航;如果是后台类产品,推荐选用左侧导航,能保留大多数web端后台产品导航为左侧的用户操作习惯。

此外,tab导航应该作为导航的补充形式,不仅在于tab导航能很好地组织导航的层级关系,还在于拇指左右滑动的操作能很方便地在大屏iPad中进行切换操作。


更多我的原创精彩的文章推荐

精品(超过600赞):干货:让你全方位学习成为一名交互设计师(1.6万字诚意之作)

交互设计方法论系列:

【直播】移动产品的导航设计,iPad导航设计篇。交互设计方法论-万金油5W2H

交互设计方法论-英国设计协会双钻模型

交互设计方法论——总分总结构

交互设计方法论-谷歌设计冲刺Design
Sprint

交互设计方法论-斯坦福Design
Thinking

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

tab的两种状态

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

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

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

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

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

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

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

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

(2)顶部导航

顶部导航是结合了中间内容作为陈列馆式导航的导航组织方式,它的特点是以内容为主的导航方式,通过中间内容引导可以完成所有的操作流程,例如电商产品,在中间以商品的陈列为主,引导用户进入购买流程,顶部导航以辅助的形式存在,提供辅助服务功能入口。

顶部导航的目的是让用户更聚焦中间核心内容,内容类产品例如新闻资讯、视频、阅读类等产品,是顶部导航的最佳选择,如果内容分类较多,可以采用“顶部导航+tab切换”的方式进行组织。

1、底部tab式导航

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项也能知道这条动态的发布时间,所以放在右边更加合适。

(3)左侧导航

无论是标签式导航,还是顶部导航,都没有像左侧导航一样,考虑到用户双手握持的操作习惯。采用左侧导航,显然更符合用户的操作习惯,使得用户能高效地进行导航切换操作。此外,左侧导航页面布局结构清晰,结合右侧顶部tab导航,能很好梳理导航多层级的关系,也适用于导航较多,但是对导航层级组织有要求的产品,例如后台产品。

但是,左侧导航条会挤占一定的页面空间,如果对兼容iPad竖屏有要求的产品,这种导航就不一定合适,因为在竖屏的情况,导航挤占空间会更明显。

但在手机操作中,拇指的可控范围有限,缺乏灵活度。尤其是在如今的大屏手机上,拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。

1.iPad使用行为观察

首先,我们试图从人们使用iPad的行为中找到最舒服的导航方式,通过对iPad的长时间使用和观察,发现,用户使用iPad时的手势分为三种:双手握持、单手握持以及支架式。另外,即使重量最轻的iPad
mini4,也达到了298.8克,相对于两个iPhone
8的重量(148克),所以综合重量来看,双手握持和支架式才是更频繁的使用手势。

另外,大部分iPad应用界面,都以iPad横屏界面为主进行设计,以便达到充分利用界面空间的目的。所以,当人们在双手握持或者支架式使用时,拇指触屏热区应该是下图这样分布的(注:非实验室精确数据)。所以,如果需要频繁使用iPad导航的产品,可以考虑放置于两者交叉的热区范围内。

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

(1)标签式导航

iOS应用主流的导航模式,它的特色是通过底部标签来组织菜单,并且通过高亮的视觉效果凸显当前用户所处的页面。它的结构特色是扁平化,能有效满足用户频繁在同级菜单频繁切换的需求。

标签式导航,也是手机端大多数应用采用的导航模式,如果手机端采用了标签式导航,平移到iPad端时推荐保留同样的导航方式,包括微信、微博等应用都采用同样的处理方式。当然,标签式导航也有其局限性:标签数量最多不能超过5个,4个最佳。对于同级别菜单导航比较多的后台产品而言,标签式导航并不具备可行性。

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

直播 1

四,图片式导航

当然也出现了一些产品将左上的菜单按钮放置在左下的位置(如下图)

直播 2

标签式导航,也常融入一些个性化设计,例如在中间位置融合logo或产品最核心的功能,丰富标签栏样式。如果标签放置的选择过多,则可以采取重点导航集成的方式,这种新的导航方式从标签式导航中分离出来称作:舵式导航。这点我们在qq空间,微博等产品中可以看见

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

跑马灯导航一般是作为页面中的重点推荐,进行定时轮播,适用于信息类产品中使用。

总结:这七种是最常见的导航方式,认识现有导航方式,能够使你在羽翼未丰之时能够正确的使用,待羽翼丰满之时,可能会出现更加符合业务或产品架构的导航方式。或者建立自己的规则。

导航的方式有很多种,正确的认识现有导航模式,能够帮助设计师或产品经理很好的认识产品的架构。不同的导航方式可作为产品的主要导航,也可以穿插使用作为二级导航。导航作为产品的主要框架,在选择导航时需要根据产品的需求来确定选用何种导航方式,这里就介绍下一些常见的主导航方式:

直播 3

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

图示是一种有趣的导航方式,它让导航更加可视化,同时根据页面内容的变化,可以及时跟新图片,适合以图片为主的内容,经常变换的图片也会让用户感受到栏目内容跟新的及时性,对用户来说更有吸引力。同时这种导航需要配置固定的栏目或标题。防止不断更新的图片让用户找不到入口

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

直播 4

我们总结一下:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图