作為以 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 ,可免費獲得 (請勿輸入空格)
最后,祝大家工作都能事半功倍~
原作者:宛蘇
全站高品質(zhì)素材免費下載!