part 1. 簡易的互動設計

檔名: UserXper-MapZoom-Sample.rp  下載
說明: 模擬地圖的Zoom in/Zoom out

檔名:UserXper-TabView-Sample.rp 下載 觀看UserXper Blog文章
說明: 模擬 Yahoo! YUI的 TabView 介面
 
檔名:UserXper-Pattern-Accordion.rp 下載  觀看UserXper Blog文章
說明: 模擬outlook功能選單, 及mobile device的touch效果

檔名: drop-list-panel.rp  下載  觀看論壇文章
說明: 解決下拉選單Droplist穿破疊在上方的Dynamic panel的問題。
 檔名:checked_unchecked.rp 下載   觀看論壇文章
說明:控制checkbox在打勾和不打勾的狀態下, 要分別呈現不同的Dynamic Panel

 

 

part 2. 更有趣的互動設計

檔名: Radio+Button.rp 下載 觀看論壇文章

說明: 模擬單選Radio Button，而且選擇時要變動Text Field的文字 (感謝Shunz提供)

檔名: Clear+Text+Field.rp  下載  觀看論壇文章

說明: 清除text field的欄位資料 (感謝Shunz提供)

檔名: UserXper-Droplist-OnChange-Sample.rp  下載 觀看UserXper Blog文章  觀看論壇文章

說明: 以Add condition的功能，讓Droplist各選項被選擇時，直接鏈結到指定頁面。

 

檔名: 2_droplist_interaction.rp 下載 觀看論壇文章
說明: 以Add Condition + Set Variable and Widget value(s) equal to Value(s) 的功能，讓同一頁面的下拉選單連動另一個下拉選單

 

檔名: login_status.zip 下載 觀看論壇文章
說明: 模擬全站進入login狀態。這裡談到的技巧，可用來控制非本頁的Dynamic Panel狀態，難度較高。實作Project時並不建議花時間模擬完整的互動設計。