9cut诞生记


  边前卫/腾讯公司 社交网络事业群 上海设计中心

      最近微信朋友圈和新浪微博流行一种9张小图片拼贴一张大图的秀图利器,只有1M多体量的它限免期间登上AppStore图片类免费榜Top5;限免结束后图片类付费榜NO.1,总排行榜Top5。
  这个让全国的小伙伴们惊呆了的app叫“9Cut”,是来自腾讯ISUX的交互设计师前卫在一个多月的业余时间里设计开发的创意app处女作。

  想法-图片社交心理


  蛮早前,同事小e发现facebook上有人用PS切割图片,上传后在网页上组成矩阵图,当时讨论的结果是有点意思但应用场景窄。
  直到某天议论起微信朋友圈上的缩略图太小,发现用9张缩略图拼成一张大图绝对能成为刷屏利器。于是很快开发了一个demo并将图片发到朋友圈上,结果引赞无数,那就真的把它作出来吧。

  做什么-有所取舍
  

      有了明确的想法,app也就直接定位为9宫图。规模上务求简练切口小,初期放弃了3点不做:
  1、拍照不做。场景上考虑,估计没人会拿手机拍摄的时候还要同时考虑那4条线是不是遮挡;2、app内分享不做。经验上,app的差评很大部分来自分享不成功,而且app内分享牵涉面较多,因此9cut只采用了调起分享程序的方法简单解决。另外,微博当时没有开放多图上传api,朋友圈开放了但只是在朋友圈首屏生成一个链接,点击进去才能看9张大图,都不能让9Cut的乐趣充分释放;3、其他切分数量不做。按朋友圈、微博的缩略图排列方式,尽管2×2、3×2两种排列都有,但都可作为3×3的子集,越大越好,只要9就够了。


  

      交互-动画和细节


  9Cut的核心功能简单,作为一个可用的小工具设定貌似也就够用,如何好用甚至还有点情感化设计因素就需要再琢磨下。
  动画是和用户产生情感化共鸣的利器,交互上尤其注意了这一点。拿广受好评的图片落袋动画来说,它出现在保存图片的过程中,没有传统的旋转菊花,没有传统的蠕动进度条,而采用了争相恐后落入系统相册中,之后配以逐个展现的分享平台,传达一种“快快分享我”的跃跃欲试。
  保存后提示用户如何操作也是一个难解问题。一般情况下,是弹出一个提示框云云,但不够纳爱斯。而让它与落袋动画结合,用格子逐个搭载提示语不失为一个符合app特色9宫的友好方法。
  图片保存到系统相册时,一次就有9张,上传时如何找到第一张位置就成了一个考验。这里绘制了一条小鱼,用鱼头、鱼尾来标识第一和第九张图,便于用户选择。
  用心的设计小细节丰富了产品感情,也会在用户心中荡起一波小涟漪吧。


  界面-配合主题的与众不同


  界面的视觉设计自己并不擅长,总体来说只想与众不同一点,以配合这个奇特的创意。因此有了个人很喜欢的Trajan pro字体的Logo “9”、歪扭的按钮、还算清新的仿纸片界面、做了3个中午的小鱼、调了两个小时的心形外形 … 权且用Good enough is perfect 来说服自己。
  这里就贴一些连good都称不上的飞机稿吧。


  开发-优雅地动起来


  离11年开发首个iOS项目“团购提醒”过去两年了,重拾开发还是费了点周折。
  9Cut是一款图像处理app,首当其冲是找到一个有扩展性、高效、开源的图像处理引擎。GPUImage符合这样的需求,它将诸如剪裁之类的常用操作集成为filter,只需要在调用时把位置信息等参数给到,即可快速实现相应任务,同时GPU运算本身也为动画的流畅留下更多空间。
  开发占了整个产品时间1个半月的一半,其中核心的图像裁切功能只花了3个晚上,其他都花在了动画及效率优化上,光保存动画的运动轨迹和加速度就调试了两晚。为了让动画更加流畅,采用了限制当下处理图片的宽度的方式,有效节省图片处理消耗。
  开发的细节可以成为魔鬼也可以是天使,需要花时间驯服。


  传播-口口相传


  先说个题外点的名字吧。App名字最好简短有力、能说明主要功能、英文的便于国际化搜索、在国人口口相传时不会出现像MSN帐号一样的英文字母发音认同障碍,满足这4点也就利于传播了。这也就是9Cut的由来,现在它几乎成了9宫拼图概念的代名词,有的媒体则给它起了中文名叫九宫格。
  有朋友说9Cut现在的成绩一定花了大精力去运营吧。其实,主动运营的事情只在appsolution处做过一次,其他就完全借助口口相传推荐。大致过程如下:
  9Cut在上架1个月多的时候正好赶上ISUX部门大会。部门一直提倡设计师一专多能,为个人发展提供开放环境,老大也时常关心给建议。怀着试一试的心态也为了让同事们不至于花钱就能体验,顺势限免。
  当天,“限时免费大全”就以push推送的给力方式向外传播,可观的下载量促成半天冲入图片类app免费榜第7位,以此为基础造成在朋友圈、微博上的病毒式传播,明星们也用起9Cut,下载量攀升,3天后进入该榜Top5。
  后来我尝试联系了微信公众号appsolution,以推荐新酷应用著称的它很看好9Cut,于是就有了6月25日的推送,真正引爆了9Cut。
  设计者之于用户就像表演者之于观众,使尽浑身解数为让观众会心一笑,再用笑声吸引更多的同好观众。


  后记-被借鉴


  在这一个多月后,对9Cut借鉴的事情冒了出来。有些为不齿,比如一款名为“9Cut free”的app从名称到形状甚至到Appstore的描述都极尽能事;有些则结合自身特色发挥,以美公司的某产品为例,加入了自家形状和滤镜,还打通了一键分享,内容功能上有一些延伸,靠自身影响力传播9Cut玩法。借鉴只有建立在双赢的基础上才算好的,简单的拿来主义不应成为互联网的主旋律。