交互设计第五节课——Axure移动原型制作技巧

制作可滚动的列表

在网页里,网页长度超过屏幕长度,浏览器侧边就会出现滚动条,滚动条既是指示屏幕当前所处的网页位置,也可以对屏幕显示的网页位置进行操作。而且滚动条是自然而然出现的,会根据不同的屏幕而适配。不过我们要在Axure里做移动原型的时候,一般先要绘制一个手机框,这个框的高度是定死的,如果在框里内嵌一个Inline Frame(内部框架),框侧边会出现难看的滚动条,要知道移动端屏幕寸土寸金,滚动条只有在进行滚动操作的时候才会出现,默认处于隐藏状态,因此用Dynamic Panel(动态面板)是个不错的选择。

第1步:绘制一个手机框,这个比较简单,两个矩形套在一起,外面的矩形上色加上Corner Radius(圆角),然后组合就好,为了提高复用性,还可以做成Masters(模板)。用axure绘制一个手机框

 

第2步:准备好界面素材,我在网上找了一张Yahoo Mail的安卓主界面UI,拉好辅助线,右键图片使用Slice Image,很方便的把图片切割成想要的元素。axure切割图片元素

 

第3步:在手机框上放置一个屏幕大小的Dynamic Panel命名为out frame,将切割好的UI元素放置在out frame的State1里。axure放置Dynamic Panel动态面板

 

第4步:把需要滚动的列表部分拉长,超过out frame的长度。这里可以复制列表图片,然后粘贴,最后组合在一起。然后把这个拉长的列表部分转换成动态面板,命名为listviewaxure转换成动态面板

 

第5步:选中list view,然后把Properties(特性)里的Scrollbars(滚动条)设置为Vertical as Needed(按需垂直滚动条)axure Vertical as Needed(按需垂直滚动条)

 

第6步:将listview高度缩短到out frame高度一样,这时候你会发现侧边已经出现了滚动条,但是在APP里显示这种PC样式的滚动条实在是丑爆了,接下来把listview的宽度拉宽,直到滚动条移出out frame的区域(蓝色虚线框)。接下来Preview(预览)就可以看到效果啦!axure Preview(预览)

制作横向滚动视图

横向滚动视图在图片编辑APP里很常见,例如选择滤镜,也许有读者看到这里会以为和制作可滚动的列表一样,只要把Scrollbars(滚动条)里由Vertical as Needed(按需垂直滚动条)改为Horizontal as Needed(按需横向滚动条),开始我也是这么想的,但是不可行,因为没有一个方便的操作方式可以控制横向滚动,垂直滚动在PC上通过鼠标滚动或者上下方向键,在移动端可以上下滑动,但是移动端上压根就没有横向滚动条,更别谈其操作方式了,所以在这里需要用到Axure的交互事件。axure制作横向滚动视图

 

第1步:请参考可滚动列表的前3步,绘制手机框架,放置动态面板(这次手机屏幕的动态面板命名为out frame2),切割UI元素并放到out frame2的State1里,这次要转换成动态面板的部分是滤镜区域,将滤镜区域转换成动态面板,命名为horiz-panel。axure转换成动态面板

 

第2步:对horiz-panel的State1进行编辑,多弄一些滤镜图片(至少超过一屏啦,要么怎么滚动呢),这里我采用的是复制原来的滤镜,然后粘贴,用黑色矩形把原来的滤镜名称覆盖掉,然后加上新的名称。虽然效果有些差强人意,但是也算是个快速制作原型的技巧之一啦。然后把我们制作的这个滤镜长条再转换为动态面板,命名为move-panel。axure 再转换为动态面板

 

第3步:回到out frame2的State1的编辑界面,设置horiz-panel的OnDrag(拖动)交互事件,按x轴移动move-panel面板。接下来预览就可以看到效果了。axure OnDrag(拖动)交互事件

如何将Axure原型放到手机里演示

这里可以参考小和的《如何把axure导入到手机》(http://danielue.com/?p=280),不过我个人这个方法很繁琐,而且效果不好,虽然在传统的web端,Axure是必备软件效果也好,但是到了移动端Axure还是很吃力的,没办法模拟APP里的多点触控、手势、动效,而这些触控正式APP的独到魅力,因此我觉得可以考虑在需要做APP高保真原型,可以考虑一下其他软件,例如Framerjs、Quartz Composer等。

最后附上原型文件的下载地址:http://pan.baidu.com/s/1eQsyhEU

《交互设计第五节课——Axure移动原型制作技巧》上有5条评论

  1. axure pro 7.0 亲测与教程中的不同:1. 多出来的滚动条不需要特意设置超出面板宽度,通过移动端发布就会变成移动端的默认细滚动条;2. 水平滚动也可以直接设置Scrollbars(滚动条) 属性,不需要复杂交互

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据