對「美餐客戶端」設計工作流的優化設計

天數有大變發表於2019-03-27

專案時間:2017-2018

專案本體美餐網

在參與了「美餐客戶端」這條產品線一段時間後,我和設計師同事在既有設計工作流程中發現一些問題,通過大家的合作,我們對既有設計工作流進行了設計以使其更適應當前「美餐客戶端」產品開發的現狀。

ps:這次優化設計嚴格來說不能算是“一次”,它是隨著專案本身迭代的進行逐步發現和解決問題的,沒有確切的開始和結束點,但是為了方便敘述我將其歸為一次。

問題和目標

我們通過對之前工作的總結分析得出目前「美餐客戶端」的設計要面對的客觀條件:

  • 來自間接相關方需求的實施優先順序高於直接相關方需求
  • 會出現對客戶端結構、介面、功能設計造成較大影響的要求(內容和頻率可能無法預料)
  • 要同時對iOS、Android、Web三端進行體驗較為統一的設計
  • 產品體量和複雜度隨著迭代進行不斷增大

根據以上分析,結合目前「美餐客戶端」產品線的既有設計流程現狀,我們面臨以下問題(和具體體現):

  1. 設計的可擴充套件性弱(在設計中對已有功能、結構進行擴充套件或修改的工作量大且複雜)
  2. 設計稿管理混亂(設計搞檔案混亂冗餘、同步性差)
  3. 設計師責任分工混亂(協同工作效率低,設計來源不易追溯)
  4. 設計交付的質量不佳(向下遊傳達設計意圖不清、規範性差)
  5. 設計師冗餘勞動多(工作過程中重複勞動、低效機械操作多)

為了解決上述問題,我和同事從以下幾方面對設計工作流程進行了優化設計。

在迭代中管理設計稿

針對設計稿管理混亂、設計師責任分工混亂的問題,我們通過流程圖分析了當前流程的具體痛點,並以此為依據擬定了一個理想的流程。

對「美餐客戶端」設計工作流的優化設計

痛點:

  • 無法保證設計師獲取的設計稿資訊源具有及時性和唯一性
  • 難以詳細記錄每一次交付的具體更新內容
  • 難以追溯每一個設計的來源(負責的設計師)

對「美餐客戶端」設計工作流的優化設計

我們通過交流發現目前的痛點其實在開發領域中是很典型的存在,而且他們已經有了成熟的解決方案——版本管理。於是我和開發同事合作,在所在團隊中推廣使用 git 對設計稿進行版本管理,其中包括管理設計師內部共享的設計稿原始檔和管理設計交付物。

對「美餐客戶端」設計工作流的優化設計

經過實際使用,其具有以下優點:

  • 能夠準確記錄每次更新對各設計稿的修改,方便所有人在需要的時候獲取到指定版本的指定設計稿;
  • 主幹分枝功能可以在頻繁的迭代中有效地管理每次設計決策對應的修改,並且始終保持每個成員可接觸的設計稿都處在最新狀態,做到資訊源的唯一性;
  • 設計師被要求提交設計稿修改時附帶更新說明,這樣做一方面幫助設計師和開發同事快速瞭解每次設計稿更新的內容,降低了產生遺漏或誤解的機率;另一方面也使設計師對設計稿的責任劃分更明確。

構建設計模式

對一個系統進行設計,主要工作就都是構建各種形式的模式。這些模式,將整個系統分解為各個層級關係的單元,對這些單元進行設計和組合又擴充套件了整個系統。具體到「美餐客戶端」,我和其他設計同事一起建立了元件系統。

對「美餐客戶端」設計工作流的優化設計

採用元件系統,我們達到了如下好處:

  • 在設計表現層面有利於達成產品(內部、外部)的視覺、互動、概念的一致性
  • 直接對元件系統進行修改和更新來實現需求,使得對已有設計的擴充套件變得容易且高效;
  • 依據元件系統來設計新功能、介面,有效避免重複勞動的同時也保證了設計質量的下限;
  • 元件系統檔案保持及時更新和唯一性(使用SketchLibrary功能),被所有設計稿的引用,減少了設計稿的冗餘;
  • 元件作為規範化的可複用元素,提高了設計交付開發的溝通效率和質量;
  • 設計師有更多精力關注於產品結構、多端差異等方面,而非重複設計不重要的細節元素;

這樣就使問題1、2、4、5得到了部分解決。

改進工具:自動化

在工作中我發現設計師們都會有很多的重複勞動和低效機械性操作。重複勞動如對已有元素的重複設計可通過元件系統來解決,低效機械性操作則適合通過工具的自動化來解決。

根據美餐採用的設計流程,我們設計師需要經常在 Sketch 中繪製較多的介面流程圖,但是 Sketch 本身邏輯導致相關操作比較繁瑣。因此我自己開發了一款外掛(Get out)來自動化繁瑣操作以提升效率,其他設計同事使用後也表示了喜愛。

對「美餐客戶端」設計工作流的優化設計

設計交付及測試

針對設計交付質量不高的問題,我們通過規範設計交付方式和設計文件來解決。設計產出物交付的重點是將設計意圖準確傳達給下游開發同事,美餐客戶端的設計交付主要傳達以下4個層面的內容:

  • 交付說明:當次交付的基本資訊(日期、版本、物件等)和內容概述(增刪改)
  • 使用流程層面:頁面之間的關係、流程的各種情況、分支、背後邏輯等(通過設計文件+流程圖+互動原型)
  • 頁面層面:頁面的組成、頁面所含元件或元素之間的關係、頁面的各種狀態、背後邏輯等(通過設計文件+互動原型)
  • 元件層面:各個元件的視覺樣式、狀態、互動、背後邏輯等(通過元件系統+設計稿)

設計交付後還需要確保開發能準確地實現設計稿,所以我們規定在開發完成之後設計師應參與測試逐項檢驗設計的實現程度。而此時元件系統的一大優點就出現了,複用的元件的視覺、基本互動等規範內容一般不需要花費太多精力去檢查和返工,因此工作效率得以提高。

對「美餐客戶端」設計工作流的優化設計

總結

對「美餐客戶端」設計工作流的優化設計,我們通過分析發現問題,採用目的導向的方式利用了可用資源解決了問題。不過現在反思,有些問題在當時條件下提出的解決方案目前已有了更成熟的替代者(如設計稿的版本管理有了abstract這種現成的服務)。但是也說明我們解決的思路是可取的。同時要注意的是,設計流程和方法是需要根據產品自身的不斷變化而不斷更新的,任何優化都只能適應有限的情況,並沒有永遠萬能的優化方案。

相關文章