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

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

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

通用圖標

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

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

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

彈框-Toast

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

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

按鈕-Butten

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

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

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

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

列表

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

1. 單行列表

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

2. 雙行列表

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

3. 多行列表

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

4. 卡片列表

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

導航欄

通常一個產品會有多種導航欄樣式。

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

標簽欄

標簽欄也一樣。

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

對話框-Dialog

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

選擇彈框

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

以上是我整理的一些通用的基礎樣式,大家可根據自己的實際情況編寫。

再給大家推薦一個重量級的炸彈,真的是很好用,那就是 Sketch 的 Symbol Organizer 插件。

Symbol Organizer 簡稱,組件組織者。它可以根據命名給 Symbols 分類,可以檢查命名是否有錯誤和不合理的地方。

Symbol Organizer使用步驟

進入 「組件」頁面:

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

插件 > Symbol Organizer > Configure Symbol Organizer:

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

組織后的 Symbols 如下圖,非常整齊:

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

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

查到了錯誤的命名:

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

最后,整理組件并確認無誤后,就可以把 UIKit 發給各位同事,讓他們加入自己的 Sketch 組件庫/Library 就可以進行復用了。

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

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

1. 定義「創建組件」快捷鍵步驟

左上角蘋果小圖標 >系統偏好設置 >鍵盤 >快捷鍵 >應用快捷鍵:

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

點擊中間的「+」號鍵,添加新的快捷鍵,如下圖選擇要創建快捷鍵的軟件,輸入快捷鍵標題,點擊添加按鈕即可完成。

特別注意:此標題必須與 Sketch 中所對應的功能名稱一致。比如「創建組件」功能,因為我是 Sketch 54.1 中文版本,所以標題就是「創建組件」,如果是 54 以下的英文版本,那么標題應是「Create Symbol」,千萬不能錯哦。

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

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

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

我習慣將「創建組件」快捷鍵設置為:command+\,因為「\」就在 「Enter」 鍵的上方,方便快捷。

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

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

歡迎關注作者的微信公眾號:「宛蘇」

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

收藏 272
點贊 5

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。