分享此网站可得100G教程,联系小洁领取点击这里给我发消息

如何在手机上完美体验APP原型的功能和交互

原型设计 学UI设计 522次浏览 0个评论 扫描二维码

如何在手机上完美体验APP原型的功能和交互

获取APP原型的网址

比如我把闪电约APP的原型上传到51prd.com服务器下面的demo目录下,那么网址为http://51prd.com/demo/#g=1&p=首页。

使用Safari打开网址

将该网址发送到手机上并使用Safari打开。你会看到APP原型的部分内容,但是有额外的元素干扰。

如何在手机上完美体验APP原型的功能和交互

去掉多余的网页内容

点击左下角的close按钮,可以关闭Axure工具栏。现在有点像APP页面了。

如何在手机上完美体验APP原型的功能和交互

需要注意的是这里其实是跳转到了另外一个网址:http://51prd.com/demo/首页.html

原型网址的生成规则

事实上是Axure生成的原型默认是加载了工具栏的网址。生成之后网址的前面部分是一样的,比如http://51prd.com/demo/,主要是后面有区别。
如何在手机上完美体验APP原型的功能和交互

  • 开启页面列表,后缀为/start.html#g=1
  • 关闭页面列表,后缀为/start.html#g=0
  • 最小化工具栏,后缀为/start.html#c=1
  • 不加载工具栏,后缀为/页面名称.html

生成桌面快捷方式

体验一下原型感觉还可以,但是顶部网址栏和底部工具栏貌似挡住了部分内容,需要隐藏掉。

添加到主屏幕

点击底部工具栏中间的”发送到”图标,然后选择“添加到主屏幕”。

如何在手机上完美体验APP原型的功能和交互

设置APP名称

设置一下名称,然后选择添加。

如何在手机上完美体验APP原型的功能和交互

创建APP成功

然后便会创建到桌面。

如何在手机上完美体验APP原型的功能和交互

查看APP原型

点击桌面上的该图标,然后进入APP原型。你会发现它和你设计的APP一模一样。

如何在手机上完美体验APP原型的功能和交互

体验APP的功能和交互

操作一遍,你会发现它能够完美的表现下导航和上导航的功能,包含了所有的页面,所有的跳转都可以正常点击,可以完整的体验APP的所有功能模块。

这也是我定义的真正的原型,点击查看我对产品概念的定义。

总结

如果你觉得图标不好看,还可以在生成原型的时候进行设置。

如何在手机上完美体验APP原型的功能和交互

给你们查看我最后设置后的效果,从表到里都和一个APP超级像,最符合原型的定义。

如何在手机上完美体验APP原型的功能和交互


推荐:查看最受欢迎的设计导航网站 → http://hao.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!