Axure RP中文网站-免费下载/在线教程/培训-悠识UserXper



2008/12/18

Axure RP Pro 5.5 新功能特色介绍

Axure RP Pro 5.5版大幅提升自订控件(Custom Widgets)的能力,在Widgets窗格中多出了控件库(Widget Library)的管理功能。新的交互设计能力可以提高原型的保真度(high-fidelity),增加了Dynamic Panel管理功能,也加强了Widget编辑及绘图的属性。

您可以在这里下载Axure RP 5.5版

接下来分成三部分,分别介绍这三个特色:

一:控件窗格及自订控件库
二:新的交互功能及交互设计进阶编辑器
三:动态面板管理员,图片及按键形状的加强,绘图功能加强


一:控件窗格及自订控件库

控件窗格(Widget Pane)

在5.5版操作介面中控件窗格多了一个下拉菜单,可以用来管理控件库,而且还可以透过搜寻控件名称来快速找到适合的控件。

Axure RP 5.5 控件窗格(Widget Pane)
鼠标点击 Wireframe右侧的向下箭头会弹出一个功能菜单,可以观看所有控件库或选择某一特定控件库,特定控件库包含默认线框图及默认流程图,还有任何已经被加载的控件库。这个菜单也提供加载控件库,创建新控件库,编辑控件库,已及更新控件库等功能。

Axure RP 5.5 Widget Panes控件窗格搜寻控件
点击搜寻Icon则会显示查询文本输入框,只要输入文字就会实时显示符合条件的控件清单。

如果一开始就选择了 』 All Libraries』 全部控件库,则搜寻范围就会是全部的控件库。

Axure RP Pro 5.5启动同时会加载线框控件库及流程图控件库,此外,如果已经把创建好的自订控件库(.rplib)放在Windows文件夹的 [我的文件> My Axure RP Libraries],也会被自动加载程序中。或者可以手动选择你所指定的 .rplib 档案来加载到程序中。

自订控件库

Axure RP 5.5 自订控件库
如果你曾经觉得只有两套控件(Wireframe/Flow)实在很不够,那么现在你可以开始自订你自己的控件库了。选择Widget窗格下拉菜单的』Create library』选项,同时建立一个 .rplib档案,如果你希望下次程序启动时自动加载你自订的控件库,那么请把 .rplib档案放到[我的文件> My Axure RP Libraries]目录下。
Axure RP 5.5 储存控件库

当你命名好新的 .rplib档案并存盘,Axure RP Pro立刻启动另一支执行程序并打开这个刚建好的 .rplib档案,在这个Axure RP Pro程序画面中,原本Sitemap窗格的位置会被控件库窗格(Widget Library Pane)所取代,你可以在此新增/删除/整理控件就如同你在管理页面一样。

就跟先前Axure RP版本一样,自订控件本身可以利用现有的Widget来绘制。

Axure RP 5.5 Widget library 编辑自订控件
左图是一个示范控件库,其中一个自订控件是登录Email窗体(下图),它是由三个控件所组合而成(Text Panel + Text Field + Button)。想要创造你自订的控件,就好像绘制一般的网页一样简单。画好的自订控件还可以使用群组的功能(Select All,然后按下GTRL-G),把画面中的许多控件群组为一个控件,以方便使用。
Axure RP 5.5 Widget library 编辑自订控件

Axure RP 5.5 Widget library 汇入ICON
建立好的新控件使用默认的ICON (Page ICON),如果你想要改变ICON,可以在自订控件按下右键,选择』 Widget Properties(控件属性)』 ,便可以自行汇入画好的ICON图示,也可以加入Tooltip的文字叙述。

Axure RP 5.5 Widget library 完成自订控件库
储存控件库之后可以看到如左图画面。

藉由控件库窗格的功能菜单,来加载控件库,或更新目前控件库画面。你便可以看到先前所建立的自订控件库,接下来的操作方式就如同其它的默认控件一样,以拖放(Drag&Drop)的方式将控件放到画布上进行画面的绘制。


二:新的交互功能及交互设计进阶编辑器

新的交互功能

Axure RP 5.5新增了3个动作型态包括: Set Focus on Widget, Bring Panel to Front, Set Widget(s) to Selected State。

指定焦点控件(Set Focus on Widget)

