射鸡湿的产品之路-界面走查工具
写给有想做一个产品取悦自己的设计师们,有效利用设计思维思考,就有可能找到答案
什么是他山石?
他山石是一款腾讯内部的视觉走查工具,支持Android 5.0以上系统。

想法产生
为什么会想到做他山石?
一次偶然的机会,我和乐乐在一起闲聊,想做一个属于自己而有用的产品,当时脑中突然有个想法,做一款视觉走查工具。在日常工作中也相信大家对视觉走查并不陌生,开发自查和设计走查的鸿沟到底是什么?
困扰我们的问题是什么?
1、开发gg:界面还原完以后,不知道怎么看还原效果是否符合设计稿的要求,间距、大小等是否一致
2、设计师:往往在拿到设计走查包时,会觉得很崩溃,细节问题之多相当于重新标注一次
3、设计师:涉及到具体细节走查,首先通过手机截图,然后然后传输到电脑端,打开PS,导入设计稿和界面截图开始细节校对,这时你可能还会打开标注工具,并指出具体问题是什么,如此多的步骤…
问题的本质又是什么?
对于开发gg来说:自查缺少方式和工具
对于设计师来说:不知道如何把自己走查的方式和工具让开发童鞋掌握。
这就是走查之间的GAP,而走查的本质是对比,即对比设计稿与还原界面是否一致。
那我们设想一下...
如果有这么一款走查工具,可以在手机要走查的应用上方,直接导入设计稿,通过手势方式调节位置、透明度的方式来直接对比还原情况,那会怎么样?

大家可以去官方上查看演示动效
想法实现
有了想法之后,需要尽快的完成项目计划,设立我们项目边界、原则,然后我们进行了一次项目启动仪式,恩对!就是吃了一顿,如此实在。然后在Google doc中建立了一份工作分配和时间计划表。项目也慢慢的Run起来,进入正轨。
设定项目边界
开始执行之前我们做的第一次事件是:关于做什么?一期要做成什么?功能做与不做的判断标准是什么?进行了一次讨论。并根据我们各自的特长进行分工,一句话总结:没钱、没人,集中精力办大事。
设立项目准则
我们对产品的设想是一款简单好用,容易上手,同时能提升工作和沟通效率。于是我们对产品进行一轮讨论,指导我们在项目中的具体实施,最后确定为:简单、快速、好用。
产品名称脑暴
产品名称从体现视力好、精雕细琢、工匠精神等思路出发。而他山石这个名字是来自于《诗经·小雅·鹤鸣》:“他山之石,可以攻玉”。除了觉得能体现我们打造产品的工匠精神之外,这样会显得比较有逼格(得意的微笑),而我们的Slogan也确定为:“打磨的力量”。

交互设计
悬浮球+手势操作

为什么用悬浮球?
因为我们希望用户在走查具体界面时可以很方便的在当前页面完成,无需跳出当前应用。悬浮球也不影响主体的界面浏览,还可以将手势支持集成在悬浮球上,以及后期交互有较好的可扩展性。
为什么使用手势来操作?
我们考虑的出发点,首先不占用太多的界面空间而影响当前的界面和操作,其次对于经常走查的童鞋来说手势可以提高效率,虽然会有一些记忆成本,但还是在可接受范围内。
视觉设计
LOGO
从产品特性出发,发散出一些关键词,通过关键词的收集图片资料

提炼图形,产生一些初步的方案

调整优化LOGO的比例

主界面
他山石主要主场景并不是在自身应用内部,所以软件界面非常简单,一个启动页来传递我们的设计理念,进入界面后一个简单的使用教程,快速了解我们的功能和使用方法。

PC官网&手机官网
为了方便大家在实际工作中分享他山石,我们提供了两种方式下载方式

开发
开发总监在修改BUG的同时,对于祸害他的设计童鞋们则保持着高度的耐心,成为项目的坚强后盾。据说开发总监还单身,后文章最后有总监的RTX,欢迎骚扰他。
我们的故事
也许是我们一穷二白,为了大大的提高工作的积极性。我们三个各自选择了自己喜欢的头衔,分别是产品总监、开发总监、而我则是项目总监外加客服小弟。事实证明在实际工作中,因其下没有配置人员,而无法充分发挥总监的领导作用,而且总监们经常给项目总监抬扛。拒绝做需求和修改bug的理由诸如:周末要陪xx逛街;我最近工作太忙;我阿姨的妹妹的女儿来了;老板改需求要加钱的。
问题与收获
1、项目进度进展慢
平时我们三个在各自的楼层,沟通起来效率也很低。而项目管理的角色是由我承担,平时除了盯着大家问进展,就是及时同步大家的工作成果到微信群,让大家看到自己的努力慢慢得变成一个具体的东西,以此激烈彼此,听上去是不是有点惨!
2、分工与合作
整个项目工作,涉及了产品策划、交互、视觉、动效、重构、开发、测试,根据各自的特长进行了工作分配,但在一些不太熟悉的领域,也是硬着头皮上,好处是可以接触到平时不会涉及的专业,坏处就是显然会有很多不足之处。
3、机型适配
由于悬浮窗的交互方式,有些机型和系统会对悬浮窗进行拦截,为了发布第一个版本,我们也只适配了主要的机型,且只支持Android5.0以上的操作系统。在实际使用过程中,也得到很多关于机型适配、无法安装的情况。比如小米手机的系统,是基于Android5.0以下的系统版本修改的,暂时无法支持到。
4、不够完善
一期由于时间和人力的问题上线上主要功能:位置,间距,大小的对比功能,暂不支持颜色想看、像素级的误差对比,还有些单屏无法滚动的问题。
反响和计划
1、在组内推广使用期间得到一些正面的肯定,以及问题反馈。
在合作中开发gg在一批10个左右的界面还原中,总共发现5个细节问题,有些界面100%还原,开发gg也开始流露出自信的笑容。设计师开始喝咖啡的时间也明显的增多。
2、二期计划
解决一期的问题反馈
新增颜色查看、像素对比模式
3、更多功能通过迭代更新
增加文字说明、截图等功能
后续:1.2版本正在赶来,敬请关注!
欢迎加入体验群反馈体验问题




































