如何制作統(tǒng)一可復(fù)用iOS/Material Design元件庫?(附源文件)

UX
8 評論 21801 瀏覽 100 收藏 6 分鐘

文章對制作統(tǒng)一可復(fù)用的Axure元件庫方法進(jìn)行了相關(guān)的分享,希望對你有所受用。

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

  1. iOS和Material Design(簡稱MD)元件庫下載
  2. 通過源文件學(xué)習(xí)iOS和MD兩大設(shè)計(jì)規(guī)范的組件控件體系
  3. 如何通過Axure元件庫提高效率

1.統(tǒng)一可復(fù)用元件庫價值

1.統(tǒng)一產(chǎn)品的用戶體驗(yàn):涉及到多個交互設(shè)計(jì)師/產(chǎn)品經(jīng)理協(xié)同時,如果各個交互設(shè)計(jì)師/PM沒有使用統(tǒng)一的元件時,會出現(xiàn)同一種類型不同的組件設(shè)計(jì)。視覺設(shè)計(jì)師最終沒有強(qiáng)行統(tǒng)一,那么實(shí)現(xiàn)稿就會出現(xiàn)各個各樣相似的組件。

2.提升工作效率:有了統(tǒng)一的axure元件庫,交互設(shè)計(jì)師/PM可以快速根據(jù)元件庫搭建界面,從整體的產(chǎn)品設(shè)計(jì)到開發(fā)流程環(huán)節(jié)提升效率,避免重新性工作。

3.提升設(shè)計(jì)綜合能力:由于減少了做組件重復(fù)性勞動,交互設(shè)計(jì)師/PM 可以將更多時間和精力放在討論業(yè)務(wù)、設(shè)計(jì)方法、設(shè)計(jì)思維、定義產(chǎn)品等綜合能力方面。從而驅(qū)動業(yè)務(wù)產(chǎn)品創(chuàng)新。

3.如何制作統(tǒng)一可復(fù)用的Axure元件庫

1.打開Axure軟件,在元件庫面板中,點(diǎn)擊快捷菜單按鈕,選擇“創(chuàng)建元件庫”,如下圖所示:

2. 選擇了“創(chuàng)建元件庫”后,就會彈出一個界面,你需要選擇一下元件庫的保存路徑。注意元件庫的格式為:rplib

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

4.制作一套元整的MD和iOS元件庫,需要熟知MD和iOS設(shè)計(jì)規(guī)范,然后綜合我們的設(shè)計(jì)經(jīng)驗(yàn)來制作一套全面和經(jīng)常的元件。以下為元件庫的部分內(nèi)容:

MD的菜單(Menu)

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

iOS 的toast和MD的snackbar

iOS的搜索欄和MD的搜索欄

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

MD的導(dǎo)航欄和iOS 的導(dǎo)航欄

4.如何使用統(tǒng)一可復(fù)用的Axure元件庫

打開Axure軟件,在元件庫面板中,點(diǎn)擊快捷菜單按鈕,選擇“載入元件庫”,選擇對應(yīng)的元件庫即可。

5.通過源文件,學(xué)習(xí)iOS和MD兩大設(shè)計(jì)規(guī)范的組件控件體系

通過iOS和MD的元件庫的源文件的站點(diǎn)地圖,即可掌握兩大系統(tǒng)的組件控件目錄體系,查看每個組件控件可以快速掌握兩大設(shè)計(jì)規(guī)范的組件控件體系。

例如查看源文件的iOS的警告對話框(alert)和MD的對話框(dialog)的組件細(xì)節(jié)可快速掌握兩大規(guī)范的兩種組件的用法等.

附:iOS和MD元件庫包含的內(nèi)容及下載地址

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

下載方式:

1.百度網(wǎng)盤:https://pan.baidu.com/s/1jIACRHW ? ?提取碼 8des

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

 

本文由 @UX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享

    來自湖北 回復(fù)
  2. 元件庫新鏈接: https://pan.baidu.com/s/1pRYOFeOlUr6YRqn4pR179g 密碼: 94kf

    來自北京 回復(fù)
  3. 云盤鏈接失效,求再分享個

    來自江蘇 回復(fù)
    1. 元件庫新鏈接: https://pan.baidu.com/s/1pRYOFeOlUr6YRqn4pR179g 密碼: 94kf

      來自北京 回復(fù)
  4. 云盤的文件失效了 能否分享到郵箱2857140503@qq.com 謝謝

    來自廣東 回復(fù)
    1. 沒有失效的。我剛剛試過

      來自廣東 回復(fù)
    2. 元件庫新鏈接: https://pan.baidu.com/s/1pRYOFeOlUr6YRqn4pR179g 密碼: 94kf

      來自北京 回復(fù)