官网智能客服呈现三部曲

第一步：元素、风格的选择与扩展

在做第一步的时候，我听到一个非常响亮的声音：放上“小盟机器人”、“3D的”、“让它动起来”...

首先我给自己打了个一个大大问号？

真的需要友小盟3D形象吗？？？答案未必吧

【先来其他家风格】

作为官网及下属所有页面需要透出的智能客服模块，我们找了一些同类产品作为参考，可以看到整体风格都是简约 清晰的，并没有冗余的过度设计

【敲定头部元素及扩展】

为什么选了友小盟的头部？

因为头部是友小盟最具识别度的部分，眼睛也是最能传达情感的窗口，尝试了很多版本，提取眼睛元素、身体部分元素最终选定了用头部结合浮窗的展示样式，得出了最终版的【智能客服】

部分过程稿：

设计稿及延展：

在展开窗口有一个难点，菜单与商务咨询框的衔接，也是两个系统间的切换衔接，由于咨询框受限于客服平台引用的XSpace的第三方平台，所以我们在整体样式上只能做到尽可能的统一，而不能改变布局/样式。

第二步：web、app端适配与调整

敲定设计元素及基本页面完成后就是pc/移动端的适配设计

与PC端最大的区别在于对用户的引导的比重降低，左侧PC端的比重引导显然是主诉求，移动端弱化

在cover大部分设计样式的基础上进行了一些适合移动端属性的调整

第三步：静、动态的实施落地

完成所有模块设计后，另外一个重要的就是如何将动态效果实施落地

涉及到动效部分到模块：友小盟眨眼、长时未操作提示气泡、跳转状态、动效标注等～

具体效果可移步官网

https://www.umeng.com/