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

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

演示地址：http://www.axureux.com/demo/TemplatesMobEC/startapp.html

1. 選擇適合的設(shè)計(jì)分辨率

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

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

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

2. 定義內(nèi)容區(qū)域

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

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

3. 神奇的輔助線(xiàn)

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

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

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

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

• 右擊輔助線(xiàn)可以將其鎖定，以防止拖動(dòng)元件時(shí)會(huì)將輔助線(xiàn)會(huì)跟著一起移動(dòng)；
• 可以通過(guò)按住Ctrl拖動(dòng)創(chuàng)建全局輔助線(xiàn)，全局輔助線(xiàn)就是在所有頁(yè)面中產(chǎn)生一條相同的輔助線(xiàn)；
• 在“布局—柵格和輔助線(xiàn)—鎖定輔助線(xiàn)”中選中可以將所有的輔助線(xiàn)保持鎖定狀態(tài)且無(wú)法刪除；
• 在“布局—柵格和輔助線(xiàn)—?jiǎng)h除輔助線(xiàn)”中可以清除所有頁(yè)面中的輔助線(xiàn)；
• 在“布局—柵格和輔助線(xiàn)—輔助線(xiàn)設(shè)置”中可以修改輔助線(xiàn)的顏色或進(jìn)行更多設(shè)置；

4. 更多基礎(chǔ)設(shè)計(jì)規(guī)范

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

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

• 列表菜單的高度為45px、導(dǎo)航欄的高度為45px、標(biāo)簽欄和工具欄常用高度為60px；
• 字號(hào)一般用偶數(shù)，常用的正文字號(hào)為12和14px，常用的標(biāo)題字號(hào)為16px和18px；
• 元件的寬度和高度一般為5的倍數(shù)，例如45px、100px等；
• 元件的距間和行距一般為10的倍數(shù)，常用10px、20px，按住ctrl鍵通過(guò)方向鍵移動(dòng)元件，每次移動(dòng)的距離剛好是10px。

5. 頁(yè)面屬性的設(shè)置

為了方便進(jìn)行設(shè)計(jì)我習(xí)慣將內(nèi)容布局向左對(duì)齊，而在演示時(shí)內(nèi)容居中顯示更符合瀏覽習(xí)慣，所以需要在頁(yè)面屬性設(shè)置中將頁(yè)面排列設(shè)置為水平居中,另外，頁(yè)面的背景色推薦設(shè)置為#F9F9F9。

6. 導(dǎo)航欄的設(shè)置

導(dǎo)航欄是移動(dòng)端APP中最常見(jiàn)的元件之一，它的位置一般是固定在界面最頂部的，所以建議將導(dǎo)航欄轉(zhuǎn)換為動(dòng)態(tài)面板，然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項(xiàng)為“居中”，垂直固定選項(xiàng)為“上”，具體設(shè)置如下圖：

7. 標(biāo)簽欄或工具欄的設(shè)置

標(biāo)簽欄或工具欄的位置一般是固定在界面最底部的，同樣我們也需要將標(biāo)簽欄或工具欄轉(zhuǎn)換為動(dòng)態(tài)面板，然后在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項(xiàng)為“居中”，垂直固定選項(xiàng)為“下”。

通過(guò)這樣的設(shè)置以后在有標(biāo)簽欄或工具欄的頁(yè)面中，如果你的頁(yè)面內(nèi)容已經(jīng)超出了一屏的高度，我們通常需要在內(nèi)容正文區(qū)域的底部放置一個(gè)與標(biāo)簽欄或工具欄高度一致的熱區(qū)元件當(dāng)作占位符，它的作用是用來(lái)解決原型演示時(shí)標(biāo)簽欄或工具欄會(huì)擋住頁(yè)面內(nèi)容的情況。

8. 模態(tài)窗口交互設(shè)置

模態(tài)窗口交互是移動(dòng)端產(chǎn)品中最常見(jiàn)的交互方式之一，它主要用作顯示系統(tǒng)的重要信息，并請(qǐng)求用戶(hù)進(jìn)行操作反饋，例如：刪除某個(gè)重要內(nèi)容時(shí)，彈出對(duì)話(huà)框進(jìn)行二次確認(rèn)。在原型中我們可以通過(guò)簡(jiǎn)單的設(shè)置，實(shí)現(xiàn)跟移動(dòng)端APP一致的模態(tài)窗口效果。