这个动作型态可以用来设定焦点在指定的控件上。比如当网页被浏览器加载时(OnPageLoad的交互设计),光标立刻Focus在某个文字输入框(Text Field)或复选框(CheckBox)上,让键盘动作可以进行打字输入。

动态面板移至最上方(Bring Panel(s) to Front)

这个动作型态可以将指定的动态面板(Dynamic panel)移动到画面的最上层。这个交互设计通成会被应用在表现多层菜单/Tooltips或光箱效果,好让Dynamic Panel能够不被其它图层覆盖了。

指定控件样式 (Set Widget(s) to Selected State)

这个动作型态可以控制控件的样式(Style),以动态呈现不同的样式。通常会应用在导览菜单(Navigation Menu),当网页加载时(OnPageLoad的交互设计),控制某个控件变更为指定样式(Seleted Style),形成该导览选项的突显效果。(设定控件样式的新功能,请看三的介绍)。

进阶交互设计编辑器 (Advanced Interactions Editor)

交互状况设定器(Interaction Case Properties对话窗)新增了进阶编辑器(如下图)的功能。

原本的基本编辑器可以一次显示所有支持的交互动作型态,需要使用的时候就已沟选的方式来进行设定,而且会依照默认的顺序来执行多个动作。如果改采用进阶编辑器,你就可以自定交互动作的顺序,而且相同的动作型态可以进行多次的表现。

Axure RP 进阶交互设计编辑器

使用进阶编辑器来进行交互设计的一种可能应用,是以Dynamic Panel来表现出动画效果 (Animation)。比如在某个Dynamic Panel中,以进阶编辑器来控制每个State(状态)的出现顺序与出现间隔时间,以表现出动画效果。想要做到这样子的交互设计,就必须按照「Set Panel State(s) to State(s)』接着』Wait Time(ms)』 」的顺序,重复增加多个动作表现,这就是进阶编辑器与基本编辑器的差别。基本编辑器只能针对相同的动作型态来执行一次动作,而进阶编辑器却可以加入更多的动作表现,而且可以重复执行多次该动作 (如下图)。

当某一种动作表现已经被使用多次了,返回基本编辑器的连结会隐藏,因为这种设定方式无法透过基本编辑器的窗口来表现动作的执行顺序了。

Axure RP 5.5 进阶交互设计编辑器


三:动态面板管理员,图片及按键形状的加强,绘图功能加强

动态面板管理员(Dynamic Panel Manager)

动态面板管理员(如下图)提供了管理页面中所有Dynamic Panel的功能,可以在主菜单上选择「View->Dynamic Panel Manager」来开启这个功能。
动态面板管理员 Dynamic Panel Manager-1

动态面板的状态(State)可以透过动态面板管理员来新增/移除/编辑状态画面。在Dynamic panel名称或State名称按下鼠标右键会弹出一个功能菜单,藉由这个菜单可以新增/移除状态。以鼠标左键点击两下状态名称,就会打开状态画面并进入编辑模式。

此外,为了方便编辑网页内容,动态面板管理员提供了很方便的暂时隐藏或显示动态面板的功能。以鼠标点击Dynamic Panel名称右侧的淡蓝色小方块,可以在隐藏与显示之间切换。或者在网页名称上按鼠标右键,选择 Hide All / Show All一口气将画面中所有的Dynamic Panel隐藏或显示出来。
动态面板管理员 Dynamic Panel Manager-2

图片及按键形状的加强

