TAB的小短线设计技巧

2017-08-07南风未起 的分享

  每一个选项都是一个tab ,tab 的形式千千万,但今天只讲这种选中后下面带横线的。(我们给这个横线起个名字叫做小短线吧,下文都这么叫了哈!)下面一起来看看下TAB的小短线设计技巧。

TAB的小短线设计技巧   三联

  我们列出今天的大纲 如下:

  tab是用来干嘛的

  tab 的分类

  几种常见的小短线

  小短线的注意事项一

  小短线的注意事项二

  tab是用来干嘛的

  Tab 的中文名是标签的意思,他是用来干嘛的呢,如果你用过ps,还记得软件右边的工具窗口吗?如下图:

  上图有库、调整、样式三个tab,为什么要设置这三个tab 呢?

  试想一下,如果没有tab 给它们分类,所有的小功能全部平铺开,哪有地方放啊,找起来多麻烦!

  所以通俗的来讲tab就是为了做好分类,节省空间,等需要的时候更容易找到!

  tab 的两种形式

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

  固定的tab:

  谷歌规范中规定:一组固定 tabs 至少包含 2 个 tab 并且不多于 6 个 tab,并且在一行内显示。

  可滑动的tab:

  这种tabs常见于新闻类的顶部导航,可以左右滑动,由于tab个数比较多,所以隐藏一部分。

  小短线到底定多长

  了解了tab ,可以讲今天的重点了!

  去年研究的问题就是:tab选中状态时,小短线到底定多长。

  我找了很多竞品,将所有的看到的方案都罗列了出来,经过分类后,发现大致可以分为两大类,一类小短线固定长度,一类小短线可变长度。

  先说固定长度的吧,有以下3种方式:

  小短线非常短

  例如猫眼电影——电影模块,小短线固定,且比文字短很多,大概只有30像素。

  平均等分

TA发布的帖子

593

收藏

589