恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
支付宝是如何做设计的?从理财服务说起
0.0°
2019-01-18 原创文章 经验/观点 举报 3548 2 5 0

通过对支付宝平台的理财服务板块的视觉与交互体验的测评,分析目前活动运营设计的优劣处,提出一些优化的方向,提升活动的用户体验,降低不必要的流失。

【产品分析】


1.用户分析

Image title

根据百度数据的数据,分析用户了解支付宝的渠道分析:在用户了解支付宝的渠道中,通过淘宝、网购了解的人数占比较大,使用支付宝频率(每周)分析使用10次以上的用户占比较多。用户认为支付宝最需要改进之处中功能的快速操作占16%,占比较大,用多少充多少的占32%,不会把钱放在支付宝上的占29%,大量钱在支付宝上的占14%。


从以上数据可以总结出:使用支付宝的用户大多为年轻人,男性占比较大,支付宝的使用人群越来越多,并且使用时的流畅度要求很高,而且对于在支付宝上存钱或者使用理财服务的理念还不够深入人心。


【分析产品优缺点】


(一)蚂蚁星愿


1.功能与目标:活动运营


2.H5表现形式:活动推广


3.活动要点:蚂蚁星愿作为理财的应用相较于其他的理财软件来说,其优点在于用户并不需要专门去下载app,而是可以直接通过支付宝的财富模块就能打开,而且可以用支付宝金额一键申购货币基金。跟储蓄罐差不多,可以看到每个人的目标星愿,也可以在蚂蚁星愿上给对方祝福。提供给用户有目标有计划的存钱的新途径。实名用户主要针对的是常用支付宝的年轻一代人群。


4.内容分类:扁平插画风


5.视觉和交互风格的优点分析:


(1) 许愿页面的跳转icon以礼物的插画展示,在整个页面里更加的醒目,与其他星星和星球区分开来,以星空为主要页面背景,人仰望天空,烘托主题页面氛围,每一个星星或星球的不透明度都是不一样的,从而体现出星空的层次感。


(2) 其他人的星愿界面用蓝色和红色的标签来区分坚持中与已完成的两个不同状态,用未填充和填充了红色的icon来区分点击和未点击来区分正常和点击两个状态,喜欢按钮点击后生成可爱的爱心动效,让用户知道已经完成交互。


(3) 许愿界面许愿页面用烟花、雪人和雪花等元素的插画营造节日氛围,标题沿用可爱风格,用星星的形状来突出主题,下面分割页面用有曲线比直线显得更加生动,更加具有韵律感。


(4)我的星愿界面目标数和已攒数放在一起方便对比,页面的吉祥物星星形象可爱,符合整个页面和主题的风格。


(4)攒一笔的界面输入金额的输入框下面还推荐了一些数值,让人们在选择的时候减少纠结的成本。


(5)星愿账单界面里板块与板块之间用不一样的形状来区分两个不同的模块,不同类型的账单用不同的icon区分开来。


(6)管理星愿界面选中状态用黄色边框提醒用户,中间用空隙隔开,说明两个的类型不一样。


6.视觉和交互风格的缺点分析:


(1) 主页面没有往下翻的提醒标志,用户不一定会往下浏览。


(2) 许愿页面这里的标签性质模糊,可以加点箭头,让用户知道这个是使用指导,不可点击。


(3) 我的星愿界面这里的可点击的引导性不够明显。字体段落间距不够舒适,已攒金额不够明显。


(二)懒人一键理财


1.功能与目标:活动运营


2.H5表现形式:活动推广


3.活动要点:懒人一键理财实名用户主要针对的是常用支付宝的需要稳健低风险基金投资的用户。设计主要偏重数据和信息的展示,开头运用了小动效,把应用的特色和业务更生动地说明。


4.内容分类:扁平插画风


5.视觉和交互风格的优点分析:


(1) 首页启动页面用了小动效,把应用的特色和业务更生动地说明。页面中间七日年化收益率的数字用的字号比较大,用了白色,突出收益率,让用户一目了然。


(2) 时间值可以向左右滑动,上面的大圆也会向同一个方向转动,用了更加生动的方式去展示产品。


6.视觉和交互风格的缺点分析:


(1)首页界面中的基金名字颜色不够明显,可以用浅一点的蓝色。


(2)整个页面重心偏上。


(三)猜涨跌


1.功能与目标:活动运营


2.H5表现形式:活动推广


3.活动要点:猜涨跌用户主要针对的是所有支付宝的用户。整个页面都用了饱和度较高的颜色,营造一种游戏活动的氛围,用了红色和绿色比较鲜明地表现出两个重点的按钮和相对应的占比。


4.内容分类:扁平插画风


5.视觉和交互风格的优点分析:


(1) 主页面用了金币黄色到橙色的渐变,说两句的部分用了滚动的信息突出游戏的真实性和烘托出游戏互动的氛围。用红色和绿色做看涨跌的进度条很直观地看出数据的变化,按钮用了立体效果,让用户一目了然。


(2) 主页面金币用了聚焦的分布,都往着重心飞去,虚实得当,有动效的感觉。


