基金App中如何更好处理信息集合

   一、行业中的基金App的

信息集合设计

(普遍运用列表式,运用列表式优缺点)


前言:信息流展示是用户与APP接触时间最长的地方之一。App的设计思路、用户体验、信息展示效率等,都可以通过信息流的展示略窥一二。


我们现在就先说说基金App里面信息流设计中最常见的两种类型:列表式和卡片式。分别介绍一下两种设计在目前行业中的使用程度以及优缺点,然后以道乐开发的中银App为例子阐述卡片式设计在基金App中实际运用的优势。


1、行业主流列表式设计

列表式常见于新闻资讯板块、基金详情介绍、产品推荐类等等一些页面 信息元素包括:图片/icon、标题/名称、概要/简介、标签/专题、时间 。


<<   滑动查看下一张图片   >>

右滑依次为:基金详情页、资讯模块、基金列表页、资讯/产品销售页


◼设计优点:

  1. 这类信息流传达的条数多、频率高,用户需要通过快速浏览题目、概要、提示文字等来确定是否需要点击进入信息详情。

  2. 列表式多为静态列表,加载速度快

  3. 大多以时间线作为排序标准

◼设计缺点:

  1. 容易与上下项目容易搞混

  2. 详细内容太多的时候,不容易操作与定位

  3. 无法一次呈现较多的资讯

  4. 相较于中央资讯,其他资讯无法完整的展示


二、卡片式设计简介优点


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设计 | 探索“安全、省钱、高效”申购流程