10月17日
Coding,做一个有情怀的产品

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 登陆背景样例)

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

zhlmmc1039275

75条评论

@ladyrick 没有会员,运维的资金在何方?

zzh-things6 个月前回复

chenjiawen7 个月前回复

默认头像真心清爽

糖糖糖9 个月前回复

艾玛,太赞了,能不能把看过的消息也用删除线~

糖糖糖9 个月前回复

默认头像很赞

香蕉1 年前回复

为什么要弄会员?

ladyrick2 年前回复

@ShuDong 博客是单独的样式,没有跟主站样式公用,

实在不知道哪里问这个问题合适,为啥你们这些blog里面的行间距要比我们发布在自己项目里面的md文档要大很多?这个评论里面的换行,行间距也是比文档的大的,文档的太狭窄了,但不知道如何调整。谢谢

ShuDong3 年前回复

@书一 好吧

柱哥哥3 年前回复

@柱哥哥 博客都是有 coding 后台发布的,如果有好的博客可以投稿给 @coding ,会有码币奖励!