關(guān)于提升Axure使用效率的幾個(gè)小技巧
編輯導(dǎo)語:Axure 是創(chuàng)建軟件原型的快速有力的工具,然而對(duì)于很對(duì)用戶來說,他們可能沒有接受過正式的培訓(xùn),不知道如何以恰當(dāng)?shù)姆绞絹砀行实氖褂胊xure。基于此,本文作者為大家總結(jié)了幾個(gè)能夠提升Axure使用效率的小技巧,希望看后對(duì)你有所幫助。
學(xué)習(xí)了解軟件的過程,價(jià)值遠(yuǎn)遠(yuǎn)大于使用它的過程。
一般來講,在不考慮動(dòng)效交互或是文本交互,比如文本輸入、單選復(fù)選、下拉等等,通過矩形這一個(gè)系統(tǒng)組件基本上就能夠完成產(chǎn)品原型的制作,包括PRD文檔。
在Default→Common類別下的絕大多數(shù)組件,例如文本,段落、標(biāo)題,按鈕等等,都是由矩形通過樣式調(diào)整得來,以便輔助我們能夠更加快速的創(chuàng)建原型。
而像動(dòng)態(tài)面板、中繼器、內(nèi)聯(lián)框架等組件,看似我們并不常用,實(shí)則非常有用;如果使用得當(dāng)不僅可以進(jìn)一步的提高我們的工作效率,讓我們更快更好的創(chuàng)建原型,而且還能讓我們創(chuàng)建出的原型更加的便于維護(hù)管理且易于復(fù)用。
接來下我會(huì)分享一些我在日常工作中總結(jié)的實(shí)用技巧,如果有哪些內(nèi)容不甚理解,可以在文章下方留言,我會(huì)根據(jù)情況,結(jié)合這些技巧輸出一些簡(jiǎn)單案例的教程,來幫助大家更好地理解。
一、合理使用Style【樣式】精簡(jiǎn)原型Widget【組件】,降低維護(hù)管理成本
組件越少,意味著你的頁面結(jié)構(gòu)越簡(jiǎn)單,也就越容易進(jìn)行頁面內(nèi)容的調(diào)整。
越是復(fù)雜的組件,尤其是列表單元格,越是建議做這樣的處理。
二、合理的使用Dynamic Panel【動(dòng)態(tài)面板】,方便對(duì)頁面的結(jié)構(gòu)進(jìn)行層次管理
動(dòng)態(tài)面板是一個(gè)具有層級(jí)結(jié)構(gòu)的容器組件,可以對(duì)頁面內(nèi)的組件進(jìn)行層級(jí)管理。
同時(shí)位于其內(nèi)部的組件坐標(biāo)值不會(huì)受外部的坐標(biāo)軸影響,配合特定的交互事件:Pin to Browser【固定到瀏覽器】,會(huì)讓頁面的布局或動(dòng)態(tài)面板的展示變得更加簡(jiǎn)單。
原型頁面間的層級(jí)結(jié)構(gòu),不建議使用動(dòng)態(tài)面板。
三、合理的使用Master【母版】,減少重復(fù)性設(shè)計(jì)
母版適用與結(jié)構(gòu)一致且重復(fù)的組件,比如列表單元格,但其實(shí)小到一個(gè)按鈕,大到一個(gè)具有完整功能的復(fù)合組件模塊,都可以依據(jù)使用場(chǎng)景將其轉(zhuǎn)換為母版。
Axure9新增了覆寫的功能,可以在母版上直接修改文本及替換圖片,需要注意的是:
- 覆寫的文本無法自適應(yīng),會(huì)依賴與母版內(nèi)部組件的樣式設(shè)置;如果一個(gè)矩形或文本中有不同樣式的文本,覆寫的文本會(huì)以第一個(gè)字(包括空格)的樣式為主(包括空格),如果使用母版的覆寫功能,則內(nèi)部組件的設(shè)計(jì)不建議做簡(jiǎn)化處理;
- 未填寫文本的矩形或是圖片無法進(jìn)行文本覆寫;
- 覆寫了數(shù)據(jù)的母版在脫離母版時(shí),內(nèi)部組件會(huì)被覆寫的文本或圖片替換。
母版中組件的結(jié)構(gòu)、樣式或是內(nèi)容發(fā)生變動(dòng)時(shí),所有引用該母版的頁面都會(huì)發(fā)生變動(dòng)(文本或圖片被覆寫,則不會(huì)發(fā)生變動(dòng))。
如果母版的尺寸調(diào)整較大,比如大于或小于原尺寸,引用該母版的頁面需要手動(dòng)調(diào)整,避免頁面結(jié)構(gòu)發(fā)生錯(cuò)亂,如果要使用母版,一定要避免這種情況的發(fā)生。
四、合理的使用Repeater【中繼器】進(jìn)行排版,提高工作效率
中繼器簡(jiǎn)而言之,就是一個(gè)整合了界面、邏輯和小型數(shù)據(jù)庫的一個(gè)復(fù)合組件,在改進(jìn)和個(gè)性化定制界面及用戶交互的同時(shí),不需要重新編寫業(yè)務(wù)邏輯,有興趣的同學(xué)可以了解一下MVC框架。
很多產(chǎn)品經(jīng)理并不是非常喜歡使用中繼器這個(gè)組件,要么覺得復(fù)雜,要么覺得沒必要(現(xiàn)有功能已經(jīng)足夠)。
然而如果拋開對(duì)數(shù)據(jù)集進(jìn)行CRUD等復(fù)雜交互操作,只是將其應(yīng)用于排版和頁面設(shè)計(jì),這個(gè)組件其實(shí)并沒有多么的復(fù)雜,熟練掌握后還會(huì)在很大程度上提升自己的工作效率。
中繼器的合理使用,會(huì)讓頁面中大量重復(fù)的組件被精簡(jiǎn),更加便于原型的維護(hù)管理與修改。
如果對(duì)數(shù)據(jù)的增刪改查(CRUD)等操作感興趣,也可以深度的學(xué)習(xí)一下中繼器這個(gè)組件,可以簡(jiǎn)單培養(yǎng)一下自己的技術(shù)思維。實(shí)際工作中,如果不喜歡使用中繼器去創(chuàng)建列表頁,則列表項(xiàng)不需要制作很多,結(jié)構(gòu)為主,示意為輔。
五、合理的設(shè)置Interactions【交互事件】,提升組件的復(fù)用性
其實(shí)除了常用的點(diǎn)擊跳轉(zhuǎn),其他的交互基本上很少用,對(duì)于新人來講,通過Axure學(xué)習(xí)和實(shí)現(xiàn)一些特殊的交互事件,是一種鍛煉邏輯思維很好的方式方法。
在我們?cè)O(shè)計(jì)交互原型時(shí),會(huì)隱藏一些組件,在特定的交互動(dòng)作下觸發(fā)后顯示,我們常用的方式是直接隱藏該組件,但這種方式并不便于我們對(duì)其進(jìn)行維護(hù)管理,所以我們可以像下面這么處理。
在交互事件的設(shè)置上,最好結(jié)構(gòu)清晰,同時(shí)也可以考慮如何創(chuàng)建便于擴(kuò)展的交互事件。
以上兩種方式都可以實(shí)現(xiàn)我們想要的效果,為什么建議采用后者,有興趣的可以嘗試做一下以下例子,看看以哪種方式更加簡(jiǎn)單,但關(guān)于交互的設(shè)置還是以個(gè)人習(xí)慣為主。
六、合理的使用Inline Frame【內(nèi)聯(lián)框架】,降低固定組件對(duì)頁面結(jié)構(gòu)的干擾
很多人喜歡在原型頁面中,添加與原型或是說明文檔無關(guān)的元素,比如手機(jī)外觀或是狀態(tài)欄等,不建議這樣做。
如果希望通過添加手機(jī)外觀來增強(qiáng)演示的效果,可以通過Inline Frame,這樣設(shè)計(jì)和演示就不會(huì)互相影響。
在后臺(tái)產(chǎn)品的設(shè)計(jì)中,也可以使用這種方式。
七、需要注意的點(diǎn)
母版、中繼器以及交互事件一定要避免濫用,在學(xué)習(xí)軟件或是練手的時(shí)候可以多加嘗試;但在實(shí)際的工作中,則需要根據(jù)個(gè)人對(duì)軟件的掌握程度以及工作場(chǎng)景克制使用。
八、補(bǔ)充小技巧,Axure9生成原型在預(yù)覽時(shí)加載緩慢的解決辦法
當(dāng)我們通過Axure9預(yù)覽設(shè)計(jì)好的原型頁面時(shí),頁面的加載沒有問題,但是發(fā)布在本地后進(jìn)行訪問時(shí),會(huì)發(fā)現(xiàn)頁面的加載異常緩慢,這是因?yàn)樯傻捻撁嬖趩?dòng)時(shí)要加載在線的Google字體。
用記事本一類的軟件打開Start.html,我們可以發(fā)現(xiàn)這么一行代碼<link href=’https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600′ rel=’stylesheet’>
解決這個(gè)加載緩慢的方法就是將該代碼注釋掉:<!– <link href=’https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600′ rel=’stylesheet’> –>
我們可以在生成的原型文件中,找到該文件直接進(jìn)行操作;如果想一勞永逸,則需要在Axure9的安裝目錄下,找到該文件做同樣的處理:
- Windows用戶可以在Axure9的安裝目錄,依次打開DefaultSettings/Prototype_Files文件夾即可找到Start.html
- Mac用戶可以在【應(yīng)用程序】文件夾里找到【Axure RP 9.app】程序,通過點(diǎn)擊右鍵選擇【顯示包內(nèi)容】,然后依次打開Contents/Resources/DefaultSettings/Prototype_Files文件夾,即可找到Start.html;或直接在Finder的主菜單點(diǎn)擊【前往】→【前往文件夾…】,輸入以下地址即可:/Applications/Axure RP 9.app/Contents/Resources/DefaultSettings/Prototype_Files
如果在修改了Start.html文件后,又更新了Axure9,則需要重新來過。
九、寫在結(jié)尾的話
Axure的使用技巧,其實(shí)是非常多的,需要在學(xué)習(xí)和工作中慢慢體會(huì),在這里就不展開了。
工具是死的,但人活的,對(duì)于Axure工具的學(xué)習(xí)和使用,何嘗不是在對(duì)Axure做產(chǎn)品和應(yīng)用分析,對(duì)其理解的越深刻,使用起來越是得心應(yīng)手,而學(xué)習(xí)了解這個(gè)軟件的過程,價(jià)值遠(yuǎn)遠(yuǎn)大于使用它的過程。
作者:GrowingPM;公眾號(hào):GrowingPM
本文由 @GrowingPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Pexels,基于 CC0 協(xié)議
- 目前還沒評(píng)論,等你發(fā)揮!