金融制品体验日记（三）丨中欧财富基金详情页设计拆解-外链论坛

j8typz 发表于 2024-8-12 21:50:17

金融制品体验日记（三）丨中欧财富基金详情页设计拆解

仔细拆解了中欧财富APP的基金详情页设计，从需求分析、设计策略到详细的设计亮点和缺陷，全面深入地分析了该页面的功能价值、用户需求满足度以及用户体验。文案不仅为金融制品设计者供给了宝贵的参考，亦为广大投资者供给了选取和运用基金APP的视角。

哈罗，大众好，我是廖尔摩斯！今天继续向大众分享我的金融制品体验日记，这次分享的是中欧财富的APP基金详情页设计拆解！
<img src="https://q4.itc.cn/q_70/images03/20240722/59faf7c7e324443a8087b6627cb961cc.png" style="width: 50%; margin-bottom: 20px;">
01 需求分析 1. 功能价值分析 
基金详情页是一个基金APP制品权重最高的页面之一，它不仅是用户购买基金的落地页，还是一支基金关联数据和信息的聚合页。
它承担着一个基金制品变现的最重要任务，吸引用户购买。
<img src="https://q4.itc.cn/q_70/images03/20240722/bf0c6ecf129245a897a429606cf68dcf.png" style="width: 50%; margin-bottom: 20px;">
2. 用户需求分析 基本型需求：认识一支基金详细完整的信息，例如历史业绩走势、净值走势、历史业绩等。
期望性需求：详情页能够供给多维度的数据分析，例如基金比较、独家观点等，利于更好支撑投资决策。
兴奋型需求：有超出其他APP运用的体验，例如新颖的交互体验、页面设计，还有独家、稀缺的基金制品投资分析等。<img src="https://q9.itc.cn/q_70/images03/20240722/ca3e533f62dc42d99a271e652a2ec66d.png" style="width: 50%; margin-bottom: 20px;">
3. 设计策略分析 
基金详情页做为用户购买基金的落地页，全部页面的设计策略应该循序渐进满足用户的需求，最后触发购买，交互操作理应简单、流畅、有效。
02 设计拆解 
因为触及到基金的购买，我把基金详情页拆分为三块内容：基本内容：供给什么基本信息，能否帮忙用户快速认识基金。
基金工具：供给什么基金工具，能否辅助用户进行多维度的分析，为投资决策供给有效的支撑。
申购流程：怎样购买，流程是不是顺畅，体验是不是友好。
1. 基本内容

导航栏：基金标题和基金代码，右边是在线客服和分享。<img src="https://q4.itc.cn/q_70/images03/20240722/c11e9cbd7e7a44288175f55bebeb4bd6.png" style="width: 50%; margin-bottom: 20px;">

设计亮点：
导航头部的基金标题设置了上下滚动，不仅处理了标题字符数过长的问题，况且增多了页面的动感，一举两得。

<img src="https://q4.itc.cn/q_70/images03/20240722/930963f153544929afe0fa82c7274409.gif" style="width: 50%; margin-bottom: 20px;">基本信息：包括基金名叫作、基金代码、最新净值、日涨幅和基金经理等信息，右上角可进入基金诊断。<img src="https://q6.itc.cn/q_70/images03/20240722/8915e5fc6e9e4853b4df75005d87a4ae.png" style="width: 50%; margin-bottom: 20px;">

设计亮点：
右侧加入了基金诊断功能，经过诊断的形式为用户的投资决策供给了强有力的支撑。

当前走势图：包括近三年的业绩走势和净值走势图。

<img src="https://q6.itc.cn/q_70/images03/20240722/44fdd555973740659aa175f483de7849.png" style="width: 50%; margin-bottom: 20px;">

设计思考：
倘若无必定的金融理财经验，针对初步接触基金制品的用户来讲，几乎难以看懂。倘若能针对新手加入有些基本常识的普及或视频指点，用户阅读起来将会更易。

历史数据：包括历史业绩和历史净值，可查看基金的历史涨跌幅、累计净值等数据。

<img src="https://q6.itc.cn/q_70/images03/20240722/c97459867dd44ffb8e9920500f142342.png" style="width: 50%; margin-bottom: 20px;">

基金分析指标：包括收益能力、抗危害能力和投资性价比三个维度的数据，点击更加多可进入基金分析指标详情页。

