從零開始學(xué)Axure原型設(shè)計(入門篇)
如果說Sketch是最美、最簡潔的設(shè)計軟件,那么Axure就是最強(qiáng)大的原型制作軟件。Axure不僅能制作靜態(tài)的視覺稿、頁面,還能添加交互動作,是進(jìn)行原型設(shè)計的最佳軟件之一。雖然Axure的學(xué)習(xí)曲線比較陡峭,但是掌握之后可以很快實(shí)現(xiàn)我們腦海中的用戶體驗(yàn)效果。
Axure 8.0
筆者自學(xué)Axure有半年多的時間了。剛開始接觸Axure的時候,逛過無數(shù)論壇、Axure的網(wǎng)站,也瀏覽了許多大牛錄制的Axure視頻課程。這些教程和資料非常完整地介紹了這款軟件能夠做什么,這款軟件的界面如何,怎么樣使用部件,如何創(chuàng)建交互等。但是在自學(xué)過程中,如何掌握學(xué)習(xí)的先后次序從而達(dá)到最佳的學(xué)習(xí)效果這方面我走了很多彎路。
寫這篇文章就是想總結(jié)一路走來的經(jīng)驗(yàn)教訓(xùn),并且跟大家分享如何快速掌握Axure這款軟件的使用,以及如何將自己的想法通過這款軟件來實(shí)現(xiàn),從而構(gòu)建起自己使用這款軟件的方法。希望對大家有幫助。
從零開始學(xué)Axure原型設(shè)計(入門篇)
在入門篇中,主要講解Axure的界面布局和部件庫的使用。
快速入門Axure界面
Axure界面,圖片來自網(wǎng)絡(luò)
- 工具欄:類似office軟件,可以對字體大小、背景填充、圖形寬高以及位于工作區(qū)的位置(X\Y軸)進(jìn)行修改;
- 工作區(qū):繪制產(chǎn)品原型的操作區(qū)域,所有的用到的元件都直接拖拽到里面就好了。
- 頁面導(dǎo)航:可以通過鼠標(biāo)拖動調(diào)整頁面順序以及頁面之間的關(guān)系,雙擊可以重命名。
- 部件庫:也叫組件庫或元件庫,所有軟件自帶的元件和加載的元件庫都在這里,這里可以執(zhí)行創(chuàng)建、加載、刪除axure元件庫的操作,也可以根據(jù)需求顯示全部元件或某一元件庫的元件。大家可以點(diǎn)擊放大鏡圖標(biāo),搜索自己需要的部件。
- 母版:這里可以創(chuàng)建重復(fù)出現(xiàn)在每一個頁面的元素,這樣在制作時就不用再重復(fù)這些操作。通常用于頁面頭部、菜單欄等的制作。
- 頁面交互:這里可以設(shè)置當(dāng)前頁面的樣式,添加與該頁面有關(guān)的注釋,以及設(shè)置頁面加載時觸發(fā)的事件onpageload。
- 部件交互:這里可以設(shè)置選中元件的標(biāo)簽、樣式,添加與該元件有關(guān)的注釋,以及設(shè)置頁面加載時觸發(fā)的事件。閃電樣式的小圖標(biāo)代表交互事件。
部件庫的構(gòu)成
了解部件庫的使用是Axure的基礎(chǔ),下面我們就來梳理一下Axure中的常用部件:
Axure部件庫
部件使用易錯點(diǎn)
關(guān)于部件庫的使用,新手特別容易出錯的有以下幾點(diǎn):
- 圖片:圖片拖拽進(jìn)畫布時如果選擇“壓縮圖片大小”,gif文件會變成靜態(tài)的圖片形式。
- 圖片熱區(qū):圖片熱區(qū)可以用來創(chuàng)建自定義按鈕上的點(diǎn)擊區(qū)域。例如在一個區(qū)域中,既有圖片部件又有文字部件,我們只需在這些部件上面覆蓋一個圖片熱區(qū)并添加一次事件即可,無需在每個部件上都添加事件。反之,如果你想給一張圖片上添加多個交互,也可以給圖片的部分區(qū)域覆蓋一塊熱區(qū)來實(shí)現(xiàn)。
- 動態(tài)面板滾動欄:使用滾動欄給你的動態(tài)面板添加可滾動內(nèi)容,在動態(tài)面板屬性面板中選擇,滾動欄下拉菜單并選擇滾動欄的顯示方式,為了讓滾動欄正常顯示,動態(tài)面板狀態(tài)內(nèi)中的內(nèi)容必須比動態(tài)面板的邊界輪廓大,并且不能勾選調(diào)整大小以適合內(nèi)容。
- 內(nèi)部框架:你可以給內(nèi)部框架的屬性選項(xiàng)框中添加Axure內(nèi)置的預(yù)覽圖片,如視頻、地圖,也可以自定義預(yù)覽圖片。注意:預(yù)覽圖片會在設(shè)計區(qū)域中顯示,但不會在生成的原型中顯示。
- 列表選擇框:在一個交互事件中同時讀取或設(shè)置多個選項(xiàng)時,列表選擇框部件只允許你讀取或設(shè)置一個選項(xiàng),即便你勾選了多選功能。
- 提交按鈕:提交按鈕無法設(shè)置交互樣式,如:選中/鼠標(biāo)懸停/鼠標(biāo)按下。提交按鈕的填充顏色、邊框顏色和其他大多數(shù)樣式格式都被禁用了。取而代之的是生成原型后在瀏覽器中它會使用內(nèi)建的樣式。如果你想自定義你的按鈕樣式,請使用形狀按鈕“Shape button”。
- 菜單部件:無法點(diǎn)擊展開子菜單。菜單部件默認(rèn)是鼠標(biāo)懸停展示子菜單的。
特別提醒大家,在創(chuàng)建部件時,一定要養(yǎng)成給部件命名的習(xí)慣,因?yàn)闊o論是創(chuàng)建交互事件還是進(jìn)行變量調(diào)用,都需要明確部件的名稱。目前我使用的命名方法是“頁面名稱+部件功能”。
現(xiàn)在就去下載Axure,自己玩一遍這些萌萌的部件吧!在認(rèn)識了部件庫和界面之后,我們就可以自己用Axure畫線框圖了。
#專欄作家#
粽小喵,微信公眾號:zong_xiaomiao,人人都是產(chǎn)品經(jīng)理專欄作家。騰訊產(chǎn)品經(jīng)理。一個學(xué)傳播出身的產(chǎn)品新人,愛好研究原型設(shè)計工具。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。
ヾ(????)???~
感謝分享鴨~ ??
學(xué)習(xí)下
??
求部件庫的構(gòu)成的這個導(dǎo)圖的軟件
??
我也是學(xué)傳播學(xué)的耶,想做產(chǎn)品!看到你,我信心大增?。?! ?? ?? ?? 請繼續(xù)加油~
需求文檔是不是就可以用這玩意搞定了???
nice