WeGene 2015

Posted on Nov 2nd,2015

WeGene?2015新品发布会终于完美落幕了，终于松了一口气。

为了这一天，我们准备了一年多。期间加入很多生物信息大牛，升级订制芯片这些就不说了，说说我所负责的设计部分吧。

网站改版从LOGO开始动刀，将原来彩色的图案变成纯蓝色，再加入深蓝色作为辅助颜色，把整个网站的风格变成蓝色调。这样既保留生物信息的属性，也体现互联网的简洁风格，让整体增加一种权威感，毕竟我们是往底层数据提供方的路线走的。LOGO见下图，左为旧版，右为新版。

logos

作为一个基因检测的项目，“进化”的示意图作为 Banner 是最简单直观的表现，正如我们上一版表现的那样。见下图：

men

但这次我们想改变一下，把进化过程用动态的方式，更加生动地展现出来，也贴合我们这个版本主推的“祖源分析”这个亮点。

为了实现这个动态效果，我们尝试了很多方法，GIF显然是不清晰的，视频又太大了，采用多帧图片替换的方法，效果虽然可以达到，但非常耗性能。最后我们的工程师找到了完美的解决方法，最大限度地保证动画的清晰度、流畅，又不损耗太多性能。打开 www.wegene.com?首页就看到了。进化效果图如下：

新版的首页我们几乎是当成广告页来做的，明确地告诉用户我们是做什么的。毕竟“基因检测”对大部分人来说都是神秘的，再加上“转基因”这些概念在国内没有被好好科普，使得大家对这些陌生的领域有一种天然的抵触。

我们必须利用互联网这种轻松、娱乐、接地气的属性，尽可能地解除用户的顾虑。我们清楚地表明将提供什么检测结果，怎么测。我们生成了一份示例报告，让你一目了然，你将得到的就是这些。检测流程也非常简单，你购买之后我们会寄给你一根管子，你往里面吐点口水回寄给我们就行了。

是不是没有想象中那么神秘了？我们不用抽血，不用在某个冰冷的空间用诡异的仪器进入你体内提取你某个特定的细胞。只要你一点点多余的口水啊亲。新版首页如下：

当你的检测结果出来之后，我们会告诉你这些数据将会被如何使用，我们需要得到你的知情同意，于是多了下面这个步骤。放心，我们不会用来制作生化武器毁灭地球的。

然后你就会看到下面这些页面，属于你自己的基因数据。详情可以去示例报告看看。

为了这次改版，我们重绘了很多ICON，比如下面这样的：

这只是冰山一角。我们一共做了140个字体ICON。没错，我们整站的ICON都是矢量的，没有用到一张图片。字体ICON虽然前期制作比较烦，只能单色，而且细节的限制比较多，但在后期的调用中，简直方便得无与伦比。一个ICON换大小，换颜色，完全不用重新切图，改个CSS代码，分分钟搞定。

icons-small

这次改版我们重新整理了所有疾病、药物、遗传特征等等的相关信息，设计上也重新绘制了统一风格的缩略图。

我们先把会用到的器官、血管等位置标记下来，做出比较完整的图，以备后面的剪裁和调用。我给这些图定下的风格是偏卡通化的，在简洁的基础上尽量严谨。

我本身是医学院毕业的，虽然不是临床专业，但也学过人体解剖，想不到这么多年的设计生涯，我最终还是做着一份专业对口的工作啊。

在实际的绘制过程中，还是碰到不少麻烦。我要先弄清楚疾病的发病机制，找出最常感染的器官或者发病特征，所以我要看很多血淋淋的图片。解剖我不怕，毕竟练过，但病变真心受不了，每天这么看，应该能算工伤了吧。还要不断地参考图册，把病变器官在图上标示出来。这里推荐Biodigital这个网站，人体器官全3D展示，想看哪里就看哪里，精确到毛孔，绝对高清，绝对严谨。绘图过程中这个网站帮了大忙。

下图是最早定下来的人体大图。其他缩略图几乎都是取自它们。

到新版上线，我一共画了120多张图，还在持续更新中。下面是“疾病风险”的几张缩略图。

像“遗传特征”这些就没那么严肃了，毕竟我们是个接地气的互联网产品嘛，器官什么的看多了怪吓人的，于是我画了一些这样的：

“祖源分析”里所有检测到的父系、母系单倍群的迁徙路线也都绘制完成。后期我们会用程序描点，绘制出迁徙路线，还会告诉你在哪个时间节点上发生了什么，导致同一群人分开了。

新版本的全部页面都完美适配手机版，但为了让用户分享出更高逼格的检测结果，我们又重新设计了手机版的分享页面，效果如下：

说完网站，说说产品包装吧。

