《首席体验官活动》设计记录

《首席体验官活动》设计记录📒

💗写在前面

简述活动背景和内容：

·目标对象：保险经纪人(个体)、线下机构(团队)

·获得奖励方式：

1.每天打开app会有惊喜魅力值奖励(app登录)；

2.活动期间，线上出单，1元保费=2个魅力值；

3.每天发起挑战，当天22点～24点结算，根据魅力值pk后获 得规则内奖励。(也会被挑战，主动挑战奖励更多)

4.完成实名认证、分享朋友圈、周末出单翻倍都可获得规则中描述的活动奖励。

5.每一届活动都有细节调整，本次活动奖励中增加一条，每满足一定条件后用户升级，获得额外奖励(增加交互动效)。

                                [等级说明]

·活动结束

1. 活动结束且完成系统跑批后，根据不同得奖(名次)获得不同奖励：

“首席体验官”(第1名)，”十强体验官”(第2～11名)固定值金额；”第12～140名”有3次刮奖机会，随机金额。

2. 获奖公示：

活动结束5个工作日，收集获奖人员信息在页面上进行展示。

 

💗1.线框图

💗2.原型图

💗3.UI效果图

活动页面设计风格：

此活动我采用了2.5D纪念碑谷风格，2.5D纪念碑谷风格实质利用了矛盾空间的原理(在平面构成里，在二维空间里运用三维空间的平面表现形式错误的表现出来的称为矛盾空间。矛盾空间在三维世界是不存在的。这些图案都是利用三维图像在二维平面的表现特征造成的视觉误导性图片。2.5D又称伪3D，利用2D的方法表现出3D的效果。) 突出立体感增添趣味性。

 

🎈简单介绍以下3个板块

1.活动主页设计说明：

由于活动主页的入口很多，有“活动规则、分享、查看(奖励)详情、魅力值明细、查看全国榜单、挑战专区、我的挑战记录、立即出单”，首先进行归类再将有联系的类目进行合并设计。如左下图，中间分“个人信息”和“挑战专区”两个板块。

              

 

2.基调的确定：

体验官活动使用低明度高饱和度的深蓝色作为主色调，蓝色是被最多数人喜欢的颜色，也是典型的后退色。因为体验官活动是一年会上个几次的活动，使用接受程度比较高的色彩可降低疲倦感；另外蓝色本身自带内敛情感，使用在营销活动中也显得相对冷静。

黄色，紫色作为点睛色：深蓝色配上高亮的点缀色后，既可以有时尚的一面又能体现金融行业的商务性。蓝黄是对比色，既和谐又让画面形成鲜明对比。色环上位于红、蓝之间，冷暖相混合的中性色紫色带有中性不偏不移的性情，也是最近蓝紫色搭配大受欢迎的原因；紫色是优雅和光芒结合的矛盾体这也是其特点所在；一定纯度的紫色能来带来页面中点睛色发挥的力量。

              

配色的依据：

蓝——冷色调(后退色)      

紫——中性色

橙——暖色调(前进色)

➡️色彩的搭配上既和谐，又在色彩层次上拉开了差距，形成视觉对比，增加审美的趣味。

 

3.活动结束页面说明：

此为获得”百强体验官”称号展示的页面, 即有3次随机刮奖机会。

下左一为活动结束主页：

用”小灯泡”点缀的方式夸张的将活动奖励板块凸显出来，渲染活动氛围。背景色是蓝紫对角线渐变，黄色点缀色表现重点信息，旁白文案用偏蓝色的白，而非#fff，这样更满足视觉舒适度。

下右一为刮奖弹窗页面：

刮奖区效果参考支付宝线下支付刮奖效果，与开发沟通后达成一致：点击/滑动均可触发刮奖区，且当刮奖区被刮开面积大于等于1/3时，刮奖区完全显示。

未刮奖时刮奖区灰显，刮开后浅紫色背景上显示刮中金额。颜色由灰-彩色的由来是初始印象的延续，还原最早线下刮奖卡刮

开前后样式变化，符合用户习惯和刮奖体验的认知。

            

 

💗4.交互动效

01挑战区交互动效设计思路：

能量球动效想法受启于【支付宝-蚂蚁森林】能量球。

【支付宝-蚂蚁森林】活动的定位：

活动目的：

能量达到一定值可种植一颗真树，是低碳减排的一种宣导。

活动条件：

