蘋果iOS中可交互原型的最佳實踐-axure控件

0 評論 67710 瀏覽 13 收藏 6 分鐘

很多 UX 和 PM 同學還是習慣使用傳統的 Axure RP 制作產品原型,個人覺得 Axure RP 在 iOS 原型階段還是有優勢的,比如可以很方便交互模式的創新和細節, 不拘泥原生控件.在互聯網上可以很方便能夠找到各種 iOS 組件庫來實現控件,所以本文中并不包含如何實現與 iOS 相同的交互方式.但解決一個困惑, 即如何在 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)

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

如果還在使用 v6.0 你可以需要自己動手改造原型的HTML文件
在 中追加一下兩行代碼實現基礎的 app 全屏和 Home screen icon 支持
如果你原封不動的使用這段代碼, 請把 icon.png 請放置在原型 html 同級目錄

<meta name=”apple-mobile-web-app-capable” content=”yes” />
<link rel=”apple-touch-icon” href=”icon.png” />

 

 

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

axure_pagename

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

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

Web App 方式

如果僅支持在線查看, Axure RP v6.5?原生的 Web App 原型方案就可以了
當然我們手動修改過代碼的 v6.0 原型也支持
簡單說一下,因為已經設置好了.

只需要:
1) Safari 打開網站
2) 選擇 添加至主屏幕
3) 在桌面點擊主屏幕上的軟件即可
save_screen_icon
需要幫助?點擊這里?查看官方說明
遇見特殊的情況, 比如手機無法訪問辦公網,
你可以把原型上傳到虛擬主機或者

Documents in App 方式

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

購買?Atomic Web Browser?軟件, 售價僅 $0.99 (RMB 6.00)
如下圖所示, 修改 Atomic 全屏模式的設置來避免對原型的干擾
atomic_full_screen_settings
將原型壓縮為 zip 文件,在 iTunes 中上傳壓縮成 zip 的文檔到 Atomic 當中
prototype_zip
itunes_atomic_upload
在 Atomic 中 unzip 解壓文檔, 并訪問主頁面的html文件
atomic_unzip
進入全屏模式
atomic_full_screen
至此,您已經可以在iOS設備上實現原型演示了(三個手指向下滑動可以退出全屏模式)
atomic_full_screen_2
總結
希望上面兩種方式能夠對那些困擾于如何在iOS平臺實現可交互原型的同學們有所幫助
如果您在工作中有更好的解決方式, 請在本頁面回復,與我們一同傳播給需要的同學們
參考:
1.http://www.humaneinterface.net/iphoneipad-prototyping-in-axure-rp-pro-6-quick-overview/
2.http://mrpm.cc/?p=342
3.http://victoriapod.com/useful-meta-tags-for-ios-web-app-developers/
4.http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/
5.http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

來源:百度UED

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!