熱評 零帝小武

目前來看,騰訊的CoDesign提供了一個最優解的方案,既支持多人協同、云端數據可視化、更新自動提醒,還能自動生成規范文檔的全新設計規范解決方案。https://mp.weixin.qq.com/s/0RoBUzzxItdBFfLiR6Ib9Q

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

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

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

現有設計協作方式的問題

在過去幾年里,我們大多會采用以下方式解決多人設計協作的問題,建立并維護一個設計規范網站,參與的設計師們通過這個網站獲取該項目的設計信息。

設計規范網站上會詳細描述設計的原則、風格指導、組件控件的類型,以及使用細節,并提供可下載的 UIKIT 包。(TIPS:UIKIT 是設計師畫圖的組件包,用組件畫圖能夠提高設計輸出的效率和質量。當 UIKIT 里的內容足夠全,且大家都是一樣的版本時,就會讓設計師們的輸出較為一致。)

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

1. 網站的滯后性及高維護成本

網站的滯后性及高維護成本,使得這種工作方式不高效且很難長久維持。

滯后性

在項目初期往往無法快速擁有一個規范網站。因為項目前期一般資源都會比較緊張,時間很趕,沒有額外的設計和開發資源去做這件事。

等有時間和資源建立規范網站以后,之前做的內容中可能會有一部分內容需要按照規范重新設計開發,這里必然會有一定的資源浪費。

維護成本高

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

迭代規范設計師需要做:設計師構思并定義新的規范 → 書寫規范的迭代內容 → 更新UIKIT。

迭代規范網站設計師需要做:設計師構思并定義新的規范 → 書寫規范的迭代內容 → 更新UIKIT → 整理成可發布至規范網站的格式 → 上傳到規范網站 → 人工通知其他設計師有更新,并提醒他們下載新的 UIKIT。

其中后面的這些環節都會花費很多時間和精力,比迭代規范麻煩多了。

思考:是否一定要用規范網站這種比較耗費資源的方式實現信息的中心化呢?如何讓設計更聚焦在定義設計本身,去掉這些多余的耗費人力的環節呢?

2. 更新通知和觸達不及時

更新通知和觸達不及時,讓需要 followed 的設計師們很難快速掌握最新設計信息。

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

思考:有沒有自動智能更新的方式呢?

3. UIkit的更新不能及時且智能化地更新

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

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

思考:有沒有可以實時通知到人,且智能自動更新 uikit 的方法呢?UIKIT 是設計師們畫圖的必經路徑,關鍵一環。

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

現有的工作方式無論對于規范的建立者還是 follow者來說,都不是最好的。我們通過對這些問題的思考去尋找一種更優的方式,讓每個人都能更輕松地做到高效且一致。

更優的方式是:讓設計協同工作云端智能化

簡單來說,新的工作方式就是:建立一個基于設計工具的云端設計中臺。把設計規范網站和 UIKIT 打包成云端的設計庫,嵌入到設計師每天畫圖必須使用的設計畫圖工具中。

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

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

1. 云端化,可以實時更新,有效觸達

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

2. 維護和使用成本低

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

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

3. 所有人都能自動實時使用最新UIKIT,查閱最新設計規范

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

4. 不滯后與可復用

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

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

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

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

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

Sketch上實現云端設計庫

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

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

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

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

我們目前選擇是基于 iCloud 云能力來做的,大家也可以根據自己的訴求選擇喜歡的云。其實 Sketch 工具自身也是擁有云能力的,而我們選擇 iCloud 云的原因是:

  • iCloud 隨時隨地移動辦公不受限制;
  • 目前 sketch 的云能力不算太完備和穩定,擔心大家升級Sketch的版本后會用不了。

3. 云端組件庫/UIKIT的優勢

  • 實時更新最新組件和界面;
  • 多人共享一份規范,確保對外輸出視覺稿的一致性;
  • 組件實時更新,避免信息不對稱,減輕重復勞動;
  • 將各端規范收攏并清晰地劃分權限,便于長期維護;
  • 團隊成員在使用這份規范的過程中可以隨時提議增加/刪除/修改規范,有助于我們檢驗組件庫的可用性和覆蓋范圍,不斷完善組件庫。

前提條件

系統:macOS

軟件:Sketch App

賬號:iCloud 賬號,且啟用了 iCloud Drive

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

使用方法

1. 設置iCloudDrive

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

成功后 Finder 側邊欄應出現「iCloud 云盤」。如果沒有出現,請打開 Finder 的 Preference,選中「邊欄」并勾選「iCloud」云盤:

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

完成以上設置后請聯系組件庫管理員將你添加為成員。管理員會給你發送規范文件的鏈接,點擊鏈接后文件將自動出現在你的 iCloud 云盤。此時你的本地 Finder 應顯示如下:

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

2. 將規范添加為 Sketch Library

打開 Sketch 左上角第一個菜單的 Preference,選擇 Libraries 卡片,將本地 iCloud Drive 中的規范文件拖拽進這個區域,然后關閉該窗口。

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

此時你就可以通過 Symbol 在 Sketch 中引用規范中的組件:

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

3. 更新組件

每當規范有更新時右上角會出現「Library Update」推送,選擇你需要更新的組件就可以了。

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

4. 維護與權限

考慮到安全性,目前我們沒有讓所有參與人都有權限編輯規范,當然大家可以根據自己的需要來設置相應的權限。

歡迎關注「騰訊ISUX」的公眾號:

騰訊設計師:如何用 Sketch 建立一個高效協作的云端設計庫?

收藏 115
點贊 11

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。