针对图片(Image)及按钮形状(Button Shape)的控件,Axure RP加强了这些控件的绘图功能。包括:

  • 固定图片边角(Preserve Corners for Images)
  • 针对图片(Image) / 按钮形状(Button Shape) /
    菜单项目(Menu Item)控件增加这三种样式的设定功能:鼠标按下时的样式 / 被选定时的样式 / 停用时的样式。
  • 图片上可以加上文字 (在图片控件上按下鼠标右键,选择「Edit Image->Edit Text」,或者选好图片控件后开始打字。
  • 可调整按钮形状(Button Shape)的圆角半径

固定边角(Preserve Corners)

固定图片边角的功能,允许你放大缩小图片后,不至于扭曲了图片的边角。
对于Windows / Mac OS操作系统的窗口介面,这种效果会使得图片放大缩小后,仍有效保持视觉上的合理性。
要调整图片的边角固定范围,在图片以鼠标右键选择「Edit Image->Preserve Corners」。
边角固定范围 Preserve Corners

进入调整边角固定范围的编辑模式之后,在控件的上方及左方个出现两个小箭头,调整这两个箭头位置(上下或左右),就可以决定这个图片控件被放大缩小时的边角固定范围。
边角固定范围 Preserve Corners-before

指定好图片的边角固定范围后,即使将该窗口图片控件放大或缩小,我们还是可以看到一个很合理的窗口,边角的呈现不致于因图片本身放大缩小而失真。
边角固定范围 Preserve Corners-after

鼠标按下时的样式 / 被选定时的样式 / 停用时的样式

图片(Image)及按钮形状(Button Shape)控件的样式原本只有变换图片的样式 (Rollover Style),现在多增加了鼠标按下时的样式(Mouse Down Style) /被选定时的样式(Selected Style) /停用时的样式(Disabled Style)三种样式。
被选定时的样式Edit Seleted Style

这些样式可以用来设计自订的交互按钮或页签。要使用被选定时的样式(Selected Style)则必须配合交互设计功能中的「选定控件样式 (Set Widget(s) to Selected State)」动作型态。要使用停用时的样式(Disabled Style)则必须配合「停用控件(Disable Widget(s))」的动作型态。

被选定时的样式(Selected Style)也可以藉由 OnPageLoad的触发事件来突显某个菜单项目或导览选项,
被选定时的样式 Set Selected Style

绘图功能的加强

以圈选模式选取控件(相似Visio/PowerPoint模式)

Axure RP默认选取控件的模式是「随选模式」,也就是鼠标指标点选拖曳所到之处,只要被这个范围碰触到的控件,就会被选取。

现在增加了一个新的选取模式-「圈选模式」,使得只有那些完全被鼠标指标所画出的矩形区域包围者才会被选取。这种软件操作模式就跟操作Visio或PowerPoint一样。

想要改变选取模式,点选工具列的「Select Contained Mode」按键(如图),或直接按 CTRL-F9。
以圈选模式选取控件 Select Containted Mode

选取群组内的控件 (Deep Selection in Groups)

当控件被群组(Group)起来以后,新版Axure RP 5.5允许你针对群组中的单一控件进行编辑,增加批注,或设计交互表现,甚至可以移动或缩放群组中的控件尺寸与位置。要选择群组中的控件是很简单的,只要以鼠标左键去点选你要的控件即可。
选取群组内的控件 Deep Selection in Groups

位置与尺寸设定窗格(Location and Size Pane)

位置与尺寸设定窗格(Location and Size Pane)取代了先前版本的位置与尺寸对话窗(Location and Size dialog)。要开启这个窗格,以鼠标右键在控件上选择(View->Location and Size)即可。
当你在绘制画面时,这个窗格现在可以维持出现在画面上不会消失,方便随时调整位置与尺寸大小的数值。这个新功能可以针对单一控件或多个控件一次性的调整,当你想要对齐一群相同特性的控件时,这个功能让你更快设定控件等宽或等高,更容易对齐控件位置。
位置与尺寸设定窗格(Location and Size Pane)


访客留言

  1. 小陈 2008/12/13 / 8上午

    大概什么时候发布啊?期待中!

  2. awing 2009/2/11 / 9上午

    能否加入文本的行间距控制功能,这是一个很基本的功能啊。

  3. Ayliff 2009/6/25 / 10上午

    请教一个问题,如果我想在演示过程中,点击某个链接,弹出一个窗口或者面板,然后可以移动该窗口或面板,应该怎么来实现呢?!呵呵!谢谢!

  4. richard 2009/6/25 / 10上午

    to Ayliff,

    1) 点击某个链接,弹出一个窗口:
    在onClick的event中,加入一个Case,然后选择 Open Window的Action.
    这个弹出的窗口,就是browser的窗口是可以任意移动的 (被鼠标drag移动)。

    2) 点击某个链接,弹出一个面板:
    你必须先有一个面板。OnClick的Event,加入一个Case,然后选择 Show Panel的 Action。
    但是这个显示出来的面板,不能被被鼠标drag任意移动。除非你还利用其他的Axure交互设计技巧来做,但這種技巧不直觉,不是那么需要学习。

张贴留言

* 为必填,您的email并不会被显示
姓名

Email *
下载Axure RP 最佳网站/AP原型设计软件 下载Axure RP 最佳网站/AP原型设计软件

 
 
 
 
 

XHTML / CSS / Designed by Handlino