iOS 中可交互原型的最佳實踐

【編者按】本文轉載自百度UED,作者為@yoyicue 。友情提示一下,這位同學“藏”的很深。

在互聯網上可以很方便能夠找到各種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)

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)原型的頁面命名盡量採用英文,避免中文編碼出錯

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平台實現可交互原型的同學們有所幫助。

原文鏈接:iOS 中可交互原型的最佳實踐

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.