注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

{800Bu}

——Well, Here We Are...

 
 
 
 
 

日志

 
 

拥抱极简——TeamCola设计实录(转载)  

2011-07-20 12:08:41|  分类: 设计 创意 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
原文转载自彩程团队BLOG

404

6月29日,当我一如既往地打开Chrome进入Gmail时,顶部导航栏的变化像是在向我表达着什么。5分钟之后,当我点击了小滨滨的邀请链接,我惊奇地发现————连接被重置了!!

the god of gfw


于是我只好全局ssh再次打开了邀请链接,Google+这才渐渐显山露水迎面走来,依然是熟悉的三栏布局,比例和功能分布也和facebook类似,抛开可以把亲朋好友圈养起来的恶搞特性(误)不讲,Google+最吸引我的是出色的视觉设计,简洁清丽的风格令人爱不释手。随着Google+的发布,诸如Google Calendar、Google Map等应用也随之换上了”小清新”风格。

Google+的设计让我想起了TeamCola。5月正式上线的TeamCola在把团队工作日志的特性做到极致的同时,极简化的视觉设计也得到了不少肯定评价。在半年的开发设计过程中,随着团队对TeamCola做小做精的定位愈加准确,视觉上也做了3次大的迭代。这3次迭代过程中,即使是一条边线的去留也要经过反复的推敲甚至开会讨论,这也使TeamCola能够越来越符合极简化设计的要求。


第一次迭代,不断精简视觉元素过程中的设计摸索


1

PowerMatrix截图

PowerMatrix(简称PM)是彩程在09年开发的在团队内使用的工作记录软件,也是TeamCola的前身。去年末由于所有人都已经无法忍受PM之苦逼难用,我们决定重新开发一款供团队内部使用的工作记录应用,由我来担任视觉设计,第一版视觉设计在12月初放出。


2


新PowerMatrix(当时还不叫TeamCola)有任务、项目、工作记录(日历)和积分功能,取代老PM首页的是一个,显示团队近期的动态(任务、里程碑和项目的新建、完成等),侧边栏显示自己的任务和项目。第一版的视觉稿很快就做出来了,整体风格贴近其名字”PowerMatrix”蕴含科技色彩的冷峻专业。为了使页面更加紧凑,减少视觉焦点,通常放置在左上角的logo被移动到了footer位置。


这版视觉沿袭了当时我的设计风格,以渐变和阴影表现页面元素间层次,使用偏向中性色调。由于毛病太多(中间空白区域辽阔得可以放羊、层次太乱、LOGO的放置问题等)很快就被否决,在团队几次讨论后第二、第三版的设计也紧接着推出来了。


4


3


随着logo由科技感的文字变成一个更加geek的矩阵,PowerMatrix的渐变也逐步被弃用而转为更为纯粹的单色,所有阴影也随之取消。更大的变化是在排版和文案上的优化:导航的任务显示任务数气泡、dashboard的列表文字主次区分、侧边栏视觉上的弱化以及主区域加高突出等等,这次优化的设计很多保留到了第三次迭代之前,而视觉上的去繁入简更成为了后面迭代的核心诉求。


第二次迭代,极简设计之旅正式起航


Logo


经过几次头脑风暴,Teamcola击败了阿迪王项目王等一堆无厘头词汇,把PowerMatrix这个名字彻底扫进了历史的垃圾桶!2月2日,在一个这么2的日子里,TeamCola的第一条工作记录诞生了


回到去年12月,在确定TeamCola这个名字之后,LOGO的设计被提上了议程,TeamCola需要它的第一个标志。在彩程团队之中,可乐和咖啡是很多成员日常工作不可或缺的饮料,而可乐本身又能衍生出年轻、轻快和活力等含义。第一版的TeamCola标志是文字和图形结合,使用Cooper std字体并以一个拉环的形象表示co两个字母。设计的初衷是力求LOGO简洁轻松,以鲜明的配色辅以小拉环的图形暗示来展示TeamCola这款轻量应用的魅力。没有渐变、明晰的外形能够很好地使用在页面上。页面的视觉风格在LOGO确定后选择了浅灰以及低饱和度的深蓝色作为主色调,辅以橙色和蓝色,在带警示性的文字和提示上使用桔红色突出显示,次要的信息元素以灰色来展示。


5

任务首页

随着LOGO的确定和视觉规范的建立,其他页面的视觉设计也随之展开。任务、项目、日历和积分页面很快完成了。和第一次迭代结束的设计相比,整体色调由深灰、橙色的偏暖调整到了灰蓝的偏冷,去掉了侧边栏不同类目的分隔线,排版上也有小的调整。2月初在团队内上线使用后,在产品功能定位和视觉设计上的问题越来越多使得TeamCola的设计进入了第三次迭代。


6

日历页面,此时的日历长宽是固定的,在高分辨率(如1920×1200)下会造成严重的空间浪费,而现在的TeamCola则会根据分辨率自动调整高度

7

除了一小撮希望推出ipad兑换而拼命攒分的同学外,大家都喜欢在饭后兑换一瓶冰镇饮料犒劳自己

从开始仍然带有应用程序的痕迹到整个页面除了LOGO外几乎没有图片的设计,TeamCola带给我的不仅仅是经验积累,还有大量的问题教训,使我不会像卡扎菲一样在错误的道路上越走越远。在看Basecamp、Github等一些优秀的网站,发出”原来还可以这样设计”的惊叹之余,更多的是需要回头审视自己的设计,到底有多少元素是需要留下来并能发挥作用的,有多少元素可以精简甚至去掉,如何在雕琢细节的时候不丢失整体。TeamCola作为团队工作日志工具,视觉设计的重点需要放在大量信息的梳理与展示当中,让使用者在使用过程中感觉不到设计的存在才是极简化设计的精髓。

拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

上回说道,TeamCola的第一个可用版本在开发完成后在2月2日这个非常2的日子里正式在团队里内部使用了,在新鲜感和使用热情渐渐退去后,越来越多产品和视觉上的问题开始显现出来,1个多月后,团队讨论决定对TeamCola做一次大的调整。

拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

即使是早期的版本TeamCola也没打算支持IE6


在视觉上,经过讨论后总结了一些这个版本的不足,首当其冲的是TeamCola的标志。不少人对标志的第一印象是看不出TeamCola的字样,甚至不能辨识代表CO两个字母的橙色小拉环。当一个标志的识别性遇到了问题,无论它的设计构思有多巧妙都不能算是合格的标志。


视觉风上第二次迭代以灰和饱和度较低的深蓝色为主色调,而标题栏则以明亮的橙色作为字体颜色,灰蒙蒙的页面使得一些视觉上的杂音更加明显,在页面结构和排版上也存在着颇多不妥。经过几次讨论我决定推翻当前的视觉重新设计,而TeamCola在一轮又一轮测试反馈当中也酝酿着功能上新的变化。


拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

第一张完成的视觉,项目仍然有任务和里程碑,标签式的项目总览显示的信息也比以前详实许多

4月18日TeamCola迎来了一版崭新的视觉设计,没有了LOGO,没有了条条框框,没有了橙得发红的标题,原本很重的Header也变成了一道淡淡的渐变。页面宽度也从960px缩短到了800px(日历页面为了显示更多信息仍然为960px),整体布局紧凑而又留有呼吸空间,阅读信息也变得轻松了许多。

拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

项目的列表页,新的项目首页以项目列表的形式展示,能够很清楚地看到项目间活跃程度的不同

拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

LOGO还没设计时的登陆页面


与此同时,TeamCola也总结了第一个可用版本内部使用时出现的问题,任务使用率太低使TeamCola最后去掉了任务功能,转而以工时(工作时间)作为TeamCola的核心,团队和团队成员以及项目都围绕着工时运作。老妖提出的“团队工作史”也成为了宣传TeamCola核心价值的口号被确定了下来。

拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

取消任务功能后,TeamCola对工作记录功能进行了深耕细作,出现了直观的柱状图工时记录(最近更是增加了工时统计等方便的图形化数据),视觉上我移除了所有可能会对数据展示和信息陈列带来困扰的视觉元素,通过设定字体(如团队和项目页工时统计的数字,我设定22px的加粗Helvetica)和优化图形化数据(如在柱形工时图中为加班日着上蓝色,以及刚刚推出不久的项目着色功能)让工作记录的可读性更高。一切都是为了功能服务,没有多余的侧边栏,没有冗长的footer,甚至没有LOGO。

但是TeamCola仍然需要一个LOGO。在新版视觉送走了小拉环后不久,新的LOGO也呼之欲出。

拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

在构思LOGO时画的一系列草图


可乐、时间、团队、激情。。。几天的草稿和脑暴之后,现在看到的TeamColaLOGO被创造出来了:


拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

以色块构成的新TeamcolaLOGO同时也是一块适用于TeamCola的色谱


以包围白底可乐的色块填满的LOGO冷暖交汇,设计这个LOGO的初衷是一杯加了冰块还往外冒气的可乐,在夏日的灿烂的阳光下,面对蓝天与海洋的场景。TeamCola就是这样一款工具,它让团队内的沟通如喝口可乐一样舒畅无比,让团队的工作通透得如仲夏海边的浅滩,让团队成员工作的心情如看见蓝天般轻松自在。


标志诞生的同时,我还定义了配合LOGO使用的字体,以Calibri为原型设计的字体更加平滑,不失变化的t和c字母很好地被使用在LOGO之中,整套字体小范围使用的情况下也不失严谨正式。


拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

TeamCola就是激活团队的那杯可乐


第一版设计出来后我很快完善了其他页面的设计,去掉了任务以及日历的调整之后,视觉上也快速地随之进行迭代。通知邮件样式、新手引导、无数据界面设计完成的同时,视觉规范、logo使用规范也渐渐完善,距离TeamCola的正式发布已经越来越近了。


拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

TeamCola的各种通知也进行了细分归类方便进行设计


拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

TeamCola的邮件通知样式,没有使用任何图片,一目了然


拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

使用iphone可以将TeamCola链接添加到主屏幕以快速进入


在移动平台上,TeamCola也努力使用户可以无障碍地记录工时,查看项目和评论,甚至随时随地兑换可乐。虽然暂时没有推出各平台的原生客户端的计划,我们还是把重点放在了html5版的移动版TeamCola的设计和开发上,不久的将来大家就能用到不是app胜似app、操作体验流畅无比的手机版TeamCola了!


拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

在ipad上使用TeamCola?大丈夫だ、問題ない!!

拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

新的移动版TeamCola即将到来


拥抱极简——TeamCola设计实录(转载) - 800bu - {800Bu}

正式发布前TeamCola的产品页面,此时只有Maklu的原型图能吊足大家胃口


5月23日,TeamCola正式对外发布,随着功能的继续完善优化,使用TeamCola将会更加顺畅。 让每一个团队都能发挥100%的能量,成为了我们废寝忘食努力下去的动力。在接下来的日子里,TeamCola仍然会是各个团队手中那杯喝不完的冰镇可乐。

  评论这张
 
阅读(159)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017