UI界面设计 ·

app tab指示设计的几种思路

顶部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指示也用了黑色,与整体的风格相匹配。

  • 一种是品牌颜色的横线;
eg. 马蜂窝这种生活旅游服务类的App,为了让用户对品牌颜色形成比较深刻的认知,页面上需要强调的地方都是品牌色来表现,tab也是其中的一个品牌色的体现。

 

小横线视觉表现延展

  • 不同tab用不同的颜色

这是一种比较特殊的表现形式,不同类型的tab用不同的颜色进行表示。

eg.36kr主模块的用色都比较丰富,主要体现在图标和模块入口颜色上,顶部tab指示也与整体的颜色倾向相呼应。

 

  • tab上的进度提示

可以用于有固定数量,且数量不多的tab分类中,因为形式标记复杂,记忆点明确,可以用于生活娱乐类App中,增强页面的视觉表现力。

6. 体现品牌特征的元素品牌特征的表现方式主要有4种

通过品牌颜色来增强用户对品牌颜色的记忆点;

  • logo辅助图形的延伸;

eg.马蜂窝的小短线取自logo,像一个笑脸意向给人青春活力温暖的感觉,并且记忆点特别深刻,加上波纹的动效形式,能感受到设计上的用心。

  • slogan图形再利用;

eg. 网易新闻,各有态度。通过态度的图形提炼及应用,可以让人们对品牌slogan记忆深刻,对品牌文化的传播起到非常正向积极的影响。

  • 体现产品属性的图形;

eg. 虾米音乐将音波引入tab中也是一种非常棒的表现方式,记忆点深刻,波纹的律动感也为整个tab增加了设计感,使用起来可以感觉到好玩有趣。

 

7. 图形第三者这种图形第三者主要运用在电商类平台上,因为页面内容、颜色和形式都比较丰富,这种情况下想要体现一种差异感,就需要放大招,用图形做背景。

eg.我们可以看到美团外卖的图标用写实的手法来表现,无法在形态和颜色上进行区分,这时候就非常有必要引入一个背景色来做衬托,但是又不想破坏页面的透气性和舒适感就用了这种浅浅的渐变形式,视觉上很舒服。

 

总结

今天主要讲解了tab指示的设计思路和常见的tab形式,希望可以拓展大家的思路,在现有样式的基础上做更多的尝试和延展,可以输出更加有趣、丰富、美观的tab形式,为整个设计资源库里增添新的色彩。

 

 

作者:小火焰🔥  转自微信公众号:海盐社

参与评论