<img src="https://q7.itc.cn/q_70/images03/20240722/c555f747f9904231924875941374486e.png" style="width: 50%; margin-bottom: 20px;">制品档案：制品的仔细信息，包括制品概况、规模、分红和基金经理等信息。<img src="https://q3.itc.cn/q_70/images03/20240722/bac85193c90d445399bb393a5e0bee78.png" style="width: 50%; margin-bottom: 20px;">

费率结构：基金的认购费率、申购费率、赎回费率和基本运作费。

<img src="https://q4.itc.cn/q_70/images03/20240722/17139a29c0cc4ba8a3d898466e0f81f8.png" style="width: 50%; margin-bottom: 20px;">

交易确认日：包括制品的申购确认和赎回确认流程等信息。

<img src="https://q4.itc.cn/q_70/images03/20240722/6a06bc40199f4d77b444c9a3a9cbdd21.png" style="width: 50%; margin-bottom: 20px;">

底部菜单栏：自选、基金对比、基金工具箱、定投和购买。

设计亮点：
为用户供给了多种投资分析的基金工具，例如基金对比、基金提醒等。
2. 基金工具
2.1. 加自选
在基金APP中，「自选」指的是用户可以将自己关注或感兴趣的基金制品添加到一个单独的页面中，以便于集中查看和管理，咱们能够简单理解为「保藏」。关于「自选」，咱们后续会进行深度的拆解，本文不做仔细分析。
<img src="https://q8.itc.cn/q_70/images03/20240722/204d6cc50a23458a9c9ff877cf023cd0.png" style="width: 50%; margin-bottom: 20px;">
2.2. 基金对比 
「基金对比」是一个平常的基金分析工具，重点帮忙用户加入其他基金进行综合比较（最多5个），从而获取投资分析决策。倘若你看过链接的房源详情页拆解，这两个功能能够说基本类似。
<img src="https://q1.itc.cn/q_70/images03/20240722/f04243dc482b418eba6c7afef985b7fd.png" style="width: 50%; margin-bottom: 20px;">
2.2.1. 栏目页

头部：可自动添加对比基金，点击后可输入关键词进行搜索。
TAB切换栏：供给热门、自选、近期浏览和同赛道制品四个归类。

<img src="https://q2.itc.cn/q_70/images03/20240722/96c4229079014a8e81870eb426b21d78.png" style="width: 50%; margin-bottom: 20px;">

设计亮点：
这儿的TAB归类设计得非一般人性化，从四个维度向用户供给可能会加入对比的基金，预判了客户的操作。

<img src="https://q4.itc.cn/q_70/images03/20240722/a7a146d946dd44e2856a640fd27333a9.png" style="width: 50%; margin-bottom: 20px;">

设计缺陷：
页面吸顶的空间比例过大，差不多占据了屏幕的一半，操作体验不良。

2.2.2. 详情页
包括基金信息、业绩表现、盈利体验、危害指标、资产配置、持有人结构、基金经理和交易规则8个维度的综合比较。

设计亮点：
详情页的内容策划出色，共计8个维度的内容对比，为用户的投资决策供给了强有力的保证。

2.3. 基金诊断
「基金诊断」亦是一个平常的基金分析工具，重点为用户供给多维度的综合诊断帮忙用户处理买基前的困惑，其次亦能够定时查看基金的表现管控投资危害。头部：基金基本信息，包含基金类型、危害类型等，右边能够直接转到基金详情页。
综合诊断：五个维度，分别是投资性价比、收益能力、超额胜率、抗跌能力和稳定性，经过雷达图的形式给出评定成果。设计亮点：
雷达图的设计加入了动态的元素，模拟了诊断的加载流程画面，提高了视觉冲击力，有效吸引用户重视力。收益能力：结合近三年业绩走势、年度表现等内容生成的投资意见。
抗危害性：结合近三年最大回撤、夏普比率等内容生成的投资意见。
基金经理：基金经理的仔细资料，还有最新的季度观点。

持仓分析：按照定时报告生成的多维度数据分析，包含持股集中度、行业偏好、重仓股风格等。
市场机会：中欧财富投顾团队的投研观点。
尤其关注：近一年基金规模的变动数据。
底部菜单栏：包括基金PK、加自选、定投和购买四个功能。设计亮点：
底部菜单栏供给基金定投和申购的入口，无需再次转，直接发起购买，降低用户操作成本。

