過去的一周，基金應(yīng)該算是熱門話題中的頂流。微信里各種設(shè)計(jì)群、校友群、帶貨群、滑雪群都充斥著一片財(cái)富縮水的哀嚎。 

每逢這個(gè)時(shí)候，大家也就開始順勢討論起各種基金投資APP好不好用的問題。 

今天抽點(diǎn)時(shí)間，聊聊 招商銀行、 螞蟻財(cái)富、 天天基金這三家APP的基金詳情頁設(shè)計(jì)。 

基金產(chǎn)品的詳情頁大體是圍繞一只基金的概況、盤中行情、歷史數(shù)據(jù)、持倉情況、基金經(jīng)理介紹、基金檔案、交易規(guī)則等一級(jí)模塊，來“客觀包裝”這只基金。 

一級(jí)模塊的信息下包含了眾多層次級(jí)信息，各家APP對(duì)于同一個(gè)次級(jí)信息，是否曝光在詳情頁的一級(jí)模塊里，都有著獨(dú)立的思考，這在很大程度上決定著信息分發(fā)和觸達(dá)的效率。 

為什么要強(qiáng)調(diào)“客觀包裝”，因?yàn)闊o論你看到與否，信息都在那里，而信息曝光的順序卻直接影響到用戶對(duì)基金的認(rèn)知。 

就好像我們了解一個(gè)人，如果只是看他的穿搭、氣質(zhì)、體態(tài)，可能會(huì)覺得這是一個(gè)藝術(shù)家。 

但你若先把眼睛蒙上，聽他講量化策略、深度學(xué)習(xí)，你發(fā)現(xiàn)這人居然是個(gè)技術(shù)男！ 

比如我們挑一只基金，來看看它在三個(gè)APP的詳情頁里，分別長啥樣。 

01/ 招商銀行

總體觀感舒適，沒有信息密度過高導(dǎo)致的視覺焦躁感。用色非?？酥?，留白空間較多。段落式結(jié)構(gòu)清晰，文本層級(jí)和對(duì)比度清晰，便于信息檢索，但分段式布局有點(diǎn)old fashion。 

基金概況：在日內(nèi)漲跌幅和最新凈值基礎(chǔ)上，補(bǔ)充了近1年收益率，可能是考慮到進(jìn)入該詳情頁以后，行情模塊會(huì)默認(rèn)定位到“成立以來收益率”（其他會(huì)普遍定位到近1年收益率），可能是給投資者建立“基金需要長線投資”的心理預(yù)期。 

信任力背書：白底通欄形式與整體UI規(guī)范相融，完全被淹沒在頁面里，不易被識(shí)別。應(yīng)當(dāng)在視覺表現(xiàn)層有所凸顯。 

數(shù)據(jù)看板：這是基金詳情里最重要的模塊之一，值得注意的是，業(yè)績走勢&凈值估算、業(yè)績排名&歷史回測這在別家往往會(huì)分成兩個(gè)模塊。 

這兩個(gè)模塊里有信息重疊交叉，比如近1月~近1年的收益情況在折線圖和列表里都能看到，與同類基金的相對(duì)位置關(guān)系也能可視化，但列表更具有量化結(jié)果的優(yōu)勢，因而更受到專業(yè)投資者的青睞。 

而招行根據(jù)歷史收益、凈值、盤中估算3個(gè)維度整合成了一個(gè)模塊。一個(gè)模塊的優(yōu)勢是折線圖和列表數(shù)據(jù)可以聯(lián)動(dòng)觀察。只不過默認(rèn)配置的三行數(shù)據(jù)有點(diǎn)少，查看更多就得跳轉(zhuǎn)。 

招行這個(gè)模塊令人詬病的點(diǎn)在于，一是收益走勢里缺了近6個(gè)月的維度，二是折線圖采用了曲線，且線寬過粗，導(dǎo)致不能像折現(xiàn)那樣直觀地反映出時(shí)間顆粒度，得手動(dòng)長按觸發(fā)對(duì)應(yīng)交易日的明細(xì)。 

基金診斷：招行自有的一套評(píng)估體系，內(nèi)置有業(yè)績回測、夏普比率、最大回撤、基金經(jīng)理任期評(píng)估等信息，相對(duì)更專業(yè)。而詳情頁一級(jí)模塊里展示的這個(gè)4個(gè)定性維度，怎么看都有點(diǎn)偏小白。 

基金持倉：這是最重要的模塊之二，如果把基金比作一道菜，這就是菜譜。跟做菜一樣，對(duì)每一道食材的烹調(diào)和火候把控決定了最終呈現(xiàn)出的風(fēng)味。 

基金重倉股的盤中行情對(duì)于基金經(jīng)理而言，就是每一道食材在制作中的狀態(tài)，可以幫助經(jīng)驗(yàn)投資者了解基金的布局在當(dāng)下的市場狀況，以便做出決策。 

而限于銀行體系內(nèi)無法接入證券交易所數(shù)據(jù)，招行在基金持倉這塊的盤中行情是空缺的，只能顯示持倉占比和市值估算。對(duì)于老手來說，難免是個(gè)缺憾。 

基金經(jīng)理介紹：這一塊在布局結(jié)構(gòu)上有點(diǎn)bug，按常理“現(xiàn)任經(jīng)理”和“劉某某”屬于從屬關(guān)系，所以標(biāo)題欄右側(cè)放置“歷任經(jīng)理”并且用兩端封閉式分割線就不太合理。 

招行估計(jì)是考慮到?jīng)]有配置現(xiàn)任經(jīng)理的詳情，又不想浪費(fèi)標(biāo)題右側(cè)的空間，才作此設(shè)計(jì)。

其他相關(guān)：這部分包含的基金公司、基金檔案、交易規(guī)則屬于并列關(guān)系，理應(yīng)出現(xiàn)的分割線卻沒有體現(xiàn)，雖不影響投資者使用但反映出UI組件規(guī)范缺乏一定邏輯性。

交易規(guī)則：在購買時(shí)間點(diǎn)缺少了T日（交易日）收盤時(shí)間（15:00前）提示和周歷提示。頁面空間是富余的，完全可以將信息曝光提高投資者的時(shí)間感知度，而不是跳轉(zhuǎn)二級(jí)頁面才能了解詳情。

02/ 天天基金

功能模塊十分豐富，cover了關(guān)于一只基金的所有直接和間接描述。直接的包含了概況、行情、歷史回測、持倉、經(jīng)理介紹等內(nèi)容，間接的包含了問答、討論、資訊、公告等內(nèi)容。

在產(chǎn)品的廣度與深度方面，天天基金選擇了把廣度拉寬，將很多二級(jí)內(nèi)容拍平，嵌入到一級(jí)頁面中，可以說非常適合經(jīng)驗(yàn)型投資者，但隨之而來的劣勢也十分明顯 - 頁面過長。

非常直觀，天天的基金頁面長度是招行（或螞蟻）的兩倍不止。

有了上面招行基金詳情頁的大致結(jié)構(gòu)做支撐，這里就不把天天基金的頁面逐個(gè)模塊拆解分析了，我們挑一些有意思的來說。

基金概況：跟隨漲跌變化的紅/綠頁頭，這是天天最具標(biāo)志性的設(shè)計(jì)之一，個(gè)人對(duì)此保留意見，這么大面積綠色在過去的一周，實(shí)在是令人焦慮。

凈值行情/歷史數(shù)據(jù)：天天基金在凈值模塊單列出了“單位凈值”和“累計(jì)凈值”的走勢圖，還直接標(biāo)明了不同時(shí)段區(qū)間內(nèi)的最高最低值。（“累計(jì)凈值”是基金自成立之日起至今的凈值表現(xiàn)，“單位凈值”是基金運(yùn)作期間扣除分紅和份額拆分影響之后的凈值表現(xiàn)。）

