摘要：同一主题有多条子内容时，我们通常会将子内容抽象为标签（tab），方便用户通过tab快速定位。
本期交互设计师地九枝星将以股票APP为例，以小见大，分析tab在实际的产品设计中灵活多变的一面。
股票APP中有一个模块需要展示股东的完整信息，而这些信息可能会在不同的时间段发生变更。其中，核心需求是展示近四个时间段的完整信息。然而对于一些新近的股票来说，往往只有一个时间段的相关信息，tab本身的存在意义就受到质疑，但是随着股票后续的发展，肯定会延伸出更多的时间段tab。
所以，在“展示单一tab，而后通过点击这一tab，再选择其他tab”与“同时展示多个tab，点击即可直达对应tab”间就有了讨论的空间。
ps：如果四个时间段都没有数据时，则隐藏该模块。本文讨论的前提是至少有一个时间段的情况。
文本大纲：
1.两种方案
2.方案1的设计讨论
3.方案2的设计讨论
4.总结
1.两种方案
按照设计思路不同，可以分为两种方案，如下所示：
两种方案
方案1：将时间段的选择做成tab形式，放在主要股东数据的上方，通过单击操作，进行tab间的切换。
方案2：将时间段的选择放在主要股东模块的右上角，通过单击时间段两边的箭头区域和左右滑动屏幕来切换数据。
2.方案1的设计讨论
方案1的设计优缺点
优点：内容比较直观，从第一个tab切换到第三个或者第四个tab时，只需要一步操作，相对简单。
缺点：单击左侧tab的操作难度大。数据较少时，不容易处理。
数据较少时的交互设计方案有两大种，一种是隐藏没有数据的时间段；另一种是显示没有数据的时间段，此时间段下的数据显示为空。示意图如下：
方案1数据较少时的处理方案
隐藏没有数据的时间段如方案1.1和方案1.2所示，一个是靠左对齐，一个是居中对齐，内容展示简单直观，但是排版不是很美观。
显示没有数据的时间段，此时间段下的数据显示为空如方案1.3所示，排版虽然保持了美观，但是会误导用户去点击，点击后并没有达到用户的预期，让用户做无用功。多次点击没数据，也可能会让用户丧失耐心。
3.方案2的设计讨论
方案2的设计优缺点
优点：展示时间段的数量比较灵活。排版上节省了页面的垂直空间，展示有数据的时间段，隐藏没有数据的时间段。左右滑动进行切换的方式，降低了操作难度。数据较少时，处理很容易。
缺点：与方案1相比，从第一个时间段切换到第四个时间段，需要两步操作（两次单击、两次滑屏或者一次单击一次滑屏），操作难度稍微增大（滑屏的难度较单击的操作难度小）。
方案2分解图
方案2数据较少时的解决方案
4.总结
综上所述，方案1和方案2各有利弊。
后期版本上线，我会统计一下第2、3、4个时间段的点击率再做优化。
网友评论