欢迎自行点选HTML prototype或下载此案例的RP檔：
Axure in action: HTML Prototype
Axure in action: AxureInAction_1_2.rp 档案 (Axure RP 5.6格式) (3 MB)

这个范例由 Luca Benazzi (http://www.lucabenazzi.eu)所设计。Luca Benazzi 是伦敦的UE设计师，从2003年开始，从事人机介面设计及信息架构的工作。他参与过的成功项目不计其数，其中包含许多知名品牌，比如eBay, PayPal, T-Moble, Dubai Holding, Royal Mail, Unilever, Sainsbury’s等。

嵌入flash

比如说，想要嵌入flash到prototype里头，而这个flash档的网址是 http://www.example.com/video.swf，接着把这个网址输入 inline frame的 Default Target，输出Prototype之后，就会再浏览器上看到flash出现在prototype里头了。如果要让prototype上的flash更好看，可以设定inline frame的 『Toggle Border』，把border去掉。

如果swf文件是在自己的计算机，那么把swf文件放到prototype的同一个数据夹目录，接着把这个flash档名输入到inline frame的 Default Target，输出Prototype之后，一样会在浏览器上看到flash出现在prototype里头了。

要留意的是:
1. flash swf文件本身的属性如果是自动缩放到窗口大小，就会自己缩放符合inline frame的大小， 否则就会受到inline frame的大小限制而遮蔽
2.建议以IE观看网站原型。在IE跟Firefox上检视嵌入flash的prototype，IE的表现比较正常的，在Firefox上偶尔会无法显示flash

嵌入现成网页

如果想把现成网页加入prototype，Axure RP目前并没有办法直接喂入 html code，因此也是得采用inline frame widget。

将inline frame widget的size设定成屏幕大小，比如1024×768，然后再特定的现成网页，输入为Default Target，这样一来就会在prototye上看到这个现成的网页了。这里有个嵌入网页的例子。

嵌入Youtube video

那么嵌入youtube video又是怎么回事呢? 其实最简单的方式是利用撷图软件 (推荐Faststone Capture 5.3)，抓个youtube video的画面放进来。

如果你并不满意只抓了画面贴近来，一定要嵌入会播放的youtube video，那么可以用下面的方式来嵌入Prototype。
step 1. 将Youtube video提供的embed html code，另存成一个单一html file (假设命名为 youtube.htm)；
step 2. 将youtube.htm 放到prototype的同一个数据夹目录；
step 3. 透过上述的操作方式，设定inline frame的 Default Target是youtube.htm。
这么一来输出prototype就可以看到网站原型中可以看到可播放的video了。

依照这种作法，很多特殊的网页呈现方式，都可以嵌入到prototype里头。但是建议Prototype的设计人员，能够抓图来模仿就尽量抓图，不需要为了完全的拟真去模拟这些设计，缩短Prototype设计的时间，才是Axure RP提供快速原型设计(Rapid Prototyping)的本意。

在同一页面，有2 个下拉选单- A 和 B。下拉的选项分别各有 2 个- a1, a2, b1, b2。

交互设计要做到的效果：
当 A 选择 a1 时，B 自动变为 b1
当 A 选择 a2 时，B 自动变为 b2

　》浏览这个范例的Prototype
　》下载这个范例的RP文件(下载后请解压缩)
　》教学影片-以下拉选单(droplist)来控制换页 1分24秒

作法：

详细教学请参考　》教学影片-以下拉选单(droplist)来控制换页 1分24秒。

当Droplist物件遇到OnChange的触发Event时 (请留意不是 OnClick )，新增交互设计的Case。

新增Case之后，设定符合条件的状况 – 在 『Add Condition』 (或 『Edit Condition』)的窗格，选择 selected option of A 等于 a1。

接着，定义正确的交互Action – 在 『Set Variable and Widget value(s) equal to Value(s) 』 的窗格中，选择 Set selected option of B 到 b1。

完成后的交互设计的statement如下:

OnChange:
Case 1 (If selected option of A equals 『a1″):
Set selected option of B equal to 『b1″
Case 1 (Else If selected option of A equals 『a2″):
Set selected option of B equal to 『b2″

类似的教学范例可参考 – 下拉选单(droplist)交互设计-控制换页。

本文已获得作者同意转载。以下文章，已将作者原文翻成繁体中文。

利用Axure封装视觉标准

作者:折折熊 日期:2008-07-10

很久没有发表文章了，最近一直在研究产品设计标准的问题，之前有发过一篇关于Axure的教程，相信很多人已经学会如何使用，这次我给大家介绍一下如何利用Axure将视觉标准封装并使用。

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

背景就不多说了，来讲讲Axure怎么使用视觉标准。这里用到最多的就是Axure里面的Masters的功能，（如果你还不清楚Axure如何使用，请点此查看教程）。

一、创建视觉零件库

1、把视觉标准中的元素进行提取。

一般视觉标准的形式是以PSD、JPG、WORD等，你所要做的就是把每个元素单独保存成gif文件，最好背 景是透明的，而且把组件上的文字都去掉保持可扩展性。分类可以按照自己需要来分，我是分为：Logo、icon、button、tab、table、 flow。

图1-1 按钮的视觉标准

图1-2 视觉零件分类

2、在Axure里面的Masters功能区中新建一个档夹，命名为“视觉零件”，在文件夹下面新建一个Master。

图1-3 新建Master

3、双击打开这个Master，在Widgets里面把图片组建拖动到中间的操作区域中，双击找到你已经保存好的gif文件，这样一个视觉零件就加到你的Axure里面了。

图1-4 将视觉组建放入Axure中

4、如果这个视觉零件本身需要文字元素，那么在Widgets里面把文字组件放到视觉零件上的相应位置，然后根据视觉标准调整文字样式。注意， 因为Axure不支持中文，所以他的字体和html中的px是不同的，html中的12px字体在Axure里面要设置为9，14px的要设置为11，以 此类推。

图1-5 增加文字元素

5、在Axure中Master可区分为可单独编辑(Custom Widget)和不可单独编辑(Normal 及 Place in Background)，预设是不可单独编辑，也就是只要改动一个Master的样式，该 Master在Page中所应用到的地方都会改变。因为这个是视觉零件，需要单独编辑，特别是在编辑文字的时候，所以右键点击Master列表中的零件， 选择“Behavior”下的“Custom Widget”即可。你也可以将视觉零件Group一下，使其在page可以一起拖动，并仍然可以编辑。

图1-6 选择可单独编辑(Custom Widget)

6、保存并重复2~4的步骤，你可以完成所有视觉零件的转换。

图1-7 完成视觉零件的转换

二、结构库构建

有了视觉零件还不够，有时候我们更多倾向的是一块块现有结构的应用，类似于网站的头部和底部是可以直接调用不需要再设计的。类似于这类的结构， 我们利用现有视觉零件进行搭建。方法和搭建视觉零件类似，只要新建一个档夹然后新建Master，再把相应的视觉零件拖放到指定位置便可以完成。

这里要主要几点：

1、要把一些基本交互要加到构建中，保证原型的可交互性（点此查看如何增加交互动作）；
2、一般结构库的分类为：Layout、Menu、Flow、Information、Function，你也可以自行分类；
3、结构组建是属于统一的内容，所以可以不需要转换成可单独编辑的模式，也可以根据个人需要自行转换。

图2-1 结构模板列表

图2-2 结构模板实例

三、视觉标准的更新

要记住一点：不断更新。要定期把新的视觉组建加入到Axure中。

完成一、二两大步骤其实你已经可以开始工作了，每次使用这套封装的组件时你只需要导入你的组件文件，并选择第二项“Masters”，以及Check All所有组建，点击确定完成就可以直接使用了。

怎么样？是不是觉得线框图不再是简单丑陋、而且不再需要为沟通而烦恼了（特别是有些没有视觉头脑的需求方在看到简单线框图的时候会一脸凝重地和你沟通）

PS：有些交互设计师会对一些布局细节担忧，害怕自己会一直调整对齐和细节。记住，我们出的是可交互的原型，不是最终产品，不需要考虑太多的视觉细节，这些会由前端开发去进行标准的把控。

图3-1 利用Axure搭建的高保真原型(High Fidelity Prototype)

现有一个Droplist，其中有AAA，BBB，CCC三项，如何为这三项设定Link，并且在输出的页面中点选这三项中的任意一项，链接到对应的页面中。

　》浏览这个范例的Prototype
　》下载这个范例的RP文件(下载后请解压缩)
　》教学影片-以下拉选单(droplist)来控制换页 1分43秒

作法：

step 1. 对 Droplist 这个Widget 给一个命名，比如 ‘drop-list-demo’

step 2. 选择 OnChange 触发事件(Event) ，新增一个Case；接着在交互设计的窗格中，点 Add Condition…

step 3. 选择 selected option of drop-list-demo，以及value 等于 ‘AAA’

step 4. 勾选 Open Link in Current Window，接着在Link Properties窗口选择 ‘Page 1′

step 5. 如果按照上述步骤设定成功，那么你会在 Interaction Case Properties看到如下叙述:

If selected option of drop-list-demo equals 『AAA』
Open Page 1 in Current Window

这段叙述的意思是，当 ‘drop-list-demo’这个对象(Widget)的选项等于’AAA’时，则link到’Page 1′ ，画面如下。

step 6. 重复上述步骤，将 ‘BBB’, ‘CCC’的选项设定为link 到 Page 2 及 Page 3。

更快速的操作方式，则是利用复制Case的方式，Copy/Paste这两个交互设定到 OnChange 之下，然后进行修改 『Edit Condition..』，调整Open Link的目标网页到’BBB’, ‘CCC’。如此便可完成正确的交互设计了。

Copy/Paste Case 画面如下：

全部完成之后，完整的Interaction design画面如下：

类似的教学范例可参考 – 下拉选单(droplist)交互设计-控制另一个下拉选单。

可以参考模拟Yahoo! YUI TabView的这个Axure RP示范，使用到渐层填色的技巧来设计Tab。

渐层填色的效果会增加视觉设计上的丰富性，但是若以网站Prototype Design来说，实际上应该没有必要做出渐层的设计。除非是应用在Usability Test上，用来测试使用者对于网站介面的心理愉悦方面的感受，不过这部份的工作，应该交给网页视觉设计师来负责，改以绘图软件(比如Photoshop)来完成整体的视觉设计。

在网站Prototype的设计上，加入过多的视觉设计，常常会导致观看Prototype的项目相关人员(客户/老板)开始以网站美丑的角度来评估Prototype，反而忽略Prototyping阶段应该要更重视的信息架构/导览动线/信息设计等重点。因此当您决定在Prototype上加入视觉/色彩的元素时，必须提醒观看Prototype的人不要以美丑来评判Prototype。

渐层填色的功能很容易学，只要观看下图(撷取自Axure RP的画面)，很容易就知道如何设定了。

说明

Tab(页签)介面设计是这几年相当流行的Web介面设计元素，这种介面常见于Web 2.0 Style网站。技术上采用AJAX或Javascript所设计出来的Tab介面，由于可以快速切换内容，节省浏览时等待换页的时间，颇受使用者欢迎。在许多知名的网站都可以见到这类的介面设计，比如Yahoo!Kimo首页新闻、UDN联合新闻网。

如果您的开发团队需要Tab设计的原始码，可以参考 Yahoo!的YUI Library Examples: TabView Control。我们在这里所做的示范，也是模拟Yahoo! YUI TabView的设计。

这里提供了3个Axure RP 的Tab设计范例：

• 范例1 : 水平 TabView Design Pattern
• 范例2 : 垂直 TabView Design Pattern
• 范例3 : 另一种 TabView Design Pattern
• 范例4 : 内文有图片 TabView Design Pattern
• 范例5 : 新增 Tab交互设计，模拟新增第4个Tab类别的交互设计。

这5个Tab设计范例都是采用Axure RP的Dynamic Panel的Widget，设计出Tab(页签)的Prototype。当使用者点选Tab (页签)，就会触发 『OnClick』的Event，变换Dynamica Panel里头的Tab内容。范例1,2,3的色彩设计也是采用Axure RP直接设计出来的，Axure RP Pro 5提供了渐层色彩填色功能，能使得Prototype增加视觉效果。

您若需要用到这个介面设计，可以下载本范例RP文件 Axure RP Prototype范例-TabView RP文件(下载后解压缩)，复制已经做好的示范到您自己的Axure RP Project，便可快速复制相同介面了。

什么时候应该使用Tabs设计?

• 有多样的内容要呈现，但是网页画面空间不足时，可以使用Tab切换窗格来节省画面空间
• 这些内容可以被分类，而且不同类别的内容并不需要同时被呈现
• 在切换不同类别内容时，并不需要换到另一个网页
• 如果要切换到其它的网页时，Tabs的设计必须以设计导览系统的方式来设计Tabs (Navigation Tabs)

使用Tabs设计必须留意什么问题?

• Tabs通常适用于2-8个类别，数量过多的类别，会造成网站使用者的困扰。多达10个以上的类别，网站使用者就必须非常专注才能够挑出他所需要的内容，这就不是好的分类方式
• 类别名称通常必须够短，而且命名要有明显的区隔及差异
• 被选择的Tab类别一定要有明显的标示(Highlight)，以显示目前内容窗格是什么类别的Tabs

分类的举例

• 不好的分类: 『美容 精品 服饰 表 美食 家具 寝具 床垫 食品 餐厨 单车 机车 汽车 运动 旅游』 ，分类项目过多
• 不好的分类: 『垦丁民宿饭店订房 台北捷运邻近饭店 高雄捷运邻近饭店 阿里山民宿饭店 谷关游泡汤』，类别名称过长
• 不好的分类: 『好康优惠 最佳优惠 站长推荐好康 网友票选』，类别名称太过相似，不易分辨
• 好的分类: 『生活 家电 3C 时尚 交通 育乐』，类别数量不超过8个，分类名称很短，而且分类之间差异性很大，很容易辨识

　》点下图进入Tab切换效果Prototype展示范例。

建议您同时观看这个网站原型的操作影片，配合实际的HTML prototype，来体验Axure RP所带来的丰富交互经验。观看Axure RP范例-旅游网站原型操作影片。

下载此范例相关档案 (按鼠标右键另存新档)

　》Axure RP Prototype范例-旅游网站RP檔 1 M bytes (下载后请解压缩)
　》Axure RP Prototype范例-旅游网站策划书(Word 2000格式) 1.7 M bytes
　》输出网站策划书所需的Word 2000格式之Template档案 40 K Bytes
　》Axure RP Prototype范例-旅游网站策划书(Word 2007格式) 700 k Bytes

说明

这个原型是模拟一个旅游网站，提供了机票/旅馆/租车等服务。Axure RP的网站Prototype范例当中，旅游网站的这个范例仿真了很多功能，也完全展现Axure RP可以完成什么程度的网站原型。

旅游网站范例展示Axure RP的原型设计能力，分别展示了低准确度 (Low Fidelity)以及高准确度(High Fidelity) 的原型。这两种范例都使用了Master的功能，简化规划时的重复工作。

高准确度的版本，在Axure RP的操作技巧上，属于4颗星的难度，因为除了Master, Dynamic Panel之外，这个范例也采用了变量的观念来设计登入后的个人化讯息，对于没有程序设计背景的使用者来说，这会是一个学习上的挑战。

不过，网站策划人员的职责多半仅只限于架构与介面的规划，并不需要着墨于视觉设计过多，因此低准确度的版本，理论上，应该足以应用于实际项目上了。这一点，务必请使用者留意，不要被高准确度的Prototype版本给误导，而拼命将Prototype Design搞成视觉设计，或者钻入太深的Axure RP技术而忽略了企划应该关注的整体用户体验设计。

这个范例把Axure RP程序介面中的 Wireframe类别的每一个Widget都列出来 ，并且提供Axure RP程序中的Widget Icon 与实际输出到Prototype的对应关系。

　》在线浏览Widget效果总览Prototype展示范例。

　》下载此范例RP文件 Axure RP Prototype范例-Widget效果总览RP檔 (下载后请解压缩)。

　》进入Accordion效果Prototype展示范例。

　》下载此范例RP文件 Axure RP Prototype范例-Accordion效果RP文件(下载后请解压缩)。此RP檔是Axure RP 5的档案格式，若您使用Axure RP 4.6，请下载最新的Axure RP Pro。