介紹

這個手機(jī)指南將指導(dǎo)你完成一個可以在 iPhone 或者 Android 設(shè)備上展示的原型。當(dāng)我們完成后你將會知道怎么設(shè)計和生成一個可交互的手機(jī)網(wǎng)頁原型。

讓我們開始吧

首先，打開AxureMobileWeb.zip 并解壓到你電腦的一個新目錄中。然后，啟動 Axure RP 并保存一個新的文件，命名為 MobileWeb.rp。（使用 File > Save As）。

設(shè)置手機(jī)瀏覽的文件

新建輔助線

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign1.png" alt="image" />

在開始之前，先為我們正在設(shè)計的屏幕大小創(chuàng)建輔助線。在 iPhone 和 Android 中，很典型的使用寬度是 320。在這個例子中，當(dāng)導(dǎo)航欄可見的時候，我們將在 iPhone 可見區(qū)域的 360 高度處設(shè)立一條輔助線。

點擊和拖動標(biāo)尺位置到設(shè)計區(qū)域就可以添加輔助線。

添加 viewport tag

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign2.png" alt="image" />

我們也需要在原型中設(shè)置 viewport tag，這樣手機(jī)瀏覽器就知道怎么縮放頁面。

打開 Generate HTML 窗口，選擇 Mobile/Device 和勾選 Include Viewport Tag。保留默認(rèn)設(shè)置然后點擊 Generate 查看生成的原型。

在 Sitemap 外查看原型

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign3.png" alt="image" />

想要在你的 iPhone 或者 Android 手機(jī)上查看原型，需要將原型文件發(fā)布成一個 web server。一個很簡單的發(fā)布原型的方法就是上傳 rp 文件到 share.axure.com (upload the rp file to AxShare).

在手機(jī)上查看的時候，不想 sitemap 顯示或者想 viewport tag 中設(shè)置的視圖不生效，這時候我們可以打開這個原型然后點擊 Show Links 獲取不顯示 sitemap 的原型 URL。

手機(jī)上查看原型

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign4.png" alt="image" />

將不顯示 sitemap 的原型 URL 發(fā)送到自己郵箱。

在你手機(jī)的郵箱中打開鏈接。在手機(jī)中不需要播放器或者 App，只需要瀏覽器。

這時候你的原型是空的。當(dāng)你構(gòu)建原型的時候，你可以上傳你的 RP 文件到相同的鏈接中，然后刷新瀏覽器就可以看到改變的內(nèi)容。

導(dǎo)航

添加 logo 和 導(dǎo)航按鈕

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign5.png" alt="image" />

首先，添加一個 image widget，然后導(dǎo)入解壓文件里 images 目錄下的 logo.png。把它放置在設(shè)計區(qū)域的頂部，并設(shè)置距離四周 10px。然后添加 4 個 300 x 50px 的 button shape widgets。

刪除最上方按鈕的文字，然后把剩下的 3 個按鈕文字分別設(shè)置成 Directions，Menu，Coupons。

創(chuàng)建有圖標(biāo)的按鈕

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign6.png" alt="image" />

拖動一個 image widget 和 text panel 到頂部按鈕的上層。雙擊 image 并導(dǎo)入壓縮文件里的 cell.gif。在 text panel 里面輸入 Order Now ！

然后，在整個按鈕上設(shè)置一個熱點。

添加撥打電話的鏈接

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign7.png" alt="image" />

選擇熱點和雙擊 OnClick。選擇 Open Link 操作然后選擇 Link to an External Link or File 并在文本框中輸入 tel：555-1212.

先產(chǎn)生原型然后嘗試在手機(jī)上查看。點擊 Order Now 按鈕將會出現(xiàn)一個窗口來撥打剛才輸入的號碼。

給彈窗添加動態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign8.png" alt="image" />

接下來我們將添加顯示 directions 和 menu 的動態(tài)面板。拉伸面板覆蓋掉 Directions 及它以下的部分，保留 logo 和 order now 可見。

將 dynamic panel 命名為 PopupStates。添加除了 State1 之外的兩個或兩個以上的 states，總共三個 states。命名這三個 states 為：Directions，Menu 和 None。

我們下一步將制作單獨的 Coupons 頁面。

設(shè)置面板隱藏和放置在后一層

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign9.png" alt="image" />

現(xiàn)在我們可以在 style tab 中選中 Hidden 讓這個面板隱藏。

為了更簡單選中按鈕，我們可以右鍵點擊面板并選擇[Order > Send to Back]。

添加展示面板的 Onclick Case

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign10.png" alt="image" />

現(xiàn)在我們要給 Directions 和 Menu 設(shè)置點擊交互事件來讓我們的 PopupStates 面板展示相應(yīng)的狀態(tài)。

在 Directions 按鈕上，添加一個 OnClick 事件通過滑動動畫讓 PopupStates 面板轉(zhuǎn)換到 Directions 狀態(tài)。勾選 Show panel if hidden。

重復(fù)此步驟設(shè)置 Menu 按鈕和狀態(tài)。

彈出窗口

新建彈出窗口 & 關(guān)閉按鈕

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign11.png" alt="image" />

現(xiàn)在我們準(zhǔn)備分別給 Directions 和 Menu 狀態(tài)添加一個背景和按鈕用來點擊的時候隱藏面板。雙擊 Directions state 啟動編輯。添加一個 rectangle 并拉伸它覆蓋整個 state。

