陌北默
Tab's little short line (7)
阅读此文大约要花费您5分钟时间

 

有朋友说让我多写点能增加工作经验的,像上次《输入框的细节你都注意到了吗?》那种,于是想起去年研究的一个问题,是关于Tab 的,想不想听?
管你想不想,反正就讲它!不过在讲之前我们先来科普下今天要讲的东西是啥,看下图:
Tab's little short line (8)
每一个选项都是一个tab ,tab 的形式千千万,但今天只讲这种选中后下面带横线的。(我们给这个横线起个名字叫做小短线吧,下文都这么叫了哈?。?/section>

 

今天的大纲如下:
  • 1.tab是用来干嘛的
  • 2.tab 的分类
  • 3.几种常见的小短线
  • 4.小短线的注意事项一
  • 5.小短线的休息事项二

 

1.tab是用来干嘛的

Tab 的中文名是标签的意思,他是用来干嘛的呢,如果你用过ps,还记得软件右边的工具窗口吗?如下图:
Tab's little short line (9)
上图有库、调整、样式三个tab,为什么要设置这三个tab 呢?
试想一下,如果没有tab 给它们分类,所有的小功能全部平铺开,哪有地方放啊,找起来多麻烦!
所以通俗的来讲tab就是为了做好分类,节省空间,等需要的时候更容易找到!你想想是不是这么回事!?

2.tab 的两种形式

但我们今天讲的并不是ps里面的tab,而是app页面中的tab,我们可以将其可分为两种形式,固定的tab与可滑动的tab。

固定的tab:

Tab's little short line (11)
谷歌规范中规定:一组固定 tabs 至少包含 2 个 tab 并且不多于 6 个 tab,并且在一行内显示。

 

可滑动的tab:

Tab's little short line (1Tab's little short line)
这种tabs常见于新闻类的顶部导航,可以左右滑动,由于tab个数比较多,所以隐藏一部分。

3.小短线到底定多长

了解了tab ,可以讲今天的重点了!
去年研究的问题就是:tab选中状态时,小短线到底定多长。
Tab's little short line (13)
我找了很多竞品,将所有找到的方案全部罗列了出来,经过分类后,发现大致可以分为两大类,一类小短线固定长度,一类小短线可变长度。

 

先说固定长度的吧,有以下3种方式:
(1).小短线非常短
Tab's little short line (14)
例如猫眼电影——电影???,小短线固定,且比文字短很多,大概只有30像素。

 

(2).平均等分
Tab's little short line (4)
像映客的贡献榜页面,有三个tab,每一个小短线的长度就是三分之一的屏幕宽度。

 

(3).除去两边页边距后平均等分
Tab's little short line (5)
猫眼——我的订单页面,小短线的长度是先除去两边页边距,然后将中间部分平分。

 

接下来是小短线长度可变化的时候:
Tab's little short line (12)
上图是B站的番剧页面,短线的长度会随文字的多少变化而变化,一般小短线的长度会比文字稍微宽几像素,具体看情况而定。
这种方式会使页面及切换效果比较舒服,缺点就是开发哥哥需要多些几行代码。
小短线的长度规则差不多就上面那几种(可能会有遗漏的,不过这些已经够我们用了),我们可以根据具体的成本和场景选择使用,但有一些共性的地方值得我们注意一下,请继续往下看吧!

 

4.注意事项一

小短线的长短其实并不是随意使用的,我们看下图:
Tab's little short line
我们看同样是猫眼app里面的界面,一级导航的小短线很短,二级导航的小短线就很长。
还有很多app都是相同的规则,例如映客app:
Tab's little short line (1)
这是为什么呢?大家可以先自己想想为什么会出现这样的情况,然后再看我的分析。

我的分析如下:

一级导航会有其他图标,如果小短线太长会使整个导航看着太乱太复杂。

二级导航一般没有多余的信息和图标,所以小短线用的长一点也没关系,反而让层级更清晰,页面更饱满。

不过有时候二级导航也会选择让小短线很短,使整个页面更加简洁清爽,例如美团的订单页面:

Tab's little short line (2)

所以很多时候,事情并没有那么绝对,有合理的说法就可以了!
你和我想的一样不?嗯,一样也不给你钱!

 

5.注意事项二

看下图,又发现一个现象:
Tab's little short line (3)
小短线如果很短,一般就会稍微粗一点,比如6px,因为本来就短,如果还那么细,是不是….
小短线如果很长,一般就会稍微细一点,比如4px,因为本来就长,如果还那么粗,是不是….(想歪的同学请自觉出门右转去面壁?。?/section>

总结

最开始遇到这个问题的时候,我觉得小短线随便定一个不就好了,哪来那么多讲究,但是当老板问我为什么这样设计的时候,我就没话了!
所以遇到问题,如果你没有十足的把握,就先分析竞品,把所有能找的方案罗列出来,然后进行归类,最后看我们的情况适合用哪种方案,这样在说设计思路的时候就可以有理有据,底气十足了!
科科!

 

作者:菜心(微信公众号:菜心设计铺)

cxsjpqr

转载请注明:学UI网—UI设计师学习教程平台 » 为你增加工作经验②——Tab的小短线

登录收藏

学UI就上学UI网!越努力,越幸运!

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

【特色推荐】

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

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

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

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级
「译」苹果官方 iPhone X 人机界面指南「译」苹果官方 iPhone X 人机界面指南
从iOS 11看怎样设计APP图标从iOS 11看怎样设计APP图标
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
网易设计师复盘小程序轻设计网易设计师复盘小程序轻设计
移动UI进化中!10种创新的导航菜单实例移动UI进化中!10种创新的导航菜单实例
网易严选APP品牌设计流程详解网易严选APP品牌设计流程详解
作为交互设计师的经验感悟作为交互设计师的经验感悟
?