股本股东页面主要股东模块的优化

摘要:同一主题有多条子内容时,我们通常会将子内容抽象为标签(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个时间段的点击率再做优化。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。