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

今天就為大家推薦一個讓設(shè)計(jì)團(tuán)隊(duì)協(xié)作事半功倍的方法 -- 建立UIKit 。另外還會分享兩個提高效率的小技巧。(文末附源文件分享）

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

通用圖標(biāo)

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

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

彈框-Toast

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

按鈕-Butten

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

列表

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

單行列表

雙行列表

多行列表

卡片列表

導(dǎo)航欄

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

標(biāo)簽欄

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

對話框-Dialog

選擇彈框

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

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

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

Symbol Organizer 使用步驟：

1、進(jìn)入 【組件】 頁面

2、插件 > Symbol Organizer > Configure Symbol Organizer

（勾選圖中選項(xiàng)）

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

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

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

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

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

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

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

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

（英文版本“創(chuàng)建組件”功能名稱）

（中文版本“創(chuàng)建組件”功能名稱）

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

本文文字非常少，圖片非常多，目的是想告訴大家實(shí)操的重要性?？匆话俦椴蝗缱约喝プ鲆槐?。源文件下載請

掃描關(guān)注下圖公眾號回復(fù)：UIKit8，免費(fèi)獲得。

原創(chuàng)： 宛蘇