擁抱極簡——TeamCola設計實錄首 頁 >>人性化設計>>文章列表

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作為團隊工作日志工具,視覺設計的重點需要放在大量信息的梳理與展示當中,讓使用者在使用過程中感覺不到設計的存在才是極簡化設計的精髓。


海南4十1彩票开奖结果