跳過導覽
An illustrated image showing stylized icons that represent different handoff tools in Sketch
#使用Sketch製作

如何在 Sketch 中設定設計流程,以利開發者順暢接手

我們與五位 Sketch 專家對談,從自由接案者到大型設計團隊成員,以獲取他們簡化交接流程的訣竅和建議

當您的設計準備好交接時,您如何確保開發者擁有他們所需的一切?在設計流程中如此關鍵的環節,確保一切順利進行至關重要,而這一切都取決於設計團隊是否有效地準備好他們的工作。

但是,您可以做些什麼來實現這一點呢?我們與五位 Sketch 專家對談,從獨立機構到跨國組織,以獲取他們讓交接過程成功的訣竅、技巧和建議。


明確定義交接流程

正確的團隊結構對於完善交接流程至關重要。過去,設計和開發團隊通常是分開存在的,而如今,設計流程更具協作性。

當雙方跨越這些界限時,每個人的工作都會變得更輕鬆一些,正如 Spring/Summer 的資深專案經理 Jenny Nguyen 所解釋的那樣。「這是一個持續的過程,從設計階段開始,並貫穿整個開發過程,」她說。「作為一個團隊,我們緊密合作,不分你我。因此,我們希望開發者提出問題並提出設計改進建議,並在開發過程中與設計師密切合作,以創造最終的設計和使用者體驗。」

專家提示:「開發者對設計和決策擁有越多所有權和理解,他們就越容易做好自己的工作。正如定義明確的設計交接格式,可以讓設計師更容易確保開發者擁有他們所需的一切。」 Jenny Nguyen - Spring/Summer 資深專案經理

使用協作工具

但是,您需要哪些工具才能讓您的團隊成員更緊密地合作呢?對於屢獲殊榮的 Framework Design 團隊來說,Sketch 最近的一些更新提供了一個解決方案。「Sketch 的協作工具確實幫助了我們的交接流程,」該團隊解釋說。「這意味著我們不必擔心在團隊之間傳輸大型或多個檔案。」

自由接案設計師、開發者和教育工作者 Andy Bell 表示同意。當他意識到自己不再需要第三方工具來進行原型設計、交接和客戶回饋時,他就全心投入了 Sketch。「我過去曾使用過 Zeplin,尤其是在與使用 Windows 電腦的開發者合作時,但現在,我的 Sketch Workspace 和網路應用程式就是我所需要的全部。」

使用 Sketch,您可以從網路應用程式下載多種格式的素材資源,並選擇單獨下載或一次下載所有素材資源。

當調整和更新原始檔案和素材時,擁有一個可在任何瀏覽器中與開發人員共享的單一事實來源,使工作區成為一個無價的工具。「如果有重大變更,我會複製符號或畫板,以便開發人員可以看到與原始版本相比的變化。但同樣地,更新工作區文件並簡單地分享連結就能完成工作。」

專業提示:「在創建設計時,我們大力推薦使用元件庫。擁有一個供開發人員參考的元件庫可以幫助他們找出設計的關鍵部分,例如字體粗細,這些部分開發人員通常不太習慣用肉眼識別。」Kara Vicca — Framework Design 的 UX/UI 設計師

消除團隊之間的障礙

顯然,如今的開發人員不能只是閒坐著,等待設計師將他們需要的素材交給他們。他們現在更多地參與到整個創作過程中,在某些情況下,是為了確保設計師的偉大想法是切實可行的。

Spring/Summer 的 Jenny Nguyen 表示:「我們的開發人員在範圍界定階段扮演著關鍵角色,以確保我們從技術角度為專案的成功做好準備。我們始終致力於在設計過程中及早讓開發人員參與,並在較大的設計決策中讓他們參與,以幫助我們在設計階段探索和了解我們的局限性和可能性。」

在 Santander,一切都與團隊合作有關。正如全球 DesignOps 經理 Gonzalo Goyanes 所解釋的那樣,設計師和開發人員不應該分開。「在我看來,將團隊視為不同的實體是一個錯誤。當你使用設計系統工作時,溝通必須是持續的,而且兩個團隊坐在同一張桌子上,以這種方式處理問題是合理的,」他解釋道。「以前,我們需要一整個流程和協議來從設計『構建』到開發。現在,工作流程在兩個專業之間完全整合。」

專業提示:「無論你做什麼,都要盡量使用共同的語言。如果你在多產品和多國環境中工作,清楚地知道你如何稱呼每個事物,並將其建立為工作詞彙表非常重要。大型團隊中的大多數混淆都來自於命名法的誤解。」Gonzalo Goyanes — Santander 全球 DesignOps 經理

建立正確的交接流程

雖然你的團隊可能會緊密合作,但在流程中,你的開發人員需要開始積極開發。在這個時候,提供他們所需的信息和素材至關重要。Spring/Summer 的 Jenny Nguyen 解釋說:「你需要有一個明確的交接格式,並在整個設計過程中持續遵循,而不僅僅是在設計階段結束時。」

使用 Sketch 的網頁應用程式檢查器,開發人員可以檢查你的設計,並以他們想要的格式複製他們需要的屬性,只需點擊一下即可。

創意代理商 EPM 的團隊採取了類似的方法,設計師們試圖深入了解開發人員的想法,正如首席 UI 設計師 Dot Falla 所解釋的那樣。「了解你的開發人員需要什麼,並提前採取預防措施以實現無縫交接,這不是你能被教會的,」她說。「我的最佳實務來自於設身處地為開發人員著想,了解他們,考慮構建過程,並思考開發人員將如何接受我的設計並將其轉化為一個可運作的應用程式。」

專業提示:「一個簡單、構建良好的設計總是勝過一個美觀但不實用的設計。」Dot Falla — EPM Digital 首席 UI 設計師

這對於較小的團隊來說很好,但隨著專案規模的增長,團隊規模也會增長。這就是擁有共同、一致的理解至關重要的原因。

「我們有一些共同的操作或規則,稱為『知識管理』,」Gonzalo Goyanes 解釋了 Santander 的方法。「將你的專案、產品和功能庫進行編目、排序和版本控制以供將來參考非常重要。」

對於 Santander 的團隊來說,這不僅僅是為了更容易地分享。重點在於能夠快速搜尋參考資料,或快速掌握產品的完整歷史。「即使你很有效率,如果沒有一個完善的知識管理策略,你的速度也不會像你想像的那麼快。」

用 Sketch 完成所有工作

雖然不同的人和團隊對設計稿交接有不同的處理方式,但有一種工具可以幫助你簡化流程,那就是 Sketch。

有了 Sketch,你就可以擁有在整個設計過程中進行協作所需的所有工具

有了 Sketch,你就可以擁有在整個設計過程中進行協作所需的所有工具,從利益相關者那裡獲得有用的反饋,並為開發人員提供將你的設計轉化為程式碼所需的所有素材和資訊。而且因為所有功能都包含在訂閱中,你不需要為第三方工具支付額外費用。

請參閱我們最近的部落格系列文章,進一步瞭解如何讓設計稿交接工作對每個人都更輕鬆


我們聽取了一些專家的意見,但你是如何處理設計稿交接的呢?歡迎在我們的社群媒體頻道上告訴我們你採取了哪些方法,並與社群中的其他人分享你的訣竅和技巧。

你可能也喜歡

免費試用 Sketch

無論你是 Sketch 的新手,還是回來看看有什麼新功能,我們都能讓你快速上手,在幾分鐘內完成你的最佳作品。

免費開始使用
免費開始使用