我作為前端開發人員已經工作了大約兩年，並參與了各種各樣的專案的創建。 我學到的教訓之一是，擁有相同目標但任務和職責不同的不同開發團隊之間的協作並不容易。
在與其他團隊成員、設計師和開發人員協商後，我創建了一個專為小型團隊（5-15 人）設計的網站創建週期。 它包括 Confluence、Jira、Airtable 和 Abstract 等工具。 在這篇文章中，我將分享組織工作流程的功能。
技能箱推薦： 兩年實踐課程 .
提醒： 對於“Habr”的所有讀者 - 使用“Habr”促銷代碼註冊任何 Skillbox 課程可享受 10 盧布的折扣。
為什麼需要這一切？
從頭開始創建網站所需的最低團隊是設計師、程式設計師和專案經理。 就我而言，團隊已經成立。 但在幾個網站發布後，我覺得有些不對勁。 有時我們根本沒有完全理解我們的責任，與客戶的溝通還有很多不足之處。 這一切都減慢了進程並擾亂了每個人。
我開始致力於解決這個問題。
谷歌搜尋對我們的問題給出了很好的結果。
為了讓工作完成更加直觀，我創建了一個工作流程圖，讓您了解這裡的工作是如何完成的。
點擊圖像以全解析度開啟。
目標和目標
我決定測試的第一個技術是「級聯模型」（瀑布）。 我用它來突出問題並了解如何解決它們。
問題：大多數情況下，客戶不會像開發人員一樣模組化地評估網站創建過程。 他將其視為一個常規站點，也就是說，他以單一頁面的形式進行思考。 在他看來，設計師和程式設計師一個接一個地創建單獨的頁面。 結果，客戶根本不明白在實際過程中接下來發生了什麼事。
任務：否則說服客戶是沒有意義的；最好的選擇是開發一個模組化流程，用於基於逐頁模型在公司內建立網站。
通用設計令牌和元件由開發人員和設計人員管理。
問題：這是許多策略都要解決的常見情況。 有許多有趣的解決方案，在大多數情況下，建議建立一個由樣式指南/庫產生器控制的設計系統。 但在我們的情況下，在開發過程中添加另一個元件來允許我們管理設計人員的存取等級是根本不可能的。
任務：建立一個通用的系統，讓設計者、開發者和管理者能夠同步工作，互不干擾。
精準的發展追踪
問題：雖然有許多有用的工具可用於追蹤問題和衡量整體進度，但大多數工具並不靈活或最佳。 該工具非常有用，可以節省團隊通常花在提問和澄清特定任務上的時間。 它還可以讓管理人員更準確地了解整個項目，從而讓他們的工作變得更輕鬆。
任務：建立儀表板來追蹤不同團隊成員執行的任務的進度。
一套工具
在嘗試了不同的工具後，我選擇了以下一組：Confluence、Jira、Airtable 和 Abstract。 下面我就來揭秘一下各自的好處。
合流
工具作用：資訊與資源中心。
Confluence 的工作區相對容易設置，具有許多功能，與不同應用程式集成，並且具有單獨的可自訂模板。 它不是一個一刀切的解決方案，但它是作為資訊和資源中心的理想選擇。 這意味著與專案相關的任何參考或技術細節都必須輸入資料庫。
該工具允許您正確記錄每個組件以及有關項目的任何其他詳細資訊。
Confluence的主要優點是文件範本的客製化。 此外，它還可用於實作規格和各種專案文件的單一儲存庫，從而分離參與者的存取等級。 現在，您不必擔心手邊有舊版本的規範，就像透過電子郵件發送文件時發生的情況一樣。
有關該工具的更多信息 .
吉拉
工具的作用：問題監控與任務管理。
Jira 是一個非常強大的專案規劃和管理工具。 該功能的主要部分是建立可自訂的工作流程。 為了有效地管理問題（這正是我們所需要的），值得特別注意請求類型和問題類型（issue type）的正確使用。
因此，為了確保開發人員基於正確的設計建置元件，每次設計變更時都需要通知他們。 組件更新後，設計人員需要開啟一個問題，指派一名負責的開發人員，並為他指派正確的問題類型。
借助 Jira，您可以確保流程中的所有參與者（讓我提醒您，在我們的例子中有 5-15 個）都會收到正確的任務，不會迷失並找到他們的執行者。
了解有關吉拉的更多信息 .
Airtable
工具的作用：組件管理和進度板。
Airtable 是電子表格和資料庫的混合體。 所有這些使得自訂上述所有工具的操作成為可能。
範例 1：元件管理
至於樣式指南產生器，使用起來並不總是方便 - 問題是設計師無法編輯它。 此外，使用 Sketch 元件庫也不是一個好的決定，因為它有很多限制。 最有可能的是，您根本無法在程式之外使用該庫。
Airtable 也不完美，但它比許多其他類似的解決方案更好。 這是元件管理表範本的示範：
當開發人員接受設計組件時，他透過將組件記錄在表中來評估最終的 ABEM。 總共有9列：
- 名稱 - 根據 ABEM 原則的組件名稱。
- 預覽 - 這是放置從其他來源下載的元件的螢幕截圖或圖像的位置。
- 連結頁面是指向元件頁面的連結。
- 子組件 - 到子組件的連結。
- 修飾符 - 檢查樣式選項是否存在並定義它們（例如，活動、紅色等）。
- 組件類別是一般類別（文字、宣傳圖片、側邊欄）。
- 開發狀態－實際開發進度及其定義（已完成、進行中等）。
- 負責人 - 負責該組件的開發人員。
- 原子層級是這個組件的原子類別（根據原子設計的概念）。
- 數據可以在相同或不同的表中引用。 將這些點連接起來可以防止縮放時出現混亂。 此外，資料可以毫無問題地進行過濾、排序和更改。
範例2：頁面開發進度
要評估頁面開發的進度，您需要專門為此目的建立的範本。 這張桌子可以滿足團隊本身和客戶的需求。
有關該頁面的任何資訊都可以在此處標記。 這是一個截止日期、一個到 InVision 原型的連結、一個目的地、一個子元件。 立刻就會發現，無論是記錄和更新設計，還是前端和後端開發的狀態，操作都非常方便。 而且，這些操作是同時進行的。
抽象
工具的作用：設計資產的單一版本控制來源。
Abstract 可以稱為 Sketch 中資源的 GitHub，它使設計人員免於複製和貼上檔案。 該工具的主要優點是它提供了一個設計儲存庫，可作為「單一事實來源」。 設計人員必須將主分支更新到已批准佈局的最新版本。 之後，他們必須通知開發商。 反過來，這些應該只適用於來自主分支的設計師資產。
作為結論
在我們實施了新的開發流程和上述所有工具後，我們的工作速度至少提高了一倍。 這不是一個完美的解決方案，但它是一個非常好的解決方案。 確實，為了讓它工作，你需要付出很多努力——它需要「手動工作」來更新和維護它的工作狀態。
技能箱推薦：
- 實踐課程 .
- 在線課程 .
- 實踐年課程 .
來源： www.habr.com