作為以 996為常態(tài)的互聯(lián)網(wǎng)行業(yè)設計師，我們常面臨一個很現(xiàn)實的問題 -- 提高效率！當項目比較緊急或者比較龐大時，我們通常會通過團隊協(xié)作來完成。經(jīng)常是左一個設計源文件右一個源文件發(fā)來發(fā)去，實在浪費大家時間。

今天就為大家推薦一個讓設計團隊協(xié)作事半功倍的方法 -- 建立設計規(guī)范UI Kit 。另外還會分享兩個提高效率的小技巧。

設計規(guī)范UI Kit是控件樣式的組合，設計師在工作中只需要復制和拖動，不必重復繪制和單獨設計，節(jié)省了大家的時間。需要說明的是，它不是通常意義上設計規(guī)范，設計規(guī)范文檔是最全的文檔，它闡述設計規(guī)則、基礎規(guī)范以及控件規(guī)范和使用規(guī)則。主要給設計師閱讀和理解的，而設計規(guī)范UI Kit是給設計師直接使用的。

1、通用圖標

整理項目中可復用的圖標，如提示性的小紅點、刪除圖標、搜索圖標、復選圖標、開關(guān)控件、排序圖標、成功圖標、失敗圖標、警示圖標等等。按照一定的規(guī)則進行命名，以便于后期查找和使用。

如命名規(guī)則：小圖標/數(shù)字小紅點、小圖標/多選/可操作、小圖標/多選/不可操作、大圖標/成功、大圖標/失敗 等等。大家可根據(jù)自己的實際需求決定如何命名。

2、彈框-Toast

加載成功、失敗、正在加載等的 Toast 小提示。比如“驗證碼失敗”的小提示，都是可復用的控件。

3、按鈕-Butten

按鈕是APP中最常見的控件了，所以一定是可復用的。我們可以按照按照長度和不同的操作狀態(tài)進行分類，如下：

4、列表

列表在APP中使用頻率，相信有一點設計經(jīng)驗的設計師都非常清楚。我們可以按行數(shù)將他們劃分制成復用控件。

單行列表

雙行列表

多行列表

卡片列表

5、導航欄

通常一個產(chǎn)品會有多種導航欄樣式。

6、標簽欄

標簽欄也一樣。

7、對話框-Dialog

8、選擇彈框

以上一些我整理的一些通用的基礎樣式，大家可根據(jù)自己的實際情況編寫。

再給大家推薦一個重量級的炸彈，真的是好用到爆炸！Sketch的 Symbol Organizer插件。(其實之前也在專門講 Sketch 的插件中提到過，只是沒結(jié)合這么棒的案例）

Symbol Organizer 簡稱，組件組織者。它可以根據(jù)命名給 Symbols 分類，不僅可以檢查命名是否有錯誤和不合理的地方，更是治好了強迫癥，可以說非常舒服了！

Symbol Organizer 使用步驟：

1、進入 【組件】 頁面

2、插件 > Symbol Organizer > Configure Symbol Organizer

3、組織后的 Symbols 如下圖，非常整齊：

4、哈哈，真的查到了錯誤的命名，真的是非常開心了～

5、最后，整理組件并確認無誤后，就可以把 UIKit 發(fā)給各位同事，他們加入自己的 Sketch 的 組件庫/ Library 就可以進行復用了。

趕緊下載插件去試試吧，以我們設計師的高智商，只需一次，你就會領悟其中精髓。 

PS: 這里還有一個小技巧分享給大家。做 UIKit 的過程中需要不斷創(chuàng)建組件/ Create Symbol，而Sketch 軟件并沒有“創(chuàng)建組件”的快捷鍵，每次都要在左上角位置點一下實在麻煩。這個時候，我們可以利用Mac的添加自定義快捷鍵。

定義【創(chuàng)建組件】快捷鍵步驟：

1、左上角蘋果小圖標 >系統(tǒng)偏好設置 >鍵盤 >快捷鍵 >應用快捷鍵

2、點擊中間的“+”號鍵，添加新的快捷鍵 -- 如下圖選擇要創(chuàng)建快捷鍵的軟件，輸入快捷鍵標題，點擊添加按鈕即可完成。

特別注意：此標題必須與 Sketch 中所對應的功能名稱一致。比如【創(chuàng)建組件】功能，因為我是Sketch 54.1中文版本，所以標題就是“創(chuàng)建組件”，如果是54以下的英文版本，那么標題應是“Create Symbol”，千萬不能錯哦。

我習慣將【創(chuàng)建組件】快捷鍵設置為：command+，因為“"就在 “Enter” 鍵的上方，方便創(chuàng)建組件的時候摁 Enter 快速確認。

本文文字非常少，圖片非常多，目的是想告訴大家實操的重要性。看一百遍不如自己去做一遍。把源文件分享出來是想給大家做一個參考拋磚引玉，千萬不要只是存在網(wǎng)盤自我安慰，動起來吧！

下載方式：掃描并關(guān)注下圖公眾號回復：uikit2 ，可免費獲得 (請勿輸入空格)

最后，祝大家工作都能事半功倍～

原作者：宛蘇