設計教程

如何在sketch中創(chuàng)建智能化協(xié)作設計？

2975

互聯(lián)網(wǎng)的設計工作常常需要設計師們協(xié)同完成，尤其是大型的項目，參與的設計師會更多。在實際工作中我們發(fā)現(xiàn)，現(xiàn)有的工作方式不能讓所有參與項目的設計們很好地進行設計協(xié)同。如何能讓大家的協(xié)作更高效，設計的輸出質(zhì)量更好體驗更一致呢？這是我們想要解決的問題。本文將從分析現(xiàn)有設計協(xié)同工作方式的問題出發(fā)，然后提供一種新的思路和方式——云端智能化設計協(xié)同工作方式，希望對大家有所幫助。

現(xiàn)有設計協(xié)作方式的問題

在過去幾年里，我們大多會采用以下方式解決多人設計協(xié)作的問題——

建立并維護一個設計規(guī)范網(wǎng)站，參與的設計師們通過這個網(wǎng)站獲取該項目的設計信息。

設計規(guī)范網(wǎng)站上會詳細描述設計的原則/風格指導/組件控件的類型以及使用細節(jié)/并提供可下載的UIKIT包。（TIPS：UIKIT是設計師畫圖的組件包，用組件畫圖能夠提高設計輸出的效率和質(zhì)量。當UIKIT里的內(nèi)容足夠全，且大家都是一樣的版本時，就會讓設計師們的輸出較為一致。）

但這種方式在實際操作中其實有一些問題的——

1/ 網(wǎng)站的滯后性及高維護成本，使得這種工作方式不高效且很難長久維持。

● 滯后性

在項目初期往往你無法快速擁有一個規(guī)范網(wǎng)站。因為項目前期一般都會資源緊張，時間很趕，沒有額外的設計和開發(fā)資源去做這件事。

等有時間和資源建立規(guī)范網(wǎng)站以后，之前做的內(nèi)容中可能會有一部分內(nèi)容需要按照規(guī)范重新設計開發(fā)，這里必然會有一定的資源浪費。

● 維護成本高

規(guī)范是一個隨著需要不斷迭代更新的事情，沒有一成不變的規(guī)范，及時迭代優(yōu)化才能讓規(guī)范更好地滿足當下項目的需要。但是維護規(guī)范網(wǎng)站的高成本讓迭代更新變得不那么容易。

迭代規(guī)范設計師需要做：設計師構(gòu)思并定義新的規(guī)范 → 書寫規(guī)范的迭代內(nèi)容 → 更新UIKIT

迭代規(guī)范網(wǎng)站設計師需要做：設計師構(gòu)思并定義新的規(guī)范 → 書寫規(guī)范的迭代內(nèi)容 → 更新UIKIT → 整理成可發(fā)布至規(guī)范網(wǎng)站的格式 → 上傳到規(guī)范網(wǎng)站 → 人工通知其他設計師有更新，并提醒他們下載新的UIKIT

其中后面的這些環(huán)節(jié)都會花費很多時間和精力，比迭代規(guī)范麻煩多了。

思考：是否一定要用規(guī)范網(wǎng)站這種比較耗費資源的方式實現(xiàn)信息的中心化呢？如何讓設計更聚焦在定義設計本身，去掉這些多余的耗費人力的環(huán)節(jié)呢？

2/ 更新通知和觸達不及時有效，讓需followed設計師們很難快速掌握最新設計信息。

規(guī)范網(wǎng)站缺少自動通知的能力，也缺少自動標記更新點的能力。每次更新規(guī)范都需要通過人工方式傳達和普及。如寫郵件通知、組織大家進行會議宣講等方式通知大家變更了什么，其實真的是成本高又低效的工作方式。

思考：有沒有自動智能更新的方式呢？

3/ UIkit的更新不能及時且智能化地更新，讓受眾的設計師不能第一時間獲得最新畫圖組件。

規(guī)范網(wǎng)站提供了可下載的UIKIT包，但是沒有有效地通知渠道，并且需要每個設計師手動下載到各自的設備上使用。想要讓每位設計師通過手動方式實現(xiàn)版本一致且同時更新到最新版本幾乎是不可能的。大家用不同版本的uikit畫圖當然會經(jīng)常遇到輸出不一致的問題。

思考：有沒有可以實時通知到人，且智能自動更新uikit的方法呢？UIKIT是設計師們畫圖的必經(jīng)路徑，關(guān)鍵一環(huán)。

更優(yōu)的方式是：讓設計協(xié)同工作云端智能化

簡單來說，新的工作方式就是——

建立一個基于設計工具的云端設計中臺。把設計規(guī)范網(wǎng)站和UIKIT打包成云端的設計庫，嵌入到設計師每天畫圖必須使用的設計畫圖工具中。

