loading请求处理中...
广告位招商×
当前位置: 首页 > 威客攻略 > 创意产品设计

金融资讯类产品设计

2019-11-14 10:19:59 阅读 28735次 0 标签: 创意产品设计 作者: 陈先生12121

一、项目背景

这个项目是我司之前给客户做的一款新闻资讯类APP,主要功能是:1)让用户实时了解投资基金的相关资讯以及该客户公司的相关动态;2)建立社交圈,用户通过发布动态来进行交流;3)另外用户可以通过APP预约基金经理进行视频聊天,为用户解决一些投资上的疑问。

目前APP采用会员制,目标用户是购买过客户公司基金产品的用户。

二、设计理念

新闻资讯类APP从产品运营角度出发都是一个“内容为王”的产品,最核心的设计理念在于“高效阅读”。为什么是高效阅读呢?

根据艾瑞网《2018年中国新晋中产新闻资讯人群洞察报告》数据显示,我们可以建立新闻资讯APP用户高频使用场景:

金融资讯类产品设计

新闻阅读场景碎片化,每人新闻阅读场景大于3个,晚上睡觉前是阅读新闻的高频场景,其次是上下班通勤和进餐时间。用户在这些场景下阅读新闻资讯的时间短,频次高,且容易被打断,因而在设计上需要将用户在不同场景中体验APP的不同需求进行充分考量,尽可能让用户高效阅读。

三、产品信息架构

金融资讯类产品设计

四、设计规范

1、文字

金融资讯类产品设计

文字一般用6或8梯度进行搭配,比如32PX的字号用于资讯列表中的标题,则采用24PX的字号用于小字,不过具体视情况而定。

金融资讯类产品设计

2、颜色

APP的主色调选用红色,一方面与客户公司的品牌色相呼应,传递品牌感;另一方面是红色在心理上给人一种自信、威望的心理暗示,寓意产品内容的真实性、权威性。

金融资讯类产品设计

金融资讯类产品设计

3、布局间距

界面布局遵循8PX原则,所有间距或标准尺寸都应为8PX的倍数,特殊情况要调整适配。

金融资讯类产品设计

4、图标

图标统一采用面性图标,识别性强,易于理解;另外图标统一采用圆角设计,增强亲和力。

底部标签栏 48X48PX:

金融资讯类产品设计

金刚区 80X80PX:

金融资讯类产品设计

列表图标 40X40PX:

金融资讯类产品设计

五、界面展示及说明

1、首页

用户使用的第一高频场景是在睡觉前,使用场景中唯一的光源—灯光,光线较弱;而光线水平会影响阅读的舒适度,多数研究表明,在明亮光线下,浅色背景深色字比深色背景浅色字更好识别,在较暗光线下则相反。因此,APP采用日夜切换模式供用户选择。另外,文字与背景的文本对比度应为7:1相对阅读更舒适(根据Material Design设计语言推荐)。

图文排版采用左文金融资讯类产品设计右图,而不是左图右文,原因有两个:

①影响阅读效率:根据大部分国人从左到右的阅读习惯,如果先看到图片再看到标题,而有些新闻图片表达信息过于模糊,用户需要阅读标题后再次去看图片,这里就会造成一个视觉重复,虽然这也只是个1秒不到的时间滞留,但大量的类似列表就会比较影响阅读效率了。

金融资讯类产品设计

②打乱视觉上的整齐布局:对于可能出现的无图和多图新闻信息,那么左图右文的情况就会造成页面的不整齐,影响阅读连贯性。

金融资讯类产品设计

另外,为了打造沉浸式体验以及避免用户视觉疲劳,列表采用每两个左文右图排版穿插一个无图或多图新闻信息,使列表流富有节奏感。

2、社区

社区模块分为精选和好友圈两个栏目,点精选旁边的小三角可选择细分的栏目内容,不过默认是精选,系统通过分析用户关注的人及经常浏览的文章类型来推荐相应的内容和人物,精准匹配用户的喜好,提高阅读效率;另外,每个话题内容下面都有对应的阅读量、评论数和点赞数,用户可参考这些数据,迅速找到较高质量的文章内容;“发布”功能图标采用悬浮样式,方便随时发布话题。

金融资讯类产品设计

3、我的

对列表图标进行分类分组,根据功能层级采用不同的颜色进行区分,让用户易于识别和定位;另外APP加入了“阅读历史”这一功能,这是考虑到用户使用的第二高频场景—上下班通勤,出现的突发情况会比较多,随时可能关掉APP去打开其他应用,而当用户想起某篇看了一半却忘记收藏的文章时,就可以在阅读历史里找到它。

金融资讯类产品设计

4、详情页

文章详情页中提供字体大小调整和日夜模式切换的功能,用户可根据自己的阅读习惯和使用场景来进行实时调整,确保能够舒适、高效的进行阅读;另一方面也避免了用户在阅读时因为文字小、光线暗等客观原因而离开详情页。

金融资讯类产品设计

根据文章或视频内容推荐相似、相关的文章或视频,减少用户去寻找此类信息的操作步骤

金融资讯类产品设计

5、预约基金经理

通过不同颜色及颜色的深浅对用户进行引导,清晰地告知用户当前所在位置及要做的操作,让用户可以不用思考就能完成操作。

金融资讯类产品设计

6、空状态设计

当页面没数据或者网络有问题的时候,不是采用一个空白页面,什么都没有提示,而是采用插画的形式,告知用户当前状态及解决方案,避免用户傻傻的等待,以为数据还没加载出来。

金融资讯类产品设计

7、其他页面展示

金融资讯类产品设计

金融资讯类产品设计

金融资讯类产品设计

六、总结

新闻资讯类APP的关键在于内容,如何让内容能够被用户高效地阅读是我们需要着重考虑的设计点,比如说文字大小、行间距、段间距、文本对比度、图文排版等都是我们要考虑的

扫码,回复【创业】领取

免费送您一份创业礼包!

从0到1,解锁创业全套秘籍

帮你避开创业那些坑

设计、开发、营销需求

扫描左边二维码

免费获取咨询和方案报价

公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言(0 展开评论

您需要注册登录才能发表言论

快速发任务

设计价格是多少?怎样找到合适的设计人才?

官方顾问免费为您解答

 
创意产品设计相关任务
DESIGN TASK 更多
众雅的logo设计,简单又创意

¥200 已有17人投标

文具用品类产品设计

¥2000 已有17人投标

动漫产品设计

¥6650 已有1人投标

图书馆设计创意的征集

¥1000 已有1人投标

高端创意活动策划

¥200 已有10人投标

产品外观创意设计

¥4000 已有1人投标