過去的一周，基金應該算是熱門話題中的頂流。微信里各種設計群、校友群、帶貨群、滑雪群都充斥著一片財富縮水的哀嚎。 

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

今天抽點時間，聊聊 招商銀行、 螞蟻財富、 天天基金這三家APP的基金詳情頁設計。 

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

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

為什么要強調“客觀包裝”，因為無論你看到與否，信息都在那里，而信息曝光的順序卻直接影響到用戶對基金的認知。 

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

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

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

01/ 招商銀行

總體觀感舒適，沒有信息密度過高導致的視覺焦躁感。用色非?？酥疲舭卓臻g較多。段落式結構清晰，文本層級和對比度清晰，便于信息檢索，但分段式布局有點old fashion。 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

02/ 天天基金

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

回到UI層面，天天基金頁面的文本內(nèi)容在邏輯結構上比較復雜，但視覺上沒有將不同層級的對比度拉開，導致文本信息過于平均，不利于重點信息的快速檢索。

03/ 螞蟻財富

螞蟻的基金詳情頁遵循整體UI風格采用了卡片式布局，信息架構更清楚。與前兩個案例中的文本信息相比，設計質感好了不少。 

頁頭的藍色背景標志著螞蟻集團的品牌基因，強化投資者對品牌的感知力度。且開辟了一個入口支持基金公司財富號里關于產(chǎn)品的宣導視頻。 

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

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

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

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

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

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

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

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

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

對于持有或長期關注這只基金的用戶而言，除非你要分析調倉，否則是不需要頻繁進入二級頁面查看持倉明細的。

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

▁

結語

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

文章來源：站酷    作者：loven

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