在右上角處添加一個 30x30px 的 placeholder 控件。

添加隱藏窗口的交互

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign12.png" alt="image" />

選中 placeholder，并添加一個 Onclick 事件。在 case 編輯器中，添加 Set Panel State 操作，讓 PopupStates 的狀態(tài)伴隨向下滑動動畫變成 None。添加 Wait 操作為 500ms。最后，使用隱藏操作并選擇 PopupStates 面板來隱藏此面板。

復(fù)制／粘貼窗口控件到 Menu state 中

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign13.png" alt="image" />

將 Directions state 中的背景和按鈕復(fù)制粘貼到 Menu state 中。

或者，你可以重復(fù)之前的兩步來設(shè)置 Menu state。

提示： 右上角的 placeholder 的 Onclick 交互同樣可以在 Directions state 中 復(fù)制粘貼到 Menu state。

外部鏈接到 Google Maps

新建 Directions state w/map & text

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign14.png" alt="image" />

打開 Directions state 并添加一個 image widget 在 rectangle 上方。雙擊這個 image 并導(dǎo)入壓縮文件里面的 map.png。

在地圖的上方，添加一個文本并寫上"Pete's Pizza is located at 311 4th Ave, San Diego, CA”。

在地圖下方，添加一個 Label 并寫上"Click to View Larger Map"。

從 Google Maps 獲取鏈接

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign15.png" alt="image" />

現(xiàn)在我們準(zhǔn)備從 Google Maps 獲取鏈接用來在手機(jī)上啟動 Google Maps 應(yīng)用。

打開 maps.google.com 和搜索地址。在右上方，點擊 link 圖標(biāo)然后拷貝 link URL。

添加 link 為 Google Maps 的鏈接

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign16.png" alt="image" />

雙擊 Click to View Larger Map，并選擇 hyperlink 圖標(biāo)來打開 link dialog。將 link 粘貼到 Link to external url 區(qū)域然后點擊 OK。

生成原型然后在手機(jī)上查看。

滾動內(nèi)容

添加填充文本，轉(zhuǎn)變成動態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign17.png" alt="image" />

現(xiàn)在我們準(zhǔn)備給 Menu state 添加滾動內(nèi)容。

打開 Menu state 并添加一個 Paragraph 控件。復(fù)制粘貼整個段落到這個控件中，之后這個控件中就有兩個段落。調(diào)整寬度適配這個 state。

右鍵點擊然后通過選擇[Convert to Dynamic Panel]將文本轉(zhuǎn)換成動態(tài)面板。將這個面板命名為 Content。

調(diào)整并添加垂直滾動條

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign18.png" alt="image" />

調(diào)整動態(tài)面板的底部讓它適應(yīng) rectangle 的內(nèi)部，像上面截圖看到的那樣。

選擇動態(tài)面板并在 Properties 面板的 Scrollbars 下拉列表中選擇 Vertical as Need。

注意：在一些老的手機(jī)瀏覽器中這樣的滾動方法可能不生效，但在多數(shù)先進(jìn)設(shè)備上是正常使用的。

設(shè)置 Coupons 頁面

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign19.png" alt="image" />

主頁面設(shè)計是適應(yīng)手機(jī)屏幕不需要滾動的。但是 Coupons 不同，我們需要鏈接一個比屏幕更高的新界面讓它在手機(jī)瀏覽器中可以滾動。

將 Page 1 重新命名為 Coupons。打開這個頁面然后在 320 寬度和 360 高度處添加輔助線。

提示：如果我們已經(jīng)添加全局輔助線（從標(biāo)尺拖動輔助線的時候按住 Ctrl 或者 Cmd ），這個輔助線將會出現(xiàn)在每個頁面中。

復(fù)制 logo 和 Order Now 按鈕到 Home page。

添加 Coupons

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign20.png" alt="image" />

在 Order Now 按鈕的下方添加幾個 placeholder 控件這樣它們就可以在 360px 輔助線的上方正常工作。

在主頁面，使用 Create Link 來給 Coupons 按鈕鏈接 Coupons 頁面。

生成原型然后試一下。你將可以讓 coupons 頁面滾上滾下。

"JOIN MAILING LIST" 域

添加 email 域和提交按鈕

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign21.png" alt="image" />

在主頁面的底部，添加一個文本域然后在它右邊添加一個按鈕。刪除文本里面的文字，并將按鈕的文字設(shè)置成 Submit。

在文本域的上方，添加一個文本面板。更改文字為 Join our mailing list。

在控件配置面板上，標(biāo)注文本面板為 EmailPanel 并將文本設(shè)置成 EmailField。

給 Submit 按鈕添加交互事件

http://wiki.jikexueyuan.com/project/axure/images/mobilewebsitedesign21.png" alt="image" />

接下來選擇 Submit 按鈕并為它添加一個 OnClick 事件。在 Case 編輯器中，選擇 “Set Text”，選中 EmailField 控件。

首先，我們將清空文本域里面的文字。為此我們保留值域空白。

添加第二個 Set Text 操作，并選擇 EmailPanel。選擇編輯文本按鈕，將當(dāng)前文本高亮顯示，并替換它的值為 "Thank you for signing up"。

去嘗試吧，這應(yīng)該能在你的手機(jī)瀏覽器中正常工作。