精华 Coding,做一个有情怀的产品
发布于 4个月前 作者 zengliqi 941 次浏览 来自 分享

Coding,做一个有情怀的产品

估计很多人一看这个标题就要骂了,“情怀”这么烂大街的词语,还拿出来卖?是的,我确实要讲情怀,并且我找不出更好的词语来形容这样的感觉:对内心想象的追求。

“情怀”的泛滥是从老罗今年的发布会开始的,一时间情怀红遍了互联网。我确实很喜欢老罗的那场发布会,以至于我看完一遍以后,又组织公司集体看了一次。虽然锤子手机现在发展的不咋地(我买了一台,个人感觉是 Android 手机中做工最好的,系统也很不错,但是锤子发货慢了,错过了时机),但是那场发布会确实让我有很多的共鸣。

Coding.net 是今年三月份开始做的,7月份上线,只有四个月的时间,套用我党的描述就是“时间紧,任务重”,技术,产品,设计都是从零开始。今天我要讲的,无关技术,我们来聊聊产品和设计。一直以来,大部分给程序员用的产品,都很难看,很丑,谁说码农就没有审美?我自己也写了十几年程序,现在作为 Coding 的首席产品经理,我想做一个好看又好用的产品,希望给到用户的体验是爱不释手。

LOGO,绕了一圈还是自己来

相信所有的创业者都面临过几个头疼的问题:公司名称/LOGO,产品名称/LOGO。产品的名称我也想了很久,最后由于拿下了 Coding.net 域名,所以产品名称就定了 Coding。公司名称取了个音译“扣钉”,完全没有重名,工商局的系统中一次通过有木有!设计 LOGO 才是头疼的问题,我一开始打算将这个工作外包,找了几个服务商,折腾了将近两个月,木有满意的方案。我有想过花比较大的价钱,请一个知名的机构来做设计,但是苦于囊中羞涩。后来我跟公司的设计师说,要不我们自己来设计吧。我想象中的 LOGO 有一个大致的思路:LOGO 由两部分组成,左边是图形,以猴子为原型,右边是文字,由 Coding 的英文字母组成,但是得有些变化,要大气。我跟设计师基本上翻遍了所有英文字体,木有满意的,一时间灰心丧气。于是,拆了一盒巧克力。事实证明,心情不好的时候吃点巧克力有助于激发灵感。我猛然发现此巧克力品牌的 LOGO 不错。

alt text

于是立马跟设计师商量,我们能不能仿照这个 LOGO 的字体试试?于是我们照着 Godiva 的感觉自己画了 Coding 的字体。第一版的效果是出来了,但是太死板,于是我们又融合了其他英文字体的元素,比如 D 改成不封闭的,N 改成不连接的,改了几十个版本,最终定稿:

alt text

请注意,那个 I 上面的三根线段是点睛之笔,定稿前折腾这个 I ,基本穷举了所有的样式 =.=

到此,LOGO 才完成了一半,我们还差一个猴子的图案。为什么是猴子?因为我们是给“程序猿”用的产品。于是我们的设计师开始画猴子,各种猴子,以下是手稿之一:

alt text

我在众多猴子里面,选了一个猴头,也就是照片中左下角那个。后来经过润色和修饰成了我们现在的 LOGO,由于头型像洋葱,设计师给它取名“洋葱猴”:

alt text

我们的同事都很喜欢这个猴子,甚至还要求设计师出了几张壁纸( https://coding.net/about )。我对这个猴子也很满意,手机桌面,微信封面都换成了洋葱猴壁纸。后来我们做了一批洋葱猴的抱枕,一时间供不应求,所有人见到我都问我能不能送个抱枕,甚至还有人要问我买,我有时候觉得我们是不是应该改行去卖抱枕?两个月下来,我们俨然已经成了“东半球最好的 IT 抱枕厂商”,其实 Coding.net 只是我们的副业……

alt text

非专业的产品和设计? 大学里没有一门专业叫“产品经理”,这是为什么呢?现在这个产品为王的年代,开一个产品专业应该很吃香:)老实说,我在做 Coding 之前也没有正儿八经做过什么严肃的产品,所以我也算是现学现卖。不过,对于 Coding 我脑海中的想象已经很久了,我要做的就是把 Coding 按照我脑海中的想象实现出来。我们的设计师,90年的小姑娘,计算机专业出生,虽说毕业两年一直在做设计,不过要论专业,我想她也是个半路出家。所以,就我们两个人非专业人士,想要做一个碉堡了的产品。

首先从功能上讲,我们在同类产品中应该是明显领先,但是一个碉堡了的产品光有功能是不够的,我们要给人眼前一亮的感觉。我们原本想要原创一套自己的风格,后来发现在目前有限资源的情况下,这明显是一个吃力不讨好的决定,于是我果断放弃了这个想法。我们借鉴了国内外同类产品的设计,再加上自己的一些想象,形成了现在 Coding 的风格。

alt text

在 Coding 上线前的测试阶段,我总是看着界面感觉奇怪,后来仔细研究发现,一个界面,如果有大量匿名头像,就会显的难看,任何布局都有这个问题。所以我们自己画了一套水果头像,所有的新注册用户都会自动分配一个水果头像。这样就杜绝了匿名头像的出现。同样,项目图标也有类似问题,我们又画了一套插画,自动分配给没有图标的项目。

alt text

(Coding 部分水果头像)

alt text

(Coding 部分项目图标插画)

瞬间,网页顺眼了很多 ^_^

enter image description here

(网页效果对比图 1)

enter image description here

(网页效果对比图 2)

enter image description here

(网页效果对比图 3)

enter image description here

