友宝礼物支付宝小程序项目复盘

1.支付宝小程序封面模版

友宝礼物小程序，它是在微信和支付宝小程序里使用的一个产品，它真正的需求是想解决用户没办法当面送礼，通过友宝礼物我可以选一个主题卡面，再选一个商品也可以是友宝余额，再编辑一段祝福语，发送给你想送的人，类似于礼物说那样，但我们友宝的优点在于有很广的库存和商务渠道，虽然线上是轻量的，但我们线下是投入非常重量的一个项目，这是一个简单的支付宝模版页面。

这部分我做的工作就是设计了一个应用图标logo，当时想的是礼物主要体现甜蜜的，浪漫的一种氛围感觉，送人礼物其实就是很浪漫的一件事情，配色上用一些代表浪漫的罗红色和代表贴心关心温情的橙黄色，撞色结合来确定了logo的调性，然后用黄金比分割，yoga风格的形式设计心形，大概如下图所示。

2.UI规范：颜色版

以下规范都是我来做的，当时的目的就是想它能拉高整个设计项目的下线，规范的意义在于让设计师协同性好，增加工作效率，让目标一致风格统一，同时与开发减少沟通成本，如果是新来一个设计师，有按规范这么做至少不会出错，至少下线有保障。

第一部分是颜色版，主色的确定就是延用了应用图标的那个玫红色，包括主色的关键字，线，按钮背景都是统一的，辅助色也是延用logo的橙黄色，在应用图标里可以体现出来，主色面色多，辅助色面积少。其他的就是其他页面的一些颜色的确定，这是颜色版。

3.字体规范

下图是字体规范，中文Ping Fang SC，数字DIN，字体根据产品的需求来决定，比如标题字号多大，字重，颜色等等，这些，很容易看懂。

4.UI组件

Ui 组件，我在sketch里面做的一套组件库，需要保证这个组件库永远是最新的，以后有设计师在做新项目的时候，由于项目原因比如他在做一个新的按钮，列表，或者可复用的样式，这个样式确认上线以后，他需要放到组件库里来，以后还遇到同样的情况，可以直接用这个，这里面每一项都已经放进组件库里了，总之是让设计变得更简单更高效是我们想要的一个最终目的。

5.LOGO规范

这个应用图标，是根据友宝原logo里面几个元素推演过来的，把原 logo这几个意向关键的特征点提炼出来，比如圆角矩形+圆形=友宝logo，这个是我当时和产品在提案会上讨论了一下得到的最终结果。

就这个图标而言，我们要保证图标是由最简单的几何组成的，因为在人的视知觉当中，人眼会很容易把一个物体几何化，如果这个形态是规则几何，它就容易被人记住，所以我用了简单线切割的方式和圆切割的方式进行几何化图形重制，得到了现在这个友宝礼物logo。

关于标准字体，方正正中黑是友宝原logo的字体，其实想给予自己两个选择，友宝方正正中黑是非常中性化的字体，男生女生都偏向，在送礼物这儿很合适，主字体定位这个方正正中黑，辅字体是在特殊情况下应用的，有时候显示很小的尺寸上，方正正中黑这个字体的，它不易于阅读，线粗不等它有粗有细，有时侯备用辅助字体，它的粗细是相同的。

接下来，图标尺寸这部分，遵循了那个8pt栅格化设计原则，这五个图标尺寸，所有图标尺寸尽量保证是8的倍数，最小的是8864，如果保证图标是八的倍数，不管怎么放大缩小都不会出现半个像素亚像素情况，边缘就不会虚。

6.图标设计

这套图标都是小程序里面的图标，在设计图标之前，我会先想三个方面，第一是保证图标的识别性，这些图标应该很容易读懂是什么意思，应该都具备辨识度。第二点是统一性。下面注释都用3线粗，圆角是4，图标本身的大小是4*42，外边最后切出的图标，是64*64，正好也保证了是8的倍数，所以在设计的时候非常强调都统一起来，它的重量程度都是一致的。第三点是独特性，希望设计图标的时候最好做到有它自己的独特性，它的形态是符合用户心智模型的，同时在此基础上有它很小的细节特点统一的平衡感。所以说我一般设计图标的时候就遵循这三点规则来设计。

7.友宝礼物交互图（总结心得）

这个是友宝礼物的交互图。我在友宝，负责视觉设计工作，同时还得做交互设计，我们的产品给我一个需求的时候，它给我的是低保真原型，产品不会管交互中中存在什么问题，这个要交给我来做，我在设计交互的时候也有一个原则，就是效率。（就这个理念）以效率为中心，让用户更快的来完成整个流程，从而降低用户的流失率。直白一点，就是做的足够的简单明了，流程尽可能少，但是重要的信息一定得加强强调。所以从以下这些页面里，可以看到，我做交互的时候一些想法。

商城首页的在金刚区里面，我把礼物推荐部分重点介绍，分为几个种类，给用户做一个选择分类，因为用户一般送礼都是有特定目标人的，送同事，送爱人这些，引起用户的注意，第一步就是吸引用户，吸引用户后产生点击然后跳转，跳转到定制礼品卡页面，礼品卡首页也可以跳转到定制礼品卡，在这个页面里面，礼品卡首页当时是瀑布流那种布局，后来选择不够精准，因为用户送礼前都已经想好了给谁送，包括我们友宝还有一些商务合作部门，比如去了可口可乐公司，想他们的人送个礼品卡，就直接可以找到这个分类进行送礼。

