关注“道乐科技”公众号，我们提供原创的互联网基金销售报告，欢迎业内同仁共同交流，转发分享请注明来源。
前言：信息流展示是用户与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设计 | 探索“安全、省钱、高效”申购流程
閱讀更多 道樂科技 的文章
