首先需要声明,在下面提到的原型和交互Demo有其特定的应用环境,在通常情况下,原型和Demo并不是等同的概念。当我们提到原型时,那可能是各种各样的产出物,流程图、思维图、纸上的草稿、甚至视觉确认稿和前端HTML页面,但在本文中提到的Demo指的是交互设计阶段的最终交付物,当然主要是通过Axure完成的交付物。

1、不要把Axure当做视觉设计工具

作为一名交互设计师,把fireworks和photoshop从你的脑海中踢出去。我见过一些交互设计师仍然在使用photoshop来制作交互Demo,从某种程度上我认为这是很难得的细致和认真,但从交互设计师的角度这并非一种有益的努力。

除非你在工作中同时兼顾交互设计和视觉设计,那{zh0}不要再尝试在photoshop中进行交互原型创作——因为这不仅在浪费过多的时间,photoshop本身不适用于排版和布局,更因为使用photoshop来创作不可避免的会分散交互设计中所关注的焦点。

2、但也并非草稿工具

另一方面,Axure却远非很多人想象的只是集合了一些常用控件的草稿工具。Axure之所以成为交互设计师和信息架构师的{sx}原型设计工具,不会仅仅因为是提供了几个如此简陋的控件的线框图工具。

如果你够深入了解Axure的功能,你会发现在某些方面,Axure已经为您放弃photoshop做好了充足的准备。

是的,你不仅可以改变字体、字号、颜色,也能调节边框粗细、颜色、背景色、圆角,别忘记它甚至可以调节渐变色和支持透明,这也意味着只要你够用心,你可以用axure很大程度上进行视觉设计,当然,这并非我们用axure的目的,只是想提醒你,不要用“Axure只是画线框图”来作为你的丑陋的原型的借口了:)

3、不要把注意力集中在动作脚本

也许很多人推荐Axure更看重的是其提供了丰富的动作脚本支持,对于不懂html和js的交互设计师来说,Axure可能是一种福音——因为Axure的动作脚本功能使得动态模拟真实界面交互变成可能。

借由Axure这堪称难用落后的动作生成工具,我们能实现状态切换、时间动画以及其他一些惊人的小玩意。一些人对Axure中的动画乐此不彼,而这也是很多交互设计师接触Axure之后感到迷人的地方。

但有时候我们的确需要反思,在我们的工作中是否需要再次花费更多的精力和时间?

这也许决定于我们在设计的这个原型是用于什么情境。如果原型是用以进行前期的用户测试,那很有必要在没有可用以测试的前端demo之前,对于我们的交互Demo花费更多的精力来使得从界面效果到互动效果都更接近于实际界面。但如果原型只是用于流程中的交互物,如提供给视觉设计师或前端工程师进行开发,那么过度的设计和效果则并非所需。

4、交互demo的作用在于提供流程说明和状态的表述

或许我们需要认真定义一下交互Demo需要解决的是什么问题。

交互Demo在整个开发流程中主要影响产品设计师(主要体现在产品功能需求文档——即需求的确认阶段),视觉设计师和前端工程师。对于产品设计师而言,需要的是将功能需求实体化,也需要基于产品原型来讨论用户体验;而对于视觉和前端而言,交互Demo是否漂亮是一个无意义的问题,在视觉设计和前端开发看来,Demo是否指明了产品界面中关注的元素和重点、是否描述了各种异常的、奇怪的可能性的解决方案;因此他们更关心在Demo中看到“如果…”,“未登录状态时…”,而不是漂亮的颜色和线条。

5、尽可能将状态标注放在同一界面

正如前面提到的,一些设计师习惯于将状态做在动态面板中,以便于Demo演示,但实际而言,这样并不利于Demo提交给视觉设计师和前端工程师进行开发时参考。尽可能将页面元素的各个状态标注在同一界面,便于其他开发者直观了解设计时需要解决的问题。

6、善用widget和master,提高效率

尽管Axure相对于Fireworks或Photoshop十分的低成本且高效,但和手绘或纸上原型而言,大量的页面进行统一的更新也是相当麻烦的一件事。也许你需要考虑在某些情况下,用master来取代复制黏贴了。

master是Axure提供的类似于自定义组件的功能,你可以创建一个独立的master,可以在其中放入常用的元件组,如header和footer,然后在各个界面中拖曳相应的header或footer到指定位置。这样当这些共用的header或footer需要修改时,只需修改mater即可。

当然master并不仅仅是为了解决你修改链接或图片的问题,你甚至可以在master设计将常用的交互组件,然后在不同的页面引用,而这也正是master迷人之处。

7、尽管Axure对中文支持不好,但别泄气

是的,正如很多人不爽的一样,我也常常为在某些控件中无法顺畅的输入中文而感到恼火。不过这并非{wy}需要指责的地方,Axure的文本段落无法调整行距,这已经成为中文Axure用户最难以忍受的问题,或许在多数排版工具,包括office word,行距都是一个重要的功能。英文段落的默认行距尚可接受,但中文行距则略显拥挤。

不过,这或许也需要反向思考,因为axure并非排版工具,对文本的支持问题我们也有其他的替代方案。其中之一就是在多行列表之中,将段落文本拆分,简单而言就是每个列表项目作为一行,则不仅便于调节行距,也更加灵活和自由。

8、更多提示

即使是Axure的高级使用者,您或许也可以接着看下去:

批量修改尺寸

一个常会遇到的问题,就是大量列表信息需要统一修改尺寸,是的,您可以通过shift多选拖曳改变尺寸,但你会发现改变的尺寸常常变得不可控。是的,有一些小诀窍,隐藏在“location and size”面板。

批量修改尺寸 by you.

选择多个元件时,你不仅可以通过该面板修改整体宽度和高度,更重要的是可以就选中的所有元件统一修改其宽度或高度。你会经常遇到类似的问题的。

隐藏引导线

尽管这些引导线并不会影响生成和预览,但想必你和我一样想过要消灭他们。是的,Axure给我们提供了隐藏他们的方法:

尝试菜单wireframe——Gid来检查一下除了隐藏引导线,还有哪些惊喜。

当然,你也许有很多可以分享的Axure使用经验,欢迎给我留言或email给我:Robert.think[a]gmail.com

9、一些实例

如果您认为上面这些内容对您有帮助,那么我相信下面的两个Axure源文件对您也将有一定的参考意义。

请注意,Demo仅仅作为展示Axure可以做成怎样,但并非实际项目,所以并没有常见Demo中必须的标注信息。