Axure動態面板的使用 -網上推廣


  1、什么是Axure的動態面板
  按照Axure官方網站的解釋 :動態面板控件(Dynamic Panel)可以讓你實現高級的交互功能,實現原型的高保真度。動態面板包含有多個狀態(states),每個狀態可包含一系列控件(你可以把一個狀態理 解成一個獨立的頁面)。任何時候都只有一個狀態(頁面)是可見的,或整個動態面板可以被隱藏。結合交互動作,可以讓動態面板的狀態進行隱藏、顯示和改變。 像添加其它控件一樣,可以在控件面板中拖放動態面板控件到線框圖中。
  簡單的說,動態面板就是展示在頁面不跳轉的情況下所能實現的交互狀態。而動態面板的每一個狀態都可以看作是產生的一個新的交互結果。

  2、Axure的動態面板可以用來做什么
  1)tab式頁簽的切換效果:Axure的官方給出的實例就是這個,AlipayUED的同學 按照官方給出的做法制作了一個3tab的原型,不愿看英文說明的同學可以直接參照這篇博客。
  2)鼠標觸發式和點擊觸發式的下拉菜單效果:這個可以結合Axure的默認組件中的“垂直菜單”、“水平菜單”來實現,常用于導航的原型制作。
  3)鼠標觸發式的浮窗效果:類似“Alt”的效果,常用于瀏覽提示和觸發式廣告。
  4)JS的鼠標點擊彈層效果:這個是目前使用被廣泛使用的效果之一。
  5)注冊表單中的根據焦點判斷提示的效果:當焦點在輸入框內的時候提示該表單欄目填寫規范,當焦點離開輸入框的時候根據填寫的結果提示正確或者錯誤原因,這個需要動用高級設計交互編輯功能結合Axure的邏輯條件和設置變量功能來實現。
  ….and so on…

  3、如何使用Axure的動態面板
  1)動態面板屬于Axure的一個組件,在組件欄中選中它,直接拖到你希望它出現的位置。不用擔心,即使在添加完狀態之后它的位置也是可以隨時改變的。
  2)在動態面板上點擊右鍵——編輯動態面板——管理動態面板狀態。在彈出的窗口里輸入動態面板的標簽名稱(默認是Unlabeled)、添加新的狀態。當然,也可以在界面的右下角找到“動態面板管理”模塊來對動態面板進行操作。
  友情提示:
  a)默認的動態面板的狀態是顯示(藍色),我們可以把他設置成隱藏(黃色)。
  b)狀態頁面中的藍色虛線外框表示動態面板的邊界范圍,超過這個邊界范圍外的內容在最終生成原型時將不可見。
  c)為了不影響其他交互的制作,可以點擊“動態面板管理”模塊右側的淡藍色小方塊在隱藏或顯示之間切換。或者,你可以在頂部的頁面名稱(如Home)上點擊鼠標右鍵,選擇右鍵菜單全部隱藏或全部顯示,可以隱藏或顯示頁面中所有的動態面板。

 



  3)雙擊添加完的動態面板狀態(State1、2、…),會在Axure的工作區打開一個新標簽。現在,把這個新標簽當作是一個全新的頁面來設計就OK了,不過,記住不要超過藍色虛線外框。
  4)給動態面板添加交互。Axure5.5中常用在動態面板上的交互行為包括:Set Panel state to State(設置動態面板的狀態切換)、Show Panel(顯示動態面板)、Hide Panel(隱藏動態面板)、Toggle Visibility for Panel(切換動態面板可見屬性)、Move Panel(移動動態面板到一個設定的位置(x*y))、Bring Panel to Front(將動態面板置于最前)。交互行為的添加與添加其他組件的交互一樣,沒有什么好解釋和介紹的。
  5)生成HTML發布到web上、生成CHM分發給其他團隊成員、建立Axure協作共享、….
友情提示:
  a)使用Axure漢化版本 會讓你使用更輕松,雖然漢化的還不是非常完全,但是對于英文不好的同學來說已經是莫大的幫助了,向漢化的平生一笑 同學致敬!
  b)如果看Axure官方的使用說明很費勁,可以參考目前陳良泳同學翻譯的快速原型設計 ,翻譯質量很不錯!
  c)從Axure5開始,可以創建自己的組建庫和導入別人做好的組建庫了,官方提供了一套雅虎的組件 ,個人覺得已經完全夠用了。
  d)模塊和組件是2個完全不同的概念,模塊的后綴是.rp而組件的后綴是.rplib。模塊和組件之間是可以相互轉化的,你可以利用組件去創建一些自己常用的模塊如網站頭部、底部等;你也可以把模塊里的內容分拆成組件單個使用。
  e)在生成chm格式的時候頁面名稱不要使用中文,中文名稱的頁面在chm里會顯示成亂碼。

  原文:http://www.ikent.me/blog/1521


arrow
arrow

    Greenspark 發表在 痞客邦 留言(1) 人氣()