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

标签: 拥抱 teamcola 设计 | 发表时间:2011-08-10 20:08 | 作者:dragon fei
出处:http://ucdchina.com/rss/all

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

于是我只好全局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作为团队工作日志工具,视觉设计的重点需要放在大量信息的梳理与展示当中,让使用者在使用过程中感觉不到设计的存在才是极简化设计的精髓。


 

 

 

 

 

 

 

源地址:http://blog.mycolorway.com/2011/07/10/story_of_teamcola_part_1/

相关 [拥抱 teamcola 设计] 推荐:

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

- fei - 所有文章 - UCD大社区
6月29日,当我一如既往地打开Chrome进入Gmail时,顶部导航栏的变化像是在向我表达着什么. 5分钟之后,当我点击了小滨滨的邀请链接,我惊奇地发现————连接被重置了. 于是我只好全局ssh再次打开了邀请链接,Google+这才渐渐显山露水迎面走来,依然是熟悉的三栏布局,比例和功能分布也和facebook类似,抛开可以把亲朋好友圈养起来的恶搞特性(误)不讲,Google+最吸引我的是出色的视觉设计,简洁清丽的风格令人爱不释手.

精简、透明、开放——TeamCola背后的产品设计哲学

- danefy - 彩程团队BLOG
每个产品的背后,都代表着一种价值观和审美,TeamCola也不例外. 如果你要问TeamCola代表了什么,我们认为它代表了精简、透明和开放;如果你要问TeamCola能带来什么,我们认为它能带来自律、高效和信任. 想通过这篇博客,谈谈我们如何通过设计小团队工时记录和统计软件——TeamCola来表达我们对世界的理解和认识,以及它又会如何反过来影响和改变着这个世界——哪怕是很小的一部分,比如你的团队.

拥抱手势驱动的界面设计

- - 互联网的那点事
作为一名移动产品的视觉或用户体验设计师,你也许觉得Apple发布iPhone仿若昨日. iPhone无疑为最个人、最私密的设备开启了一个全新以触摸屏为中心的交互时代,是当之无愧的游戏规则创建者. 如今,孩子们在这样一个被触摸屏包围的环境下长大似乎是一件自然而然的事情. 家长们惊奇地发现他们的孩子正在以难以置信的速度认识、理解平板电脑和智能手机如何工作.

无团队,不可乐——我们如何使用TeamCola

- 星空无语 - 彩程团队BLOG
记得网上曾流传过这样一句话:“不怕神一样的对手,就怕猪一样的队友”,相信看过的人都会心一笑,明白与优秀的搭档默契地合作有多重要. 你需要信任你伙伴的能力和责任心,而信任的基础则是开放和透明——在一个扁平而高效的小团队里,每个人都可以,也应该知道团队中的其他人干了些什么——于是我们开发了TeamCola并一直使用,最终发现它重新定义了我们团队管理和工作的方式——嗯,简单地说,它解放了我们.

拥抱你,大姚

- byzero - 杨毅的博客
这是我的职业生涯里,描绘过的最美妙的故事. 一个中国的少年,从小被寄予了无限的期待. 他迎着这些期待成长,笑对每一个对手和挑战. 他的努力、坚韧和智慧,给这个时代的中国留下了深刻的印记,同时把古老东方的韵味和力量,呈现在美国梦之前. 他改写了一个国家的国际形象,实现了此前人们难以想象的成就. 现在,他年过三十,已为人父,即将转身,合上一本不长但无比精彩的书.

父亲的拥抱

- 席正 - 译言-每日精品译文推荐
来源My father\'s hug. Growing up at a distance – geographical and emotional – from her chilly father meant Katherine Burdett always doubted his feelings for her.

干掉光驱、拥抱 SSD

- hama - apple4us
我几乎不用光驱,但它却占据了笔记本内相当大一部分空间(见图). 光驱用的是 SATA 接口,我决定把它拆出来,换上一块固态硬盘(后文称 SSD). 我垂涎 SSD 已久,但又有很多资料需要存储,在笔记本内保留一块大容量传统机械式硬盘(后文称 HDD)同时加装一块 SSD 做系统盘似乎是最完美的选择.

Mozilla将拥抱H.264

- - 脚本爱好者
Mozilla 上周 开始内部讨论是否支持H.264视频编解码器,现在 Mozilla 高层公开 表达了对私有编解码器的支持.   Mozilla 对H.264的讨论一开始主要集中在 Boot2Gecko 移动平台和 Android 版 Firefox,但随着讨论的深入,桌面版本也纳入了考虑范围.