在上篇文章中，作者為大家介紹了如何使用iPhone應用程序頁面模板在原型設計工具中創建iPhone程序原型（查看詳情）。在這篇文章中，作者將為大家介紹如何在iPhone上查看你的應用程序原型。在查看原型之前，你需要對你的手機進行設置。

移動設置

瀏覽器設置

配置iPhone瀏覽器選項在生成>原型>移動/設備中。下面看到的設置就是在手機上瀏覽iPhone應用程序的典型設置。

視窗標簽影響移動設備上原型的大小或規模。如果你的程序設計為320像素寬，你就不必再編輯默認的視窗標簽設置。 當你進入一個網站鏈接時“隱藏地址欄”會移除瀏覽器上面的帶狀鏈接地址；“防止垂直頁面滾動”讓你設計的應用程序不至于從屏幕的邊緣拉動。最后，當原型從主屏幕啟動時，“隱藏瀏覽器導航”會移除瀏覽器按鈕。

點擊下面的復選框查看在瀏覽器上的效果

主屏幕圖標

主屏幕的圖標是一個114px×114px 的PNG圖像，它顯示在你的iPhone主屏幕上猶如一個真正的應用程序。這種圖標可以通過“生成 > 原型> 移動/設備設置”的途徑設置。下面的教程演示如何將圖標添加到你的iPhone主屏幕上。

注：設計圖標時，記住透明區域在手機上瀏覽時會是一個黑色的背景。

啟動畫面

從主屏幕圖標啟動原型時，啟動畫面會在你等待加載原型的時候顯示。啟動圖像是一個320px×480pxPNG格式的圖像，它可以“生成>原型>移動/設備設置”的途徑導入。

如果你的啟動畫面需要以景觀圖或水平視圖呈現，導入之前請在圖形工具中翻轉圖像。

在iPhone上查看應用程序原型

第一步：生成到AxShare或網絡服務器

點擊工具欄中的AxShare按鈕，將你的原型上傳到AxShare，或者在主菜單（按F4）點擊“生成>發布到AxShare”。如果你沒有AxShare帳戶，單擊“創建帳戶”或進入share.axure.com創建一個免費的賬戶。點擊“發布”上傳你的RP文件。你也可以將其發布到自己的Web服務器上。

第二步：點擊“顯示鏈接和選項”

接下來，在瀏覽器中打開你的原型，獲取不帶網站地圖的起始頁網址，點擊“顯示鏈接和選項”并導航到App主頁或包含你應用程序開頭的任意頁面。復制剛才的URL網址。

第三步：在iPhone瀏覽器中打開網址

在你的iPhone瀏覽器中打開剛才的網址，通過電子郵件發送給自己是獲得鏈接的一個好方法。

現在，你可以與你的原型進行交互了，不過此時瀏覽器的導航仍然是可見的。

第四步：添加到主屏幕

按下位于底部導航中間的“選項”按鈕，并選擇“添加到主屏幕”。

系統將提示你預覽主屏幕圖標并要求你選擇一個名稱。點擊“添加”，你就可以從主屏幕啟動你的原型，它將顯示啟動畫面，并啟動瀏覽器且不帶有底部導航。

提示：

在 iPhone 5上查看原型時你可能會遇到屏幕在頂部和底部被截斷的情況。調整方法是清除視窗區域中的“寬度”讓它成為空白。

本文提供了包含以上設置和合適的參考線的模板可供下載查看。

>>

>>

擴展閱讀

• 八個面向移動開發的免費扁平化UI設計工具
• 2014年十大最佳網站創建工具（網站）推薦
• 11個激發開發者靈感的用戶界面設計資源網站
• 2014馬上有HTML5！大波帶PSD的HTML5網站模版賀新年