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

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

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

1、通用圖標(biāo)

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

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

2、彈框-Toast

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

3、按鈕-Butten

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

4、列表

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

單行列表

雙行列表

多行列表

卡片列表

5、導(dǎo)航欄

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

6、標(biāo)簽欄

標(biāo)簽欄也一樣。

7、對話框-Dialog

8、選擇彈框

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

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

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

Symbol Organizer 使用步驟：

1、進入 【組件】 頁面

2、插件 > Symbol Organizer > Configure Symbol Organizer

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

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

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

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

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

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

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

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

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

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

本文文字非常少，圖片非常多，目的是想告訴大家實操的重要性?？匆话俦椴蝗缱约喝プ鲆槐?。把源文件分享出來是想給大家做一個參考拋磚引玉，千萬不要只是存在網(wǎng)盤自我安慰，動起來吧！

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

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

原作者：宛蘇