实战案例！拆解同花顺自选模块的体验优化设计思路

一、全文速览图

今天继续分享 C 端的体验改版，而这次主要的改版对象，就是国内最大型的手游 —— 同花顺的“自选模块”。

二、同花顺的自选模块分析

首先介绍下自选模块的作用，用于展示我们收集过的股票标的（上市企业）和实时数据。因为上市企业非常多（包含其它市场），所以收集进来的股票标的也可能非常多。为了便于整理和查看，软件提供了分组功能，可以创建分组并将所选股票添加进去。

数据的收藏和分组是一个很常见的功能点，不管是在短视频应用，还是在电商、资讯、社交应用中都广泛存在。

但在其它应用中，收藏只是个简单的文件夹，让用户想起的时候去里面翻找内容，使用频率很低。而同花顺这类证券应用的收藏，却有很高的使用频率，且打开它的目的往往不是找到某个对象，而是查看里面所有对象的当前数据。

所以列表区域，本质上是个表格，可以通过横向滚动来查看不同的数据，而不是一定要点击进入到企业的详情页面。

除了下方数据外，分组本身的重要性也很高。对于部分资深投资者来说，为了更精确的掌握、监控局势，会按自己的标准来创建分组作为行业板块，再添加个股。而分组会根据你置入的标的，显示实时平均的涨跌幅数据。

简单来说，证券投资往往是选择行业/板块先于个股，比如比较常见的科技、硬件、消费、资源、化工行业等。官方虽然也有行业和板块的分类，但里面的个股数量往往非常多，且关联的很多个股相关性非常的弱，所以很多用户会倾向于自己创建要关注的分组替代官方的分组。

基于以上的使用需求，再看当前的设计，就会发现它们存在非常多的问题，下面我们就整理使用过程中会发现的问题：

问题1：分组的选择非常不便

目前分组的展示区域就很小，只有上方一小行标签栏，不仅不好点，如果分组数量较多，则左右滚动的距离就非常长。如果打开分组侧边栏列表，同样展示的空间与效率不足，往往要滚动很久才能找到指定的分组。

问题2：数据的展示被隐藏

分组涨跌幅数据作为一个需要关注的信息，还要打开侧边栏才能看见，且侧边栏打开后其它动作就执行不了。

问题3：分组的层级不足

分组不能再创建上级分组，在使用中局限性非常大。比如对于金属板块来说，就可以划分出铜、铝、钨、锡、金、银等不同下级板块，如果使用当前只有1级的展示模式，那么分组的列表就会表现得非常混乱。

所以我会创建一个上级分组，使用横线作为分割线来标识1级的分类。但这种做法只能勉强弥补功能的缺失，在实际应用过程上依旧不够便利。

以上就是当前设计中的核心问题，虽然不多，但已经严重影响用户看盘、选股的目标了，尤其对于偏向高频交易的短线选手，操作的不便会直接影响交易质量，为用户带来不必要的损失（亏钱怎么想都是它的错）。

下面我们就针对这些问题展开具体优化的分析与实践。

三、自选页面的优化过程

从上面分析的问题里面可以先得出一个初步的结论，要在优化中实现下面这些目标：

1. 提供更好的分组展示样式和选择方法
2. 默认露出分组的涨跌幅数据便于查看
3. 可以给分组添加上级分类便于管理

除了这些直观的问题以外，我们可以再深度地思考用户的痛点，即看盘过程除了看个股的盘口外，也需要追踪板块的最新情况。可以同时关注越多、越全的有效信息，那么交易的效果也就越好。

但如果要解决问题又要满足这种痛点，那我们就要面对新的困难点：

1. 手机屏幕空间太小，展示内容有限
2. 手机交互不如桌面端便捷，选择和查找分组步骤难以减少
3. 除了分组外页面还有其它字段信息也要展示占用空间

把该考虑的问题和目标都想差不多以后，我们就可以开始动手画原型来构思解决方案了下面我会尽可能还原真实的设计过程。

我首先画的第一个版本，就是将分组进行卡片宫格化的展示，包含了3列和4列的版本。

然后还要做查看个股的模式，第一版的设计是点击分类卡片后下方展开一个有限的滚动区域，除了个股列表可以滚动外，板块区域也可以上下滚动。

然后我们再回去考虑分组的问题，如果添加分组，那么就可以添加一个标题进行上下分离，同时给它添加折叠和编辑的按钮。

到这步其实初步的方案已经成型了，但不代表这是最合理或最终的方案。所以我们要再围绕其中存在的矛盾、缺陷进行优化，或增加更多实用的功能交互进来。

首先就是展开个股列表的操作，像之前那种叠加列表的结构滚动起来肯定容易误触，所以我做了调整，点击分组卡片后在下方展开填满的个股列表。但因为卡片本身位置不确定，所以我选择点击展开后，上方显示同一级分类的分组卡片，可以左右滚动。再次点击卡片可以收起个股列表返回分组列表模式。

再回到分组列表本身，这个列表的设计还是显得非常的枯燥，我希望能更有质量的进行卡片，所以想到了可以对卡片本身进行尺寸的调节。比如将卡片进行放大成 2*2的，且会展示分组走势的折线图。

而在原本的3列列表中，2*2占据的空间过大，如果一个分组里同时放两个大卡片肯定是没法显示的。所以我还是把列表切换成了四列的版本。一方面四列可以支持更灵活的卡片缩放（类似系统桌面），另一方面，四列可以展示更多的分组，在实际手机上预览后我发现这个空间是足够的。

既然已经像手机系统的桌面了，我就可以进一步添加交互的规则，比如长按进入编辑模式，可以多选卡片进行编辑，也可以长按拖动卡片来更改它的位置。而且可以给卡片本身的展示添加更多的展示设置，比如露出领涨股、特殊信息、还是使用其它图表形式等等。

除此之外，页面包含其它的一些字段或信息，会成为干扰，所以额外增加了全屏模式，可以隐藏掉上方的标题栏和底部导航栏，获得更沉浸式的看盘体验。

还有针对折叠屏或平板进行适配，也可以充分利用宽屏的优势来提升效率。一方面默认显示环境下可以展示更多的卡片数量，另一方面当点击卡片后，则在右侧打开个股列表，将浏览的效率最大化。

做到这里优化的方案框架基本就完成了，如果继续设计下去，还可以添加更多的细节进去，尤其是在兼顾重度使用用户与普通用户之间的平衡上，大家可以自己展开分析如何来解决这个问题。

上面的设计过程，不仅是体验设计过程，也是所谓的产品设计过程，对页面或功能模块进行优化时，不止是更改交互和视觉，也会一定程度上调整产品的方案。至于方案能不能通过，就要看后续的设计评审能不能说服团队成员。

在成熟的项目团队中，团队对 UI 设计师的要求往往就是不管方案能不能通过，起码你得提供更全面、大胆的设计方案出来，填补产品经理思维上的局限，而不是指望全靠领导还是产品经理告诉你应该怎么做。

四、结尾

产品改版一直是一件很有趣的事情，把日常碰到所有让你不舒服的设计都拿来自己“魔改”一番，会很好的锻炼我们的产品思维和体验分析能力。

而这些AI帮不了你们……

我们下篇再贱~