如何製作可復用iOS/Material Design元件庫？

閱讀這篇文章你可以得到哪些？

1.iOS和Material Design(簡稱MD)元件庫下載

2.通過源文件學習iOS和MD兩大設計規範的組件控制項體系

3.如何通過Axure元件庫提高效率

文章大綱：

1.統一可復用元件庫價值

2.iOS和MD元件庫使用範圍及下載地址

3.如何製作統一可復用的Axure元件庫

4.如何使用統一可復用的Axure元件庫

5.通過源文件，學習iOS和MD兩大設計規範的組件控制項體系

1.統一可復用元件庫價值

1.統一產品的用戶體驗：涉及到多個交互設計師/PM協同時，如果各個交互設計師/PM沒有使用統一的元件時，會出現同一種類型不同的組件設計。視覺設計師最終沒有強行統一，那麼實現稿就會出現各個各樣相似的組件。

2.提升工作效率：有了統一的axure元件庫，交互設計師/PM可以快速根據元件庫搭建界面，從整體的產品設計到開發流程環節提升效率，避免重新性工作。

3.提升設計綜合能力：由於減少了做組件重複性勞動，交互設計師/PM 可以將更多時間和精力放在討論業務、設計方法、設計思維、定義產品等綜合能力方面。從而驅動業務產品創新。

2.iOS和MD元件庫使用範圍及下載地址

作者製作的元件庫基本包含了兩個系統的所有常用組件控制項，適用於移動端絕大部分設計場景。同時所有元件都可再修改，方便大家使用。

由於我製作的元件庫是將一個組件多種類型全部羅列出來（保證組件的全面完整性），設計團隊為了統一性可定義某種使用場景用某種組件中的某一類。

下載方式

1.百度網盤：https://pan.baidu.com/s/1jIACRHW 提取碼 8des

2.微云：https://share.weiyun.com/f8bad9b61f5b042bc2820da6f173020c 提取碼 4UnbpN

3.如何製作統一可復用的Axure元件庫

1.打開Axure軟體，在元件庫面板中，點擊快捷菜單按鈕，選擇「創建元件庫」，如下圖所示：

2. 選擇了「創建元件庫」後，就會彈出一個界面，你需要選擇一下元件庫的保存路徑。注意元件庫的格式為：rplib

3. 在元件庫創建頁面中，操作跟平時使用Axure沒什麼區別，一個頁面就是一種類型的元件，不要把所有元件都創建在一個頁面里。

4.製作一套元整的MD和iOS元件庫，需要熟知MD和iOS設計規範，然後綜合設計經驗來製作一套全面和可復用的元件。以下為元件庫的部分內容：

MD的菜單(Menu)

MD的底部動作條(bottom sheets)和iOS的操作列表(action sheet）

iOS 的toast和MD的snackbar

iOS 的搜索欄和MD的搜索欄

iOS的警告對話框(alert)和MD的對話框(dialog）

MD的導航欄和iOS 的導航欄

4.如何使用統一可復用的Axure元件庫

打開Axure軟體，在元件庫面板中，點擊快捷菜單按鈕，選擇「載入元件庫」，選擇對應的元件庫即可。

5.通過源文件，學習iOS和MD兩大設計規範的組件控制項體系

通過iOS和MD的元件庫的源文件的站點地圖，即可掌握兩大系統的組件控制項目錄體系，查看每個組件控制項樣式可快速掌握兩大設計規範的組件控制項使用方法。

例如查看源文件的iOS的警告對話框(alert)和MD的對話框(dialog）的組件細節可快速掌握兩大規範的兩種組件的用法等。

文章來自公眾號：UEDC

·End·

微交互 ∣細節設計成就卓越產品

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！