面向開發人員的設計工作流程教程：按時交付更好的 UI/UX

編者註： Lubos Volkov 是一位經驗豐富的設計師，他在整個職業生涯中與眾多開發人員進行了遠程合作。 作為 Toptal 的產品設計師，Lubos 每天與來自工程、社區和內容等多個部門的團隊成員進行互動。 他是一位才華橫溢的設計師，他的溝通技巧促成了他的成功。 在本教程中，Lubos 分享了他優化設計師-開發人員 UI 和 UX 工作流程的經驗和方法，從而在截止日期之前或之前交付高質量的產品。

與優秀的設計師或設計團隊合作對任何團隊來說都是一筆寶貴的財富。 通過清晰的溝通渠道和暢通無阻的合作，設計師應該為您提供所需的一切，以加快構建過程並儘可能減少問題和困惑。

作為 UX 開發人員，您可以做些什麼來確保您構建的產品在不犧牲用戶界面和用戶體驗質量的情況下及時交付？

我的回答：讓你的設計師從第一天就參與進來，並讓他們參與整個 UI/UX 開發過程。 確保在開發人員和設計人員之間建立清晰的溝通渠道和一致的消息傳遞。

你有你需要的一切嗎？

在任何 UI 的實現過程中可能發生的最糟糕的事情是__設計師和開發人員之間缺乏溝通__（除非他們是同一個人）。 一些設計師認為，一旦 PSD 發送過來，他們的工作就完成了。 但是，那是錯誤的！ 您必須創建一個始終在線的通信工作流，該工作流持續超過 PSD 的交付。

在許多情況下，設計師需要一段時間才能看到實際的 UI/UX 設計實現。 令他們驚訝的是，構建通常與初始提交完全不同。 （這不止一次發生在我身上。我已經發送了包含完整描述和交互原型的源文件，但是當我終於看到這個項目時，幾個月後，它有不同的佈局，不同的顏色，並且沒有任何交互。）

一些設計師可能會因此而討厭我，因為這個設計工作流程需要他們做大量的“額外”工作。 但是，以有組織的方式創建和交付完整的資產和信息，對項目和整個團隊都有好處。

如果開發人員面前有他們需要的一切，它將加快這個過程。 一個乾淨的 PSD 是不夠的。

您需要什麼才能有效且高效地完成工作？

這些是開發人員應該期望設計師將 UI/UX 設計帶入實施的資產：

• 資源文件- 設計者應該將應用程序的每個元素放在一個文件中。 此文件應包含按鈕、複選框、標題樣式、字體、顏色等。基本上，基於此文件中的信息，開發人員應該能夠從頭開始重新創建任何界面。 開發人員從單個 PSD 導出任何元素比在多個文件中搜索要容易得多。

• 資產- 確保開發人員獲得所有必需的資產，因為不應再觸及源文件。

• 交互原型——“靜態屏幕”的日子已經一去不復返了。 使用智能交互和動畫來平滑 UX 設計工作流程和實施，是現在的一種常見做法。 但是，您不能只對開發人員說“這會從左側滑入”。 設計師應該創建該交互的實際原型。 原型應包括速度、速度等信息，並且設計人員應指定這些值中的每一個。

• 命名約定- 請求文件命名結構以保持事物井井有條。 這將使你們倆更容易瀏覽文件。 （沒有人喜歡將東西隱藏在背景文件夾中。）

• HDPI 資源- 我們生活在“困難時期”，屏幕密度巨大。 確保設計師將提供所有所需分辨率的圖像，這樣您的應用程序在任何地方都會看起來很清晰。 注意：使用盡可能多的向量； 它會對你有很大幫助（svg）。

如果您在實施過程中確實發現了其他缺失，請不要害怕； ping設計師並要求它。 永遠不要跳過，永遠不要吝嗇！ 你們是同一個團隊的成員，你們的工作是提供最好的產品。 如果設計師失敗了，你也會失敗。

工作正在進行中

在 UI/UX 開發過程中利用您的設計師。 不要讓他們袖手旁觀，期望他們只是“推動像素”。 設計人員甚至在實施開始之前就看到了可能的創新。 要利用這一點，請將它們保持在循環中。 為他們提供查看和測試正在進行的工作的權限。 我很清楚沒有人喜歡分享未完成的項目。 但是，在構建過程中進行更改比在最後進行更改要容易得多。 這樣做可以節省您的時間並避免不必要的工作。 一旦你給設計師一個測試項目的機會，請他編制一份問題和解決方案列表，並提出改進建議。

當開發人員有一個可以改變應用程序外觀的想法時該怎麼辦？ 與設計師討論，絕不允許開發人員在未諮詢設計師的情況下修改設計。 此設計工作流程將確保構建保持在正軌上。 一個偉大的設計師對屏幕上的每個元素都有理由。 在不了解它為什麼存在的情況下取出單個部件可能會破壞產品的用戶體驗。

UI/UX 設計項目管理

設計師認為開發人員可以在一天甚至一小時內將設計變為現實。 但是，就像偉大的設計一樣，偉大的發展需要時間和精力。 通過讓他看到構建的進度，讓你焦慮的設計師遠離他。 使用外部項目管理軟件來確保每個修訂都得到考慮，這是確保您不會錯過電子郵件對話或 Skype 會話中討論的重要信息的好方法。 老實說：有時變化和活動在發生之前甚至不會被傳達。

