发条c

Axure高效使用十诫(译文)

  

Axure是一款快速搭建软件原型的强大工具。上手Axure很容易;但是快速上手的同时却埋藏着一些隐患。这款软件的易用性很高以至于多数用户不用通过正式的学习便能使用它进行工作。他们可能没意识到自己并没有以最佳的方式使用Axure。

以我作为一个用户体验设计师的工作经验来看,很少有机会将一个页面一次敲定。大部分时间我都要反复进行5到10次的修改。当你以UX设计作为一项敏捷项目的蓝图时,你也许需要保持项目整体进度和开发进程一致。有时这些改变会影响一系列的其他页面。这时候Axure的这些隐藏的小技巧就会帮助节省大量的时间。

我一般通过团队协作来创建线框图和原型。因此,我会使用Axure的“shared projects”任务功能(在Axure7中称为“team”任务)。Axure里多人同时进行一项设计任务是我最喜欢的功能,但是它需要一个有条理的工作方式。你一定会发现别人正在做一个你已经完成的页面或者你正在做一个别人做过的页面。我已经将这关于Axure的10条戒律写进心里,因为Axure是我目前工作使用的工具,但我相信其中很多原则同时也适用于其他工具。

长远来看,我发现的这十条戒律是用来节省时间的重要方法。这种工作方式并非经常在短期内最快的得到结果,但是它具有持续的最佳适应性(原句:but it does allow for optimal flexibilityfurther down the line)。

 

)能用一个元件搞定的时候永远不要用两个

无论是Axure的初学者还是高级用户,我最常见到的浪费时间的行为就是使用不必要的元件。我现在依然能在我自己身上发现这个错误,必须不断地提醒自己这第一条戒律。你添加的每一个元件在以后修改的时候都会多浪费一些时间。经过十次反复修改后这些小问题就会累积起来。下面是一个简单的例子,用来说明表面上看起来一样的两个控件是如何通过不同的方式建立的。

两个例子都是一些人使用单独元件来做文本和按钮。当他想给整个部件添加单击事件的时候,有两种选择。第一种选择是在这个群组上面添加一个热点区,这样就要保留三个元件。第二个选择是给两个元件单独创建点击事件,这样就要保留两个动作。

这两种方式在以后在修改的时候都要浪费不必要的时间。有一种简洁得多的方式创建这个部件,就是给box部件添加文字。

然后你可以通过“alignment andpadding”工具调整文本的位置。现在你只需要保留一个元件然后绑定一个事件给它。


Ⅱ)不要复制黏贴,而是把对象存为模板

进入在设计的后期,我发现自己需要改变所有页面的主导航时,那感觉简直爽死了。不是我喜欢做一堆重复的工作,而是因为我只需要编辑一个母版文件然后“唰!”整个文件就更新了。

很明显主导航部分要用母板创建,但其实每个使用超过一次的对象都值得创建为母版。无论什么时候你需要复制黏贴一组元件的,都要提醒自己创建一个母版更好。

创建母板后,例如上面的产品产品信息标签,如果你要把按钮标签改为”Buy now”,你只需要编辑一次就能看到母版的所有引用都更改了。

记住不要把太大的群组转成母版。对象群组越大将来需要变动的可能性也越大。一般来说把几个母版合并成一个新的大母版比较好。这样在你需要修改的时候就很方便,因为有些元素是固定的还有一些是在变化的,就像下面这样:

这个基础母版并不包含价格信息,但是他可以合并其他的母版组成新母版来显示完整的产品信息。


Ⅲ)创建母版前设置Styles

用母版来创建可复用元素是十分方便的,但是它们不支持差异化。母版的每个实例都和其他的一模一样。这时候就需要引入Styles了。假如你有一个按钮需要在多个页面中使用,但是按钮上的标签需要变化。你可以借助Styles轻松达到。按钮的每个属性都能通过Styles进行管理;你只需要编辑标签就行了。

用mouseover等事件来增加按钮的功能性是很常见的。在Axure中这些事件通常通过动态面板来创建。将不同的情景置于不同的面板状态中通过脚本进行选择。然而这样你就要去每个面板状态去编辑按钮副本。

一个比较快的方法是使用Interaction Styles对话窗。通过这个功能可以简单的给每个事件状态设置不同的风格,然后你只需要设置一次按钮的副本和大小。

小提示:可以对按钮使用“Auto fit width”功能,这是Axure7中的新功能。如果你设置了左侧和右侧填充,你只需要编辑按钮上的文本,按钮的尺寸就会自动适应文本长度。



IV)时刻保持文档组织清晰命名清楚