(3) 主页面赛季大奖的角标很好地吸引用户的眼球。字体下面有横线提醒用户这个是可以点击进去的按钮部分。用了渐变凸显该部位是凸起来的,用鲜艳的红色突出了胜率,用了简单的插画,增加趣味性。


(4) 看涨看跌界面标题做出了立体的感觉,颜色很好区分看涨或者看跌,选择数目时用醒目的黄色来做点击时候的效果,背景用了浅蓝色向深蓝色的渐变效果,让背景有种凸起来的感觉。


(5) 勤奋新人奖按键呈现灰色调说明此处不可点击,增加简单的扁平icon,避免单调的感觉。


(6)TA的页面圆台上部分有种立体的感觉,下面是平面,从立体到平面的转折很有趣,突出胜率。


6.视觉和交互风格的缺点分析:


(1)首页界面颜色太浅,字体颜色可以稍微亮点。


(2)支付宝积分限时抽奖的栏目过于单调,可以在前面加一些简洁的icon,提高对用户的吸引力。


(3)猜涨跌的首页说两句、赛季大奖和新人奖按钮上的icon颜色有点淡,影响用户更好的使用。


(3)战绩排行的前三名的数字可以加不同的icon,区分出重要的前三位,增加对用户的吸引力。

Image title


(四)小钱袋


1.功能与目标:活动运营


2.H5表现形式:活动推广


3.活动要点:小钱袋用户主要针对的未成年的家长和未成年。整个页面都是可爱插画风,主色调是高明度的蓝色,用蓝色部分划分为主要内容区域,黄色为点缀色,主要用于按键上。


4.内容分类:扁平插画风


5.视觉和交互风格的优点分析:


(1) 主页面存一笔按钮是一个从内往外渐变消失的圆圈动效,吸引点击用户查看,闪光点日记天天写栏目用形状和上一个栏目更好的区分开来,导航栏正常状态为灰色面性图标,点击状态用了主题色,用了会左右摇动的星星动效既可以吸引用户的眼球,又可以增添趣味。


(2)注册页面用了女生和男生的不同插画区分性别,让用户有直观的视觉感受,并且增加趣味性,图标选中状态沿用主题色,而且提醒了当前为选中状态。


(3) 彩虹日记本页面头像默认缩略图运用了运用了可爱的标志,缺省部分的插画用了灰色调,插画跟累计星星部分相呼应,图标和按钮用两个不同的颜色和风格区分开来,图标用了描边。


(4)应用页面统一使用扁平类图标,右上角用上点缀色来突出重点。


(5)家有儿女页面主图用了灰蓝色到蓝色到深蓝的渐变,图标统一用了扁平的风格,增加页面的协调性。


(6)管理页面里的促销信息用了可爱的插画和鲜艳的字体和框结合起来,突出活动促销,统一运用了轻质感的图标,具有唯一性,细节更加丰富,用间隙区分不同层级,从而区分不同的功能。


6.视觉和交互风格的缺点分析:


(1)首页虽然背景可以不用很明显,但是后面的插图人物和山峰没有区分开来。


(2)家有儿女页面已经点赞和打赏的人数可以放在上面的右下角,可以和评论栏区分开来。

 

(五)工资理财


1.功能与目标:活动运营


2.H5表现形式:活动推广


3.活动要点:这项功能主要是用于全部需要把工资定期定量投入到一些比较稳健货币基金的白领、蓝领等参与社会劳动的人群。

主图的颜色是淡蓝色到深蓝色,蓝色为主题色,背景以白色为主,蓝色和白色结合更好地凸显金融产品的专业性。只用了一些橙色作为点缀色,突出重点内容


4.内容分类:扁平插画风


5.视觉和交互风格的优点分析:


(1)首页使用线面结合icon,看起来比较简约,用橙色点缀色吸引用户购买金融产品,图片渐变,从有到无的变化十分自然,淡蓝色到深蓝色的渐变,让画面没有那么的单调,卡片直接从两个页面中间切开,能够让画面没有那么呆板。


(2)我的工资页面跟首页风格形成了统一,栏目里的形状用了拟物化的风格,与便签类似,不像基本的卡片式设计那么单调,转入成功或者失败会用不同的颜色来区分,让信息比较清晰。


(3)设置计划页面主图从左到右的图片底部从白色到灰色的渐变,比较自然。也与下面填写信息区分开。


6.视觉和交互风格的缺点分析:首页数字在背板里优点偏上,基金名称前面前面可以加一个类似金币的icon,这样画面看上去更加对齐。

Image title


(六)财富王者


1.功能与目标:活动运营


2.H5表现形式:活动推广


3.活动要点:财富王者是一个游戏互动的支付宝推出的一项业务,用了扑克牌的梅花和方块两个花色来代表想表达的寓意,梅花黑色三叶,表示生命与健康;方块代表钻石,意味着财富。两个对人们象征意义都是很重要的事情,也能表达出游戏想表达出自己的主题。


4.内容分类:扁平插画风


5.视觉和交互风格的优点分析:


