3

实战案例！「广发元始股」个股详情页从0到1的设计复盘

 1 year ago
source link: https://www.uisdc.com/guangfa-yuan-initial-shares
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
实战案例！「广发元始股」个股详情页从0到1的设计复盘

1. 项目背景

「广发元始股」是一款专门为年轻人量身定制的炒股 app。

据统计，我国 Z 世代（1995-2010）年轻人群体数量庞大，人口规模约 2.64 亿，占总人口的比重接近 20%。根据国外某知名咨询公司的预测，未来 10 到 15 年，Z 世代将成为我国社会财富的中坚力量，是最有潜力和价值的客户群体。同时，Z 世代也面临着一系列的投资痛点挑战。为了解决 Z 世代的投资痛点，帮助年轻人迈出投资的第一步，广发元始股 app 应运而生。

在从 0 到 1 的产品设计过程中，我们不断思考年轻人投资的特点和需求，寻找最优的设计解决方案，化繁为简，为用户提供更简单、酷炫的投资选择，希望帮助 Z 世代买入人生的第一只股。整体项目历时一年，于 2023 年 6 月份全面上线。

本次设计复盘主要梳理了「个股详情页」的思考以及设计过程。

更多设计实战：

2. 什么是个股详情页？

个股详情页是炒股 app 中最重要的页面之一，是股民最经常浏览，也最为关注的页面。页面展示了一只股票的全量信息，包含：盘口指标、价格走势、相关资讯、公司财务、公司概况等等，信息量非常庞大，股民通过浏览信息来辅助其进行投资决策，因此页面的信息内容和浏览效率对股民最为重要。

二、设计分析

1. 用户调研

元始股的目标用户群体为 Z 世代 95 后的投资小白。前期用研同事对 42 名 95 后组织了多场定性座谈会，收集了用户对个股详情页的看法和意见。访谈结果表明，大部分小白用户都表示个股详情页比较复杂，数据很多、看不懂。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

2. 竞品调研

在初步理解用户的需求、痛点后，对国内、外主流的相关竞品进行调研，提炼竞品的页面框架和设计策略，为后续的设计提供更多有力的参考。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

通过调研发现：

  1. 在信息密度上，国内的竞品首屏的信息密度都非常大，除了股票的指标信息外，还有一些运营、工具等营销内容，充分利用了首屏的每一个空间；而国外的竞品信息量则少很多，页面大量留白，看起来更加清爽、简洁；
  2. 在结构上，因为需要承载海量信息，国内几乎所有竞品的个股详情页，都采用了 Tab 分类的设计。而国外竞品的信息层级则相对简单，都采用平铺信息流的扁平结构。
实战案例！「广发元始股」个股详情页从0到1的设计复盘

基于对产品定位的理解、对用户需求和痛点的挖掘、以及对竞品的分析，我们制定了本次设计的目标以及设计策略。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

三、设计策略及方案

1. 降低信息负荷

结合自身产品定位及功能规划，与业务同事共同对繁杂的个股信息进行梳理和筛选，删除了很多复杂的指标分析，仅保留了部分必要的股票信息。除了对股票信息进行删减外，一些运营、营销类的信息也予以去除，比如投资工具、广告等等，从数量上降低信息负荷。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

化繁为简，对页面信息进行删减再组织。以首屏为例：

实战案例！「广发元始股」个股详情页从0到1的设计复盘

2. 简化页面结构

在页面结构的设计过程中，通过一次“发散——收敛“的过程来确定最合适的解决方案。基于前期对竞品页面结构的调研，并结合要展示的页面信息，我们针对页面结构方案进行发散，并梳理出3个思路，分析各自的优缺点。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

综合考虑设计目标、信息种类、页面屏效以及业务灵活配置的需求，我们最终选择了思路 3。采用更为扁平的结构，各内容模块按顺序平铺，并对模块的形式进行了统一，形成相对稳定且高效的纵向浏览顺序。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

3. 减少页面跳转

对于查看术语解释或设置操作等任务，通过弹窗来承载，以减少页面跳转。如果涉及到多个弹窗间的跳转，则在同一容器中进行延展，不作弹窗堆叠，保持用户感知页面结构简单。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

4. 简化走势图表

小白用户虽然没有炒股经历，但大多数有购买过基金、理财，目前市场上基金详情页中的走势图大多为区间曲线走势图。为了更贴合小白用户的认知和理解，在图表设计上采用区间曲线图的样式，并且删除纵横穿插的均线，五档、明细等复杂数据图表，方便用户更加直观、清晰地观察股票的价格走势和区间波动。

同时，考虑到随着小白用户的成长，对专业图表也有一定的需求，因此我们也保留了专业的 K 线图模式，在设计上删减一些辅助类的非必要信息，使图表整体更简洁。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

5. 增加术语解释

投资小白的另一大痛点是，投资相关的专业指标晦涩难懂，不理解专业指标的含义及作用。因此设计上对特殊的专业指标都增加了对应的解释说明，帮助用户理解和学习。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

6. 提供投顾解答

专家投顾是我们特有的服务优势，用户发起咨询后，专业投顾会迅速响应，解答各种投资相关的问题。结合这一特有的产品优势，更灵活地响应用户的咨询需求，在页面底部的操作栏中增加专家投顾咨询入口，方便用户快速发起咨询，为用户答疑解惑。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

四、上线反馈

产品上线后，用研同事继续邀请了 10 位 95 后用户体验 app。从用户的体验日志以及访谈结果来看，得到了不少正向的反馈。投资小白认为该页面简洁，图表直观，能降低其学习成本，对页面的感知符合我们此前预设的设计目标。

实战案例！「广发元始股」个股详情页从0到1的设计复盘

不过依然有一些有待后续优化和持续验证的需求点，比如增加新人指引，信息需求与体验之间的平衡等等。

与其它产品相比，证券投资类 app 是一个比较复杂且具有一定业务门槛的产品。严格的金融监管要求和复杂的业务，要求设计师能够在夹缝中做好用户体验。如何利用设计思维和合理的设计方法来降低产品的认知难度，提升转化率，是我们一直追求的目标。

希望本文对大家有所启发，我们也在不断探索更创新、更有趣的设计方式。

欢迎大家下载体验，对比设计，有其他问题也可私信后台，与我们多多交流，一起进步噢！

免责声明

本文章仅为阐述设计理念，所用配图为设计图和线上截图仅辅助设计说明，设计图中的数据信息均为虚构。以上信息仅供参考，不构成投资建议或收益保证。未经同意，任何机构或个人不得对提供的上述信息进行任何形式的转载、发布、复制或进行有悖原意的删节和修改。投资有风险，应谨慎至上。

欢迎关注作者微信公众号：「GXC设计随笔」


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK