詳細(xì)拆解了中歐財(cái)富APP的基金詳情頁設(shè)計(jì)，從需求分析、設(shè)計(jì)策略到具體的設(shè)計(jì)亮點(diǎn)和缺陷，全面深入地分析了該頁面的功能價(jià)值、用戶需求滿足度以及用戶體驗(yàn)。文章不僅為金融產(chǎn)品設(shè)計(jì)者提供了寶貴的參考，也為廣大投資者提供了選擇和使用基金APP的視角。

哈羅，大家好，我是廖爾摩斯！今天繼續(xù)向大家分享我的金融產(chǎn)品體驗(yàn)日記，這次分享的是中歐財(cái)富的APP基金詳情頁設(shè)計(jì)拆解！

01 需求分析

1. 功能價(jià)值分析

基金詳情頁是一個(gè)基金APP產(chǎn)品權(quán)重最高的頁面之一，它不僅是用戶購買基金的落地頁，還是一支基金相關(guān)數(shù)據(jù)和信息的聚合頁。

它承擔(dān)著一個(gè)基金產(chǎn)品變現(xiàn)的最重要任務(wù)，吸引用戶購買。

2. 用戶需求分析

• 基本型需求：了解一支基金詳細(xì)完整的信息，比如歷史業(yè)績走勢、凈值走勢、歷史業(yè)績等。
• 期望性需求：詳情頁可以提供多維度的數(shù)據(jù)分析，比如基金比較、獨(dú)家觀點(diǎn)等，利于更好支撐投資決策。
• 興奮型需求：有超出其他APP使用的體驗(yàn)，比如新穎的交互體驗(yàn)、頁面設(shè)計(jì)，還有獨(dú)家、稀缺的基金產(chǎn)品投資分析等。

3. 設(shè)計(jì)策略分析

基金詳情頁作為用戶購買基金的落地頁，整個(gè)頁面的設(shè)計(jì)策略應(yīng)該循序漸進(jìn)滿足用戶的需求，最后觸發(fā)購買，交互操作理應(yīng)簡單、流暢、高效。

02 設(shè)計(jì)拆解

由于涉及到基金的購買，我把基金詳情頁拆分為三塊內(nèi)容：

• 基礎(chǔ)內(nèi)容：提供什么基礎(chǔ)信息，能否幫助用戶快速了解基金。
• 基金工具：提供什么基金工具，能否輔助用戶進(jìn)行多維度的分析，為投資決策提供有效的支撐。
• 申購流程：如何購買，流程是否順暢，體驗(yàn)是否友好。

1. 基礎(chǔ)內(nèi)容

• 導(dǎo)航欄：基金標(biāo)題和基金代碼，右邊是在線客服和分享。

設(shè)計(jì)亮點(diǎn)：

導(dǎo)航頭部的基金標(biāo)題設(shè)置了左右滾動，不僅解決了標(biāo)題字符數(shù)過長的問題，而且增加了頁面的動感，一舉兩得。

• 基礎(chǔ)信息：包含基金名稱、基金代碼、最新凈值、日漲幅和基金經(jīng)理等信息，右上角可進(jìn)入基金診斷。

設(shè)計(jì)亮點(diǎn)：

右側(cè)加入了基金診斷功能，通過診斷的形式為用戶的投資決策提供了強(qiáng)有力的支撐。

• 當(dāng)前走勢圖：包含近三年的業(yè)績走勢和凈值走勢圖。

設(shè)計(jì)思考：

如果沒有一定的金融理財(cái)經(jīng)驗(yàn)，對于初步接觸基金產(chǎn)品的用戶來說，幾乎難以看懂。如果能針對新手加入一些基礎(chǔ)常識的普及或者視頻指導(dǎo)，用戶閱讀起來將會更容易。

• 歷史數(shù)據(jù)：包含歷史業(yè)績和歷史凈值，可查看基金的歷史漲跌幅、累計(jì)凈值等數(shù)據(jù)。

• 基金分析指標(biāo)：包含收益能力、抗風(fēng)險(xiǎn)能力和投資性價(jià)比三個(gè)維度的數(shù)據(jù)，點(diǎn)擊更多可進(jìn)入基金分析指標(biāo)詳情頁。

• 產(chǎn)品檔案：產(chǎn)品的詳細(xì)信息，包含產(chǎn)品概況、規(guī)模、分紅和基金經(jīng)理等信息。

• 費(fèi)率結(jié)構(gòu)：基金的認(rèn)購費(fèi)率、申購費(fèi)率、贖回費(fèi)率和基本運(yùn)作費(fèi)。

• 交易確認(rèn)日：包含產(chǎn)品的申購確認(rèn)和贖回確認(rèn)流程等信息。

• 底部菜單欄：自選、基金對比、基金工具箱、定投和購買。

設(shè)計(jì)亮點(diǎn)：

為用戶提供了多種投資分析的基金工具，比如基金對比、基金提醒等。

2. 基金工具

2.1. 加自選

在基金APP中，「自選」是指用戶可以將自己關(guān)注或感興趣的基金產(chǎn)品添加到一個(gè)單獨(dú)的頁面中，以便于集中查看和管理，我們可以簡單理解為「收藏」。關(guān)于「自選」，我們后續(xù)會進(jìn)行深度的拆解，本文不做詳細(xì)分析。

2.2. 基金對比

「基金對比」是一個(gè)常見的基金分析工具，主要幫助用戶加入其他基金進(jìn)行綜合比較（最多5個(gè)），從而獲取投資分析決策。如果你看過鏈接的房源詳情頁拆解，這兩個(gè)功能可以說基本相似。

2.2.1. 欄目頁

• 頭部：可自行添加對比基金，點(diǎn)擊后可輸入關(guān)鍵詞進(jìn)行搜索。
• TAB切換欄：提供熱門、自選、最近瀏覽和同賽道產(chǎn)品四個(gè)分類。

設(shè)計(jì)亮點(diǎn)：

這里的TAB分類設(shè)計(jì)得非常人性化，從四個(gè)維度向用戶提供可能會加入對比的基金，預(yù)判了客戶的操作。

設(shè)計(jì)缺陷：

頁面吸頂?shù)目臻g比例過大，差不多占據(jù)了屏幕的一半，操作體驗(yàn)不佳。

2.2.2. 詳情頁

包含基金信息、業(yè)績表現(xiàn)、盈利體驗(yàn)、風(fēng)險(xiǎn)指標(biāo)、資產(chǎn)配置、持有人結(jié)構(gòu)、基金經(jīng)理和交易規(guī)則8個(gè)維度的綜合比較。

設(shè)計(jì)亮點(diǎn)：

詳情頁的內(nèi)容策劃出色，共計(jì)8個(gè)維度的內(nèi)容對比，為用戶的投資決策提供了強(qiáng)有力的保障。

2.3. 基金診斷

「基金診斷」也是一個(gè)常見的基金分析工具，主要為用戶提供多維度的綜合診斷幫助用戶解決買基前的困擾，其次也可以定期查看基金的表現(xiàn)管控投資風(fēng)險(xiǎn)。

• 頭部：基金基礎(chǔ)信息，包括基金類型、風(fēng)險(xiǎn)類型等，右邊可以直接跳轉(zhuǎn)到基金詳情頁。
• 綜合診斷：五個(gè)維度，分別是投資性價(jià)比、收益能力、超額勝率、抗跌能力和穩(wěn)定性，通過雷達(dá)圖的形式給出評估成果。

設(shè)計(jì)亮點(diǎn)：

雷達(dá)圖的設(shè)計(jì)加入了動態(tài)的元素，模擬了診斷的加載流程畫面，提升了視覺沖擊力，有效吸引用戶注意力。

• 收益能力：結(jié)合近三年業(yè)績走勢、年度表現(xiàn)等內(nèi)容生成的投資建議。
• 抗風(fēng)險(xiǎn)性：結(jié)合近三年最大回撤、夏普比率等內(nèi)容生成的投資建議。
• 基金經(jīng)理：基金經(jīng)理的詳細(xì)資料，還有最新的季度觀點(diǎn)。

• 持倉分析：根據(jù)定期報(bào)告生成的多維度數(shù)據(jù)分析，包括持股集中度、行業(yè)偏好、重倉股風(fēng)格等。
• 市場機(jī)會：中歐財(cái)富投顧團(tuán)隊(duì)的投研觀點(diǎn)。
• 特別關(guān)注：近一年基金規(guī)模的變動數(shù)據(jù)。
• 底部菜單欄：包含基金PK、加自選、定投和購買四個(gè)功能。

設(shè)計(jì)亮點(diǎn)：

底部菜單欄提供基金定投和申購的入口，無需再次跳轉(zhuǎn)，直接發(fā)起購買，降低用戶操作成本。

2.4. 看經(jīng)理

基金經(jīng)理決定了一支基金的投資目標(biāo)、策略和方向，可以說，基金經(jīng)理決定了用戶的投資是否會實(shí)現(xiàn)盈利還是虧損。

• 基礎(chǔ)信息：包含基金經(jīng)理的姓名、簡介、管理規(guī)模、基金管理年限和從業(yè)年化回報(bào)等信息。
• 基金經(jīng)理觀點(diǎn)：基金經(jīng)理對于投資市場的個(gè)人觀點(diǎn)。
• 在管基金：基金經(jīng)理正在管理的基金，包括任期回報(bào)率等信息。
• 歷任基金：基金經(jīng)理過去管理的歷任基金。

設(shè)計(jì)缺陷：

頁面設(shè)計(jì)粗糙，不精致，特別是頭部的基金經(jīng)理頭像等信息的設(shè)計(jì)形式，過于平庸，無法吸引用戶注意力。

2.5. 基金提醒

基金產(chǎn)品的凈值增迭每天都在變動，所以「基金提醒」就是向用戶提供一個(gè)提醒工具，用戶可以設(shè)置一個(gè)目標(biāo)凈值提醒，包括漲幅、跌幅等比例，系統(tǒng)就會第一時(shí)間向用戶發(fā)送消息提醒。

設(shè)計(jì)亮點(diǎn)：

設(shè)計(jì)體貼，支持用戶手動輸入數(shù)據(jù)，也設(shè)計(jì)了常用的數(shù)據(jù)標(biāo)簽，方便用戶操作。

2.6. 定投計(jì)算器

「定投」是一種常見的基金購買方式，就像去銀行定期存款一樣，后面我們會單獨(dú)拆解定投專區(qū)，本文也不做詳細(xì)分析。進(jìn)入定投計(jì)算器后，用戶可以設(shè)置定投的時(shí)間周期、分紅方式以及定投金額，系統(tǒng)就會為用戶計(jì)算真實(shí)的投資回報(bào)率。

設(shè)計(jì)缺陷：

定投計(jì)算結(jié)果展示形式不佳，彈窗高度太低，導(dǎo)致內(nèi)容展示空間過小，閱讀體驗(yàn)欠佳。

2.7. 持倉回顧

基金的歷史持倉數(shù)據(jù)展示，這里其實(shí)是跳轉(zhuǎn)至「產(chǎn)品檔案-持倉」頁面。

2.8.看報(bào)告

關(guān)于基金最新的相關(guān)分析報(bào)告，幫助用戶提供全面的分析決策。

設(shè)計(jì)缺陷：

頁面設(shè)計(jì)形式不佳，理應(yīng)加入一個(gè)列表頁展示歷史報(bào)告，方便用戶更好的檢索閱讀。

2.9.相關(guān)產(chǎn)品

向用戶推薦同賽道或同類型的相關(guān)產(chǎn)品。

3. 申購流程

所謂「申購」就是購買，這個(gè)詞語屬于基金行業(yè)的一個(gè)專業(yè)名詞。接下來我們看看中歐財(cái)富的兩種申購方式和流程。

3.1. 定投

在上文的「定投計(jì)算器」我簡單介紹過「定投」的概念，它屬于基金投資中的一種穩(wěn)健投資方式，就像在銀行存定期一樣，支持用戶按固定的周期、金額購買基金，降低投資的風(fēng)險(xiǎn)。中歐財(cái)富的定投方式又分為兩種，一種是按固定金額購買的經(jīng)典定投，另一種是根據(jù)市場行情調(diào)整的智慧定投。

3.1.1. 經(jīng)典定投

經(jīng)典定投就是每期按固定的金額購買，屬于最傳統(tǒng)也是最常規(guī)的定投方式。

3.1.1.1. 操作頁

