欢迎光临
我们一直在努力

使用Axure打造最佳的移动端交互原型教程

一直以来Axure在对移动端原型设计方面的支持都不是十分理想,它没有像目前其它几类原型设计工具(Justinmind、墨刀等)一样提供移动端设备的模板和相关交互组件,但是Axure自由灵活的特性却同样的其它原型设计工具所无法取代的。通过掌握一些设计规范和方法,我们同样可以通过Axure制作出非常完美的移动端演示原型。

1. 选择适合的设计分辨率

在开始设计原型之前我们需要做的第一步是选择合适的设计分辨率,目前使用Axure设计移动端原型时普遍采用的是(宽)375px*(高)667px和(宽)414px*(高)736px两种分辨率尺寸,这两种尺寸分别是由目前主流的移动设备Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比缩放而定义出来的,同时也是Iphone7和Iphone7 PLUS的逻辑分辨率。

有朋友可能会疑惑在设计原型的时候为什么不直接采用移动设备实际的分辨率呢?因为这主要考虑到设计时的便携性,毕竟我们输出的原型主要是用于演示而不是视觉稿,所以不需要达到那么高的精度,另外如果按移动设备实际的分辨率进行设计,在对元件进行编辑和排版的时候会是一件很耗费时间的事情,同时也不方便在电脑浏览器上进行查看。

本人在进行原型设计的时候一般用的是375px*667px这个分辨率尺寸,因为Axure常用的元件默认的字号一般是14px或18px,这两种字号也刚好匹配Iphone7上常用字号的比例,而且这个分辨率尺寸在电脑浏览器上刚好一屏就可以显示完整。

2. 定义内容区域

上面已经介绍了为什么选择375px*667px作为移动端原型设计分辨率尺寸,在开始设计之前我们需要先按照这个尺寸在编辑区域中定义好内容区域。我一般是使用辅助线来定义内容区域的,例如下图是用辅助线定义好内容区域的效果。

事实上我们在设计时其实不用去限制原型的高度,因为在通过移动端设备进行浏览时可以通过滚动页面查看超出高度部分的内容,这跟实际的移动端产品的操作方式是一致的。而在原型设计的时候,我们还是需要拖一条用于标识原型设计高度的辅助线,它的主要作且是为了标识出首屏的区域范围,这对于布局选择是有一定的参考价值的。

3. 神奇的辅助线

辅助线的作用除了用来定义内容区域之外,同时它也能帮助我们快捷的进行布局。辅助线有一个特性就是当你拖动元件靠近它时,元件会自动吸附到辅助线的边缘达到快速对齐的效果,对于有对齐强迫症的朋友来说这个特性会感觉无比贴心。

哟呵精选此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“哟呵精选”或者“yohe360”或者微信扫描右侧二维码都可以关注本站微信公众号。

历史上的今天

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址