分享 Coding,做一个有情怀的产品

coding · 发布于 2014年11月03日 · 最后由 jasontang168 回复于 2015年05月08日 · 9819 次阅读
15469
本帖已被设为精华帖!

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

共收到 68 条回复
96

绕了一圈还是要自己来,我非常赞同。

3753

godiva可是非常有内容的巧克力品牌~ 希望免费供图一张 发到哪里?

15

很漂亮很舒服的界面

3872

Coding不错,顶一个

9162

同样愿意免费供图,求投稿地址…

3753

#7楼 @coding ...就是你们的link邮箱呗...

1986

前端相当不错,大量的 svg

9162

已经完全沦为coding脑残粉了……

273

赞!

10784

很棒啊

547643

大赞对做产品有情怀~

1553

@coding

求抱枕淘宝链接~

另外,希望有小一点的版本,里面是活性碳,可以放车里面

还可以再小一点,放钥匙扣上

再小一点,放手机链上

我想集全

最后问一下,你们是 github(gitcafe) + koding.com + heruko + fengche.co 的合体吗?

上面几家公司都是收费的,你们全包了,但还没看到收费条款,你们是怎么盈利呢?

96

还不错,撸过帮顶。。。

8932

#14楼 @Peter Coding未来将通过增值服务来收费,但目前已有两轮融资,有大把的钱可以先把产品做好。

341

非常棒,对细节很专注,确实在做产品。尽管现在有些讨厌老罗,但不得不佩服做产品的精神。优秀的产品是需要靠打磨的。

9401

很不错,设计很棒!

9162

Angular.js + Semantic-UI,Coding的选择很激进啊!

11666

楼上各位你们的 rails4 项目部署成功了吗,我几个月前就在试,只成功过一次,同是 rails 环境分配的实例也是不一样的,一般情况下缺少 js 支持

15469

#14楼 @Peter 谢谢鼓励~抱枕是我们自己设计哒,可以参加我们的活动 (https://coding.net/u/desperatecat/p/recommended-projects/topic/4660) 就送抱枕哦! 另外,现在 Coding 所提供的服务,会保证一直免费,将来会提供增值性服务来盈利,欢迎来 Coding 体验并提意见 ! (https://coding.net/1111)

9484

情怀确实被锤子玩坏了~不过分享的知识确实很不错~

4333

#21楼 @xieyunzi 正在努力支持ing,ruby 环境已经更新到最新的版本,rails4 的支持还在测试中。有问题可以直接 @ 我,我是 Coding 演示的开发者,也是 ruby 粉,咱演示平台的后端就是 Ruby 开发的 😄

另外,演示平台刚上线了文档站点:http://docs.coding.io ,有问题可以先到这里找答案。

808

怎么删除account?有情怀的产品得提供删除account吧?

12767

很赞的项目

96

Alt+S很有必要,因为键盘的右Ctrl键太远而且因键盘不同位置也不同,多键盘的环境下很蛋疼;左Alt键的位置几乎是固定的,离左手近顺手就能按到。

15352

点赞

15469

#26楼 @lihuazhang Sorry 这个功能暂时不提供哦,不过我已经反馈给技术人员啦! 谢谢

15469

#28楼 @wtbhk Sorry , 目前还没提供这个快捷功能呢,我已经反馈给技术人员咯,谢谢提议

2575

@coding 求抱枕,帖子(如果有),杯子(如果有)购买地址…… 另外想听听你们看到 Angular 2.0 后有何感想……

15469

#32楼 @darkbaby123 抱枕在这儿 https://coding.net/u/desperatecat/p/recommended-projects/topic/4660 Angular2.0你可以到 Coding 上去问问大家哟 !

2474

确实不错...

5759

前一段时间上你们的网站看了看,确实非常非常漂亮!甩国内很多Git服务几条街!很开心看到有国内有这么漂亮的Git服务。

另外,洋葱猴确实非常漂亮!赞一个!

狐狸尾巴要露出来了:想写篇文章介绍一下你们网站,能否打赏一对洋葱猴?

15469

#35楼 @diguage 肯定愿意! 怎么联系您~

96

@Peter 目前没有 koding.com 的功能吧? @coding 什么时候加 online ide?

5759

#36楼 @coding 刚刚注册了一下你们网站,给coding用户发信息了。

15469

#37楼 @newbie 预计下个月推出哦~

96

#39楼 @coding 提前赞!

41楼 已删除
96

让人眼前一亮

15469

#41楼 @diguage 已加哈哈

1780

我去,刚点进去看了下,居然是在星河世纪,这是个好地方啊,在那里住了3年。

96

大大大支持 💟

4755

我是coding脑残粉,现在coding上冒泡的频率比微博还高了,coding主业卖抱枕,次业搞社交网络,最后副业才是做云开发平台。 😄

10784

#46楼 @Martin91 经常看到你冒泡😆

96

logo挺好看啊

4755

#47楼 @gsky 哈哈,好东西要多支持嘛

15628

支持Coding!

9967

很不错,那个错误提示是不是能点一下就消失呢,那个关闭的x很小,关闭时,手必须不能抖啊~

15469

#51楼 @thumbor 好的,我们会考虑您的意见哒~

F7b32c

非常不错,早已入住

296

那个LOGO 猴子和字母虽然是居中对齐,但个人感觉字母整体下移8个像素更好些~

96

东西不错 就是不太想用。。。

96

任务没有设定日期的功能?

96

我建立的任务,项目组的其他人可以删除?

15469

#57楼 @lanyatou 是的,只有是项目成员就可以操作哦,包括重新分配,或者修改任务,甚至删除。这些都可以在时间线上看到任务变化的过程,至于设定日期这个功能,我们目前没有做,不过我已经提建议给工程师啦! 谢谢哦

10978

好的產品設計,精雕細琢,智慧永恆。

96

为你们的设计师妹纸点赞!很喜欢这只小猴子

15815

做得真好。

68

牛!真没想到还能如此无节操的创新下去!

3975

好有情怀

2376

给你们报个bug,页面宽度不到1K像素的时候,你们首页的登陆会从 个性后缀 电子邮箱 马上开始体验 变成

个性后缀 电子邮箱 马上开始体验

会影响你们首页的展现

96

非常赞! 果断的注册支持,朋友圈内推荐。 能否介绍下是用了些什么技术? 前端,后端,数据库?

15469

#64楼 @killyfreedom sorry 我们没打算支持小于 1k 像素的屏幕,不过我们 Web 的移动端开发正在进行哦!

15469

#65楼 @u1360749170 前端采用 Semantic-UI + AngularJS , 后端主要采用 SpringMVC,也有使用 Go、Ruby 等,数据库用 MariaDB

15375

非常不错的托管平台,产品是人做的,也是给人用的,有热情有情怀才能感动人。

18464

好喜欢,支持支付宝付款吗?支持应用部署,域名绑定吗?

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册