2.4. 看经理
基金经理决定了一支基金的投资目的、策略和方向，能够说，基金经理决定了用户的投资是不是会实现盈利还是亏损。基本信息：包括基金经理的姓名、简介、管理规模、基金管理年限和从业年化报答等信息。
基金经理观点：基金经理针对投资市场的个人观点。
在管基金：基金经理正在管理的基金，包含任期报答率等信息。
历任基金：基金经理过去管理的历任基金。设计缺陷：
页面设计粗糙，不精致，尤其是头部的基金经理头像等信息的设计形式，过于平庸，没法吸引用户重视力。

2.5. 基金提醒 
基金制品的净值增迭每日都在变动，所以「基金提醒」便是向用户供给一个提醒工具，用户能够设置一个目的净值提醒，包含涨幅、跌幅等比例，系统就会第1时间向用户发送信息提醒。

设计亮点：
设计体贴，支持用户手动输入数据，亦设计了常用的数据标签，方便用户操作。

2.6. 定投计算器 
「定投」是一种平常的基金购买方式，就像去银行定时存款同样，后面咱们会单独拆解定投专区，本文亦不做仔细分析。进入定投计算器后，用户能够设置定投的时间周期、分红方式以及定投金额，系统就会为用户计算真实的投资报答率。

设计缺陷：
定投计算结果展示形式不良，弹窗高度太低，引起内容展示空间过小，阅读体验欠佳。

2.7. 持仓回顾
基金的历史持仓数据展示，这儿其实是转至「制品档案-持仓」页面。

2.8.看报告
关于基金最新的关联分析报告，帮忙用户供给全面的分析决策。

设计缺陷：
页面设计形式不良，理应加入一个列表页展示历史报告，方便用户更好的检索阅读。

2.9.关联制品
向用户举荐同赛道或同类型的关联制品。

3. 申购流程 
所说「申购」便是购买，这个词语属于基金行业的一个专业名词。接下来咱们瞧瞧中欧财富的两种申购方式和流程。

3.1. 定投
在上文的「定投计算器」我简单介绍过「定投」的概念，它属于基金投资中的一种稳健投资方式，就像在银行存定时同样，支持用户按固定的周期、金额购买基金，降低投资的危害。中欧财富的定投方式又分为两种，一种是按固定金额购买的经典定投，另一种是按照市场行情调节的智慧定投。

3.1.1. 经典定投
经典定投便是每期按固定的金额购买，属于最传统亦是最常规的定投方式。
3.1.1.1. 操作页每期定投金额：用户每期定投的金额，这个金额是固定的，用户后期亦能够自己修改。
支付方式：包括超级滚钱宝（中欧财富APP的钱包）和银行卡支付.
扣款周期：支持每周、每双周和每月定时买入。
开启目的止盈：用户可手动设置目的止盈数据，系统就会暂停购买（咱们能够把它理解为投资有危害，见好就收）。3.1.1.2. 危害提醒
在用户供给基金购买申请以后，系统会按照用户的危害承受能力类型和基金收益危害类型进行判断，倘若两者不匹配，系统会主动提醒用户必须小心投资购买。

设计亮点：
系统弹窗供给了危害测评重新评定的入口，遵循了费茨定律设计原则，提高了用户的操作效率，避免用户还必须返回用户中心查询危害测评重新评定。

拓展阅读：
关于危害提醒，我在「中欧财富-开户」一文中说到过，金融投资是一个非常敏锐的行业，因此基金制品在用户申购基金前都会设计「危害测评」这个环节，重点是按照用户的年收入、投资承受能力、偏好和目的快速把用户归类，从而避免因茫然投资导致的经济损失。

3.1.1.3. 交易页
购买成功，基金亦会自动加入自选，方便用户随时能够查找数据。

3.1.2. 智慧定投
智慧定投和经典定投的区别是智慧定投每期定投的金额其实是不固定的，它的原理是由于中欧财富滚滚财富科研院编制的数量算法来进行投资，目的是实现“市场越跌、买入越多”，力求帮忙投资人提高收益。
咱们能够简单理解为智慧定投相当于划定了一个投资区间，每期投资的金额不固定，最后按照市场数据而定。在功能内容设计上，智慧定投和经典定投的购买流程几乎无任何区别，咱们就再也不赘述。

设计亮点：
智慧定投满足了用户的兴奋型需求，不仅能够降低投资危害，还能够按照市场行情即时调节，提高投资报答。