無論您使用哪種解決方案，請務必選擇一個整個團隊將採用並始終使用的工作流程。 在我們的團隊中，我試圖推動 Basecamp，因為我正在使用它，但我們的前端開發人員認為它的功能有限。 他們已經在使用其他項目管理軟件來跟踪錯誤、進度等，例如 JIRA、GitHub 甚至 Evernote。 我明白項目跟踪和管理應該盡可能簡單，所以我將我的 UI 設計工作流程遷移到 JIRA。 我想確保他們了解我的工作流程和進度，但我不希望他們覺得設計是另一回事。

以下是對項目管理工具的一些建議：

• Basecamp - 跟踪設計和開發相關任務的進度，並輕鬆讓您導出任務。 它還有一個簡單的移動客戶端。
• JIRA - 一個完全可定制的平台，您可以輕鬆地為不同區域設置定制板。 例如，組織看板來跟踪後端、前端、設計等活動。我認為移動客戶端有點弱，但它對於較大的團隊來說是一個很好的解決方案，並且包含錯誤跟踪功能。
• 電子郵件 - 這非常適合建立對話或發送圖像。 但是，如果您使用電子郵件進行反饋，請小心。 東西很容易丟失。

您也可以嘗試 Trello 和其他項目管理軟件，但我們行業中使用最廣泛的是 Basecamp 和 JIRA。 同樣，最重要的是找到一個每個人都可以一致使用的項目管理系統，否則這是一個有爭議的問題。

UX設計和開發走到一起

設計師和開發人員是一個強大的組合。 確保盡可能頻繁地一起集思廣益 UI 和 UX。 開發人員應該願意幫助設計師構思想法，而設計師應該至少對所使用的技術有基本的了解。

一起弄清楚設計工作流程。 不要只是盲目地實施你的設計師創造的東西。 積極主動，利用您的兩種不同視角，創造出看起來漂亮且用戶體驗極佳的產品。 設計師跳出框框思考，看到瘋狂的動畫、創意、像素和按鈕，而開發人員則看到技術、減速帶和限制。

以我的經驗，每個設計師都對像素和有趣的概念著迷。 但有時，當設計師有想法時，開發人員會回擊說：“一旦實施，這將不會很好地工作。 會有性能消耗問題”。 最近，我希望實現一個背景模糊的模態窗口，但這種模糊導致加載時間過長。 為了解決這個問題，開發人員建議使用常規的全彩色覆蓋，這樣可以更快地加載並保持圖像質量。 設計師，請注意：不要為設計妥協用戶體驗。

反饋迴路

設計師的反饋至關重要，而且必須盡可能頻繁地發生。 這可能是您將做的最耗費時間（和精力）的事情。 但是，您需要採用它才能提供完美的結果。 這裡有幾個關於如何使您的反饋完美的 UX 和 UI 設計工作流提示。

• 視覺化——反饋需要盡可能具體。 使其準確的最佳方法是截取一個簡單的屏幕截圖並突出顯示您要修復的問題。 如果您有當前實現的圖片與它的外觀對比，那就更好了。 視覺交流將消除 50% 的問題。

• 描述性- 反饋應該是準確的。 你不能只說“向上移動這個按鈕”。 設計者必須指定一個按鈕應該移動多少像素，應該使用什麼填充等等。總是包括對問題的解釋，以及適當的解決方案。 這將花費很多時間，但這是值得的。

• 要有耐心——請記住，設計師和開發人員的關注點不同。 如果開發人員不完全理解設計師的想法，可能會導致混亂和錯誤的決定。 在任何情況下，雙方都需要耐心並願意幫助其他團隊成員。 有時真的很難，但這是每個設計師和開發人員都應該學習的軟技能。

很明顯，需要將這些東西組合在一起以使它們成為合適的設計工作流程。 但是，什麼工具可以真正幫助您提供反饋？

• 電子郵件——我敢說這仍然是最常見的提供反饋的平台。 如果您遵循幾個簡單的規則，使用它是完全可以的。
  • 首先，使用單個電子郵件線程來獲取反饋。 不要將每個單獨的調整都放在具有不同主題的新電子郵件中。
  • 其次，創建修復列表。 試著坐下來想想你注意到的每一個調整或修復。
  • 最後，不要一次發送大量列表。 嘗試將其分解為較小的單個列表並逐個進行。

• Skype（環聊） - 語音是非常強大的反饋工具。 您可以立即提問和回答問題。 但是，請務必記筆記並在通話後通過後續消息（電子郵件）發送。

• 協作工具- 老實說，我不是協作工具的忠實粉絲。 但是，他們有一個很大的好處。 它們可以幫助您保持反饋到位。 提問和回答問題的速度很快，而且會一直存在。

以下是一些很棒的工具：

反饋註釋：

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

協作工具：

• http://www.invisionapp.com/
• https://basecamp.com/

結論

建立一個系統和 UI/UX 設計工作流程，在整個設計和開發過程中保持溝通渠道暢通。 這將使您能夠實施偉大的想法、預測潛在問題並確定重要問題的優先級。

開發者和設計師只要願意團隊合作，就可以共同創造偉大的事物。 互相學習，設計像這樣的教程！