彩票走势图

原型设计工具Axure的应用 (下)

转帖|使用教程|编辑:郝浩|2014-08-13 14:35:41.000|阅读 238 次

概述:本文是资深交互设计师苇子的一篇对于热门原型设计工具axure PR的教程式解读.

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

三、完善原型

页面的主要页面和页面流程确定之后,就可以完善原型了。这时可以叫上产品部的同事一起来完成原型的细节工作。

如何完善原型

①. 按照页面流程中所考虑的交互过程,体现在原型上面。出错,提示等交互细节也应有体现。这时你可能会用到变量、层等高级axure技巧。 

原型设计工具AXURE
点击定时操作弹出层的操作

②.增加说明    

选中某个控件,在右边区域可以为此控件增加说明。    

原型设计工具AXURE
增加描述
原型设计工具AXURE
增加描述后的前台页面,点击黄色图标显示说明提示层

如果对于说明区域的属性不满意,可以修改属性:  

原型设计工具AXURE
修改属性

不过这种增加描述的方式可能会干扰整个页面,很容易让浏览者以为是一个页面元素。也可以采取一种原始的方法为控件增加说明文字:

原型设计工具AXURE
文字补充说明

③. 为页面编号    

当原型不再需要修改时,我们需要为原型页面编号,这样有利于与视觉设计师、前端沟通。    

用途

测试、产品需求文档编写参考、视觉设计参考、前端设计参考等。    

应注意的几点

①.不要过于追求技术表现    

原型有些交互效果做出来会很花费时间,我建议不要过于追求技术表现效果,可以用些文字来说明交互效果。Axure软件的初衷是快速的设计原型,如果在一些技术方面交互设计师花费很多时间的话,就有些顾此失彼了。还是把真实的效果交给前端去实现吧。    

②.为了减少沟通成本,在完善原型时,最好有一定的规范和标准。    

总结

Axure其实只是一种交互工具而已,交互设计最重要的还是想法,工具只是来帮你表现想法的。不必过于追求技术,不必过于追求视觉表现。我们在把握好整个产品方向的同时,应专注于交互流程、页面内交互、布局结构的创新和优化。    

 

下面给大家介绍一些我工作之中记录下来的axure技巧。

1.快速移动页面

大家有没有感觉到,当电脑配置低,页面元素很多的时候,移动页面是一件极其痛苦的事情,有一个好的方法可以解决这个问题:

在非输入状态下,按住键盘“空格”键,界面上的鼠标“箭头”会变成“手”,这样就可以很轻松的拖动页面了。

原型设计工具AXURE

2.原地复制组件

在axure中“ctrl+c”“ctrl+v”复制粘贴,会错位复制一个组件。怎么解决这个问题呢:

用快捷键“ctrl+d”可以原地复制一个组件。

3.复制动作Copy Case

如下图可以复制动作,就不用一个个的设置这么麻烦了。

原型设计工具AXURE

4.直接将素材或控件转换为Dynamic Panel(层)

很实用,特别是在制作过程中发现有些东西还是放在层中展现更好的时候,以前得新建一个层,再把它们Copy进去,现在只需要右键需要转换的素材或控件Convert>>Convert To Dynamic Panel:

原型设计工具AXURE

5.单选群组(Radio Button Group)

您可以一次选取多个Radio Button,按下鼠标右键,并选择“Edit Radio Button>>Assign Radio Group”来设定 Radio Button 的群组关系。如此一来,当这些Radio Button输出到Prototype 时,就会形成真正的单选用户接口。

原型设计工具AXURE

6.添加定位锚点

类似于中的定位功能,点击某一字母,页面就会定位到同一字母所在的区域:

原型设计工具AXURE

用Axure怎么来实现这个功能呢?

a) 首先要用“image map region”在页面上定位一个锚点,并命名为“定位锚点位置”:

原型设计工具AXURE

b) 然后再在点击的地方加上链接

原型设计工具AXURE

如上图,勾选“scroll to image map region”,点击下面的“image map region”,打开对话框:

原型设计工具AXURE

如上图,选择“定位锚点位置”这一项,选中“scroll vertically only”垂直滚动,最后点击确定。

设置完成,看看效果吧。

7.下拉框(droplist)的条件(condition)

这里讲关于“条件”的简单例子。通过编辑条件,可以表现一些更高级的交互效果。

这个例子的效果是,用户切换左边的下拉框选项,右边的提示文字会随之变化。当选中的是图书时,文本框中的文字是“请输入图书名称或作者”;当选中音乐时,文本框中的文字是“请输入音乐名称或歌手”:

原型设计工具AXURE

a) 首先在页面上添加以下的组件,并给下拉框添加两个选项“图书”和“音乐”:

原型设计工具AXURE

b) 为组件命名

原型设计工具AXURE
原型设计工具AXURE

c) 为下拉框添加动作

选择“OnChange”

原型设计工具AXURE

这时会弹出选择交互行为的对话框,如下图。选择add condition:

原型设计工具AXURE

在条件选择的对话框中如下图设置,设置完后点击ok:

原型设计工具AXURE

回到选择交互行为的对话框,这时选择下图这一项:

原型设计工具AXURE

点击上图文本框中的“Variable and Widget value equal to Value”,打开设置变量的对话框,如下图设置:

原型设计工具AXURE

d)重复以上操作,为下拉框添加case2,效果如下:

原型设计工具AXURE

好了,制作完成,大家可以看效果了:

原型设计工具AXURE

条件和变量这一块的功能还需要多多探索,有些功能还是比较强大的。不过在实际的操作中,大多数的富交互效果是很少用到的。

8.恢复文件Recover files

Recover files功能可以帮你找到几天前的文件版本。

点击file>>Recover file,打开对话框,你可以查看最近的文档了:

原型设计工具AXURE

选择recover就可以恢复当时的文档。

9.利用Axure封装视觉标准

看到的折折熊的一篇博客。

交互设计师一般都是出线框图为最终产物,但是往往很多产品只需要利用现成的视觉标准就可以画出原型。为了减少流程、降低沟通成本,所以我建议交互设计师在做类似产品的时候能够直接利用现有视觉标准进行原型的搭建,一般很多交互设计师会用Photoshop来实现视觉原型,但是效率和不可交互性还是存在很多问题,所以需要有一套完成的封装来执行视觉标准并且产生可交互的高保真原型。

 

本文转发自


标签:原型设计

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP