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

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

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

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

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

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

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

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

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

01/ 招商銀行

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

02/ 天天基金

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

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

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

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

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

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

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

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

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

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

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

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

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

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

天天的產品經理還是為提問用戶單獨開辟了一片凈土，讓內容的傳播與觸達更加高效。

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

03/ 螞蟻財富

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

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

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

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

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

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

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

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

基金經理介紹：關于這部分，雖然在基金經理介紹的二級詳情頁里，天天基金比螞蟻財富要詳實得多，但一級模塊里螞蟻的人物包裝還是更到位?！敖鹋＊劦弥鳌焙蛯W歷/從業(yè)背景簡述能直觀地提高產品在用戶側的信任力。

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

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

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

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

▁

結語

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

文章來源：站酷    作者：loven

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