(1)首页页面标题皇冠前后的不透明度不一样,显出这个装饰的层次感,最后一个字体的连笔和第一个字的撇有前后呼应的效果,底部区分栏目部分这个像装容器的细节很精致。

(2) 关卡页面得到星星和没有星星的灰色状态区分开来,右下角标的pass和右上角标的当前等级用红色和蓝色两个色区分开来。


(3) 问题页面用了饱和度较高的蓝色和黄色来突出两个不同的竞赛者,还用了圆形和菱形两个不同的形状进一步的区分。


(4) 答案页面哪一方回答的答案对错都区分的很清晰,并且还把符号放在两侧,左右两侧的分数用了叠加的方法,更加的自然,用两个首页的花色来显示分数的高低。


(5)成绩结果页面栏目与栏目之间区分的线往里面的弧度比直线来的更生动,都是立体的图标,形式统一。


(6)我的战绩页面图标的意思还是比较清晰的,并且这组图标很统一,都是面性图标。


5.视觉和交互风格的缺点分析:前三名没有突出,可以用三个不同深度的紫色,而下面其他的可以是同一个紫色,而且可以在前三名名字后面添加不同的icon或者是不同颜色的皇冠。


(七)大盘晴雨表


1.功能与目标:活动运营


2.H5表现形式:游戏页面


3.活动要点:大盘晴雨表这项功能是展示大盘的动态,并且分析大盘动态,展示市场动态和新闻。因为是晴雨表所以要用天气预报的展示方式,用了一个展示天气的icon来说明当前大盘的状态。背景匹配当前的大盘状态,例如大盘雨用深蓝色,还用了生动的动效,下雨的动效。总体偏专业,只用了少量的图形和插画让数据更加直观。


4.内容分类:简约商务风


5.视觉和交互风格的优点分析:


(1)首页页面用了扁平的线性图标,简洁直观,走势卡片底面用了绿色或者红色很直观的看出涨跌的状态,走势线段的走势用了亮白色圆点来突出他的走的动态,像是定点,用了红绿两色进度条的方式直观的表示涨停和跌停的个股数量,底部动态模块基金名称部分用了有不透明度的方框减少对上面重要模块的影响,更加突出重要模块。


(2)自选页面icon风格都是线性扁平风,右上角的角标会顺应字或者图标的大小变成圆角或者圆,按着涨跌幅可以调整为涨跌额,换手率,通过不同深浅的蓝色来区分开层级,右边的icon很有特色,用了不同的透明度来突出图标的层次感,分得出icon的前后关系。


(3)市场页面用了磁铁式的排列展示沪深,港股,美股,用在一个平面上展示来说明涨、平、跌分别的占比,状态栏icon未选中时以灰色线性为主,点击状态为线面结合,整个页面比较简洁,主要以展示数据为主。


(4)发现页面财经街坊栏目用了扁平插画,为这种专业性强的页面增加了趣味性,大盘动态栏目使用这种磁铁式卡片的排列方式比较有序性,而且增加用户的易读性。热议话题栏目右侧用了动效,很可爱,增加灵活感,标题部分不是直接在下面加一个色块,而是在字体的部分画了线,有点像是用笔在下面划重点,给画面增加灵活性,弱化了表格的排列方式,增加了灵活的感觉。


6.视觉和交互风格的缺点分析:

(1) 首页大盘走势下面的滚动栏这个部分可以用另外一个深色的板块,和上面的部分区分开来。


(2)首页下面市场动态板块可以用卡片列表的方式展示,这个板块看起来很孤立的感觉,下面按钮的感觉不明显,可以在下面加一个底色。


(3)自选页面证券名称右边的icon的角标有点大,添加股票这个按键不明显,可以在下面加一个方块。

Image title

【总结】


1.要贴合我们服务的用户人群来进行设计,这样的设计才能让用户更好地使用这个页面的功能。


2.插画的主题要跟我们的客户想表达给用户的理念相一致。


3.图标,风格,主题,字体等用在一个页面里尽量不要有违和感。


4.整个页面的氛围很重要,能够让用户很快的分析出该页面大概是什么内容,类型。更容易增加用户在页面的停留率。


5.整个页面的背景颜色和图片直接影响了整个页面的氛围。


6.字体的排版也很重要,能够让用户一下子知道这个页面什么最吸引他们。


7.动效也是加分项,能够让一些用字比较难表达的东西,更加直观生动的表达出来。






更新:2019-01-18

收藏

2人已收藏

道乐科技设计中心

道乐科技UED

  • 13

    作品

  • 45

    粉丝

  • 3

    关注

  • 自适应设计在内容上的应用探索
  • 互联网基金交易的安全感设计探究
  • 基金产品推荐卡片如何设计,才能吸引用户?| 干货分享
  • 支付宝是如何做运营活动的?——支付宝理财周活动分析

    猜你喜欢

      2019-01-18 原创文章 经验/观点 举报 3548 2 5 0

      支付宝是如何做设计的?从理财服务说起

      0.0°

      你确定要举报支付宝是如何做设计的?从理财服务说起

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年01月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录