使用Axure打造最佳的移動端交互原型教程

一直以來Axure在對移動端原型設(shè)計方面的支持都不是十分理想，它沒有像目前其它幾類原型設(shè)計工具(Justinmind、墨刀等)一樣提供移動端設(shè)備的模板和相關(guān)交互組件，但是Axure自由靈活的特性卻同樣的其它原型設(shè)計工具所無法取代的。通過掌握一些設(shè)計規(guī)范和方法，我們同樣可以通過Axure制作出非常完美的移動端演示原型。

首先你可以通過手機(jī)或電腦訪問以下地址，這是我設(shè)計完成的移動端原型模板。

演示地址：

在開始設(shè)計原型之前我們需要做的第一步是選擇合適的設(shè)計分辨率，目前使用Axure設(shè)計移動端原型時普遍采用的是(寬)375px*(高)667px和(寬)414px*(高)736px兩種分辨率尺寸，這兩種尺寸分別是由目前主流的移動設(shè)備Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比縮放而定義出來的，同時也是Iphone7和Iphone7 PLUS的邏輯分辨率。

有朋友可能會疑惑在設(shè)計原型的時候?yàn)槭裁床恢苯硬捎靡苿釉O(shè)備實(shí)際的分辨率呢？因?yàn)檫@主要考慮到設(shè)計時的便攜性，畢竟我們輸出的原型主要是用于演示而不是視覺稿，所以不需要達(dá)到那么高的精度，另外如果按移動設(shè)備實(shí)際的分辨率進(jìn)行設(shè)計，在對元件進(jìn)行編輯和排版的時候會是一件很耗費(fèi)時間的事情，同時也不方便在電腦瀏覽器上進(jìn)行查看。

本人在進(jìn)行原型設(shè)計的時候一般用的是375px*667px這個分辨率尺寸，因?yàn)锳xure常用的元件默認(rèn)的字號一般是14px或18px，這兩種字號也剛好匹配Iphone7上常用字號的比例，而且這個分辨率尺寸在電腦瀏覽器上剛好一屏就可以顯示完整。

上面已經(jīng)介紹了為什么選擇375px*667px作為移動端原型設(shè)計分辨率尺寸，在開始設(shè)計之前我們需要先按照這個尺寸在編輯區(qū)域中定義好內(nèi)容區(qū)域。我一般是使用輔助線來定義內(nèi)容區(qū)域的，例如下圖是用輔助線定義好內(nèi)容區(qū)域的效果。

事實(shí)上我們在設(shè)計時其實(shí)不用去限制原型的高度，因?yàn)樵谕ㄟ^移動端設(shè)備進(jìn)行瀏覽時可以通過滾動頁面查看超出高度部分的內(nèi)容，這跟實(shí)際的移動端產(chǎn)品的操作方式是一致的。而在原型設(shè)計的時候，我們還是需要拖一條用于標(biāo)識原型設(shè)計高度的輔助線，它的主要作且是為了標(biāo)識出首屏的區(qū)域范圍，這對于布局選擇是有一定的參考價值的。

輔助線的作用除了用來定義內(nèi)容區(qū)域之外，同時它也能幫助我們快捷的進(jìn)行布局。輔助線有一個特性就是當(dāng)你拖動元件靠近它時，元件會自動吸附到輔助線的邊緣達(dá)到快速對齊的效果，對于有對齊強(qiáng)迫癥的朋友來說這個特性會感覺無比貼心。

輔助線的基本使用方法：鼠標(biāo)移動到編輯區(qū)域的左側(cè)和頂部的標(biāo)尺區(qū)域長按并往編輯區(qū)域拖動時就可以生成橫向或縱向的輔助線，將輔助線拖動到對應(yīng)的位置即可。

一般除了用輔助線來定義內(nèi)容區(qū)域的之外，我還會新建兩條縱向的輔助線用于標(biāo)識界面左右兩側(cè)的留白區(qū)域。建議兩側(cè)留白區(qū)域用10px或者20px，例如本人常用的是20px，因此這兩條輔助線的位置分別在X軸的20px和355px的位置。除此之外，我們的元件一般還需要設(shè)置左右各20px的填充，用來將文字的顯示限定在界面留白區(qū)域內(nèi)。

補(bǔ)充幾點(diǎn)輔助線的使用小技巧：

右擊輔助線可以將其鎖定，以防止拖動元件時會將輔助線會跟著一起移動；

可以通過按住Ctrl拖動創(chuàng)建全局輔助線，全局輔助線就是在所有頁面中產(chǎn)生一條相同的輔助線；

在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態(tài)且無法刪除；

在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線；

在“布局—柵格和輔助線—輔助線設(shè)置”中可以修改輔助線的顏色或進(jìn)行更多設(shè)置；

通過以上幾點(diǎn)介紹了我們?nèi)绾问褂幂o助線來建立了一個基本的布局規(guī)范，而以下是我總結(jié)的其它關(guān)于移動端原型的基礎(chǔ)設(shè)計規(guī)范。通過掌握這些規(guī)范或技巧，可以使最終輸出的原型效果更美觀和標(biāo)準(zhǔn)，而且能讓你的設(shè)計效率大大的提升。

另外，這些規(guī)范或技巧同樣基本適用于WEB端的原型設(shè)計，不同的主要是設(shè)計分辨率和內(nèi)容區(qū)域的定義，以后有機(jī)會我會進(jìn)行整理和分享。

列表菜單的高度為45px、導(dǎo)航欄的高度為45px、標(biāo)簽欄和工具欄常用高度為60px；

字號一般用偶數(shù)，常用的正文字號為12和14px，常用的標(biāo)題字號為16px和18px；

元件的寬度和高度一般為5的倍數(shù)，例如45px、100px等；

元件的距間和行距一般為10的倍數(shù)，常用10px、20px，按住ctrl鍵通過方向鍵移動元件，每次移動的距離剛好是10px。