Axure RP移动APP应用原型设计技巧

移动素材库

工欲善其事必先利其器,素材库则是我们必不可少的利器。Axure RP本身源自Web设计,针对移动应用设计的支持并不完美。所以合理使用第三方开发的素材库(Widget Library),可以节省我们重新绘制APP基础部件的时间,提高产品设计的专注度及效率。 以下是收集整理的一些第三方付费素材库:

移动APP设计尺寸

看到一张空白画布,我们就开始考虑APP的尺寸应该是多少?以下以几款主流iPhone为例,可以根据个人兴趣选择机型对应的Points列作为设计稿尺寸:

为什么不是Android?没有其他原因,就是不喜欢。这里可以写一篇《为什么喜欢iOS而不是Android》

Device Retina Asset Resolution Portrait (px) Points
iPhone 6+ Retina HD @3x 1080 x 1920 414 x 736
iPhone 6 Retina @2x 750 x 1334 375 x 667
iPhone 55, 5S, 5C Retina @2x 640 x 1136 320 x 568

  建议:以iPhone 6为标准 ,尺寸为375 x 667。演示时仅需要根据不同机型可调整Initial scale:

  • iPhone 5s:Initial scale 0.583
  • iPhone 6:Initial scale 1.0
  • iPhone 6 Plus:Initial scale 1.104
小技巧:按住Ctrl从标尺处拖拽全局参考线至横轴375、纵轴667,即可确定单页设计区域

APP设计规范

现在主流两大手机系统:iOS和Android,官方都对APP设计的指导文档:

以iPhone 6为,以下是一些常用的layout规范:

  • Status Bar(状态栏) 宽100%、高20pt
  • Navigation Bar(导航栏 )Toolbar(工具栏)宽100%、高44pt
  • Tab Bar(标签栏)宽100%、高49pt
  • Search Bar(搜索栏)宽100%、高43pt

PC上演示APP原型

写到此处,肚子微饿
  1. 创建一个Page叫做“iPhone Frame for Desktop View”,排序置顶
  2. 从第三方部件库中拖拽一个iPhone 6 的Body到当前Page
  3. 从default部件库拖拽Inline Frame到Body中心,设置weight:375 height:667,并调整位置至Body的屏幕位置
  4. 选中Inline Frame编辑Widget Properties的Frame Target属性为APP入口页,Frame Scrollbars为Never Show
  5. 在浏览器中预览当前页即可,APP会显示在iPhone 6 的body中

移动设备上演示APP原型

首先设置Preview Options里的Mobile/Device,勾选Include Viewport Tag,以便适配移动设备。再根据不同的iPhone 设备设置Initial Scale,这样即可在不同的设备上都完美适配。 Axure在移动设备上演示提供了两种方式:

  • 导出Html文件,通过手机浏览器本地或远程查看
  • 发布至Axure Share,通过下载AxShare应用或URL链接链接查看

建议:共享至Axure Share,手机通过AxShare应用查看。AxShare可以在线查看Cloud项目,也可以缓存到Local本地,同时满足实时预览及离线演示的需求。

如果基于公司信息安全的考虑,还是选择导出Html内网或下载至手机本地查看

参考资料:

The iOS Design Guidelines http://iosdesign.ivomynttinen.com/

发表评论

电子邮件地址不会被公开。 必填项已用*标注