設計師常面臨一個很現實的問題──提高效率。當項目比較緊急或者比較龐大時,我們通常會通過團隊協作來完成。今天就為大家推薦一個讓團隊協作事半功倍的方法──建立 UIKit ,另外還有兩個提高效率的小技巧。
UIKit 是控制項樣式的組合,設計師在工作中只需要複製和拖動,不必重複繪製和單獨設計,節省了大家的時間。需要說明的是,它不是設計規範,設計規範文檔是最全的文檔,它闡述設計規則、基礎規範以及控制項規範和使用規則。主要給設計師閱讀和理解的,而 UIKit 是給設計師直接使用的。
通用圖標
整理項目中可復用的圖標,如提示性的小紅點、刪除圖標、搜索圖標、複選圖標、開關控制項、排序圖標、成功圖標、失敗圖標、警示圖標等等。按照一定的規則進行命名,以便於後期查找和使用。
如命名規則:小圖標/數字小紅點、小圖標/多選/可操作、小圖標/多選/不可操作、大圖標/成功、大圖標/失敗等等。大家可根據自己的實際需求決定如何命名。
彈框-Toast
加載成功、失敗、正在加載等的 Toast 小提示。比如「驗證碼失敗」的小提示,都是可復用的控制項。
按鈕-Butten
按鈕是 APP 中最常見的控制項了,所以一定是可復用的。我們可以按照長度和不同的操作狀態進行分類,如下:
列表
列表在 APP 中的使用頻率非常高,我們可以按行數將他們劃分製成復用控制項。
1. 單行列表
2. 雙行列表
3. 多行列表
4. 卡片列表
導航欄
通常一個產品會有多種導航欄樣式。
標籤欄
標籤欄也一樣。
對話框-Dialog
選擇彈框
以上是我整理的一些通用的基礎樣式,大家可根據自己的實際情況編寫。
再給大家推薦一個重量級的炸彈,真的是很好用,那就是 Sketch 的 Symbol Organizer 插件。
Symbol Organizer 簡稱,組件組織者。它可以根據命名給 Symbols 分類,可以檢查命名是否有錯誤和不合理的地方。
Symbol Organizer使用步驟
進入 「組件」頁面:
插件 > Symbol Organizer > Configure Symbol Organizer:
組織後的 Symbols 如下圖,非常整齊:
查到了錯誤的命名:
最後,整理組件並確認無誤後,就可以把 UIKit 發給各位同事,讓他們加入自己的 Sketch 組件庫/Library 就可以進行復用了。
這裡還有一個小技巧分享給大家:做 UIKit 的過程中需要不斷創建組件/Create Symbol,而 Sketch 軟體並沒有「創建組件」的快捷鍵,每次都要在左上角位置點一下實在麻煩。這個時候,我們可以利用 Mac 的添加自定義快捷鍵。
1. 定義「創建組件」快捷鍵步驟
左上角蘋果小圖標 >系統偏好設置 >鍵盤 >快捷鍵 >應用快捷鍵:
點擊中間的「+」號鍵,添加新的快捷鍵,如下圖選擇要創建快捷鍵的軟體,輸入快捷鍵標題,點擊添加按鈕即可完成。
特別注意:此標題必須與 Sketch 中所對應的功能名稱一致。比如「創建組件」功能,因為我是 Sketch 54.1 中文版本,所以標題就是「創建組件」,如果是 54 以下的英文版本,那麼標題應是「Create Symbol」,千萬不能錯哦。
我習慣將「創建組件」快捷鍵設置為:command+\\,因為「\\」就在 「Enter」 鍵的上方,方便快捷。
本文文字非常少,圖片非常多,目的是想告訴大家實操的重要性,看一百遍不如自己去做一遍。