讓團隊效率大幅提高!從零開始教你製作 UIKit

2019-09-26     JPL設計小站

設計師常面臨一個很現實的問題──提高效率。當項目比較緊急或者比較龐大時,我們通常會通過團隊協作來完成。今天就為大家推薦一個讓團隊協作事半功倍的方法──建立 UIKit ,另外還有兩個提高效率的小技巧。

UIKit 是控制項樣式的組合,設計師在工作中只需要複製和拖動,不必重複繪製和單獨設計,節省了大家的時間。需要說明的是,它不是設計規範,設計規範文檔是最全的文檔,它闡述設計規則、基礎規範以及控制項規範和使用規則。主要給設計師閱讀和理解的,而 UIKit 是給設計師直接使用的。

通用圖標

整理項目中可復用的圖標,如提示性的小紅點、刪除圖標、搜索圖標、複選圖標、開關控制項、排序圖標、成功圖標、失敗圖標、警示圖標等等。按照一定的規則進行命名,以便於後期查找和使用。

如命名規則:小圖標/數字小紅點、小圖標/多選/可操作、小圖標/多選/不可操作、大圖標/成功、大圖標/失敗等等。大家可根據自己的實際需求決定如何命名。

彈框-Toast

加載成功、失敗、正在加載等的 Toast 小提示。比如「驗證碼失敗」的小提示,都是可復用的控制項。

按鈕-Butten

按鈕是 APP 中最常見的控制項了,所以一定是可復用的。我們可以按照長度和不同的操作狀態進行分類,如下:

列表

列表在 APP 中的使用頻率非常高,我們可以按行數將他們劃分製成復用控制項。

1. 單行列表

讓團隊效率大幅提高!從零開始教你製作 UIKit

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」 鍵的上方,方便快捷。

本文文字非常少,圖片非常多,目的是想告訴大家實操的重要性,看一百遍不如自己去做一遍。

文章來源: https://twgreatdaily.com/zh/qC-9lm0BMH2_cNUglJAt.html