能量球可通过行走、线下支付、生活缴费、地铁出行、预约挂号等行为获得绿色能量；这些行为均是支付宝的功能，支付宝功能种类的跨度很广，只要用户习惯使用支付宝就很容易获得能量球达到活动目的。

活动意义：

对于用户而言，活动参与成本低，住行生活仅依赖一款app，活动收益的意义是环保健康的，所以这也是大部分人群青睐这款app的原因。

 

🎈分析能量球浮动效果：

页面中浮动的元素更能吸引人眼球，一般对于页面中运动的元素想要去点击。

能量球有两种样式(状态)，一种是没有降低透明度的气泡，可以点击(能获取能量的)；另一种是大致降低50%不透明度的气泡(暂时不能获取能量的)，上下规律浮动，想想小时候玩的肥皂泡沫气泡，吹一把就会被其他小朋友掐掉。设计源于生活，利用相同的用户心理。

而本次【首席体验官活动】挑战专区，期望用户的操作行为是:点击“好友名字+能量”以完成挑战好友这一动作，从目的上二

者都是希望用户完成点击的动作。效果如下图：

 

02魅力值明细交互动效设计思路：

当前停留日期为今天，由左向右日期分别是今天、昨天、至前……使用紫红色作为日期的背景色。

🎈交互动效构思：滑动日期时，可根据不同的日期下方显示不同的列表数据；那么“滑动”是“日期”的左右滑动还是“日期背景块”运动呢？

最终采用“日期”滑动而“日期背景块”固定以完成日期切换动作的方案。原因如下：

“日期背景块” 颜色亮，面积大， 动起来目标大且给人感觉比较冗重不灵活，增加了视觉的沉重感，潜意识里觉得此操作麻烦，故而将“日期背景块”固定，采用日期拨轮的方式。另外最近在看大疆的云台相机时有看到它的一个配件“云台控制拨轮”，功能一致性，具有日期(云台)控制、快速切换、锁定的功能。

    

[上图为云台控制拨轮] 

 

🎈当确定日期后，对应的数据过多一屏显示不下时，采用分页加载的方式，这种方式通过减少每次请求数据的数量，增多请求数据的次数从而减少服务器的压力，缩短用户的等待时长。这是从之前的项目中总结下来的，从设计交互的层面就把开发逻辑考虑进去可减少后期优化时间成本。

🎈日期切换时，列表数据采用42度旋转切换的方式，数据切换明显，每天的数据本就很相似，就是想让数据切换时更显著些。交互效果如下：

💗5.总结问题

1.此活动状态、页面过多，弹窗状态和类型就有很多种；需要考虑当满足多个条件而同时触发多个弹窗冲突时的情况。比如：“每日惊喜奖励弹窗”触发条件是：进入活动主页(无论是否第一次参与活动)均有；

“升级弹窗”触发条件：累计挑战数量到达n个，战胜人数达到m人。(n，m不同对应不同的级别)；

当同时满足上述两个弹窗条件时，会触发两个弹窗，需要考虑遇到此情况时如何设计？

 

2．《魅力值明细页》分页加载，每一屏的数据数量根据屏幕尺寸(长度)而定。(与开发沟通)

 

3. 分享出去的页面展示问题，需要考虑两点：

1 ) 展示信息是否调整，主要依据于当前用户(分享者、被分享者)关注的信息层级的次序。

2) 分享者不同状态，比如获奖者、未获奖者分享页会有区别。

 

4. 活动前、中、后不同阶段的不同状态变更的考虑。

活动开始前移动端是否需要预热？与营销部确认，或者其有微信公众号或短信或系统消息的活动推广的计划。

活动刚开始时暂无数据，考虑如何向用户展示？一般会用缺省图，进一步需要考虑缺省图展示的层级，也就是说是页面入口展示？还是跳转页展示？或者其他？(前两者主要考虑仅让用户等待还是有其他需要操作的内容。之后的《答题活动》有页面入口展示缺省图的样式)。

活动结束后多久下架？下架的活动是直接撤掉页面，还是页面展示活动信息但显示“活动已结束”？

 

5. 营销部在活动哪些阶段(eg:活动预热时、进行中、结束刮奖提醒等)配送短信、系统消息需要在会议时告知。即使营销部可以自己配置内容发送，但是所有参与部门、人员需知悉；方便技术人员测试，和整个活动的把控。

 

6. 根据活动不同阶段设计不同的banner图。此活动针对预热、进行中、倒计时9张、结束、获奖公示几种状态设计13张。

 

7. 此活动中是否“强制刮奖”备受争议。