摘要:同一主题有多条子内容时,我们通常会将子内容抽象为标签(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.2所示,一个是靠左对齐,一个是居中对齐,内容展示简单直观,但是排版不是很美观。
显示没有数据的时间段,此时间段下的数据显示为空如方案1.3所示,排版虽然保持了美观,但是会误导用户去点击,点击后并没有达到用户的预期,让用户做无用功。多次点击没数据,也可能会让用户丧失耐心。
3.方案2的设计讨论
方案2的设计优缺点
优点:展示时间段的数量比较灵活。排版上节省了页面的垂直空间,展示有数据的时间段,隐藏没有数据的时间段。左右滑动进行切换的方式,降低了操作难度。数据较少时,处理很容易。
缺点:与方案1相比,从第一个时间段切换到第四个时间段,需要两步操作(两次单击、两次滑屏或者一次单击一次滑屏),操作难度稍微增大(滑屏的难度较单击的操作难度小)。
4.总结
综上所述,方案1和方案2各有利弊。
后期版本上线,我会统计一下第2、3、4个时间段的点击率再做优化。