阿多比设计|小多比的设计笔记（1）：番茄财富改版复盘

二、前期分析
1、项目背景
设计背景：随着移动互联网的兴起，越来越多的群体开始习惯在移动客户端对个人财富进行管理支配。
在这些人群中，80后占了绝大部分，他们有稳定的收入和高昂的投资热情，不想让钱躺在银行，进行合理的理财是越来越多人的选择。
番茄财富正是一款适合都市白领、爱理财人士的基金理财软件，致力于让基金理财更加的方便。它拥有低风险的理财项目、行业大咖的专业指导，根据用户喜好推送相关产品，让理财更具人性化和乐趣化。
产品定位：
目标用户：有投资需求的人。
产品特色：拥有低风险的理财项目、行业大咖的专业指导、交流，根据用户喜好推送相关产品。
使用场景：家庭、公司、地铁、其他场景。
2、改版背景
本次改版的起因是由于首页功能层级入口匮乏，信息层级混乱，模块与模块之间无规律穿插，导致产品业务增长缓慢。设计风格陈旧，缺少情绪化设计与品牌特色的融入，难以形成统一的品牌认知。
阿多比设计学员作品
3、改版目标
对当前的问题进行分析后，发现当前版本主要的问题源于页面流量分发入口较少，优质内容没有得到很好地曝光，整体的款式陈旧，页面色彩单一，导致用户浏览体验下降。因此此次改版，重点在于页面布局优化，增加不同板块满足不同的用户诉求，增加内容曝光，做到设计、服务与内容的统一。
阿多比设计学员作品
4、用户分析 阿多比设计学员作品
总结：
（1） 支付用户的性别以男性为主。
（2） 年龄区间为35-45岁，80后为主，70、90后为辅，已婚有小孩的男性用户已成为本平台核心用户。
（3） 支付用户收入大多数为5000到10000，多数分布在发达地区，用户群体猜测为收入稳定、消费偏理性的男性。
5、用户画像 阿多比设计学员作品
6、需求梳理 阿多比设计学员作品

7、竞品分析
通过调研数据分析，平台用户学历水平较高，主要为企业职员，已婚有小孩的男性用户是本平台的核心用户。从竞争对手汇炒股、头号理财、顺时针金融的基本信息入手进行简单对比，汇炒股在股票资金流动方面做得更好，头号理财操作更简单易懂，顺时针金融相对前两个更偏向小众人群。
阿多比设计学员作品
三、全新视觉
1、功能框架阿多比设计学员作品
2、情绪版
通过提取的关键字，寻找对应的风格特性，建立自己的情绪版，从而确定产品的色调和风格属性。
【简洁-易用】降低信息密度，减少不必要信息的干扰，主要突出主体内容，致力于做到一看就会。
【丰富-专业】丰富则表现为视觉丰富，通过插画的形式来展示金融相关专业信息。
【安全-稳定】通过展现理财课堂和产品收益率，来体现平台的稳定性，并通过社区页面与用户进行互动。
阿多比设计学员作品
3、设计规范
a、颜色考虑到产品的金融属性，整体色调应传递给用户安全、温度和可信赖的感觉，根据此思路分别对主色、辅助色进行了设定。
因此番茄财富界面颜色分别采用的是主色代表股票上涨的红色，辅助色代表严谨安全的蓝色以及代表活跃温暖的橙黄色，加上渐变风格，不会给人一种无聊单调的感觉，让用户在投资理财的时候不必那么紧张，放松用户的情绪，使金融产品运营模块更加富有温度。
阿多比设计学员作品
b、字体
阿多比设计学员作品
c、icon
标签栏：
阿多比设计学员作品
采用由线性转面性的方式，统一圆角设计。从产品调性出发，为了给用户最好、最直观的体验，TAB栏图标选择稍圆润及面性的设计，设计上简洁干净，视觉上沉稳。
金刚区：
阿多比设计学员作品
⾦刚区采⽤单独面性渐变+投影、⾯性带底板+底板投影和单独⾯性的4种同⾊系通过调明度过渡，采⽤⾯性图标是因为能增强视觉冲击⼒，同时给客户带来友好感。
阿多比设计学员作品