我们之前的包装都是模仿业内大户 23andMe ，纸质的盒子，将成本压到最低，供一次性使用。下图是第一代产品包装盒。

下面是第二代产品包装盒。只是纸质的用料和平面设计上做了修改，结构没有变化。

23andMe 在美国做这样的设计是可以理解的。一次性使用，然后将盒子回寄，盒子底部贴有回寄单，用户只要扔到邮筒里即可。

但毕竟国情不一样，“基因”在我国是个陌生的概念，而且近1000的单价并不便宜。用户拿到产品的时候不会意识到后续的检测和结果的解读才是我们核心服务，而是他花1000块只得到一个廉价的盒子。对于“基因检测”这么高大上的领域的第一印象竟是这样的，都不好意思跟别人说了。而且一旦把盒子回寄给我们，他几乎没有为他的购买行为留下任何东西。

所以我们觉得应该改变一下整个逻辑，从产品包装入手，改变产品的这种廉价感。我们想让用户把包装留下来，就像你不会随便扔掉 iPhone 的盒子一样。于是，我们要在里面加入一个小小的回寄盒。

我们找了外包设计团队重新设计包装。我们希望做得很有未来感，就像科幻电影里一样，一个透明的圆筒，从金属罐子里抽出来的时候还冒着烟。当然这只是我的YY，毕竟咱是卫生相关产品，要卫生。

我们希望整个流程是神圣的，毕竟基因是与生俱来的，是造物者对个体的编程。而此刻，你正要开始解读自己的基因，看看你活了大半辈子，到底哪些程序是被写死了，这难道还不够神圣吗。虽然实际上只是叫你对着管子吐口水而已。

经过沟通，我们明确这个产品将会是圆筒形的，里面放置许多部件，将试管和试管盖拆分，有说明书，有保存袋，有回寄盒，有快递单等等。让唾液取样这个流程复杂化、神圣化，恨不得叫你提前斋戒沐浴更衣。

于是我们的第一版选中的方案是这样的：

由于成本问题，我们还是很难消除塑料的廉价感。之后我们又打样了一版纸质的，结果依然不理想。而且圆筒的设计，必然要在包装、运输、快递中再加上一个盒子，这又让成本增加了一些。同时我们重新考虑了这样的操作流程是不是太繁琐了，我们的确是在让一件简单的事情复杂化，即使我们拥有神圣的借口。

于是我们试了第二种方案。一个方方正正的黑盒子。虽然不够神圣，但简洁大方，如果用料稍加讲究的话，品质还是有保证的。在我们公司内部，更多人喜欢这个方形的设计。

黑色虽然略显逼格，但我们毕竟是卫生相关的用品，还是使用淡一点的颜色比较合适。经过沟通和选材，我们决定用一种略带磨砂质感的银色专用纸。?于是有了下面产品的雏形：

最终产品效果图闪亮登场：

从效果图到实物，还要经过无数次的打样、沟通、修改、打样、修改、到工厂看进度。为了赶在发布会前生产出一批来，都来不及最终打样，冒着未知的恐惧，直接上机器印。结果果然有问题，某些颜色跟我预想的有点偏差。不过我不说谁都发现不了，因为你们并不知道原先的设计多么完美。

该说到发布会了。

从发布会的时间定下来后，我们就开始着手设计相关的物料。这次活动的主视觉以绽放的神经元为主体，加入祖源这一亮点，于是有了进化的图案。

到时会场会有一个长长的LED屏幕，所以我制作了一个迁徙路线作为底纹。如果你仔细看的话，那是父系O单倍群的真实迁徙路线图。我就是这么认真。

不过到会场勘察的时候发现屏幕并不能这样显示。因为是三块屏幕合并在一起，左右两边必须显示一样的内容。于是我只能改设计，虽然看上去还是连贯的，但不是真实的迁徙路线。如果我不说，你一定不知道哪里不对，因为你不知道原来的设计多么完美。

下图是邀请函，手动制作了至少200张。

Keynote 制作才是重头戏。周末两天连续加班，晚上都是10点才走。虽然听起来还好，但对于我们这个标榜自由轻松的公司，这种情况已经快到极限了。好吧，这是我在 WeGene 第一次加班。

在这里要隆重夸奖一下苹果公司的 Keynote 。这是我第一次用这个软件，但用得得心应手，绝对是我用过最好的软件，暂时没有之一。市面上各种设计、音乐编辑、视频剪辑等主流软件我都略有涉猎，但从没遇到过这样的软件，既强大又易用，预设的效果都非常赞，几乎不用调什么参数直接就是完美。几乎所有功能的按钮都出现在它应该出现的地方，我想做某个操作，总能很容易地找到按钮，真是神奇。

下图是发布会前夕：