Tab 高亮/按下当前项设计

作者:vkvi 来源:ITPOW(原创) 日期:2021-12-2

Tab 当前项设计,通常有 2 种,一种是高亮状态、一种是按下状态。

高亮状态

用得比较多,文字的手法通常有:

  • 字加粗、加大。

  • 颜色变亮或变深(根据整体风格)。

  • 加下划线(内容多通常是短下划线,内容少通常是长下划线),有些用弧形下划线,当然也有用上划线的。注意:这个下划线可不能简单地用 text-decoration:underline;。

  • 加背景。

示例:

Tab 高亮当前项设计

 

Tab 高亮当前项设计

 

Tab 高亮当前项设计

 

图标的话:

  • 有的是颜色变化。

  • 有的是线性变面性。

示例:

Tab 高亮当前项设计

 

Tab 高亮当前项设计

按下状态

也就是说当前项是灰的,不显眼的。这个和高亮状态恰好相反,采用这种设计手法的不多。

在扁平化、简约化的设计浪潮中,这种风格已经不好找了,如下算一个:

Tab 按下当前项设计

两个 Tab 项?

多个 Tab 项时,设计起来,即使出点问题,用户都能够猜到,当前项是哪一项,因为不一样的那个就是当前项嘛。但是如果是 2 个 Tab 项,就容易给用户造成困扰了。

如下这个设计就不太好(网上截图,质量见谅):

不好的设计

“注册”有下划线、“登录”亮些,这就给用户有点印象冲突,不知道哪个是当前项,好在那个下划线的样式,能够让人理解到,当前项是“注册”,但是并没有在第一时间传达。

如下 2 个就比较好:

注册、登录

 

注册、登录

有人说,你这是色块当然清楚了,如果不用色块,怎么表现?

法一、采用“高亮”

注意,这种情况下,一定要有下划线,单就文字高亮,容易困扰。

法一、采用“高亮”

法二、采用“按下”

让当前项,给人不可点击的感觉。不过这种方法,用的人不多了。

法二、采用“按下”

但是,从某种意义上说,它其实也是“高亮”法,君不见“注册”真的要“亮”些么,只不过与“高亮”法相比,它还突出当前项的“按下”。

个人认为:这个做法在文字上不是很好,属于特定条件下没办法的办法。

相关文章