Axure提供了许多选项保持组织的条理性。页面上放置的每一个元素都可以独立命名。页面可以在一个树形图中进行命名管理。母版可以命名并用文件夹分类。但是为什么要尽量给每个元素都进行命名?

  • 为自己而保持结构的条理性 

    当你精心制作了一个页面并且想通过动态面板创建一定的交互时,你需要筛选长长部件列表来寻找你需要的部分。你可以使用搜索字段——前提是你已经对你的元件进行了系统的命名。

  • 方便团队成员跟进

    如果像我一样通过团队合作了开展项目,意外的事情是经常出现的。你或你的同事可能生病,也可能突然必须去进行另外一个项目。这时文档组织清晰有条理就是十分重要的了,这样别人可以轻松的进行接手了。毕竟接受他人创建的交互系统是十分麻烦的。

  • 可能要与第三方分享

    一般我经历的项目中,我的线框图至少要与10个人进行分享。我可能跟其中一些人坐在一起交流这样我就能对齐进行引导。其他人我可能从未见过面,因而我不知道他们对线框图的理解程度。理想情况下,一个原型应当具有自主可读性。

为了达成这些目标我做了如下这些。

创建一个引导页

你可以创建一个主页作为你原型的启动页面来给人们解释他们正在看的是什么,如何使用它。另外,你还可以提供你的联系方式或者流程图的链接。

给页面一个独特的,能自我说明的名字

如果页面名字很清晰并且能自我解释,那原型就比较容易理解。人们也可以在之后的交流中继续使用这些名字。例如,一个平面设计师根据你的设计进行工作,那么他们可能使用与你页面相同的名字。如果一个页面的名字不是独一无二的,那么这个页面就会出现不同的名字。(原文:If a page’s name is not unique, then different names for the page will appear.)

创建一个适用与多数用户的流程图

大部分用户并不把一个设计想象成页面树;他们将其想象为一个动作流。你可以在Axure里创建一个流程图来反应重要的用户流并且连接节点到相关页面上。你还可以提供一个其他的方式来浏览原型。(流程图中的名字是根据你站点地图中来的。因此,它直接反应你的页面命名是否清晰。)


V)使用全局参考线(GlobalGuides)和网格(Grid)

Axure支持两种参考线:局部参考线,只在一个页面中出现,还有全局参考线,在所有页面中可见。参考线可以通过“Creat Guides”对话框创建。如果你设置了参考线,例如,创建一个默认的960网格布局,然后再往里面添加元素就简单多了。同样的,你的小伙伴们也可以通过共享任务看到这些全局参考线。

使用网格可以让你保持设计简洁,层次清晰。我通常设置10*10pix的网格并且设置所有元素尺寸为10的倍数;例如,一个按钮可以是60*20pix而非55*18pix。这样当你在网格里放置元件的时候,所有东西都变得十分容易对齐而且满足你可能有的一些强迫症。当然,需要不同尺寸元件的时候你也可以偏离网格。

 小提示:在Axure7里,你可以为移动页面和桌面页面设置不同的全局参考线。下面用我喜欢使用的一个移动端全局参考线设置做个例子:


VI)不要忘记导入工具

许多文档里,人们都会创建一些可以在其他文档里继续使用的元素。用来之前创建的东西来替代每个项目里重复的部分。文档里许多基础要素都是保持不变的,例如风格样式,参考线和基础母版。虽然可以从一个  .rp 格式文件里复制黏贴到另一个,但是不是所有的信息都能复制过来。当你黏贴一个有特殊样式的按钮时,按钮的样式就不会被一同黏贴来。

重复使用可复用元素的最好方法还是使用强大的导入功能。它不仅允许导入页面和母版,同时还有风格样式和参考线。

小提示:创建一个“mother”文件储存你所有的标准母版,用来导入新文件。


VII)保留页面的历史版本

我经常发现我需要返回文件的历史版本。在“美好”的旧时光里(我不会解释为什么“美好”是加引号的),我经常要在Visio里创建线框图的时候,管理拥有有很多页面的项目是十分麻烦的,所以我最后往往会遗漏页面。我会经常每隔几天就保存一个新的文件用递增的数字来命名,这样我就能以这种方式保存项目的历史文件。换句话说,我最终会产生一个拥有几百个大文件的文件夹,浪费空间。

在Axure里,追踪文档的历史版本是很简单的。只需要创建一个文件夹(或者Axure6.5及之前版本里的一个页面)命名为Bin。

将老版本的页面放到里面,这样你就可以在需要的时候轻松的回到之前版本。在导出的时候,只需要选择不导出所有页面。这样你就能跟小伙伴们分享简洁的版本同时又保留了之前版本。


VIII)不要创建不必要的交互

