KASP理财师展业工具

当前位置:首页>设计文章>UI>KASP理财师展业工具

一言以蔽之

为进一步做到设计赋能业务,促进业绩达成及增长,我们推出了一款展业获客工具KASP。目前上架的新功能为财富规划,理财师通过录入信息,可以为客户定制专属财富规划报告,财富报告需要达到线上线下展示,来适用于不同的用户目标和场景。线上可预览报告、线下可装订成册、可投屏、可用平板电脑阅读浏览。策略书以A4纸张物理单位比例,横向布局来实现这件锦上添花的事,且导出的PDF可以线下印刷。

KASP理财师展业工具
KASP理财师展业工具
KASP理财师展业工具
KASP理财师展业工具

尺寸:29.7x21cm      纸张:胶版纸/铜版纸      印刷:快印      装订方式:骑马钉          

KASP理财师展业工具

确定版式布局,尺寸为横版A4比例,一倍像素尺寸842x595。遵循视觉、感知上一致的设计原则,任何元素都与页面某个内容存在必然的视觉联系。版面统一、简洁、有条理可以引导视觉流向,有利于更好地传递信息,也更美观。生活中,对齐也是无处不在,利用好对齐符合用户的视觉惯性,并且通过元素之间建立视觉上的联系,以此来打造一种秩序感。把画面整体版式平衡,利于阅读永远放在第一位。

生成的PDF财富规划策略书需支持印刷,直观地呈现出来与客户沟通畅谈。考虑到印刷的一些问题,不能掌控纸张和打印效果,需要减少大面积印刷的可能性,避免出现大面积色块、图片,这样有效避免断墨带来的视觉效果不佳。我们做了有五六版的风格探索尝试,最后选定了白底这一版。简洁大气,打印出来效果最佳。前期因需求使用的是竖式。竖式为最常用的一种画册形式,由于横式画册横向在翻阅时,展开过于宽,尤其是报告册,信息量大于图片量时,需要分栏来提高阅读效率。

KASP理财师展业工具

后期应业务多种场景需要,更换为横向排版布局,横向排版更多、更好的支持更多的数据表格。

KASP理财师展业工具

封面文字信息使用1:1.618的黄金比例来排版布局,(黄金比例:从自然界中总结并发现的具有设计美感的数学比例)让重要信息在最佳可视范围,并且减少过多视觉元素带来的视觉压迫感。呈现出一种简约大气的的视觉效果,让客户可以轻松、安闲的阅读。用粗线条简单的颜色区分来装饰过于单调的版面,达到一种动态平衡。
整体采用了居中对齐的版式,给人平稳、值得信赖的感觉。整体边缘规则、减少视觉参差不齐的同时,也可以增强阅读的流畅性。并还可以适配双面印刷和单面印刷需求。

KASP理财师展业工具

关于对齐形式左对齐:元素以左为基准对齐,是最常见的对齐方式,更严谨有序,信息更易传达,并且阅读效率最高,也符用户从左到右的阅读浏览习惯。但是也有一个缺点,就是导致右端留白过多,导致整体视觉不均衡。右对齐:右对齐的编排方式与人的视线刚好相反,而且每一行起始不规则的部分干扰了用户的阅读,所以右对齐的使用频率并没有很高,往往会与一些图形或者图片建立某种联系而获得平衡感,会形成人为干预的感觉,这种排版方式也会显得比较个性,但会增加阅读成本。居中对齐:版面元素以中轴线为基准对齐,垂直居中的对齐方式给人庄重,严肃,经典的感觉,我们也经常称之为高端排版。因为大段的文字居中会造成折行阅读困难的问题,所以居中的文字排版多用于标题、副标题、广告语、短篇文字等的排版中。当排版海报类没有思绪的时候也可以试试居中,应用纵向思维来落实视觉表达。

KASP理财师展业工具

在配色上,使用了沉稳的黑金配色,这样可以更贴合财富品牌调性、也可以体现金融行业性质。

KASP理财师展业工具

为了沉淀设计资产,我们把文件的色彩变量细分、组件化,可以快速完成品牌替换,对接更多的机构业务。

KASP理财师展业工具
KASP理财师展业工具

纸质类媒介例如:报纸、书籍、画册等,在设计的时候需要考虑到信息的阅读性,本来信息是用来传递的,所以在前期需要对所有文字信息根据阅读的逻辑把信息清晰的罗列出来,这样才能把信息表达得更漂亮,从视觉上看起来更舒服。
层级混乱会导致画面失衡,客户看到的策略书的时候也会云里雾里。层级的主要表现方式就是对比,所以页眉处设置了每一页的内容标题。翻阅的时候能快速找到具体某一个内容。页脚统一的视觉元素,和欢迎页遥相呼应,三角形来装饰视觉达到一种秩序稳定、商务化的视觉效果。达到统一的同时也强调了整体风格调性。数据可视化就是借助视觉的表达方式(不局限于文字),将枯燥的,专业的,不直观的数据内容,有趣的、浅显的、直观的传达给观众的一种手段。把握设计与功能之间的平衡,从而更好地沟通与传达信息,让数据更易于阅读。日本数据可视化专家木村博之的定义,从视觉表现形式的角度,将“信息图表”的呈现方式分为六大类:图解(Diagram)、图表(Chart)、表格(Table)、 统计图(Graph)、 地图(Map)、 图形符号(Pictogram)。图表的作用,是帮助我们更好更快地看懂数据,选择什么图表首要的问题是我要展示什么数据,需要用图表做什么。一定要遵循可视化的目的,以一种用户更容易理解的形式呈现复杂的信息。

KASP理财师展业工具

前端工程师在PC上做页面,然后使用nodejs插件puppeteer生成PDF,再用H5打开生成的PDF。
由于iOS、Android、网页都各自的默认字体,为保持一致,我们使用了公司购买的有版权的字体。有效地保持输出一致性。在浏览器上字体最小渲染为12px,但是生成PDF打印出来的话10px就足够了。这时不用参考浏览器渲染效果,导出PDF来预览是完全OK的。报告内有部分文字段落获取自后台富文本,后台可配置。前端可以控制读取的富文本编辑器里文本的字体、字号、字间距、行高。H5也需要读取同一个信息,不同呈现形式呈现,能控制就控制。读取富文本的页面,需要动态切分,页眉页脚代码实现会出现各种问题,目前使用的是切图,为后期色彩变量增加难度,也是之后迭代需要克服的难题。关于去掉页码,动态生成页面没有数据的页面不显示、不能判断富文本编辑器内容占的页数,目前报告页数不多,所以去掉了页码需求。

KASP理财师展业工具

1、表格内信息对齐方式,关于数据金额需要相同单位对齐,缩短数据信息阅读时间,更便于数据对比。

KASP理财师展业工具

2、H5和PDF读取后台富文本位置:宏观分析、公司介绍、声明。存在一个问题,H5字体大小、行高合适,但PDF会不合适。开发不好控制,包括里面存在插图的情况,动态切分会把图片裁到下一页。两者最佳效果不好兼顾。为了更好地呈现和还原,下期尽量可以各取所需。
3、关于色彩变量,为适配更多的品牌配色,部分涉及色彩变量的地方需要再细化和优化。感谢观看!Thanks for reading

KASP理财师展业工具
温馨提示:

文章标题:KASP理财师展业工具

文章链接:https://www.uied.cn/10343.html

更新时间:2023年04月13日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI交互

kasp理财师展业工具-财富规划策略书

2023-3-10 16:37:10

UI

星火数科IP形象-星小兽从0到1诞生

2023-3-11 14:17:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索