射鸡湿的产品之路-界面走查工具

Recommanded by editor
深圳/UI设计师/8年前/8538浏览
射鸡湿的产品之路-界面走查工具Recommanded by editor
whyrtt

写给有想做一个产品取悦自己的设计师们,有效利用设计思维思考,就有可能找到答案

什么是他山石?

他山石是一款腾讯内部的视觉走查工具,支持Android 5.0以上系统。


想法产生


为什么会想到做他山石?

一次偶然的机会,我和乐乐在一起闲聊,想做一个属于自己而有用的产品,当时脑中突然有个想法,做一款视觉走查工具。在日常工作中也相信大家对视觉走查并不陌生,开发自查和设计走查的鸿沟到底是什么?


困扰我们的问题是什么?

1、开发gg:界面还原完以后,不知道怎么看还原效果是否符合设计稿的要求,间距、大小等是否一致

2、设计师:往往在拿到设计走查包时,会觉得很崩溃,细节问题之多相当于重新标注一次

3、设计师:涉及到具体细节走查,首先通过手机截图,然后然后传输到电脑端,打开PS,导入设计稿和界面截图开始细节校对,这时你可能还会打开标注工具,并指出具体问题是什么,如此多的步骤…


问题的本质又是什么?

对于开发gg来说:自查缺少方式和工具

对于设计师来说:不知道如何把自己走查的方式和工具让开发童鞋掌握。

这就是走查之间的GAP,而走查的本质是对比,即对比设计稿与还原界面是否一致。


那我们设想一下...

如果有这么一款走查工具,可以在手机要走查的应用上方,直接导入设计稿,通过手势方式调节位置、透明度的方式来直接对比还原情况,那会怎么样?



大家可以去官方上查看演示动效 

http://faninx.github.io/



想法实现


有了想法之后,需要尽快的完成项目计划,设立我们项目边界、原则,然后我们进行了一次项目启动仪式,恩对!就是吃了一顿,如此实在。然后在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版本正在赶来,敬请关注!


欢迎加入体验群反馈体验问题


81
Report
|
53
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in