從原型到發布 - “團隊時間線” 1.0 開發心得

這篇文章將會記錄我自己最近一周時間里，從產生“團隊時間線”這個想法，到產品設計、交互設計、開發、迭代、再到 1.0 發布的整個過程。整件事情跨越了多個分工職能，所以這件事情雖然并不大，但對我來說是一種不一樣的做事方式和經歷，所以覺得應該記錄下來。

“團隊時間線”是個可視化展示團隊所有同學時間分配/管理的平臺。每個人都可以在“我的時間管理”頁面極簡的記錄自己的時間，比如從某天到另外一天做了一個項目、或者昨天開了一個重要的會等等。

從 idea 開始

(下面這段闡述偏管理思考，只對技術感興趣的同學可以跳過)

為什么要做這件事情呢？是從一個我觀察到的團隊現狀開始的：

1. 今天無線前端產品線基本上是人均2到3個項目在支持，幾乎沒有多人同時協作一個項目或一個任務
2. 前端團隊并不是以業務為顆粒度存在的團隊，而是團隊個人分別參與到不同業務線的工作當中，業務線團隊自身也有各自的項目管理機制和豐富的經驗

我們通常，也應該做事專注在事情上，圍繞著任務、業務目標，安排不同的人參與進來，在一起協作。但這樣的方式給前端團隊帶來了很多管理上的死角， 我們并沒有以人為本，關注人的狀態。張三在參與的兩個項目里工作安排都是合理的，但是兩份工作疊加在一個人身上的時候就不一定了，但任何單個項目團隊的負 責人都看不到這件事。

所以作為補充，我希望引入“團隊時間線”，從人的維度換個角度來看問題。

還有一個和時間線概念很接近的東西是“甘特圖”，市面上也有不少現成的組件庫，我也參與開發過一個叫 jquery.gantt 的插件。但是同樣的，甘特圖是專注在團隊共同做好一件事情上的，而不是以人為中心的，所以每一行基本是一個子任務，像瀑布一樣一步步排下來，一件事情就能 占滿整個屏幕的寬度和高度。而我希望時間線是可以同時讓大家一眼看到前端團隊全局的工作狀態的。所以甘特圖其實不是我想要的東西。

匯總一下自己的想法：

1. 以人為本，專注一個人同時做多件事情時的時間管理問題
2. 能夠看到團隊整體的工作狀態，任務的精細管理由項目團隊自己來做，不產生重復管理

這就是“團隊時間線”想法的由來

設計

(下面這段描述請設計師和藝術家們輕拍……)

前兩天看優設哥 (優秀網頁設計) 有一篇 《術語小科普！聊聊線框稿、視覺稿與原型的區別》 的文章，很多人可能會覺得這都是“別人家的設計”，沒見過周圍有人設計界面先畫手稿的啊？不都是直接PS么？而且很多產品和交互文檔都是拿同類產品截圖來的，做完項目都不知道這文檔是我們寫出來的還是競爭對手寫出來的……

我自己覺得，也許對于牛掰的設計師來說，他們只是因為太牛掰了以至于可以腦補那些初級的設計手段罷了。反正自己沒那個專業能力，還是照貓畫虎中規 中矩一點，所以就試著先畫框線圖，然后實現原型功能，再做出高保真視覺 (視覺稿)，再做出高保真原型來。走一遍自己認為比較“規矩“的流程

當然，湊巧我找到了一個利器——53 paper + 53 pencil，它可以把 iPad 變成你的畫板，而且 app 本身的品質是非常之高的！我現在不光拿它來畫框線圖，而且開會也可以拿它當會議記錄本。

先把線框圖畫出來

然后趁熱打鐵，把組件劃分出來，并定下來基本的幾個組件名和方法/屬性名

整個的時間大概用了半個小時

交互體驗版本

之后，我快速在 web 端實現了一個可交互的體驗版本 (UI 很“抽象”，幾乎沒有美感可言)，大概用了一個晚上。包括時間線是可以在表頭點擊左右滾動的，且有平移的動畫效果。

坦白講，做到這個程度花費的時間比我想象中的少了很多，因為我用到了另外的開發利器，晚些時候介紹：）

有了這樣的一個可操作版本，基本上就可以把設計好的功能和操作流程都走通一遍了。

我把做好的這個抽象版本發給某同事，得到這樣的評價：

Design in Browser

好吧，我緊接著就做了第三步：視覺設計，我直接利用團隊已有的 Bootstrap 皮膚 + 瀏覽器就完成了這件事，用時 1 個小時，然后又發給了剛才那個同事：

融合

但其實這個設計出來的頁面是不能操作的，只是個靜態效果。最后我又花了差不多半個小時時間，把靜態效果套到之前的“抽象”界面中。第四部也完成了。前后差不多經過了 1 天時間。

前端開發

前面已經賣了個關子了，能夠用一個晚上搞定這個界面的全套功能，包括每個組件的完備性、交互反映、動畫效果。Vue + webpack 功不可沒，前幾天我剛博客介紹過一些 vue + webpack 的內容，沒錯，就是用這一套技術基礎快速搭建起來的。再加上前期產品設計的時候已經把組件劃分和主要屬性/方法命名都確定過了，所以整個開發過程完全是自 頂向下的。大應用拆成子組件，子組件再拆成更小的組件；大函數寫成幾行偽代碼，每行偽代碼再拆成不同的子函數……非常之順暢，幾乎沒有返工。很多地方的邏 輯都是一次瀏覽器刷新就通過的 (那天工作狀態也確實不錯)

除了之前博客介紹到的 vue 和 webpack 以及 gulpfile.js 我又加入了 htmlone 打包和 awp 發布等更高集成化的工作方式。讓調試、打包、發布都非常簡單省時。

好用的庫的積累

• xhr : 可以在瀏覽器端被依賴的 xhr 請求函數
• parse-color : 處理 CSS 中的顏色值，可以返回各種格式，用在了不同任務生成的不同顏色中，同時保證顏色是半透明的。

后端開發

就在我正準備搭 Node 服務的時候，剛好找到了 @子之 子大爺，跟他聊起這件事，他也非常認同，后端的服務器設備、數據庫環境和身份驗證等機制都是現成的，于是大家一拍即合，迅速敲定了數據格式和服務器接口，數據基本都是通過 GET 、 POST 、 PUT 、 DELETE 四個 HTTP 方法完成查詢、增加、更新、刪除某個工作任務的。

@子之 當時同時在處理的事情也比較多，但開發效率也是奇高的，早上跟他說了想法，晚上接口就準備好了。

聯調 & 發布

又經過幾輪松散的調試，過了不到一周時間吧。想法、設計、前端、后端都已經完成了，我們對程序進行了部署。并開始在無線前端的導購產品小組和賣家產品小組中先試用起來。

小結

如上所述，我在大概一周的時間里，參與并見證了“團隊時間線”的從無到有。它給我帶來的收獲，一方面是從團隊管理角度一個更好的方式，另一方面實踐了很多自己專業范圍以外的流程和事情，再一方面也實踐了 vue + webpack 的項目流程設計。一舉三得。

希望這些產品、經驗和收獲可以在未來產生更大的價值，尤其是后兩者