將設計交付給開發人員的最佳交付方式是什麼？

Question

我正在研究一個龐大而複雜的Web應用程序，並且從開發人員的角度來看，我很好奇在此類環境中將設計移交給工程的最佳方法。我很好奇交貨方式和利弊。我已經在過去使用

交貨方式（以下所有的方法包括詳細的線框圖）：

• 與圖層複合互動狀態分層月臺幕門。
• 一個GUI工具箱 - 一個設計元素的PSD，開發人員創建標記並從中拉出來使設計與線框相匹配。
• 一個CSS工具包 - 一個HTML頁面，包含CSS樣式和佈局，開發人員可以通過這些CSS樣式和佈局來匹配線框。

請隨意將您自己的方法添加到此列表中，您使用這些方法的經驗以及您喜歡的方法。我想知道哪些方法在不同的情況下也可以工作（從零開始創建新功能，更新現有功能等）。

Answer 1

我一直在研究一個類似的項目，其中涉及爲開發團隊提供UI小部件。其中一些內置交互性，用javascript編寫。

我們遞送每個插件在一個單獨的文件夾中包含以下子文件夾：

• DIST
  • IMG
  • JS
  • CSS
• 源
  • IMG
  • JS
  • CSS
• 測試

的源文件夾通常包含js和css源的非精縮版。另外，如果你爲你的css使用SASS或LESS（你應該使用它來完成這麼龐大的項目），/ Source/CSS文件夾是存放未編譯的css源代碼的地方。另外這裏，在IMG文件夾中，我們通常包括：我們用於設計組件

在PSD文件DIST（ribution）文件夾我們發貨的編譯和精縮CSS，使用的圖像（當必要）結合在精靈中，並且還縮小了js代碼。儘管您可以自己準備所有這些縮小版本，但如果使用Grunt自動化整個過程，速度會更快。您只需定義一個縮小js和css的任務並創建適當的文件夾結構。只需按一下按鈕（它實際上是一個正在執行的命令）。

測試文件夾通常包含呈現組件的HTML頁面，並提供有關如何測試其不同狀態或交互功能的說明。該html頁面應始終使用Dist文件夾中的css和js文件。包含一個簡短的read.me文件也是一個很好的做法，該文件描述將組件包含到現有頁面中所需的步驟。最後但並非最不重要的一點，如果我們正在討論響應式佈局，那麼在這裏以不同分辨率（ipad/iphone/android phone）在移動瀏覽器中呈現的窗口小部件/組件呈現屏幕截圖也是一種很好的做法。