下拉选单(droplist)交互设计-控制换页

说明：

现有一个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)交互设计-控制另一个下拉选单。

---

访客留言

1. Steven 2008/12/13 / 11下午

   无法成功下载，是否压缩有误？

   下拉选单(droplist)交互设计-控制换页
   http://cn.userxper.com/blog/archives/188

   下拉选单(droplist)交互设计-控制另一个下拉选单
   http://userxper.com/blog/archives/248
2. richard 2008/12/14 / 12下午

   谢谢您的回报。目前测试结果均能正常下载。
   您也可以在Axure RP交流论坛的档案区找到这些下载
   http://groups.google.com.tw/group/axure-rp-groups