Tab 你用对了吗？

在android中的Tab

在iOS中的Tab

在网页中的Tab

本文主要以网页端的产品场景为例进行分析和讨论；

当页面空间有限时，页面需要展示多维度且有关联性的信息时，可以选用tab组件来展示页面。

Tab的使用可以在一定程度上节约页面空间，使得布局紧凑，降低信息的展示密度的同时不因空间限制缩减信息量。

Tab 对标现实场景中最经典的是浏览器的标签页；根据不同的不同产品的复杂程度，Tab组件需要承载的页面信息内容可能有不同。特别是后台类型的产品常常因业务的复杂度而需要嵌套多层Tab来满足信息展示的需求，不过建议在设计前，需要先理清产品的信息架构和产品经理进行功能梳理整合，建议网页中的Tab最多不要超过三层。

以我参与的设计语言规范Youcloud Design为例(主要介绍设计的思路，了解思路可设置符合你自己的规范)。产品主要面向To B的移动营销数据产品。因业务特性和面向用户群体的复杂度都要求我们的产品页面需要承载更多的信息内容。我们在设计Tab组件的时候，设计了三种样式的Tab来满足不同的信息层级展示。分别是：

1、Page Tab（页面式） ，强调页面性级别的内容分页，可类比于公司中的不同事业部的分页；用来表达弱关联性或者无关联性的分类信息。

2、Module Tab（模块式） ，用于表达二级分类，模块级别，可类比与一个事业部中的不同项目组；用来表达有关联的信息分类。

3、Label Tab（标签式） ，用于表达三级分类，更细分的级别，可类比项目组中的不同岗位分类；用来表达同层级中关联性比较强的信息分类。

对于Page Tab ，把这种类型的Tab样式设计得像浏览器的页面标签相似，让用户有个心理预期是想给用户传达切换不同tab的时候信息是彼此无联结或者弱联结的。不同tab信息承载的内容也明显能区别关联性。用户因此也能有个预知，切换了之后是看到另外一个不同维度的信息。

对于Module Tab ，这种类型的tab截断感比较小，样式上有一条线相通连接，视觉表现上用来给用户传达不同的维度信息组合描述相同的事务。

对于Label Tab ，这种类型的tab设计得像标签纸一样，与module tab 一样，区别只在于更深入一层来表达信息。

1、能直接展示的信息就不用分tab来展示

tab的引入设计主要是因为页面空间有限但是信息量大的情况，能一个页面展示完的信息就不用切分成不同的tab来展示。所以第一个原则就是能不用就不要用。

2、信息归类符合用户的预期，方便用户对比关联性强的信息。

tab的引入从用户的角度是增加了他们看完整信息的 *** 作的，但是合理的使用也是能理解。前提条件是需要将信息归类分得很合理。减少用户来回切换对比信息的额外 *** 作。

3、信息层级架构设计不要超过三层

“所有信息架构超过三层的信息展示都欠梳理。”——亚里士多德·养龙

太深入层级的信息对用户体验是不友好的。产品不要自己懒惰梳理信息架构而将 *** 作成本转嫁给用户。

1、Tab 与 Radiobutton的区别？

简要概括区别，Radiobutton 用于表达tab用途的前提是当前信息的架构是完全一致，切换细分粒度展示。比如同样的信息，切换时间维度30天/7天 展示。

如下图中，只是时间维度的不同看到的其他数据维度是一样的，可以用RadioButton来表示。

这里推荐经过龙抓槐守望者的许可，分享关于控件的区别的系列文章《这个控件叫什么》系列中关于segment control 和tab 的区别的文章。 https://www.jianshu.com/p/e32d038c82ae

感谢龙抓槐守望者的支持。

上新公告和海报，是帮助您告知消费者近期店铺上新周期，推广重点新品的相关功能。

登陆营销中心-场景营销-上新Tab

上新公告设置：

1、点击左侧候选区上新公告，即可出现在编辑区：

2、可根据店铺特点设置周期上新/特定日期上新或自定义上新公告内容（自定义内容最多25字）：

3、模板日期选择或自定义内容填写完成后，点击编辑模块的保存按钮进行保存。京东店铺上新公告、海报通知设置步骤