pk10计划人工在线计划歡迎您的到來!

讓團隊效率大幅提高!從零開始教你制作 UIKit! - 優設網 - UISDC

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

2019/09/23 6520評論 6

設計師常面臨一個很現實的問題──提高效率。當項目比較緊急或者比較龐大時,我們通常會通過團隊協作來完成。今天就為大家推薦一個讓團隊協作事半功倍的方法──建立 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」 鍵的上方,方便快捷。

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

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

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.wzizw.tw/ui-kit-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

pk10计划人工在线计划 五分快3全天计划 新浪3分彩全天计划 极速赛车人工计划两期 极速赛车技巧计划网址