顶部tab是我们在设计APP时最常用到的组件,资讯、购物、教育、音乐、视频等各种类型的APP中都可以看见它小小的身影,虽然它占据的页面空间不大,但是却在界面中却发挥了很大的作用,本次分享简单整理一下目前最常用的Tab种类,着重分析tab指示的设计思路、常用样式及其他价值。
一. 为什么会有tab指示
界面在呈现非单一维度的资源时,为了让用户可以快速找到目标资源,会按照不同的维度将资源进行分类,比如视频类APP的资源类型有热点、电影、电视剧、综艺等等,用户在不同类型的资源中进行切换的时候,为了防止用户迷失其中,就需要用一个比较明显的样式区分当前tab和其他tab,以便用户可以清晰定位自己所在位置。
二. 顶部tab的种类
在展示现有的tab指示之前,我们先来简单了解一下tab的种类,以便我们可以根据不同种类的tab给出不同的指示样式。1. 纯文字tab这是最常见的tab类型,资讯、音乐、视频、社交等内容呈现为主的APP基本都是这种表现形式
2.文字+图标型tab
这种类型的tab常用在购物类APP中,电商、外卖APP中常见
三. 顶部tab指示设计思路
通过了解tab的种类我们可以发现,两者合起来看也就2个元素,一个是文字,一个是图形,那我们先来看看这两个元素想要做出不同会有哪些形式:1. 文字不同文字之间要想做出差异性,主要有三种途径,一是字号大小不同,二是字重不同,三是颜色不同
2. 图形
图形结构要想做出差异性,主要也是两种途径,一是颜色的不同,二是图形结构的不同(线面切换)
当然你也可能想说还可以做大小的不同,这种想法在设计中是很常用的手段,但是在顶部tab这个小小的空间内就不太适合了,因为用户更多关注的还是文字内容,图标只是起到辅助说明的作用,不应该在这里抢主角的风头,同时这个小小的空间也不适合做这么复杂的变化。
3. 引入第三者
tab本身的元素已经能做出差异,但是为了让这种差异更明显一点,我们在界面设计中通常还会引导第三者,一个简单的图形放在文字的周围,辅助进行定位说明。根据通用和特色可以分为两种形式:一种是小横线提示,二是体现产品品牌特征的元素
以上是设计tab指示最基本的思路,这些设计思路可以单独展示,也可以和其他类型搭配进行展示,下面我们就具体它们在界面中都是怎样呈现的。
四. 顶部tab指示类型展示
1. 文字颜色不同
要做出文字颜色的不同主要有两种方式:
- 常规的tab用黑色的文字,当前指示的tab用品牌色做指示
- 常规tab用灰色的文字,当前指示的tab用黑色的文字
2. 字重不同
从下图中的例子我们可以看到字重的改变通常不是单独出现,而常常会与颜色、字号等变化一起搭配使用。
3. 字号大小不同
字号大小不同也经常伴随着颜色、字重的不同,或者引入第三者。
4. 图形不同
tab上的图形不同主要还是在线面的区分上,当前状态为面形图标
5. 小横线指示
小横线常用表现形式
- 一种是黑色的横线,通常底部工具来的图标切换也是黑色的,没有品牌属性;
eg.人人都是产品经理整个首页都没有颜色倾向,给人营造一种沉浸式的阅读体验,所以tab指示也用了黑色,与整体的风格相匹配。
- 一种是品牌颜色的横线;
- 不同tab用不同的颜色
这是一种比较特殊的表现形式,不同类型的tab用不同的颜色进行表示。
eg.36kr主模块的用色都比较丰富,主要体现在图标和模块入口颜色上,顶部tab指示也与整体的颜色倾向相呼应。
- tab上的进度提示
可以用于有固定数量,且数量不多的tab分类中,因为形式标记复杂,记忆点明确,可以用于生活娱乐类App中,增强页面的视觉表现力。
通过品牌颜色来增强用户对品牌颜色的记忆点;
- logo辅助图形的延伸;
eg.马蜂窝的小短线取自logo,像一个笑脸意向给人青春活力温暖的感觉,并且记忆点特别深刻,加上波纹的动效形式,能感受到设计上的用心。
- slogan图形再利用;
eg. 网易新闻,各有态度。通过态度的图形提炼及应用,可以让人们对品牌slogan记忆深刻,对品牌文化的传播起到非常正向积极的影响。
- 体现产品属性的图形;
eg. 虾米音乐将音波引入tab中也是一种非常棒的表现方式,记忆点深刻,波纹的律动感也为整个tab增加了设计感,使用起来可以感觉到好玩有趣。
eg.我们可以看到美团外卖的图标用写实的手法来表现,无法在形态和颜色上进行区分,这时候就非常有必要引入一个背景色来做衬托,但是又不想破坏页面的透气性和舒适感就用了这种浅浅的渐变形式,视觉上很舒服。
总结
今天主要讲解了tab指示的设计思路和常见的tab形式,希望可以拓展大家的思路,在现有样式的基础上做更多的尝试和延展,可以输出更加有趣、丰富、美观的tab形式,为整个设计资源库里增添新的色彩。
作者:小火焰? 转自微信公众号:海盐社
全站高品质素材免费下载!