那定制礼品卡，选择好某个主题之后，布局用大卡片里面，它的视觉吸引力足够强，就是为了能够在视觉上吸引用户，避免用户流失，卡片切换这么布局，下面这个就是为了给用户展示更多的东西，可以选择什么商品选几个，它其实像购物车的功能，满足一个购物车的功能，结合我们送礼所以把原有的购物车改成现在这样。其实这个页面也涉及到了用户体验的东西，已经让用户内容操作了很多步了，因为又选商品又选个数，又编辑祝福语，最后还支付下单，为了让用户能够快速的下单，我想的交互就是，这个页面只让用户操作一些它在下单前必须要操作的东西，所以把写祝福语跟支付没有关系的，放在了支付后面的页面，这时候用户已经支付完了，他有充分的时间去想他编辑什么内容，所以祝福语放在了下单后面。这算一个小设计，又要挑商品选个数又要写祝福语，这一套下来用户就不耐烦了，比如比较纠结的天称座的用户，他可能纠结的时间更长，这时候就关掉页面再回来的几率更小了，所以剥离了一些功能放在下一个页面，减少在这个页面停留的时间。让用户一个页面只干一件事情，成本小一点。

其实还有一点提升用户体验的地方，在这个页面加个进度横线，让用户很明显感觉到还差几步可以走完，显示操作三步就可以送出去。但由于开发原因，最后没加。所以我觉得在这部分这个页面做好了，这个项目已经成功了一半了，然后有领取页这个也是很重要的一个，这个场景模拟出来了收到礼物的人是怎么拆开礼物的，有这个环节，就会更快的暗示用户，送吧，收到的人一定很惊喜这样，这一步不可或缺的，我可以很自信的讲，后台我们也会每天收到这款小程序每天更新数据统计，其实用户只要到了这一步，用户看完，他的付款欲望就会很强，因为通过动效，真的会有一种送礼的感觉，提升产品体验感和好感，从点击这个卡面定制礼品卡，进去里面算，流失率只有30%，70%都会把礼物送出去。

8.界面展示

这两个页面，很简单这些就是支付宝小程序首页的模版，这两个页面目的就是如何增加用户对我们友宝礼物的认知，凸显出整个所有的大卡面，卡面设计色彩的饱和度也高，营造送礼产品的氛围，结合一些插画一些扁平的设计风格，就是吸引点击进去，完成付款。

9.界面展示

这个就是对应的关键的几个页面，想传递给用户的感受，就是神秘感，惊喜感，这是第一点，神秘感和惊喜感做的好了，用户就会对我们的产品存有期待，如果是一个抽奖活动，直接高诉我们奖品，我们不会有惊喜感，而这种有一种打开，用户会很期待，所以尤其是要要强化，“拆”，拆前和拆后是一个动画流程，依靠这个动画可以很好的给用户制造惊喜感。第二个方面，是拟物还原现实，我们在移动端冷冰冰的手机上面，一直在想怎么让一些东西做的形象生动，那就是拟物并且还原现实，我们这个做的就是和生活中你真实的拆开的那个动作是一样的，它和生活中的情景完全的一致，所以更容让用户理解，更容易打动人，用拟物还原场景。

10.动效

11.怡宝活动H5内嵌友宝礼物小程序

心纯净，情致美是怡宝和我们友宝联名的一个合作，马拉松指定怡宝是官方饮用水，和我们合作怡宝想达到的目的第一个是推广它的品牌形象，第二个是在我们售货机上销售怡宝水，前期我们和怡宝沟通的要点就是要体现，年轻，运动，这种感觉这种品牌形象。我负责整个产品的交互和视觉设计，当时想的是怎么来强调怡宝的青春的特点，那就靠用色。用色之前，开始我全览了一下整个活动的调性，用户都是年轻人，喜欢运动的年轻人，年轻、运动、激情这是受众人群的特点，也是整个活动的关键词，所以用了富有张力的插画形式来表现年轻人的张力，而且插画也是运动的，激情我用的是怡宝水官方绿和其他两种热情的、热烈的、有较高饱和度的、轻快欢乐的颜色来体现激情，最后就是这个样子。

12.怡宝活动交互图

整个活动的逻辑就是为了增长怡宝水的销量，通过马拉松的主题，用户买怡宝水为马拉松做贡献，怡宝是马拉松的赞助商，用户在我们售货机里买怡宝水其实是为了社会公益做贡献，我们也会给你累积一些步数，还有就是我们给怡宝做一个线上可以裂变，当你步数不够的时候发送给好友，通过微信，让好友给你捐赠步数，兑换2元优惠券，让线下在友宝机器里买水，这就是一个砍价的逻辑。

有一个细节，为了防止薅羊毛刷单的现象，是有兑换上线的，还是可以在剩下的时间参与活动，把多余的步数送给好友，让好友去兑换怡宝水，为了闭环让用户有一个粘性做的小设计。

通过跑步获取成就感，一个是他自己获取的，另一个是我们给他的，给用户安排一些小彩蛋，给他们一些鼓励，有两次彩蛋，有了第一次用户看到后面第二个彩蛋就会更有吸引力。所以通过增加活动的趣味性，来通过设计的驱动，增大对怡宝的裂变量。

13.页面展示

14.动效

15.总结

此次项目复盘，更多的是重新梳理了整个项目的需求背景和交互流程，至此，我充分意识到，一个好项目的产出，对产品和业务的把控，对用户心理的洞察，以及对场景的分析能力是至关重要的，这也是当下我欠缺的点，所以解决办法是，在做任何项目之前，一定要积极和上游产品沟通，通过沟通才可能更深入的了解产品，了解产品的逻辑和业务原理，深入用户群体，了解用户真正的需求和场景，利用了解到的这些资料，进行独立分析，得出结论，来指导设计工作，做到用设计去反哺用户，用设计去赋能业务。

加油，复盘很重要。以上分享，希望对大家有帮助～～thanks