萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> ios >> iOS開發:可交互原型的最佳實踐

iOS開發:可交互原型的最佳實踐

   很多 UX 和 PM 同學還是習慣使用傳統的 Axure RP 制作產品原型,作者覺得 Axure RP 在 iOS 原型階段還是有優勢的,比如可以很方便交互模式的創新和細節,不拘泥原生控件。

  首先大致在iOS中原型呈現有這個幾個需求:

  必須全屏

  依照場景在線或者離線操作原型

  如果導入到 App 內, 使用 iTunes 原生的方式

  無需越獄

  1. 先前准備工作

  1)在原型設置中適配 iOS (v6.5)

  在 Generate prototype 中 Mobile/device 對話框

  勾選 Include Viewport Tag

  上傳 Home screen icon

  勾選 Hide browser nav (when launched form iOS home screen)

iOS開發:可交互原型的最佳實踐 三聯

  2)在原型設置中適配 iOS (v6.0)

  如果還在使用 v6.0 你可以需要自己動手改造原型的HTML文件

  在其中追加一下兩行代碼實現基礎的 app 全屏和 Home screen icon 支持

  如果你原封不動的使用這段代碼, 請把 icon.png 請放置在原型 html 同級目錄

  3)原型的頁面命名盡量采用英文,避免中文編碼出錯

  4)訪問原型的時候不要訪問index.html,而是直接訪問具體的頁面

  我們在實際工作中總結了2種實踐方案來滿足大部分需求,優劣勢對比:

  Web App 方式

  如果僅支持在線查看,Axure RP v6.5 原生的 Web App 原型方案就可以了。當然我們手動修改過代碼的 v6.0 原型也支持。

  簡單說一下,因為已經設置好了。

  只需要:

  1) Safari 打開網站

  2) 選擇 添加至主屏幕

  3) 在桌面點擊主屏幕上的軟件即可

  需要幫助 點擊這裡 查看官方說明,遇見特殊的情況,比如手機無法訪問辦公網,你可以把原型上傳到虛擬主機或者雲上。

  Documents in App 方式

  如果想用於客戶調研或者私下演示, 可以用 Documents in App 的的方案,這種模式方便用戶研究與客戶訪談時網絡環境千差萬變。

  購買 Atomic Web Browser 軟件, 售價僅 $0.99 (RMB 6.00)

  如下圖所示, 修改 Atomic 全屏模式的設置來避免對原型的干擾。

  將原型壓縮為 zip 文件,在 iTunes 中上傳壓縮成 zip 的文檔到 Atomic 當中。

  在 Atomic 中 unzip 解壓文檔,並訪問主頁面的html文件

  進入全屏模式

  至此,您已經可以在iOS設備上實現原型演示了(三個手指向下滑動可以退出全屏模式)

  希望上面兩種方式能夠對那些困擾於如何在iOS平台實現可交互原型的同學們有所幫助。

copyright © 萬盛學電腦網 all rights reserved