(网页效果对比图 4)

我一向认为很多项目管理系统复杂的让人崩溃,其实很多人想要的只是一个 TODO List。Coding 最初的项目管理就是围绕这个 TODO List 做的。项目间成员可以相互指派。我们在这个功能上费了很大的力气,我这里例举一二。

enter image description here

(Coding 项目任务 - 未完成)

上图是一条任务,包含了任务内容,执行者等等信息。在不跳转界面的情况下,用户可以编辑内容(点击任务内容),更换执行者(点击右侧头像会有下拉列表),标记完成(左侧方框),删除任务(右侧红色按钮)。但这里有一个问题,就是任务内容如果包含链接的话,打开链接会非常麻烦,因为任务内容本身可以直接编辑,所以不能做超链接。这个问题最后不是我解决的。我还没来得及看这个问题,开发这个功能的工程师已经解决了这个问题,就是任务内容下方的几个链接图标,还用颜色区分了站内和站外。他说他实在受不了这个链接的问题了,于是顺手解决了……可见,当一个开发懂产品的时候,其效率是可怕的。作为一个 TODO List,我觉得这样的功能接近完美,多了都显得累赘。我相信绝大多数10个人以内的团队,用这些功能就够了。Coding 现在接近30个人了,我依然觉得这些功能足够用。能够把简单的东西用到极致,效率会大大提高。

做产品最重要就是让用户爽,iPhone 那个 home 键就特别爽,不管在那里,一按必定有响应,按一下,屏幕立马切换到桌面的体验让人觉得很有控制力,很有安全感。我一直认为 TODO List 那种做完后打钩的动作很爽,操作很爽,心理上也很爽。所以我在 Coding 坚持保留这种操作,就是任务左边的框,做完打钩(注意,必须是打钩,画圈,打叉都不行),并且本条任务被横线划掉,很有成就感的样子~

enter image description here

(Coding 项目任务 - 已完成)

很多时候,用户选择一个产品往往是因为某些小细节。Coding 的用户登陆以后,右上角有自己的头像,由于 Coding 的功能比较多,所以我们做了一个小功能就是当用户的项目有更新的时候,头像的呼吸灯会亮起。这个头像是全局的,所以不用来回切换不同的界面查看是否有项目更新了。还有,程序员都知道 Ctrl + Enter 有木有?所以我们所有的输入框都支持 Ctrl + Enter 提交。(我原本还想支持 QQ 的 Alt + S 操作,后来被鄙视了一通以后,不了了之了)我们还有很多这类细节设计,希望能在不知不觉中提高用户的生产力。

再来一杯情怀

虽然我本人比较土,但这丝毫挡不住我对美好事物的追求,比如 酒,所以把这节标题取为“再来一杯情怀”。我们刚刚推出的一个功能,甚至不能算是功能,是纯情怀主义。我们通过国内的摄影社区,向国内的摄影师们购买了一批高质量照片的版权,用来做 Coding 登陆的背景,每周轮换。我必须承认,搞这些高大上的照片,自以为会把 Coding 的逼格提升一个档次,但我更希望的是程序员们每天来 Coding 的时候心情舒畅,哪怕只为看看今天是啥美图也好。以前我在 Oracle 工作的时候,我们那个部门每周一上午会在办公室提供精美早餐,先到先得,所以周一的准时出勤率特别高……我希望 Coding 的每周一图能给程序员带去一周的神清气爽。我们还在不断购买高质量的照片,如果你希望你的照片出现在 Coding 的网站上,欢迎你联系我们。

enter image description here

(Coding 登陆背景样例)

所谓性情中人,就是为情怀买单的人。我做产品,希望它有血有肉,不管目标有多难,有多遥远,我们坚持每天进步一点点,做一个让用户爱不释手的产品。

Coding 官方技术博客 : http://blog.coding.net/

Coding 云端协作开发平台: https://coding.net

13 回复

惊现山寨github

@AdamsMao 定位不一样,Coding 提供项目协作,质量分析,一键部署功能。没有人能超越 github, Coding 也不想仿冒。

好東西 支持

设计妹纸不错啊,风格我喜欢。支持!

能做到中国github也不错了

有前途,做好不易。

那 GitCafe 呢 ?

又看了一遍,原来logo是个猴子。我匆忙地扫一眼,以为是个茶壶。

这个东西其实在第一时间出来的时候我就注册了,然后我发现登录进去之后有点儿一头雾水的感觉,我承认这个平台做的很好很强大,但是复杂的功能和界面让我没有使用的欲望

不错,如果可以构建,相当于省了一个VPS,而且可以当做CI。还有SNS的元素。 ----update– 刚用了一下,整个体验挺好的。有几个问题:

  1. 从github仓库导入到coding里,导入成功后,当前页面一直在 “转”,给人的感觉是正在导入中。 通过邮件和系统消息才知道,已经导入成功。

  2. 部署应用的时候,不太合理的是,只能部署文件夹或zip,直接运行fat jar包内嵌jetty,做java应用就不行……

  3. 部署应用,一般代码和配置分离。即很可能 需要额外 放置一个conf 文件夹,应用去读取 这个conf 文件夹里的配置,然后启动应用类似(log4j那样)。 现在看来,只能把 配置文件,也放到工程里,从工程里读自己的文件。

  4. 控制台的日志,应该有个过滤 INFO WARING ERROR的功能,最好分页显示,打开很多日志html加载,感觉卡死了一样。而且日志不是 tail的, 拖动到最下面,没有个“返回顶部”的Js,又要拖回上面……

支持 ,我觉得从使用体验上来说 是非常不错的 ,会继续使用

说到心坎里去了

回到顶部