• 每期定投金額：用戶每期定投的金額，這個(gè)金額是固定的，用戶后期也可以自己修改。
• 支付方式：包含超級滾錢寶（中歐財(cái)富APP的錢包）和銀行卡支付.
• 扣款周期：支持每周、每雙周和每月定期買入。
• 開啟目標(biāo)止盈：用戶可手動設(shè)置目標(biāo)止盈數(shù)據(jù)，系統(tǒng)就會暫停購買（我們可以把它理解為投資有風(fēng)險(xiǎn)，見好就收）。

3.1.1.2. 風(fēng)險(xiǎn)提醒

在用戶提供基金購買申請以后，系統(tǒng)會根據(jù)用戶的風(fēng)險(xiǎn)承受能力類型和基金收益風(fēng)險(xiǎn)類型進(jìn)行判斷，如果兩者不匹配，系統(tǒng)會主動提醒用戶需要謹(jǐn)慎投資購買。

設(shè)計(jì)亮點(diǎn)：

系統(tǒng)彈窗提供了風(fēng)險(xiǎn)測評重新評估的入口，遵循了費(fèi)茨定律設(shè)計(jì)原則，提升了用戶的操作效率，避免用戶還需要返回用戶中心查找風(fēng)險(xiǎn)測評重新評估。

拓展閱讀：

關(guān)于風(fēng)險(xiǎn)提醒，我在「中歐財(cái)富-開戶」一文中提到過，金融投資是一個(gè)非常敏感的行業(yè)，所以基金產(chǎn)品在用戶申購基金前都會設(shè)計(jì)「風(fēng)險(xiǎn)測評」這個(gè)環(huán)節(jié)，主要是根據(jù)用戶的年收入、投資承受能力、偏好和目標(biāo)快速把用戶分類，從而避免因盲目投資造成的經(jīng)濟(jì)損失。

3.1.1.3. 交易頁

購買成功，基金也會自動加入自選，方便用戶隨時(shí)可以查詢數(shù)據(jù)。

3.1.2. 智慧定投

智慧定投和經(jīng)典定投的區(qū)別是智慧定投每期定投的金額其實(shí)是不固定的，它的原理是由中歐財(cái)富滾滾財(cái)富研究院編制的數(shù)量算法來進(jìn)行投資，目標(biāo)是實(shí)現(xiàn)“市場越跌、買入越多”，力求幫助投資人提升收益。

我們可以簡單理解為智慧定投相當(dāng)于劃定了一個(gè)投資區(qū)間，每期投資的金額不固定，最終根據(jù)市場數(shù)據(jù)而定。在功能內(nèi)容設(shè)計(jì)上，智慧定投和經(jīng)典定投的購買流程幾乎沒有任何區(qū)別，我們就不再贅述。

設(shè)計(jì)亮點(diǎn)：

智慧定投滿足了用戶的興奮型需求，不僅可以降低投資風(fēng)險(xiǎn)，還可以根據(jù)市場行情及時(shí)調(diào)整，提升投資回報(bào)。

3.2. 購買

和定投不同，購買就是一次性的購入。在購入流程上，兩者是一致的，系統(tǒng)會根據(jù)用戶的風(fēng)險(xiǎn)承受能力類型和基金收益風(fēng)險(xiǎn)類型進(jìn)行判斷，如果兩者不匹配，系統(tǒng)會主動提醒用戶需要謹(jǐn)慎投資購買。

• 購買金額：用戶購買的金額，可直接輸入。
• 分紅方式：包含現(xiàn)金分紅和紅利再投（把賺來的錢繼續(xù)購買投資）兩種形式。
• 支付方式：包含超級滾錢寶（中歐財(cái)富APP的錢包）和銀行卡支付.

03 體驗(yàn)小結(jié)

通過以上內(nèi)容的拆解，我們對中歐財(cái)富的基金詳情頁設(shè)計(jì)進(jìn)行一個(gè)全面的總結(jié)。

