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

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

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

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

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

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

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

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

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

01/ 招商銀行

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

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

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

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

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

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

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

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

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

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

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

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

招行估計(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)卻沒(méi)有體現(xiàn)，雖不影響投資者使用但反映出UI組件規(guī)范缺乏一定邏輯性。

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

02/ 天天基金

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

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

非常直觀，天天的基金頁(yè)面長(zhǎng)度是招行（或螞蟻）的兩倍不止。

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

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

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

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

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

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

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

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

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

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

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

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

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

03/ 螞蟻財(cái)富

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

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

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

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

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

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

能夠很明顯地察覺(jué)到互金平臺(tái)和金融機(jī)構(gòu)在產(chǎn)品包裝上的玩法不同：互金平臺(tái)傾向于權(quán)威背書(shū)和人氣營(yíng)銷(xiāo)，金融機(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è)聽(tīng)上去類(lèi)似“夏普比率”的指標(biāo)。優(yōu)勢(shì)在于螞蟻直接量化轉(zhuǎn)譯了指標(biāo)的結(jié)果——“好于同類(lèi)98%基金”，省去了投資者分析指標(biāo)的過(guò)程。

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

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

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

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

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

▁

結(jié)語(yǔ)

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

文章來(lái)源：站酷    作者：loven

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