Coding,做一个有情怀的产品

CODING

Coding,做一个有情怀的产品

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

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

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

LOGO,绕了一圈还是自己来

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

图片描述

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

图片描述

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

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

图片描述

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

图片描述

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

图片描述

非专业的产品和设计?

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

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

图片描述

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

图片描述

(Coding 部分水果头像)

图片描述

(Coding 部分项目图标插画)

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

图片描述

(网页效果对比图 1)

图片描述

(网页效果对比图 2)

图片描述

(网页效果对比图 3)

图片描述

(网页效果对比图 4)

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

图片描述

(Coding 项目任务 - 未完成)

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

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

图片描述

(Coding 项目任务 - 已完成)

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

再来一杯情怀

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

图片描述

(Coding 登陆背景样例)

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


Coding 官方技术博客: http://blog.coding.net/
Coding 官方网址: https://coding.net
App 下载搜索 : Coding
微信公众号: Codiing 扣钉
微博: @ Coding

阅读 3k

CODING
CODING([链接])提供给企业用户全套 DevOps 研发管理工具,包括项目管理,代码托管,制品管理等功能,...

CODING([链接])提供给企业用户全套 DevOps 研发管理工具,包括项目管理,代码托管,制品管理等功能,...

3.3k 声望
4k 粉丝
0 条评论

CODING([链接])提供给企业用户全套 DevOps 研发管理工具,包括项目管理,代码托管,制品管理等功能,...

3.3k 声望
4k 粉丝
文章目录
宣传栏