第一次使用Axure的人往往对Axure原型中添加交互的简便性印象深刻。我刚开始使用Axure的时候总忍不住添加所有可能的交互动作到页面中。然而,在许多时候,我的设计不需要那么多的交互动作就能清晰的传达给别人——仅仅停留在静态页面就行。现在我只在下面这些问题的答案是yes的时候才会添加交互动作。

1.“我需要交互动作才能清晰的传达我的设计意图吗?”

你的设计用静态页面替代交互动作的时候可能被误读吗?这可能是一个依靠特定动画才能被理解的交互动作。

2.“这个交互动作在后期能节省时间吗?”

创建一个交互元素比在不同页面展示不同状态更快吗?比如,创建维护一个tabs交互页面比给每个tab创建多个页面更容易。

3.“我需说服别人接受一个交互方式吗?”

当我想出一个自认为问题最好的解决办法时,但是我知道这个想法后期实现起来比较困难,我就需要他人来支持这个想法。我发现把这个想法变得具有交互性更容易卖出去。

但是如果这些问题的答案都是no,那我宁愿给一个页面创建多个版本来表现交互元素的不同状态。


IX)使用字体图标而非图片

另一个简单但时常被忽略的保证Axure方便管理的方法是尽量减少图片的数量。要改变原型里一个图片图标的颜色,你必须通过好几个步骤才能完成。你要打开图片编辑器,编辑图片后导出为一个新位图,最后再导入Axure里。

还有个选择就是使用图标字体。使用它你就可以在Axure里改变颜色和大小。 CopyPasteCharacter是一个很大的图标字体资源站,它的字体在许多平台上都能正常使用。

利用字体图标你可以在不违背第一条原则的情况下给按钮添加图像。


译者语:对于在Axure里使用iconfont,译者抱怀疑态度。若在交互稿中使用iconfont,导出的Html文件放到一台未安装此iconfont的电脑上就无法显示。所以理想很美好现实很骨感,我认为这一条看看就好。



X)在浏览器或设备上预览原型

当设计师发现自己的原型在Axure里和在浏览器中看起来不一样时候往往很受打击。特别是文本间距及位置看起来不同。另外,甚至在不同的浏览器中预览也是不同的。为了避免这种情况就要不断的在浏览器或者设备上(如果你是为移动设备而设计的)预览原型。

虽然不可能完全排除原型在Axure和浏览器里的差异,但是可以使用一些方法可以对其进行控制。

TEXTWRAPPING

这是Axure里如何限制文本的:

下面是浏览器中如何限制文本的:

要避免文字被挤到下一行,就要确保文本框有足够的空余空间。最稳妥的做法是给文本它可能需要的最大空间。因此,如果以后你要编辑文本,就不用再重新设置文本框的大小了;它能满足文本的需要。

垂直间距

垂直间距在Axure 和浏览器中看起来是明显不同的。你可以在Axure里调节知道文本在浏览器中显示正常,但是这样花费时间却不能控制结果。要准确定位文本的位置就要把文本分割成几大块来进行排列或者将其装化为图片。第一种方法违背了第一条原则,可惜有时这是无法避免的。


总结

这些戒律中一小部分在短期内就能看到结果,但是大部分将使你长期收益。所有这些都能节省你的时间,更重要的是使你工作的更加愉快。

我希望这些戒律像对我一样对你有用。肯定有人认为其他一些法则更加重要,大家相互交流是十分有趣的,所以在评论中写下你的想法。

如果你还没有,试一下Axure7.0。它的一些更新确实能帮我们更加有条理的工作。

 

最后一点:这些规则和其他的规则一样是用来打破的。不要让规则阻碍你的工作。作为一个聪明的设计师,我们需要知道什么时候该打破规则。



版权声明:
本译文仅用于学习和交流目的。非商业转载请注明译者、出处,并保留文章在译文的完整链接。
原文来源:http://www.smashingmagazine.com
原文标题:The Ten Commandments Of Efficient Design In Axure
原文地址:http://uxdesign.smashingmagazine.com/2013/10/04/ten-commandments-of-efficient-design-in-axure/                        

 
2013-11-18
/  标签: 翻译Axure交互
6
   
评论(6)
热度(39)
  1. LaLaLa发条c 转载了此文字
  2. sshsky发条c 转载了此文字
  3. tju_houyi发条c 转载了此文字
  4. agjie_8604发条c 转载了此文字
  5. 傻子发条c 转载了此文字
  6. 隐秘的阴郁树林发条c 转载了此文字  到 0TMT
  7. R_Tien发条c 转载了此文字
  8. natalie631发条c 转载了此文字
  9. 芒果酱发条c 转载了此文字
    学习
  10. 肥猫的博客发条c 转载了此文字
做人如果冇梦想,同啲咸鱼有咩分别呀?!