3.2. 购买
和定投区别，购买便是一次性的购入。在购入流程上，两者是一致的，系统会按照用户的危害承受能力类型和基金收益危害类型进行判断，倘若两者不匹配，系统会主动提醒用户必须小心投资购买。购买金额：用户购买的金额，可直接输入。
分红方式：包括现金分红和红利再投（把赚来的钱继续购买投资）两种形式。
支付方式：包括超级滚钱宝（中欧财富APP的钱包）和银行卡支付.
03 体验小结经过以上内容的拆解，咱们对中欧财富的基金详情页设计进行一个全面的总结。内容层：页面整体的内容策划出色，不管是基金的业绩走势、基金分析指标这些基本内容，还是基金诊断、基金对比这些工具，中欧财富都为用户供给了足够丰富的信息和功能，帮忙用户做好投资决策。
视觉层：视觉设计尚可，虽然不亮眼，但亦中规中矩。其中最大的问题重点是全部详情页的字体体积、各元素之间的间距排版不足和谐和统一，因此整体呈现给用户的视觉体验就非常通常。
体验层：在交互操作体验这块，中欧财富的基金详情页还算不错，全部功能的操作都非常流畅，不管是基本信息的预览，基金工具的操作，还是两种方式的基金购买，操作起来都无任何的BUG。总之，中欧财富的基金详情页设计能够叫作得上行业一个基准，满足了用户的期望型需求，无给用户留下深刻的印象，但亦无糟糕的体验陷阱。
1. 设计亮点 基金详情页-导航栏：导航头部的基金标题设置了上下滚动，不仅处理了标题字符数过长的问题，况且增多了页面的动感，一举两得。
基金详情页-基本信息：右侧加入了基金诊断功能，经过诊断的形式为用户的投资决策供给了强有力的支撑。
基金详情页-当前走势图：倘若无必定的金融理财经验，针对初步接触基金制品的用户来讲，几乎难以看懂。倘若能针对新手加入有些基本常识的普及或视频指点，用户阅读起来将会更易。
基金详情页-底部菜单栏：为用户供给了多种投资分析的基金工具。
基金对比-栏目页：这儿的TAB归类设计得非一般人性化，从四个维度向用户供给可能会加入对比的基金，预判了客户的操作。
基金对比-详情页：详情页的内容策划出色，共计8个维度的内容对比，为用户的投资决策供给了强有力的保证。
基金诊断：雷达图的设计加入了动态的元素，模拟了诊断的加载流程画面，提高了视觉冲击力，有效吸引用户重视力。
基金诊断：底部菜单栏供给基金定投和申购的入口，无需再次转，直接发起购买，降低用户操作成本。
基金提醒：设计体贴，支持用户手动输入数据，亦设计了常用的数据标签，方便用户操作。
经典定投-危害提醒：系统弹窗供给了危害测评重新评定的入口，遵循了费茨定律设计原则，提高了用户的操作效率，避免用户还必须返回用户中心查询危害测评重新评定。
智慧定投：智慧定投满足了用户的兴奋型需求，不仅能够降低投资危害，还能够按照市场行情即时调节，提高投资报答。
2. 设计缺陷

基金对比-栏目页：页面吸顶的空间比例过大，差不多占据了屏幕的一半，操作体验不良。
看经理：页面设计粗糙，不精致，尤其是头部的基金经理头像等信息的设计形式，过于平庸，无法吸引用户重视力。
定投计算器：定投计算结果展示形式不良，弹窗高度太低，引起内容展示空间过小，阅读体验欠佳。
看报告：页面设计形式不良，理应加入一个列表页展示历史报告，方便用户更好的检索阅读。专栏作家
廖尔摩斯，微X公众号：设计大侦探，人人都是制品经理专栏作家。连续创业者，目的是作为全世界拆解制品设计最多的设计师。
本文原创发布于人人都是制品经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议<a style="color: black;">返回外链论坛：www.fok120.com，查看更加多</a>

责任编辑：网友投稿

wrjc1hod 发表于 2024-9-30 17:35:00

谷歌网站排名优化 http://www.fok120.com/

b1gc8v 发表于前天 02:56

楼主的文章深得我心，表示由衷的感谢！

页: [1]

外链论坛's Archiver

金融制品体验日记（三）丨中欧财富基金详情页设计拆解