四、运营界面
1、弹窗
设计思路：通过福利的发放、商品的优惠等利益刺激手段，吸引用户继续完成对内容/商品的消费，以此降低用户流失，将新用户向付费用户转移，高饱和度色彩吸引眼球，主要以红包金币为主，再通过字体设计来增加视觉效果。
阿多比设计学员作品
2、缺省页
设计思路：场景模拟的缺省⻚⾯设计，加上⼩⼈物的呼应，整体采⽤灰⾊调显得⼲净，加上主⾊不失单调。
阿多比设计学员作品
以简单模拟场景的⽅式来舒缓⽤户等待的焦虑或者打不开⻚⾯的不知所措，同时⽤户可以通过按钮去到相似⻚⾯，解决问题的同时也能促进运营。
阿多比设计学员作品
3、引导页
设计思路：情感化设计让整个APP显得有温度、有情感。舒适度的增加通常伴随着⽤户黏性的增加。引导⻚的插画使⽤的是2.5D商务简约⻛格，将业务简介明了化搭配策划性⽂案深⼊⽤户内⼼。
阿多比设计学员作品
4、Banner
首页banner展示
主题：限时领红包，稳定理财整体是告知⽤户活动，将主要活动做成banner能⼤幅度吸引⽤户⽬光，采⽤主题⾊邻近色系做背景，加上层叠的效果更能增加氛围感。
阿多比设计学员作品
子页面banner展示
整体是采⽤蓝紫⾊渐变，相对于主题⾊有较⼤的变化，主要是为了解决⽤户视觉疲劳的问题，避免造成颜⾊单⼀，这⾥依然采⽤的是邻近⾊配⾊，字体做了⼀定的设计，减少了普遍⽆衬线字体的呆板。
阿多比设计学员作品
胶囊banner
整个胶囊底板采⽤波点⻜散的⽔滴作为整banner的点缀，丰富了画⾯细节，同时也增强了运营的氛围，更加的活跃，视觉统⼀。
阿多比设计学员作品
5、H5界面
色彩情感：情感关键词：⾦融、绚丽、⼼动主⾊为蓝、紫，红、⻩点缀
设计元素：加油站、金币、礼券
理财加油站抽奖活动⻚，设计时体现轻松、娱乐的氛围，加油站作为视觉中⼼，周围环绕⾦币、礼券等烘托氛围，调动⽤户了解理财的积极性。
阿多比设计学员作品6、闪屏页阿多比设计学员作品
创作思考：⾦库⼤⻔敞开，⼿机屏幕和⻔很好的⽆缝嫁接，这⼀点和移动互联⽹⾦融的特性相连接，深⾊星空和⼈物的背影⼀起引导⽤户视觉往⼤⻔⽅向⾛，让⼈有更多的想象和期待，⽽且⻩⾊作为它的互补⾊，亮⾊和暗⾊形成鲜明对⽐，更渲染氛围。

四、运营界面
1、弹窗
设计思路：通过福利的发放、商品的优惠等利益刺激手段，吸引用户继续完成对内容/商品的消费，以此降低用户流失，将新用户向付费用户转移，高饱和度色彩吸引眼球，主要以红包金币为主，再通过字体设计来增加视觉效果。
阿多比设计学员作品
2、缺省页
设计思路：场景模拟的缺省⻚⾯设计，加上⼩⼈物的呼应，整体采⽤灰⾊调显得⼲净，加上主⾊不失单调。
阿多比设计学员作品
以简单模拟场景的⽅式来舒缓⽤户等待的焦虑或者打不开⻚⾯的不知所措，同时⽤户可以通过按钮去到相似⻚⾯，解决问题的同时也能促进运营。
阿多比设计学员作品
3、引导页
设计思路：情感化设计让整个APP显得有温度、有情感。舒适度的增加通常伴随着⽤户黏性的增加。引导⻚的插画使⽤的是2.5D商务简约⻛格，将业务简介明了化搭配策划性⽂案深⼊⽤户内⼼。
阿多比设计学员作品
4、Banner
首页banner展示
主题：限时领红包，稳定理财整体是告知⽤户活动，将主要活动做成banner能⼤幅度吸引⽤户⽬光，采⽤主题⾊邻近色系做背景，加上层叠的效果更能增加氛围感。
阿多比设计学员作品
子页面banner展示
整体是采⽤蓝紫⾊渐变，相对于主题⾊有较⼤的变化，主要是为了解决⽤户视觉疲劳的问题，避免造成颜⾊单⼀，这⾥依然采⽤的是邻近⾊配⾊，字体做了⼀定的设计，减少了普遍⽆衬线字体的呆板。
阿多比设计学员作品
胶囊banner
整个胶囊底板采⽤波点⻜散的⽔滴作为整banner的点缀，丰富了画⾯细节，同时也增强了运营的氛围，更加的活跃，视觉统⼀。
阿多比设计学员作品
5、H5界面
色彩情感：情感关键词：⾦融、绚丽、⼼动主⾊为蓝、紫，红、⻩点缀
设计元素：加油站、金币、礼券
理财加油站抽奖活动⻚，设计时体现轻松、娱乐的氛围，加油站作为视觉中⼼，周围环绕⾦币、礼券等烘托氛围，调动⽤户了解理财的积极性。
阿多比设计学员作品6、闪屏页阿多比设计学员作品
创作思考：⾦库⼤⻔敞开，⼿机屏幕和⻔很好的⽆缝嫁接，这⼀点和移动互联⽹⾦融的特性相连接，深⾊星空和⼈物的背影⼀起引导⽤户视觉往⼤⻔⽅向⾛，让⼈有更多的想象和期待，⽽且⻩⾊作为它的互补⾊，亮⾊和暗⾊形成鲜明对⽐，更渲染氛围。