iOS中可交互原型的最佳实践

标签: 业界 iOS iPhone5 交互设计 原型 | 发表时间:2012-07-18 11:42 | 作者:Warlial
出处:http://www.leiphone.com

【编者按】本文转载自 百度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 中可交互原型的最佳实践

您可能也喜欢:

苹果发布iOS6 Beta 3

Chrome已抢占iOS浏览器1.5%的市场份额

PayPal收购移动支付公司Card.io

简化收付款流程 Paypal收购Card.io,能摄像头识别信用卡

本周最佳iOS应用
无觅

相关 [ios 原型 最佳实践] 推荐:

iOS中可交互原型的最佳实践

- - 雷锋网
【编者按】本文转载自 百度UED,作者为@ yoyicue. 友情提示一下,这位同学“藏”的很深. 在互联网上可以很方便能够找到各种 iOS 组件库来实现控件,所以本文中并不包含如何实现与 iOS 相同的交互方式. 但解决一个困惑, 即如何在 iOS 设备上优雅的呈现原型呢. 很多 UX 和 PM 同学还是习惯使用传统的 Axure RP 制作产品原型,作者觉得 Axure RP 在 iOS 原型阶段还是有优势的,比如可以很方便交互模式的创新和细节,不拘泥原生控件.

jQuery最佳实践

- andi - 阮一峰的网络日志
上周,我整理了《jQuery设计思想》. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery". 今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks).

PHP最佳实践

- xiangqian - 阮一峰的网络日志
虽然名字叫《PHP最佳实践》,但是它主要谈的不是编程规则,而是PHP应用程序的合理架构. 它提供了一种逻辑和数据分离的架构模式,属于MVC模式的一种实践. 我觉得,这是很有参考价值的学习资料,类似的文章网上并不多,所以一边学习,一边就把它翻译了出来. 根据自己的理解,我总结了它的MVC模式的实现方式(详细解释见译文):.

MongoDB最佳实践

- - NoSQLFan
将 MongoDB加入到我们的服务支持列表中,是整个团队年初工作计划中的首要任务. 但我们感觉如果先添加一项对NoSQL存储的支持,而不是先升级已支持的关系型数据库,可能对用户不太好,毕竟目前的用户都使用关系型数据库. 所以我们决定将引入MongoDB这项工作放到升级MySQL和PostgreSQL之后来做.

Dockerfile 最佳实践

- - DockOne.io
在容器领域,Docker 公司提出的容器镜像已经成为目前容器打包交付的事实标准. 构建镜像需要编写 Dockerfile,如何编写一个优雅的 Dockerfile 呢. 在 Docker 公司的官方文档中给出了一篇:《 Best practices for writing Dockerfiles》.

文章: Grails最佳实践

- - InfoQ cn
我在IntelliGrape工作,这是一家专门使用Groovy & Grails进行开发的公司. 本文是我们Grails项目遵循的最佳实践的基本清单,收集自邮件列表、Stack Overflow、博文, 播客和 IntelliGrape的内部讨论. 它们分为控制器、服务、Domain、视图、TagLib、测试和其他.

PHP最佳实践(译)

- - CSDN博客Web前端推荐文章
原文:  PHP Best Practices-A short, practical guide for common and confusing PHP tasks. 译者: youngsterxyf. 本文档最后审阅于2013年3月8日. 由我, Alex Cabal,维护该文档. 我编写PHP程序已有很长一段时间了,当前我 经营着 Scribophile,由认真作家组成的一个在线写作团体,  Writerfolio,为自由职业者提供的一个易用写作工具集,以及  Standard Ebooks,一个图文并茂、无数字版权管理的公共领域电子书出版商.

Log4j最佳实践(原) - Mainz

- - 博客园_Mainz's Blog
本文是结合项目中使用 Log4j总结的最佳实践,非转载. 网上可以找到的是这一篇《 Log4j最佳实践》. 本来 Log4j使用是非常简单的,无需多介绍其用法,这只是在小型项目中;但在 大型的项目中使用 log4j不太一样. 大型项目非常依赖日志,因为解决线上问题必须依靠log,依靠大量的日志.

再谈RestAPI最佳实践

- - 企业架构 - ITeye博客
http://www.javacodegeeks.com/2014/05/rest-api-best-practices-reloaded.html ,仅供学习和参考,转载请注明出处. 近一年半,我参与了2到3个项目的工作,这些项目涉及到大量供“外部”使用的Rest API,稍后我们再来解释为什么要将“外部”这个词放在引号之中.

一些 REST 最佳实践

- - 鸟窝
原文: Some REST best practices, 作者: Pierre-Olivier Bourgeois. 译文: 一些REST最佳实践, 译者: yongx. 如今,REST APIs 已经非常普遍,几乎所有WEB应用都用到了它们. 提供简单,一致,实用的API是种义务,方便其它人很容易的使用.