設計師常面臨一個很現(xiàn)實的問題──提高效率。當項目比較緊急或者比較龐大時，我們通常會通過團隊協(xié)作來完成。今天就為大家推薦一個讓團隊協(xié)作事半功倍的方法──建立 UIKit ，另外還有兩個提高效率的小技巧。

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

通用圖標

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

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

彈框-Toast

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

按鈕-Butten

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

列表

列表在 APP 中的使用頻率非常高，我們可以按行數(shù)將他們劃分制成復用控件。

1. 單行列表

2. 雙行列表

3. 多行列表

4. 卡片列表

導航欄

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

標簽欄

標簽欄也一樣。

對話框-Dialog

選擇彈框

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

再給大家推薦一個重量級的炸彈，真的是很好用，那就是 Sketch 的 Symbol Organizer 插件。

Symbol Organizer 簡稱，組件組織者。它可以根據(jù)命名給 Symbols 分類，可以檢查命名是否有錯誤和不合理的地方。

Symbol Organizer使用步驟

進入 「組件」頁面：

插件 > Symbol Organizer > Configure Symbol Organizer：

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

查到了錯誤的命名：

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

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

1. 定義「創(chuàng)建組件」快捷鍵步驟

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

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

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

我習慣將「創(chuàng)建組件」快捷鍵設置為：command+\，因為「\」就在 「Enter」 鍵的上方，方便快捷。

本文文字非常少，圖片非常多，目的是想告訴大家實操的重要性，看一百遍不如自己去做一遍。

歡迎關注作者的微信公眾號：「宛蘇」