云端設計庫的原理其實是：通過畫圖工具制作了一份設計文件，然后放在云端，通過云帳號的能力使得大家都可以同時使用這份文件。這份文件會包含包含設計規(guī)范說明/組件/核心界面/常用模塊/UIKIT。這些內(nèi)容都是設計師畫圖時可以直接使用的。

這種方式的好處是非常明顯的——

1/ 云端化，可以實時更新，有效觸達。

所有設計規(guī)范和UIKIT都在云上，云有自動推送消息的能力，并且能夠自動標記出更新迭代的內(nèi)容。不需要花費額外的成本就能實時更新，且有效地觸達到每一位參與其中的設計師。

2/ 維護和使用成本低

對于規(guī)范的制定者，云端庫的更新維護成本也比之前很低。不需要維護網(wǎng)站。云端設計庫本身就是一份文件，繪制好了稿件以后，規(guī)范和UIKIT就都有了。不再需要額外為規(guī)范網(wǎng)站調(diào)整樣式導出內(nèi)容上傳內(nèi)容通知大家等一系列額外的環(huán)節(jié)。為設計師減負了不少，設計師可以將精力更聚焦在定義設計的本身上。由于成本比較低，所以更新實效性也高了很多。云端庫的維護者只需要更新這個云端庫文件，follow者就都能在第一時間享用最新的內(nèi)容。

對于follow者來說，由于所有規(guī)范和UIKIT都是嵌入到了畫圖工具中，通過云的能力實時自動更新到最新版本，不需要手動下載UIKIT，不需要通過額外的方式或渠道獲取更新的設計規(guī)范的相關(guān)信息。設計師只需打開畫圖工具就能享用一切。使用在關(guān)鍵路徑上既簡單又有效。

3/ 所有人都能自動實時使用最新UIKIT，查閱最新設計規(guī)范。

云的能力讓都所有人都能實時更新到最新內(nèi)容，所有人用最新的uikit來畫稿，一致性必然要好很多。

4/ 不滯后與可復用

在項目初期你就可以快速擁有一份新的云端設計庫。

如何做到的呢？如果我們在A項目中積累了一份A-云端設計庫，你只需要復制文件+調(diào)整組件Symbol就能快速擁有一個具有新風格的新庫，使用到其他項目上。Symbol的修改是非常簡單易操作的。

這種低成本的可復用性讓我們在項目初期或資源緊張的情況下，也能快速擁有一個可用云端設計庫。

如果公司級各個團隊之間都使用云端設計庫的方式設計，那么大家就可以共享這些庫，擁有更加豐富的設計組件資源，形成更大更全的設計云端庫，效率和質(zhì)量應該會更高，受益的團隊也會更多。(PS: 考慮到安全性，需要對文件脫敏，以及建立管理和使用資源的機制權(quán)限。）

目前，我們在Sketch設計工具上實現(xiàn)了云端設計庫的工作方式

1/ Sketch上的云端設計庫的使用方法

備注: 如果是Photoshop的使用者，這個方法可能還幫不到你。我們挑選在sketch工具上做云端設計庫的原因是：目前我們團隊做界面設計比較多，且sketch的插件能力比較豐富，設計師不需要借助額外的開發(fā)資源就能自給自足地實現(xiàn)工作方式的升級。

2/ Sketch上的云端設計庫是什么

Sketch cloud Library 是基于 iCloud 帳戶云能力創(chuàng)建的 Sketch的云端設計庫，通過 iCloud 自動同步最新版。使用者只需將組件庫添加到 Sketch Library，即可隨時調(diào)用最新組件，快速搭建和輸出頁面。Sketch上的云端設計庫會包含設計規(guī)范，關(guān)鍵和常用設計頁面，UIkit這三部分內(nèi)容。規(guī)范中會包含整體的樣式、排版、適配規(guī)則，以及組件的樣式標注、使用說明和使用示例。

我們目前選擇是基于iCloud云能力來做的，大家也可以根據(jù)自己的訴求選擇喜歡的云。其實Sketch工具自身也是擁有云能力的，而我們選擇iCloud云的原因是：1. iCloud不需要翻墻，隨時隨地移動辦公不受限制；2. 目前sketch的云能力不算太完備和穩(wěn)定，擔心大家升級Sketch的版本后會用不了。

3/ 云端組件庫/UIKIT的優(yōu)勢

● 實時更新最新組件和界面

● 多人共享一份規(guī)范，確保對外輸視覺稿的一致性

● 組件實時更新，避免信息不對稱，減輕重復勞動

● 將各端規(guī)范收攏并清晰地劃分權(quán)限，便于長期維護

● 團隊成員在使用這份規(guī)范的過程中可以隨時提議增加/刪除/需改規(guī)范，有助于我們檢驗組件庫的可用性和覆蓋范圍，不斷完善組件庫。

前提條件：

系統(tǒng)：macOS

軟件：Sketch App

賬號：iCloud 賬號，且啟用了 iCloud Drive