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

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

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

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

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

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

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

 ● 滯后性 

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

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

 ● 維護(hù)成本高

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

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

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

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

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

2/ 更新通知和觸達(dá)不及時(shí)有效，讓需followed設(shè)計(jì)師們很難快速掌握最新設(shè)計(jì)信息。

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

思考：有沒有自動(dòng)智能更新的方式呢？ 

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

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

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

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

簡(jiǎn)單來說，新的工作方式就是—— 

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

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

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

1/ 云端化，可以實(shí)時(shí)更新，有效觸達(dá)。 

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

2/ 維護(hù)和使用成本低 

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

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

3/ 所有人都能自動(dòng)實(shí)時(shí)使用最新UIKIT，查閱最新設(shè)計(jì)規(guī)范。 

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

4/ 不滯后與可復(fù)用 

在項(xiàng)目初期你就可以快速擁有一份新的云端設(shè)計(jì)庫。 

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

這種低成本的可復(fù)用性讓我們?cè)陧?xiàng)目初期或資源緊張的情況下，也能快速擁有一個(gè)可用云端設(shè)計(jì)庫。 

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

目前，我們?cè)赟ketch設(shè)計(jì)工具上實(shí)現(xiàn)了云端設(shè)計(jì)庫的工作方式

1/ Sketch上的云端設(shè)計(jì)庫的使用方法 

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

2/ Sketch上的云端設(shè)計(jì)庫是什么 

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

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

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

 ● 實(shí)時(shí)更新最新組件和界面 

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

 ● 組件實(shí)時(shí)更新，避免信息不對(duì)稱，減輕重復(fù)勞動(dòng) 

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

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

前提條件： 

系統(tǒng)：macOS 

軟件：Sketch App 

賬號(hào)：iCloud 賬號(hào)，且啟用了 iCloud Drive 

使用方法： 

1/ 設(shè)置iCloudDrive 

如何開啟 iCloud Drive：https://support.apple.com/zh cn/HT204025

成功后 Finder 側(cè)邊欄應(yīng)出現(xiàn)“iCloud 云盤”。如果沒有出現(xiàn)，請(qǐng)打開 Finder 的 Preference，選中”邊欄“并勾選”iCloud“云盤： 

完成以上設(shè)置后請(qǐng)聯(lián)系組件庫管理員將你添加為成員。管理員會(huì)給你發(fā)送規(guī)范文件的鏈接，點(diǎn)擊鏈接后文件將自動(dòng)出現(xiàn)在你的 iCloud 云盤。此時(shí)你的本地 Finder 應(yīng)顯示如下： 

2/ 將規(guī)范添加為 Sketch Library 

打開 Sketch 左上角第一個(gè)菜單的 Preference，選擇 Libraries 卡片，將本地 iCloud Drive 中的規(guī)范文件拖拽進(jìn)這個(gè)區(qū)域，然后關(guān)閉該窗口。 

此時(shí)你就可以通過 Symbol 在 Sketch 中引用規(guī)范中的組件： 

3/ 更新組件 

每當(dāng)規(guī)范有更新時(shí)右上角會(huì)出現(xiàn)“Library ”推送，選擇你需要更新的組件就OK啦。 

4.維護(hù)與權(quán)限 

考慮到安全性，目前我們沒有讓所有參與人都有權(quán)限編輯規(guī)范，當(dāng)然大家可以根據(jù)自己的需要來設(shè)置相應(yīng)的權(quán)限。

作者：CONTRIBUTORS

原文鏈接：https://isux.tencent.com/articles/isux-efficient-design-methods.html