Axure小眾使用技巧分享

Axure功能非常強(qiáng)大,即便是應(yīng)對(duì)高保真原型圖,復(fù)雜的交互也完全能夠勝任,當(dāng)然在畫原型圖時(shí)也不需要過多的糾結(jié)于交互的細(xì)節(jié),保證內(nèi)容和邏輯即可。

下面舉例說一說Axure使用的一些技巧,都是在不斷的使用過程中總結(jié)出來的。以下操作都是在Axure8.0中完成的。下文并不是關(guān)于動(dòng)態(tài)面板、中繼器的分享,而是基礎(chǔ)卻又很常用的小眾經(jīng)驗(yàn)技巧。

快速添加原型頭像

使用PS制作好png格式的原型頭像,復(fù)制到Axure這種方法是可以的,但是太耗時(shí)。下面介紹一種1秒制作的方法:

圖像是可以有圓角的,如果圓角半徑正好是圖像的一半,生成的圖像就是圓形。也就是說把正方形圖片的圓角拖動(dòng)到最大就能實(shí)現(xiàn)圓形頭像了,超級(jí)簡單吧。

快速復(fù)制樣式

Axure其實(shí)也是有格式刷的,但是比起office要多出了2步,需要選擇復(fù)制哪些樣式和選中組件后確定應(yīng)用樣式。

有一個(gè)相對(duì)簡單的樣式復(fù)制方法,如兩個(gè)不同顏色的文本一和文本二,分別為綠色和紅色,且文本一為粗體了。選中文本一,在選擇字體顏色工具,該工具的顏色就會(huì)自動(dòng)變?yōu)榫G色,再選擇文本二就可以直接由紅色設(shè)置為綠色。這種方法可以選擇復(fù)制的樣式種類,即挑選一部分樣式復(fù)制。

手繪風(fēng)格

Axure原型圖有2種風(fēng)格,分別是線框和手繪。在頁面樣式編輯器中可以選擇啟用手繪模式,在設(shè)置好草圖力度,這個(gè)時(shí)候看到的原型就有手繪開通的風(fēng)格了,當(dāng)然了這個(gè)一般是不需要設(shè)置太大的,否則效果也不是很理想。

靜態(tài)頁面內(nèi)容居中顯示

Axure生成的原型圖在瀏覽器默認(rèn)是居左顯示的,如果想要居中顯示簡單設(shè)置一下就可以了。將頁面排列選項(xiàng)設(shè)置為居中,在瀏覽器中顯示效果就是居中了,但是在Axure中顯示還是不變的。


導(dǎo)出頁面為圖片

因?yàn)锳xure生成的是靜態(tài)頁面,在不同瀏覽器中顯示的效果不一定相同,如360瀏覽器中顯示效果就相對(duì)較差,推薦使用火狐瀏覽器查看文件(谷歌瀏覽器因?yàn)橐恍┐蠹叶贾赖脑蚴菦]有辦法直接安裝插件的)。

這個(gè)時(shí)候是可以導(dǎo)出某個(gè)頁面或者全部頁面為圖片,然后查看就很方便了。如果是低保真沒有交互的原型,圖片拖入瀏覽器中可以保證沒有任何的兼容性問題, 畢竟只是一個(gè)圖片。

矢量圖標(biāo)

使用一些矢量圖標(biāo)可以快速地在原型上表現(xiàn)出功能,比如說wifi圖標(biāo)、微信圖標(biāo)。這些圖標(biāo)是專門繪制的,支持高比例的放大且可以自由填充顏色,能很大程度減輕PM的工作量。

快捷鍵

諸如Ctrl+C,Ctrl+V,Ctrl+S這樣的快捷鍵就不需要再贅述了。這里重點(diǎn)說的是一個(gè)快捷鍵Ctrl+G,它的作用是將元素組合,使用頻率非常高。比如在畫一個(gè)后臺(tái)列表頁面,如果將一行數(shù)據(jù)復(fù)制多行且對(duì)齊,直接框選再復(fù)制拖動(dòng)是可以的,比較浪費(fèi)時(shí)間且不容易對(duì)齊。直接將內(nèi)容組合之后再復(fù)制就相對(duì)簡單一點(diǎn)。

其他的快捷鍵如Ctrl+減號(hào)、Ctrl+加號(hào)用來縮放,Ctrl+K用來鎖定,每個(gè)人根據(jù)習(xí)慣自己選擇使用就好。

萬能組件

這里說的萬能組件就是矩形,它可以幫我們實(shí)現(xiàn)絕大多數(shù)效果, 比如心形、箭頭、對(duì)話氣泡等效果。通過自定義形狀還可以自由設(shè)置,制作更多其他的圖形效果。

下面舉例說明簡單選項(xiàng)卡制作的流程:

(1)添加矩形,取消下邊框顯示;

(2)添加直線,對(duì)齊;

(3)添加文本。

這樣一個(gè)簡單的選項(xiàng)卡就制作好了。當(dāng)然利用動(dòng)態(tài)面板也是可以實(shí)現(xiàn)復(fù)雜的選項(xiàng)卡的,效果也比較好,如下圖所示,這里就不做說明了。

工作畫面快速移動(dòng)

當(dāng)畫面很大時(shí),比如高度有3000px,為了選取不同位置的組件,不得不使用垂直與水平滾動(dòng)條來定位,操作起來也不方便。

其實(shí)有更方便的做法,按住鍵盤的空格鍵,此時(shí)鼠標(biāo)光標(biāo)會(huì)切換成手形,可以自由地拖動(dòng)整個(gè)頁面,任意滑動(dòng)。這個(gè)操作不好截圖,這里就不放圖了。

類似的小技巧還有很多,掌握這些對(duì)于原型圖的設(shè)計(jì)有很大幫助,包括適合自己的元件庫。自己繪制了一套元件庫,有興趣的同學(xué)可以溝通交流下。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容