聽說這是區(qū)分老基民和新人小白最直接的一道坎，當(dāng)然作為一個(gè)UX設(shè)計(jì)師，我也就摻這一句，畢竟資格還遠(yuǎn)遠(yuǎn)夠不上老基民。

非常貼心的一點(diǎn)是，天天在這添加了定投該產(chǎn)品的收益可視化。根據(jù)歷史收益率回測和不同定投算法，進(jìn)行一段時(shí)間內(nèi)的收益率估算。與此類似設(shè)計(jì)的產(chǎn)品還有漲樂財(cái)富通。

特色數(shù)據(jù)：這也是經(jīng)驗(yàn)投資者非常重視的三個(gè)指標(biāo)。波動(dòng)率反映收益率波動(dòng)的程度，越小越好；夏普比率指基金每承受一點(diǎn)風(fēng)險(xiǎn)能夠獲得多少超額收益，越高越好；最大回撤指基金凈值從最高到最低的降幅，越小越好。

基金持倉：這又是一個(gè)老基民的福利專區(qū)。上面分析過招行基金持倉tab的優(yōu)勢，而天天直接把帶有重倉股盤中行情的持倉列表、資產(chǎn)/行業(yè)分布餅圖直接嵌入到一級(jí)頁面里，雖然默認(rèn)只顯示前五只重倉股，但對(duì)于了解相關(guān)板塊行情也很有幫助。

這一模塊的二級(jí)頁面也支持投資者切換時(shí)間去觀察基金經(jīng)理每一季度的調(diào)倉風(fēng)格。其實(shí)我個(gè)人更傾向于直接把十大重倉股行情全都放進(jìn)來，默認(rèn)折疊需要時(shí)展開。畢竟調(diào)倉不是個(gè)高頻動(dòng)作，我不會(huì)需要頻繁地跳進(jìn)二級(jí)頁面去觀察調(diào)倉。

基金經(jīng)理：作為后臺(tái)烹飪的cook，這塊的簡介過于“簡潔”了。其實(shí)次一級(jí)的經(jīng)理詳情頁里有非常詳實(shí)的背景概述和任期間業(yè)績回報(bào)評(píng)估，完全可以精選一些標(biāo)簽化的內(nèi)容在一級(jí)模塊里完善包裝。

社交化：然后比較有意思的就是“社區(qū)”概念。天天基金上每只基金都分別有兩個(gè)“bar”，一個(gè)問答吧一個(gè)貼吧，貼吧包含了問答吧。

這里能體現(xiàn)出天天對(duì)于細(xì)分場景的重視。貼吧里的話題天南海北，吐槽的、圍觀的、提問的、表態(tài)的、發(fā)小作文的、曬收益/虧損的，啥都有。

天天的產(chǎn)品經(jīng)理還是為提問用戶單獨(dú)開辟了一片凈土，讓內(nèi)容的傳播與觸達(dá)更加高效。

回到UI層面，天天基金頁面的文本內(nèi)容在邏輯結(jié)構(gòu)上比較復(fù)雜，但視覺上沒有將不同層級(jí)的對(duì)比度拉開，導(dǎo)致文本信息過于平均，不利于重點(diǎn)信息的快速檢索。

03/ 螞蟻財(cái)富

螞蟻的基金詳情頁遵循整體UI風(fēng)格采用了卡片式布局，信息架構(gòu)更清楚。與前兩個(gè)案例中的文本信息相比，設(shè)計(jì)質(zhì)感好了不少。 

頁頭的藍(lán)色背景標(biāo)志著螞蟻集團(tuán)的品牌基因，強(qiáng)化投資者對(duì)品牌的感知力度。且開辟了一個(gè)入口支持基金公司財(cái)富號(hào)里關(guān)于產(chǎn)品的宣導(dǎo)視頻。 

財(cái)富號(hào)視頻：視頻可以展開和收起。產(chǎn)品還給它配置了觀看人次，側(cè)面為該基金公司和旗下基金產(chǎn)品做熱度營銷。

