超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

echo:文章對制作統一可復用的Axure元件庫方法進行了相關的分享,希望對你有所受用。

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

  • iOS和Material Design(簡稱MD)元件庫下載。
  • 通過源文件學習iOS和MD兩大設計規范的組件控件體系。
  • 如何通過Axure元件庫提高效率。

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

下載地址:http://pan.baidu.com/s/1bpGqPcF

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

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

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

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

二. 如何制作統一可復用的Axure元件庫

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

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

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

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

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

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

制作一套完整的MD和iOS元件庫,需要熟知MD和iOS設計規范,然后綜合我們的設計經驗來制作一套全面和常用的元件。以下為元件庫的部分內容:

MD的菜單(Menu)

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

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

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

iOS的Toast和MD的Snackbar

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

iOS的搜索欄和MD的搜索欄

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

iOS的警告對話框(Alert)和MD的對話框(Dialog)

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

MD的導航欄和iOS的導航欄

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

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

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

四. 通過源文件,學習iOS和MD兩大設計規范的組件控件體系

通過iOS和MD的元件庫的源文件的站點地圖,即可掌握兩大系統的組件控件目錄體系,查看每個組件控件可以快速掌握兩大設計規范的組件控件體系。

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

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

超實用!如何制作統一可復用iOS/Material Design元件庫?(附源文件)

「寫給設計師的組件體系知識」


【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================明星欄目推薦================

優優教程網 UiiiUiii.com是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com

收藏 30
點贊 2

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