在本系列文章中,我們將向您展示如何充分利用您的工作空間 — 從組織設計和保持同步到與工作空間內外的人員分享、管理角色和權限、獲取回饋以及發送設計以進行交接。
在本系列的最後一篇文章中,您將學習如何使用工作空間中的強大工具將設計交接給開發人員,並提供他們將您的設計轉化為產品所需的一切。
現在您已經完成設計、分享和測試,是時候讓開發人員介入,將您的作品變為現實了。設計過程中的這個步驟通常具有挑戰性,尤其是在溝通零散且開發人員沒有所需一切資源的情況下。
這不僅會導致您的設計與最終實作之間不匹配,還會減慢速度,最終導致產品品質下降。幸好,Sketch 包含一整套免費的交接工具,因此您可以與開發人員協作,並使流程的這一部分順利且直接。最棒的是,他們不需要 Mac 應用程式或任何第三方外掛程式即可完成。
在網頁檢查器中找到設計的所有細節
網頁應用程式中的檢查器工具可讓開發人員輕鬆地以所需的詳細程度檢查設計中的每個元素。按一下網頁應用程式中的任何畫板或圖層,就會在「檢查器」索引標籤中顯示所有相關屬性 — 從位置到色彩變數。開發人員還可以直接從畫板測量圖層之間的間距,以及檢查其中包含多個圖層或形狀的群組。
按住 Control 鍵並按一下任何圖層,即可瀏覽任何重疊的圖層。
由於網頁檢查器會標記您設計中的每個元素,因此在提供回饋時,可以輕鬆參考設計的特定部分。如果開發人員在工作中遇到任何問題,他們可以直接在網頁應用程式中使用註釋和討論串來確保一切清晰明瞭。
有了工作空間,交接變得更加輕鬆。我最喜歡的部分是我可以輕鬆地看到元素之間的間距,以及其他資訊的顯示方式非常清晰。複製數值變得輕而易舉,我的工作流程也加快了速度。
最棒的是,開發人員可以使用他們喜歡的任何瀏覽器或作業系統來檢查您的設計,而且完全免費,不需要 Mac 應用程式。將他們新增為檢視者到您的工作區,他們就可以檢查任何設計,無需第三方外掛程式。如果您與工作區以外的開發人員合作?只需邀請他們加入您的文件並授予他們檢視者權限即可。這些都包含在內,無需額外付費。
只需按一下即可複製屬性、顏色變數和共用樣式
我們知道,在移交過程中,開發人員只希望在指尖就能獲得所需資訊。這就是為什麼網路應用程式 Inspector 可以輕鬆將任何屬性值複製到剪貼板的原因,包括顏色代碼和文字屬性。只需將滑鼠懸停在任何屬性上,然後按一下它即可。
對於具有多個屬性的圖層(例如文字屬性或填色),您可以透過按一下區段標題將它們全部一次複製到剪貼板。
當複製顏色和顏色變數時,開發人員可以從不同的格式中進行選擇,以最適合他們的專案。您還可以一目了然地看到顏色變數屬於哪個群組或庫,如果您需要在某個時間點參考它或了解其上下文,這會很方便。
網路應用程式 Inspector 會儲存您的偏好設定,因此複製不同的顏色屬性將使用與您最初選擇相同的格式。
當您選取使用 文字樣式 或 圖層樣式 的圖層時,我們會將其顯示在側邊欄中,並顯示其完整路徑,以便清楚地表明該樣式是屬於文件還是工作區庫。
詳細檢查符號
符號不僅是設計師的省時工具,開發人員也能從中受益。每當您選取屬於符號一部分的圖層時,我們都會在畫板和側邊欄中突出顯示符號。這樣一來,開發人員就能輕鬆區分基於可重複使用元件的元素和自訂元素,而自訂元素可能需要他們花費更多時間來製作。
雖然有時了解全貌很有幫助,但有時開發人員可能需要詳細檢查來源符號。按一下畫板上符號的名稱或箭頭圖示 (→),或按一下 Inspector 中的卡片,無論它是文件的本地符號還是工作區中庫的一部分。
快速存取來源符號以進行詳細瀏覽。
按一下即可下載可供生產使用的素材
雖然檢查是移交流程的關鍵部分,但為開發人員提供他們需要的圖像和圖示也同樣重要。使用 Sketch,您可以在 Mac 應用程式中將素材標記為可匯出,開發人員只需按一下即可下載這些素材。
此外,他們始終可以存取最新版本的素材,並且知道如果需要特定素材該去哪裡找。開發人員可以選擇下載個別素材或文件中的所有素材,以及選擇最適合他們的檔案格式。
您可以下載多種格式的素材,並選擇單獨下載或一次下載所有素材。
好了,這就是我們「歡迎使用工作區」系列的最後一篇文章。感謝您加入我們,一起探索 Sketch 中用於改善整個設計流程協作的工具,我們希望您在這裡找到了一些有用的技巧和建議。請持續關注部落格,在未來幾週內獲得更多關於工作區的新聞。