您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

超實(shí)用!如何制作同一可復(fù)用iOSMaterial Design元件庫?附源文件 ... ... ...

echo:文章對(duì)制作同一可復(fù)用的Axure元件庫方法進(jìn)行了相干的分享,盼望對(duì)你有所受用。

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

  • iOS和Material Design(簡稱MD)元件庫下載。
  • 通過源文件學(xué)習(xí)iOS和MD兩大設(shè)計(jì)規(guī)范的組件控件系統(tǒng)。
  • 如何通過Axure元件庫進(jìn)步服從。

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

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

一. 同一可復(fù)用元件庫價(jià)值

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

提拔工作服從:有了同一的axure元件庫,交互設(shè)計(jì)師/PM可以快速根據(jù)元件庫搭建界面,從團(tuán)體的產(chǎn)品設(shè)計(jì)到開發(fā)流程環(huán)節(jié)提拔服從,避免重復(fù)性工作。

提拔設(shè)計(jì)綜合能力:因?yàn)橄鳒p了做組件重復(fù)性勞動(dòng),交互設(shè)計(jì)師/PM 可以將更多時(shí)間和精力放在討論營業(yè)、設(shè)計(jì)方法、設(shè)計(jì)思維、定義產(chǎn)品等綜合能力方面。從而驅(qū)動(dòng)營業(yè)產(chǎn)品創(chuàng)新。

二. 如何制作同一可復(fù)用的Axure元件庫

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

選擇了「創(chuàng)建元件庫」后,就會(huì)彈出一個(gè)界面,你必要選擇一下元件庫的保存路徑。細(xì)致元件庫的格式為:rplib。

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

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

MD的菜單(Menu)

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

iOS的Toast和MD的Snackbar

iOS的搜索欄和MD的搜索欄

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

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

三. 如何使用同一可復(fù)用的Axure元件庫

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

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

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

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

迎接關(guān)注作者的微信公眾號(hào):「UEDC」



[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di3911.html
沒經(jīng)驗(yàn)沒思路?最常用的電商Banner 設(shè)計(jì)套路都在這兒了!
用一個(gè)圖形,幫你學(xué)會(huì)6個(gè)最流行的設(shè)計(jì)風(fēng)格
圖趣網(wǎng)微信
建議反饋
×