使用Axure打造最佳的移動端交互原型教程
一直以來Axure在對移動端原型設(shè)計方面的支持都不是十分理想,它沒有像目前其它幾類原型設(shè)計工具(Justinmind、墨刀等)一樣提供移動端設(shè)備的模板和相關(guān)交互組件,但是Axure自由靈活的特性卻同樣的其它原型設(shè)計工具所無法取代的。通過掌握一些設(shè)計規(guī)范和方法,我們同樣可以通過Axure制作出非常完美的移動端演示原型。
首先你可以通過手機或電腦訪問以下地址,這是我設(shè)計完成的移動端原型模板。
演示地址:http://www.axureux.com/demo/TemplatesMobEC/startapp.html
1. 選擇適合的設(shè)計分辨率
在開始設(shè)計原型之前我們需要做的第一步是選擇合適的設(shè)計分辨率,目前使用Axure設(shè)計移動端原型時普遍采用的是(寬)375px*(高)667px和(寬)414px*(高)736px兩種分辨率尺寸,這兩種尺寸分別是由目前主流的移動設(shè)備Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比縮放而定義出來的,同時也是Iphone7和Iphone7 PLUS的邏輯分辨率。
有朋友可能會疑惑在設(shè)計原型的時候為什么不直接采用移動設(shè)備實際的分辨率呢?因為這主要考慮到設(shè)計時的便攜性,畢竟我們輸出的原型主要是用于演示而不是視覺稿,所以不需要達到那么高的精度,另外如果按移動設(shè)備實際的分辨率進行設(shè)計,在對元件進行編輯和排版的時候會是一件很耗費時間的事情,同時也不方便在電腦瀏覽器上進行查看。
本人在進行原型設(shè)計的時候一般用的是375px*667px這個分辨率尺寸,因為Axure常用的元件默認的字號一般是14px或18px,這兩種字號也剛好匹配Iphone7上常用字號的比例,而且這個分辨率尺寸在電腦瀏覽器上剛好一屏就可以顯示完整。
2. 定義內(nèi)容區(qū)域
上面已經(jīng)介紹了為什么選擇375px*667px作為移動端原型設(shè)計分辨率尺寸,在開始設(shè)計之前我們需要先按照這個尺寸在編輯區(qū)域中定義好內(nèi)容區(qū)域。我一般是使用輔助線來定義內(nèi)容區(qū)域的,例如下圖是用輔助線定義好內(nèi)容區(qū)域的效果。
事實上我們在設(shè)計時其實不用去限制原型的高度,因為在通過移動端設(shè)備進行瀏覽時可以通過滾動頁面查看超出高度部分的內(nèi)容,這跟實際的移動端產(chǎn)品的操作方式是一致的。而在原型設(shè)計的時候,我們還是需要拖一條用于標識原型設(shè)計高度的輔助線,它的主要作且是為了標識出首屏的區(qū)域范圍,這對于布局選擇是有一定的參考價值的。
3. 神奇的輔助線
輔助線的作用除了用來定義內(nèi)容區(qū)域之外,同時它也能幫助我們快捷的進行布局。輔助線有一個特性就是當你拖動元件靠近它時,元件會自動吸附到輔助線的邊緣達到快速對齊的效果,對于有對齊強迫癥的朋友來說這個特性會感覺無比貼心。
輔助線的基本使用方法:鼠標移動到編輯區(qū)域的左側(cè)和頂部的標尺區(qū)域長按并往編輯區(qū)域拖動時就可以生成橫向或縱向的輔助線,將輔助線拖動到對應(yīng)的位置即可。
一般除了用輔助線來定義內(nèi)容區(qū)域的之外,我還會新建兩條縱向的輔助線用于標識界面左右兩側(cè)的留白區(qū)域。建議兩側(cè)留白區(qū)域用10px或者20px,例如本人常用的是20px,因此這兩條輔助線的位置分別在X軸的20px和355px的位置。除此之外,我們的元件一般還需要設(shè)置左右各20px的填充,用來將文字的顯示限定在界面留白區(qū)域內(nèi)。
補充幾點輔助線的使用小技巧:
- 右擊輔助線可以將其鎖定,以防止拖動元件時會將輔助線會跟著一起移動;
- 可以通過按住Ctrl拖動創(chuàng)建全局輔助線,全局輔助線就是在所有頁面中產(chǎn)生一條相同的輔助線;
- 在“布局—柵格和輔助線—鎖定輔助線”中選中可以將所有的輔助線保持鎖定狀態(tài)且無法刪除;
- 在“布局—柵格和輔助線—刪除輔助線”中可以清除所有頁面中的輔助線;
- 在“布局—柵格和輔助線—輔助線設(shè)置”中可以修改輔助線的顏色或進行更多設(shè)置;
4. 更多基礎(chǔ)設(shè)計規(guī)范
通過以上幾點介紹了我們?nèi)绾问褂幂o助線來建立了一個基本的布局規(guī)范,而以下是我總結(jié)的其它關(guān)于移動端原型的基礎(chǔ)設(shè)計規(guī)范。通過掌握這些規(guī)范或技巧,可以使最終輸出的原型效果更美觀和標準,而且能讓你的設(shè)計效率大大的提升。
另外,這些規(guī)范或技巧同樣基本適用于WEB端的原型設(shè)計,不同的主要是設(shè)計分辨率和內(nèi)容區(qū)域的定義,以后有機會我會進行整理和分享。
- 列表菜單的高度為45px、導(dǎo)航欄的高度為45px、標簽欄和工具欄常用高度為60px;
- 字號一般用偶數(shù),常用的正文字號為12和14px,常用的標題字號為16px和18px;
- 元件的寬度和高度一般為5的倍數(shù),例如45px、100px等;
- 元件的距間和行距一般為10的倍數(shù),常用10px、20px,按住ctrl鍵通過方向鍵移動元件,每次移動的距離剛好是10px。
5. 頁面屬性的設(shè)置
為了方便進行設(shè)計我習(xí)慣將內(nèi)容布局向左對齊,而在演示時內(nèi)容居中顯示更符合瀏覽習(xí)慣,所以需要在頁面屬性設(shè)置中將頁面排列設(shè)置為水平居中,另外,頁面的背景色推薦設(shè)置為#F9F9F9。
6. 導(dǎo)航欄的設(shè)置
導(dǎo)航欄是移動端APP中最常見的元件之一,它的位置一般是固定在界面最頂部的,所以建議將導(dǎo)航欄轉(zhuǎn)換為動態(tài)面板,然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”,水平固定選項為“居中”,垂直固定選項為“上”,具體設(shè)置如下圖:
7. 標簽欄或工具欄的設(shè)置
標簽欄或工具欄的位置一般是固定在界面最底部的,同樣我們也需要將標簽欄或工具欄轉(zhuǎn)換為動態(tài)面板,然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”,水平固定選項為“居中”,垂直固定選項為“下”。
通過這樣的設(shè)置以后在有標簽欄或工具欄的頁面中,如果你的頁面內(nèi)容已經(jīng)超出了一屏的高度,我們通常需要在內(nèi)容正文區(qū)域的底部放置一個與標簽欄或工具欄高度一致的熱區(qū)元件當作占位符,它的作用是用來解決原型演示時標簽欄或工具欄會擋住頁面內(nèi)容的情況。
8. 模態(tài)窗口交互設(shè)置
模態(tài)窗口交互是移動端產(chǎn)品中最常見的交互方式之一,它主要用作顯示系統(tǒng)的重要信息,并請求用戶進行操作反饋,例如:刪除某個重要內(nèi)容時,彈出對話框進行二次確認。在原型中我們可以通過簡單的設(shè)置,實現(xiàn)跟移動端APP一致的模態(tài)窗口效果。
移動端模態(tài)窗口演示效果:
首先同樣需要新建一個模態(tài)窗口的動態(tài)面板,在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”,水平固定選項為“居中”,垂直固定選項為“下”。然后再在觸發(fā)模態(tài)窗口的交互事件中按以下方式進行設(shè)置,重點是勾選“置于頂層”選項和設(shè)置“燈箱效果”,燈箱效果的背景顏色和透明度可以根據(jù)需要進行自定義。關(guān)于具體的設(shè)置和演示效果,可以參照我將在后面推薦的移動端元件庫。
9. 輸出選項的設(shè)置
到此為止已經(jīng)介紹了關(guān)于移動端原型設(shè)計的一些規(guī)范和常用元件及交互效果的設(shè)置,那么當我們的原型設(shè)計完成以后在生成HTML之前我們還需要進行幾項簡單的設(shè)置。
設(shè)置位置:發(fā)布—生成HTML-移動設(shè)備,在界面中勾選“包含視口標簽”,設(shè)置寬度為:device-width,設(shè)置縮放為:no,其它選項為空就可以了。
另外,你還可以設(shè)置主屏圖標,然后在IOS設(shè)備中通過safari瀏覽器打開原型,就可以直接將它添加到主屏幕中了。通過主屏訪問原型時將不會顯示瀏覽器的相關(guān)工具界面,最終的演示效果幾乎是跟操作實際的APP是一致的,你甚至可以根據(jù)需要定義狀態(tài)欄的顏色。
設(shè)置方式:啟動safari瀏覽器打開原型地址—點擊瀏覽器底部的設(shè)置圖標(正中間)—添加到主屏幕——完成添加即可。大家可以嘗試使用下方演示地址進行添加看看效果。
演示地址:http://www.axureux.com/demo/TemplatesMobEC/demo.html
添加到主屏和最終運行時的效果:
按照上述的設(shè)置之后,你將原型生成為HTML文件之后上傳到你的服務(wù)器或原型托管平臺,通過手機訪問原型鏈接演示即可。
10. 其它的補充說明
如果我們設(shè)計的移動端原型不需要考慮在手機上演示的場景,仍然可以參照本文中相關(guān)的規(guī)范。我一般會在編輯區(qū)域放置一個設(shè)備模板,新建一個內(nèi)容框架的動態(tài)面板用來放置頁面的主要內(nèi)容,而這個內(nèi)容框架的尺寸同樣是我們之前定義的內(nèi)容區(qū)域尺寸(寬)375px*(高)667px。另外,內(nèi)容框架的動態(tài)面板的屬性中需要將滾動條設(shè)置為“自動顯示垂直滾動條”,這樣當框架的內(nèi)容超出時可以拖動滾動條進行查看。
通過添加設(shè)備模板的設(shè)計區(qū)域效果
通過使用設(shè)備模板可以讓輸出的原型效果更標準和規(guī)范,如果我們在編輯界面中放置了設(shè)備模板,則不再需要對導(dǎo)航欄、標簽欄或工具欄、模態(tài)窗口等動態(tài)面板進行固定到瀏覽器設(shè)置,你只需要拖動到設(shè)備模板對應(yīng)的位置并置于內(nèi)容框架上方即可。
本文由 @windir?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
感謝分享,請教下,你們這些元件在哪里找的
感謝內(nèi)容分享者的分享,操作遇到問題求解答~
新建模態(tài)窗口的動態(tài)面板
交互事件彈窗
沒有對話框設(shè)置的選項,設(shè)置基本對話框。 ??
求元件庫~謝謝啦656736987@qq.com
為什么我用375×667的尺寸設(shè)計的原型放到托管平臺用iPhone6掃二維碼查看的時候,原型的高度已經(jīng)超過了一個手機屏幕呀?請教大神。
如果按照本文的設(shè)置方式,是不需要限制頁面內(nèi)容的高度的。
大神 求元件庫 謝謝huqi@fashaoge.com
AxureUX交互原型移動端元件庫精簡版下載地址
http://www.axureux.com/home/librariesmoblite.html
大神 求元件庫 謝謝346327557@qq.com
大神,求帶adan0509@163.com
大神,求帶
求分享,576047304@qq.com
很不錯的分享
大哥!求分享元件庫 459451571@qq.com
大哥!求分享元件庫 271343718@qq.com
那位大哥大姐有發(fā)我一份跪求1101116121@qq.com
大神??!求分享元件庫499441480@qq.com,感謝!
大神,元件庫文件分享下吧,chenyaxun0523@163.com 會長期關(guān)注你的 ??
感謝分享,手機訪問試了下,的確很保真,元件庫失效了,可以再分享下不,812056067@qq.com
大神,元件庫共享鏈接失效了,請問能麻煩發(fā)一下給我嗎,我的郵箱是474373600@qq.com,謝謝
zhangyaoxian11@163.com,感謝大神賜圖呀
您好,元件庫共享失效了,您能不能受累在重新給發(fā)一下,謝謝?;蛘呤撬叫胖拎]箱:15501036903@163.com
大神,元件庫共享取消了,能不能發(fā)一下給我,我的郵箱是2871093205@qq.com,謝謝
元件庫 還能有嗎
做為產(chǎn)品小白看來這樣的文章很是激動,然后默默的問句,那個元件庫還能找到不,上面的分享地址不見啦,謝謝。
是的,我也下載不到,需要這套元件庫。
網(wǎng)上有很多的
高度667,在手機中瀏覽時,多出個狀態(tài)欄(電量條),該怎么弄,是不是要把原型的高度改為647?