项目名称：京东智能选机
关键词： 微交互 动效设计 情感化设计 情景化设计 lottie
在长篇大论开始之前，各位可以先打开京东APP - 玩3C - 手机馆（下拉下拉下拉再下拉。。） - banner帮你挑手机体验下~ 希望长篇大论结束后，各位多多提出宝贵意见哦！
项目需求：
1、对一期视觉进行优化，延续卡通设计风格
2、情景化设计问答环节
3、加入动画增加产品趣味性
4、微交互打磨产品细节
项目过程：
1、与产品及业务同学充分沟通，深入了解项目，明确产品需求（此过程交流宏观视觉：大的风格走向及配色等等）
2、用户画像（明确定位自己产品的目标用户，贴近目标用户需求进行设计，这样产品才有可能成功）
3、竞品分析（同时梳理自己产品的结构）
4、脑暴，制定设计方案并进行方案评审（通过简图让产品、业务、用户参与体验并提出意见和建议）并确认交互方式（各种原因，此次迭代未要求交互设计师和用户体验师参与，交互方面 由产品经理和UI设计师分担；此时针对具体细节问题和设计进行讨论并确认前端的实现以及性能、兼容性等等）
5、设计完成交付前端同学（由于此次涉及到动画的实现，此过程不断配合前端同学进行方案讨论）
6、在前端同学工作完成后进行视觉走查，编写视觉走查文档
7、进行最终走查
8、项目上线
9、随时进行支持，取得用户反馈，分析问题所在，及时进行调整
10、项目复盘，回顾、反思、总结，对后续工作进行调整和规划
过程分析：
由于一期的设计不是出自我手，所以拿到原型的第一要务就是抓住产品和业务同学，扔出十万个 ：是什么（智能选机是一个什么样的产品—了解 “前世今生” ）、为什么（原型中现有交互和控件这样设计的用意以及是否可优化调整—为自己后续的优化奠定基础、提供思路）、怎么样（抛出一些想法，即兴脑暴，就此刻发现的问题大家探讨，这个过程也利于更加深入了解产品）。
然后，开心地激情澎湃地回到工位，开始制作用户画像，进行竞品分析！一般我喜欢把各种可能的方案落实到纸面，改改画画，再在每一套方案后列出利弊，最终交由产品选择。本次交互被我大改。。（只选取问答页具体分析）：
问答环节：原型的对话框形式（ 参考人工智能小咚 如图 ）—> 设计的翻卡片形式（ 线上产品 如图 ）
before —> after
before：对话框形式
利：问题不用限制字符，灵活度更高；问题不用限制个数，可能利于后期迭代规划（此时并未具体做出三期方案）
弊： 1、由于问答环节有反复修改答案并重新搜索推荐的功能，如果是对话流形式的话，必然会造成用户对于回答过甚至是已经修改过的问题模糊不清，对于整个问答没有清晰而整体的概念的现象，从而影响用户操作和情绪，感到乱而乏味
2、对于情景化设计方面可能有所局限，且形式缺乏新意
after：翻卡片形式
利： 1、能够清晰地知道每一步问题及已选答案，翻转对应卡片进行修改，直观、快捷，减少操作成本
2、情景化方面为设计留出更多可能
弊：问题需要限制字符（但本次迭代完全可以满足），如果后期迭代需要增加n个问题的话，开发成本高（产品考虑二期相对于一期来说就是一次大改版，如果三期很快迭代的话，将可能又是一次大改版）
But。。
我：那么三期需求已经确定了吗？
产品：还没，只是计划。。
所以啊！为什么要为了还未确定的甚至是还未有清晰规划的需求牺牲掉当前设计方案呢？？？至于后期需求，就兵来将挡水来土掩吧！毕竟就算真的变动很大，相信到时候我们也能在目前方案的基础上做出更优方案来应对。于是产品被我balabala成功说服，方案顺利进行。
接着，贴近每一个问题设计相对应的icon，使用鲜艳的高饱和度配色（更加吸睛），并设计出有趣的小动画（提升产品的趣味性和精致度，充分利用情感化设计，吸引用户，产生愉悦感），对用户的代入感更强，尽量满足情景化的需求。仅在每次操作卡片后展示一次小动画，作为操作反馈（也作为一种微交互），可以与用户进行情感互动，有效地引导和延续用户情感，使用户更加愉悦地进行后续操作。（交互demo如下，视频导出降低了饱和度，此处有色差！！）
。。骚瑞，发现简书没办法插入mov。。只能看线上展示了。。
视觉稿和交互demo出来后，基本顺利通关~ 接着交付给前端同学，于是最头疼的事来了。。。此次跟上海团队进行配合，沟通成本高且项目紧急且开发资源有限且等等等等等！
我：之前使用lottie做动画吗？
前端小哥哥：no，有svg吗？
。。。
于是我把gif丢给了他，后来觉得自己很不冷静，很后悔。。
在这儿要提到gif的一些小弊端：比如影响性能、容易虚化以及兼容性问题和缺帧重复帧等。而lottie导出json文件交付给前端同学，前端同学稍做关联（有图片的情况下需要进行文件关联），就可以解决以上问题啦！（css写出的动画比较简单机械且动作生硬，且开发成本高，所以pass）在这儿要给还不太了解lottie的同学解释一下这个由Airbnb开源的支持 Android、iOS 以及 ReactNative，利用json文件的方式快速实现动画效果的库。
1、首先，我们需要下载插件bodymovin以及安装器进行安装；
2、安装成功后打开AE - 首选项 - 常规，勾选“允许脚本写入文件和访问网络”；
3、动效设计完成后，打开窗口 - 扩展 - bodymovin，勾选需要导出的合成文件，设置导出目录文件名等（忘记设置会无法导出哦，这里以导出到桌面为例），然后render就ok啦~这时候桌面就会出现json文件和images的文件夹啦！（AE中绘制图形的动画没有images文件夹）
注意：如果动效素材是图片形式而不是在AE中绘制的，记得要把素材图片打包一起给前端同学，这里就必须进行文件关联了！否则实现出来只有动作没有图形内容。划重点：记得检查images里面的图是否有问题，对于有问题的图片重新从sketch源文件切图替换就好。
随着UI疯狂发展阶段的落幕，我们开始越来越注重打磨产品细节，用户体验等等。动效的情感辅助以及交互的友好体验都无疑是更好的选择和大方向。过去，想要实现一个生动的动画，设计师可能会找出一些参考案例给前端，当然更好的情况也是自己用AE直接实现demo来展示（毕竟更加准确直观），但是不管怎样都需要前端同学再花费较大的精力去开发，并且后续还有随之而来的各种微调，实现起来真的不太开心。而现在lottie解决了这一切问题，皆大欢喜。
lottie更好地架起了设计与前端在动画方面配合的桥梁，当然lottie所支持的ae属性还是有一定局限的，但是对于从事UI工作的我们基本都可以满足哦。（此处不附属性图了，主要是密密麻麻看不清，大家自行百度吧，么么扎~ ）
尽管此次没有出现上述可怕问题（过程艰辛，反反复复调整，电话沟通平均一个1h，哭）
这里面的心酸不多讲了，在此特别鸣谢本次项目被我折磨得死去活来的前端小哥哥！！！
2018年2月3日
好不容易上线了！！频道页还为我们加了一个悬浮按钮的入口（如下图）:
后来把 “ 选我 ” 改为了 “ 挑手机 ”
两天过后得知点击量并没有太大的起色。。
。。。。。。。。。
调整！改改改！！！不知道是不是 “选我” 不够直观，我的想法是用户产生好奇心后更容易点击进来一探究竟（也许点击率高，留存率低），而直接地说明 “挑手机” ，会不会只能吸引想要挑手机的用户进行点击，从而少了一些有可能进行转化的用户。
。。这个问题还需继续观察。。
遗留问题
翻转一张卡片后，用户再去点击另外一张卡片，交互应该是怎么样的呢？
线上：翻转一张卡片后（显示答案选项面），此时用户再去点击另外一张卡片，之前已经翻转过来的卡片（显示问题面）会自动翻转回去，以此类推
我的前期计划：翻转一张卡片后（显示答案选项面），此时用户再去点击另外一张卡片，另外这张卡片不做反应，只有当用户自行将第一张卡片翻转回去后才能进行下一张卡片的操作
理由：在用户没有预知的前提下，自动翻转卡片有强制操作的意思，会不会引起用户反感？？
线上产品请打开京东APP - 玩3C - 手机馆（下拉下拉下拉再下拉。。） - banner帮你挑手机 体验~
现在最后悔的就是没有在项目结束时立即复盘，进行回顾反思总结，导致现在拼了老命去回忆细节，这中间仅仅是一个年的距离！（是春节不是365天。。）
不知道是不是还有遗漏的小内容，后续灵光乍现再补充吧！
各位，周末愉快：D
网友评论