聊基金,不如聊聊基金那些產(chǎn)品設(shè)計(jì)
編輯導(dǎo)語(yǔ):隨著社會(huì)的不斷發(fā)展,越來(lái)越多的人開(kāi)始接觸基金或者理財(cái),市面上的理財(cái)產(chǎn)品也越來(lái)越多,基金理財(cái)產(chǎn)品有一定的風(fēng)險(xiǎn),所以對(duì)于產(chǎn)品來(lái)說(shuō),有很多需要注意到的地方;本文作者分享了一些關(guān)于基金產(chǎn)品的設(shè)計(jì),我們一起來(lái)看一下。
過(guò)去的一周,基金應(yīng)該算是熱門話題中的頂流;微信里各種設(shè)計(jì)群、校友群、帶貨群、滑雪群都充斥著一片財(cái)富縮水的哀嚎。
每逢這個(gè)時(shí)候,大家也就開(kāi)始順勢(shì)討論起各種基金投資APP好不好用的問(wèn)題。
今天抽點(diǎn)時(shí)間,聊聊招商銀行、螞蟻財(cái)富、天天基金這三家APP的基金詳情頁(yè)設(shè)計(jì)。
基金產(chǎn)品的詳情頁(yè)大體是圍繞一只基金的概況、盤中行情、歷史數(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ú)論你看到與否,信息都在那里,而信息曝光的順序卻直接影響到用戶對(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é)焦躁感。用色非??酥?,留白空間較多;段落式結(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)線投資”的心理預(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年的收益情況在折線圖和列表里都能看到,與同類基金的相對(duì)位置關(guān)系也能可視化,但列表更具有量化結(jié)果的優(yōu)勢(shì),因而更受到專業(yè)投資者的青睞。
而招行根據(jù)歷史收益、凈值、盤中估算3個(gè)維度整合成了一個(gè)模塊。一個(gè)模塊的優(yōu)勢(shì)是折線圖和列表數(shù)據(jù)可以聯(lián)動(dòng)觀察。只不過(guò)默認(rèn)配置的三行數(shù)據(jù)有點(diǎn)少,查看更多就得跳轉(zhuǎn)。
招行這個(gè)模塊令人詬病的點(diǎn)在于,一是收益走勢(shì)里缺了近6個(gè)月的維度,二是折線圖采用了曲線,且線寬過(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ì)更專業(yè);而詳情頁(yè)一級(jí)模塊里展示的這個(gè)4個(gè)定性維度,怎么看都有點(diǎn)偏小白。
基金持倉(cāng):這是最重要的模塊之二,如果把基金比作一道菜,這就是菜譜。跟做菜一樣,對(duì)每一道食材的烹調(diào)和火候把控決定了最終呈現(xiàn)出的風(fēng)味。
基金重倉(cāng)股的盤中行情對(duì)于基金經(jīng)理而言,就是每一道食材在制作中的狀態(tài),可以幫助經(jīng)驗(yàn)投資者了解基金的布局在當(dāng)下的市場(chǎng)狀況,以便做出決策。
而限于銀行體系內(nèi)無(wú)法接入證券交易所數(shù)據(jù),招行在基金持倉(cāng)這塊的盤中行情是空缺的,只能顯示持倉(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)理”并且用兩端封閉式分割線就不太合理。
招行估計(jì)是考慮到?jīng)]有配置現(xiàn)任經(jīng)理的詳情,又不想浪費(fèi)標(biāo)題右側(cè)的空間,才作此設(shè)計(jì)。
其他相關(guān):這部分包含的基金公司、基金檔案、交易規(guī)則屬于并列關(guān)系,理應(yīng)出現(xiàn)的分割線卻沒(méi)有體現(xiàn),雖不影響投資者使用但反映出UI組件規(guī)范缺乏一定邏輯性。
交易規(guī)則:在購(gòu)買時(shí)間點(diǎn)缺少了T日(交易日)收盤時(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)的收益率估算。與此類似設(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è)老基民的福利專區(qū)。上面分析過(guò)招行基金持倉(cāng)tab的優(yōu)勢(shì),而天天直接把帶有重倉(cāng)股盤中行情的持倉(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)景的重視,貼吧里的話題天南海北,吐槽的、圍觀的、提問(wèn)的、表態(tài)的、發(fā)小作文的、曬收益/虧損的,啥都有。
天天的產(chǎn)品經(jīng)理還是為提問(wèn)用戶單獨(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)銷。
基金概況:除了基金相關(guān)的基本信息以外,模塊內(nèi)展示了晨星評(píng)級(jí)和關(guān)注人氣;既有客觀權(quán)威評(píng)估體系,也有用戶層的氛圍烘托,通過(guò)兩層信任力建設(shè)占領(lǐng)用戶心智。
信任力背書(shū):“支付寶金選”是由支付寶理財(cái)智庫(kù)、中國(guó)證券報(bào)聯(lián)合推出的一套理財(cái)產(chǎn)品評(píng)估體系,背后有一些專家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)銷,金融機(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)上去類似“夏普比率”的指標(biāo);優(yōu)勢(shì)在于螞蟻直接量化轉(zhuǎn)譯了指標(biāo)的結(jié)果——“好于同類98%基金”,省去了投資者分析指標(biāo)的過(guò)程。
基金經(jīng)理介紹:關(guān)于這部分,雖然在基金經(jīng)理介紹的二級(jí)詳情頁(yè)里,天天基金比螞蟻財(cái)富要詳實(shí)得多,但一級(jí)模塊里螞蟻的人物包裝還是更到位?!敖鹋*?jiǎng)得主”和學(xué)歷/從業(yè)背景簡(jiǎn)述能直觀地提高產(chǎn)品在用戶側(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)注這只基金的用戶而言,除非你要分析調(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)題。
04 結(jié)語(yǔ)
對(duì)于產(chǎn)品而言,信息架構(gòu)往往是最容易有爭(zhēng)議的部分。而金融產(chǎn)品的信息深度和業(yè)務(wù)復(fù)雜度尤為明顯,與之俱來(lái)的必然是各平臺(tái)在架構(gòu)策略上百花齊放。
篇幅有點(diǎn)長(zhǎng),望各位見(jiàn)諒。時(shí)間原因沒(méi)有放更多的產(chǎn)品進(jìn)行比對(duì),像京東金融、漲樂(lè)財(cái)富通等APP的基金詳情頁(yè)也都各有千秋。
希望本篇對(duì)熱衷于基金投資的朋友,或剛好也在互金行業(yè)做UX的朋友,帶來(lái)一點(diǎn)參考價(jià)值,歡迎在評(píng)論區(qū)留下你的想法。
本文由 @賞酒二兩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于CC0協(xié)議
推薦“韭圈兒”和“基金決策寶”兩個(gè)APP
剛好螞蟻和招行是我在用的兩個(gè)app,分析得很細(xì)致(比如關(guān)于招行UI分割線設(shè)計(jì)的部分),也有大方向上的觀察和猜測(cè)(不同風(fēng)格的產(chǎn)品的側(cè)重點(diǎn)不一致)。但如果加上底部按鈕排布的設(shè)計(jì)分析,會(huì)不會(huì)更完整一些呢?(天天基金把購(gòu)買按鈕放左邊是什么鬼
天天的做法比較迷幻,猜不透原因 故沒(méi)有分析,哈哈,有機(jī)會(huì)問(wèn)到了他們的產(chǎn)品再同步出來(lái)