下拉选单(droplist)交互设计-控制另一个下拉选单

http://cn.userxper.com/blog/archives/248

下拉选单(droplist)交互设计-控制另一个下拉选单

作者：悠识

说明：

在同一页面，有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)交互设计-控制换页。