移動(dòng)端模態(tài)窗口演示效果：

首先同樣需要新建一個(gè)模態(tài)窗口的動(dòng)態(tài)面板，在面板的屬性設(shè)置中設(shè)置為“固定到瀏覽器”，水平固定選項(xiàng)為“居中”，垂直固定選項(xiàng)為“下”。然后再在觸發(fā)模態(tài)窗口的交互事件中按以下方式進(jìn)行設(shè)置，重點(diǎn)是勾選“置于頂層”選項(xiàng)和設(shè)置“燈箱效果”，燈箱效果的背景顏色和透明度可以根據(jù)需要進(jìn)行自定義。關(guān)于具體的設(shè)置和演示效果，可以參照我將在后面推薦的移動(dòng)端元件庫(kù)。

9. 輸出選項(xiàng)的設(shè)置

到此為止已經(jīng)介紹了關(guān)于移動(dòng)端原型設(shè)計(jì)的一些規(guī)范和常用元件及交互效果的設(shè)置，那么當(dāng)我們的原型設(shè)計(jì)完成以后在生成HTML之前我們還需要進(jìn)行幾項(xiàng)簡(jiǎn)單的設(shè)置。

設(shè)置位置：發(fā)布—生成HTML-移動(dòng)設(shè)備，在界面中勾選“包含視口標(biāo)簽”，設(shè)置寬度為：device-width，設(shè)置縮放為：no，其它選項(xiàng)為空就可以了。

另外，你還可以設(shè)置主屏圖標(biāo)，然后在IOS設(shè)備中通過(guò)safari瀏覽器打開(kāi)原型，就可以直接將它添加到主屏幕中了。通過(guò)主屏訪問(wèn)原型時(shí)將不會(huì)顯示瀏覽器的相關(guān)工具界面，最終的演示效果幾乎是跟操作實(shí)際的APP是一致的，你甚至可以根據(jù)需要定義狀態(tài)欄的顏色。

設(shè)置方式：?jiǎn)?dòng)safari瀏覽器打開(kāi)原型地址—點(diǎn)擊瀏覽器底部的設(shè)置圖標(biāo)(正中間)—添加到主屏幕——完成添加即可。大家可以嘗試使用下方演示地址進(jìn)行添加看看效果。

演示地址：http://www.axureux.com/demo/TemplatesMobEC/demo.html

添加到主屏和最終運(yùn)行時(shí)的效果：

按照上述的設(shè)置之后，你將原型生成為HTML文件之后上傳到你的服務(wù)器或原型托管平臺(tái)，通過(guò)手機(jī)訪問(wèn)原型鏈接演示即可。

10. 其它的補(bǔ)充說(shuō)明

如果我們?cè)O(shè)計(jì)的移動(dòng)端原型不需要考慮在手機(jī)上演示的場(chǎng)景，仍然可以參照本文中相關(guān)的規(guī)范。我一般會(huì)在編輯區(qū)域放置一個(gè)設(shè)備模板，新建一個(gè)內(nèi)容框架的動(dòng)態(tài)面板用來(lái)放置頁(yè)面的主要內(nèi)容，而這個(gè)內(nèi)容框架的尺寸同樣是我們之前定義的內(nèi)容區(qū)域尺寸(寬)375px*(高)667px。另外，內(nèi)容框架的動(dòng)態(tài)面板的屬性中需要將滾動(dòng)條設(shè)置為“自動(dòng)顯示垂直滾動(dòng)條”，這樣當(dāng)框架的內(nèi)容超出時(shí)可以拖動(dòng)滾動(dòng)條進(jìn)行查看。

通過(guò)添加設(shè)備模板的設(shè)計(jì)區(qū)域效果

通過(guò)使用設(shè)備模板可以讓輸出的原型效果更標(biāo)準(zhǔn)和規(guī)范，如果我們?cè)诰庉嫿缑嬷蟹胖昧嗽O(shè)備模板，則不再需要對(duì)導(dǎo)航欄、標(biāo)簽欄或工具欄、模態(tài)窗口等動(dòng)態(tài)面板進(jìn)行固定到瀏覽器設(shè)置，你只需要拖動(dòng)到設(shè)備模板對(duì)應(yīng)的位置并置于內(nèi)容框架上方即可。

本文由 @windir?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。