關注“道樂科技”公眾號，我們提供原創的互聯網基金銷售報告，歡迎業內同仁共同交流，轉發分享請註明來源。
前言：信息流展示是用戶與APP接觸時間最長的地方之一。App的設計思路、用戶體驗、信息展示效率等，都可以通過信息流的展示略窺一二。
我們現在就先說說基金App裡面信息流設計中最常見的兩種類型：列表式和卡片式。分別介紹一下兩種設計在目前行業中的使用程度以及優缺點，然後以道樂開發的中銀App為例子闡述卡片式設計在基金App中實際運用的優勢。
一、行業中的基金App的
信息集合設計
（普遍運用列表式，運用列表式優缺點）
1、行業主流列表式設計
列表式常見於新聞資訊板塊、基金詳情介紹、產品推薦類等等一些頁面 信息元素包括：圖片/icon、標題/名稱、概要/簡介、標籤/專題、時間 。
右滑依次為：基金詳情頁、資訊模塊、基金列表頁、資訊/產品銷售頁
◼設計優點：
- 這類信息流傳達的條數多、頻率高，用戶需要通過快速瀏覽題目、概要、提示文字等來確定是否需要點擊進入信息詳情。
- 列表式多為靜態列表，加載速度快
- 大多以時間線作為排序標準
◼設計缺點：
- 容易與上下項目容易搞混
- 詳細內容太多的時候，不容易操作與定位
- 無法一次呈現較多的資訊
- 相較於中央資訊，其他資訊無法完整的展示
二、卡片式設計簡介優點
1、卡片式設計的來源早已存在於人類生活的各種現實物品
各式各樣的卡片存在於我們周圍：銀行卡，身份證，名片，甚至連便利貼都算是卡片。所以，我們會下意識地接受它們形同卡片的屬性，自然地與界面進行“卡片式”的交互。
( 日常生活中）
( 道樂開發-中銀App）
<< 滑動查看下一張圖片 >>
2、卡片式設計是為了將內容信息更好地展示出來，並利用信息來挑逗用戶產生操作。視覺上需要有卡片的真實感受，操作上卡片的翻轉、移動、摺疊、分享等操作也可以通過設計來強調。
◼設計優點：
1.重塑空間利用價值
- 我們將卡片當做一個承載內容的容器，不同的內容被規劃成不同的卡片。
- 空間利用上會得到極大的拓展，同時看起來也具有整體性。
2.賞心悅目，優越的交互體驗
- 卡片式設計作為一種擬物設計，可以被堆疊，覆蓋，移動和劃去。這樣就極大的拓展了一個內容塊的視覺深度和可操作性。
3、內容前置，信息分級
卡片作為一個獨立的容器，可以在內容上進行良好的佈局組織，將信息分塊，突出重點，讓用戶快速找到感興趣的內容，避免在繁雜的信息集中浪費時間。
( 資訊發現）
( 活動中心）
4、跨越終端，多元佈局
在不同大小的屏幕上排布內容變得更加易讀，可以很方便的做到視覺風格統一，比如4”手機上可以橫向顯示三個小號卡片，7”平板可以橫向顯示六個，傳統列表很難做到這點同時保持列表規整。
( 中銀App-主題基金）
( 京東-貨幣基金推薦）
<< 滑動查看下一張圖片 >>
設計要點：
卡片式信息展示的內容多，並且多注重引導交互行為，只有在當前情景下是否合適，是否能高效展示信息的同時做到與用戶體驗的和諧一致。且不要為了突兀創新而這麼做。
三、基金App中卡片式設計
運用場景實例
1、項目背景
這個項目是我司給中銀基金改版全新定製化設計的一款App，設計理念突出於市場上大部分App，大部風頁面運用了卡片時設計，重新定義了基金App信息流展示，提高用戶體驗、信息瀏覽效率。
2、界面展示及設計理念
（1）首頁資產設計-增加空間利用率
首頁展示資產是基金App一般設計的用戶體驗方式，目的方便用戶查看資產，但是並不會展示過多資產內容，例如：南方基金、匯添富、招商基金、嘉實基金等等。但是基金公司大都採用列表式設計，固定首屏較大空間。
（2）卡片式設計能更好的打破原有的框架
比如，在傳統列表下，內容一般為縱向滾動操作，展示的內容有限。而採用卡片式的佈局，在縱向的內容流裡，還可以很好的增加橫向滑動的內容區域，而且看起來很整體。
<< 滑動查看下一張圖片 >>
在設計首頁時候，不僅將資產作為卡片式展示，還將主要貨幣基金以及推薦熱門基金作為卡片滑動可購買，這樣增加了空間的利用率。
（3）用戶資產展示-區分不同維度內容
卡片其實比較像一個聚攏信息的容器，可以把不同維度的內容放入不同的卡片中，使其在內容區分的同時，還能保持界面的統一性。每個卡片都是不同維度，相對獨立的，但通過不同大小的卡片歸納後，比起傳統列表項的視覺效率要高很多，顯得更有秩序。
在用戶資產展示採用卡片處理信息的層級。第一個卡片承載著功能查詢。餘下卡片分別展示是活期寶、定期理財、持倉基金、定投計劃、在途基金。
持倉資產每一持倉基金為一卡片，清晰明瞭，展示持倉詳情資料、資產及收益走勢。
（4）基金詳情頁-內容前置，信息分級
基金詳情頁是聚合信息最多的地方，裡面承載基金收益、風險等級、購買信息、淨值、收益…等等眾多信息，我們決定將信息分塊，突出重點，讓用戶快速找到感興趣的內容，避免在繁雜的信息集中浪費時間。
（5）擬物視覺，賞心悅目
卡片是獨立的，所以自帶邊緣陰影效果，可以很容易的製造出“不可視邊界”和暗示觸摸點擊區域大小，比起傳統的線框列表要靈活很多。
四、總結
卡片式是有創造性的新設計。它不只是僅供一看的，是一種可以創建豐富內容的用戶體驗的靈活佈局模式。是一種信息自由佈局的設計語言，它使人機交互方式越來越豐富，以創造更加極致的用戶體驗。感謝大家觀看。
別讓差體驗延伸成低級bug
利用狀態可見性原則測試基金產品的問題（上）
基金App首頁設計探討（一）| 導航的多種設計可能
基金App首頁設計探討（二）| 如何構建首頁模塊
基金App首頁設計探討（三）| 首頁設計樣式總結
基金APP：基金詳情頁怎麼做——股基篇
基金APP設計 | 探索“安全、省錢、高效”申購流程
閱讀更多 道樂科技 的文章