基金概況：除了基金相關(guān)的基本信息以外，模塊內(nèi)展示了晨星評(píng)級(jí)和關(guān)注人氣。既有客觀權(quán)威評(píng)估體系，也有用戶層的氛圍烘托，通過兩層信任力建設(shè)占領(lǐng)用戶心智。

信任力背書：“支付寶金選”是由支付寶理財(cái)智庫、中國證券報(bào)聯(lián)合推出的一套理財(cái)產(chǎn)品評(píng)估體系，背后有一些專家KOL背書。能夠篩選出部分歷史業(yè)績表現(xiàn)優(yōu)異、基金經(jīng)理業(yè)績突出的產(chǎn)品。

相比于前幾個(gè)信任力的營造，這一點(diǎn)的重要性和優(yōu)先級(jí)遠(yuǎn)遠(yuǎn)勝出。因此在視覺層面也用黑金配色體現(xiàn)出權(quán)威性和尊享感。

能夠很明顯地察覺到互金平臺(tái)和金融機(jī)構(gòu)在產(chǎn)品包裝上的玩法不同：互金平臺(tái)傾向于權(quán)威背書和人氣營銷，金融機(jī)構(gòu)傾向于指標(biāo)構(gòu)建和數(shù)據(jù)展示。

行情/數(shù)據(jù)：這一模塊增加了一個(gè)可以手動(dòng)關(guān)閉的tag，是關(guān)于“風(fēng)險(xiǎn)回報(bào)比率”的描述，一個(gè)聽上去類似“夏普比率”的指標(biāo)。優(yōu)勢在于螞蟻直接量化轉(zhuǎn)譯了指標(biāo)的結(jié)果——“好于同類98%基金”，省去了投資者分析指標(biāo)的過程。

基金經(jīng)理介紹：關(guān)于這部分，雖然在基金經(jīng)理介紹的二級(jí)詳情頁里，天天基金比螞蟻財(cái)富要詳實(shí)得多，但一級(jí)模塊里螞蟻的人物包裝還是更到位。“金牛獎(jiǎng)得主”和學(xué)歷/從業(yè)背景簡述能直觀地提高產(chǎn)品在用戶側(cè)的信任力。

持倉行情：這可以說是該頁面視覺創(chuàng)新的重頭戲。螞蟻財(cái)富由于相關(guān)個(gè)股數(shù)據(jù)缺失，并不能像招行和天天基金那樣橫向比對(duì)每個(gè)季度基金經(jīng)理的調(diào)倉動(dòng)作，對(duì)于經(jīng)驗(yàn)投資者研判這只基金來說，少了一個(gè)觀察維度。

而視覺層面的創(chuàng)新則顯得十分取巧，原本枯燥的個(gè)股行情列表被轉(zhuǎn)譯為可視化的矩陣，矩形的大小和底色能直接映射該股票的持倉占比和實(shí)時(shí)行情。并且橫向滑動(dòng)的組件也支持在不跳轉(zhuǎn)的情況下完整顯示10只重倉股。

對(duì)于持有或長期關(guān)注這只基金的用戶而言，除非你要分析調(diào)倉，否則是不需要頻繁進(jìn)入二級(jí)頁面查看持倉明細(xì)的。

以及細(xì)致到小數(shù)點(diǎn)后兩位的持倉占比，意義也不大，了解大致的配比關(guān)系即可。螞蟻這個(gè)可視化組件在帶來新穎視覺觀感的同時(shí)，也解決了這一問題。

▁

結(jié)語

對(duì)于產(chǎn)品而言，信息架構(gòu)往往是最容易有爭議的部分。而金融產(chǎn)品的信息深度和業(yè)務(wù)復(fù)雜度尤為明顯，與之俱來的必然是各平臺(tái)在架構(gòu)策略上百花齊放。

文章來源：站酷    作者：loven

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)