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

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

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

1、通用圖標(biāo)

整理項(xiàng)目中可復(fù)用的圖標(biāo)，如提示性的小紅點(diǎn)、刪除圖標(biāo)、搜索圖標(biāo)、復(fù)選圖標(biāo)、開(kāi)關(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í)際需求決定如何命名。

2、彈框-Toast

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

3、按鈕-Butten

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

4、列表

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

單行列表

雙行列表

多行列表

卡片列表

5、導(dǎo)航欄

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

6、標(biāo)簽欄

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

7、對(duì)話框-Dialog

8、選擇彈框

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

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

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

Symbol Organizer 使用步驟：

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

2、插件 > Symbol Organizer > Configure Symbol Organizer

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

4、哈哈，真的查到了錯(cuò)誤的命名，真的是非常開(kāi)心了～

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

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

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

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

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

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

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

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

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

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

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

原作者：宛蘇