• 內(nèi)容層：頁面整體的內(nèi)容策劃出色，不管是基金的業(yè)績走勢、基金分析指標(biāo)這些基礎(chǔ)內(nèi)容，還是基金診斷、基金對比這些工具，中歐財(cái)富都為用戶提供了足夠豐富的信息和功能，幫助用戶做好投資決策。
• 視覺層：視覺設(shè)計(jì)尚可，雖然不亮眼，但也中規(guī)中矩。其中最大的問題主要是整個(gè)詳情頁的字體大小、各元素之間的間距排版不夠和諧和統(tǒng)一，所以整體呈現(xiàn)給用戶的視覺體驗(yàn)就非常一般。
• 體驗(yàn)層：在交互操作體驗(yàn)這塊，中歐財(cái)富的基金詳情頁還算不錯(cuò)，整個(gè)功能的操作都非常流暢，不管是基礎(chǔ)信息的預(yù)覽，基金工具的操作，還是兩種方式的基金購買，操作起來都沒有任何的BUG。

總之，中歐財(cái)富的基金詳情頁設(shè)計(jì)可以稱得上行業(yè)一個(gè)基準(zhǔn)，滿足了用戶的期望型需求，沒有給用戶留下深刻的印象，但也沒有糟糕的體驗(yàn)陷阱。

1. 設(shè)計(jì)亮點(diǎn)

• 基金詳情頁-導(dǎo)航欄：導(dǎo)航頭部的基金標(biāo)題設(shè)置了左右滾動，不僅解決了標(biāo)題字符數(shù)過長的問題，而且增加了頁面的動感，一舉兩得。
• 基金詳情頁-基礎(chǔ)信息：右側(cè)加入了基金診斷功能，通過診斷的形式為用戶的投資決策提供了強(qiáng)有力的支撐。
• 基金詳情頁-當(dāng)前走勢圖：如果沒有一定的金融理財(cái)經(jīng)驗(yàn)，對于初步接觸基金產(chǎn)品的用戶來說，幾乎難以看懂。如果能針對新手加入一些基礎(chǔ)常識的普及或者視頻指導(dǎo)，用戶閱讀起來將會更容易。
• 基金詳情頁-底部菜單欄：為用戶提供了多種投資分析的基金工具。
• 基金對比-欄目頁：這里的TAB分類設(shè)計(jì)得非常人性化，從四個(gè)維度向用戶提供可能會加入對比的基金，預(yù)判了客戶的操作。
• 基金對比-詳情頁：詳情頁的內(nèi)容策劃出色，共計(jì)8個(gè)維度的內(nèi)容對比，為用戶的投資決策提供了強(qiáng)有力的保障。
• 基金診斷：雷達(dá)圖的設(shè)計(jì)加入了動態(tài)的元素，模擬了診斷的加載流程畫面，提升了視覺沖擊力，有效吸引用戶注意力。
• 基金診斷：底部菜單欄提供基金定投和申購的入口，無需再次跳轉(zhuǎn)，直接發(fā)起購買，降低用戶操作成本。
• 基金提醒：設(shè)計(jì)體貼，支持用戶手動輸入數(shù)據(jù)，也設(shè)計(jì)了常用的數(shù)據(jù)標(biāo)簽，方便用戶操作。
• 經(jīng)典定投-風(fēng)險(xiǎn)提醒：系統(tǒng)彈窗提供了風(fēng)險(xiǎn)測評重新評估的入口，遵循了費(fèi)茨定律設(shè)計(jì)原則，提升了用戶的操作效率，避免用戶還需要返回用戶中心查找風(fēng)險(xiǎn)測評重新評估。
• 智慧定投：智慧定投滿足了用戶的興奮型需求，不僅可以降低投資風(fēng)險(xiǎn)，還可以根據(jù)市場行情及時(shí)調(diào)整，提升投資回報(bào)。

2. 設(shè)計(jì)缺陷

• 基金對比-欄目頁：頁面吸頂?shù)目臻g比例過大，差不多占據(jù)了屏幕的一半，操作體驗(yàn)不佳。
• 看經(jīng)理：頁面設(shè)計(jì)粗糙，不精致，特別是頭部的基金經(jīng)理頭像等信息的設(shè)計(jì)形式，過于平庸，無法吸引用戶注意力。
• 定投計(jì)算器：定投計(jì)算結(jié)果展示形式不佳，彈窗高度太低，導(dǎo)致內(nèi)容展示空間過小，閱讀體驗(yàn)欠佳。
• 看報(bào)告：頁面設(shè)計(jì)形式不佳，理應(yīng)加入一個(gè)列表頁展示歷史報(bào)告，方便用戶更好的檢索閱讀。