因為之前很少涉及到原型設計,所以對這個原型設計工具也不太熟悉,第一次使用走了不少的彎路,在這里把自己在使用過程中的心得跟大家分享一下,希望能夠對大家有所幫助。
一、 元素的選擇
我覺得這是Axure原型設計工具最讓人不習慣的地方。舉例說明,如果界面上的元素很多,而且有分層、遮蓋的情況,這樣的話下層的元素就無法顯示了,但是有時候你可能只需要選擇上層的一些元素,這個時候你不得不一個個的點擊選中了,如果全選的話就可能將被遮蓋的元素也給選中。下面就和大家分享一下常用的解決方法:
1) 使用Lock鎖定
把你所需要的元素選擇的元素選定之后選擇鎖定,這個被選定元素輪廓就會變為紅色,不可操作,也不可移動。當你選擇全選時,鎖定的元素師不能移動的。操作示意圖如下:
a)將元素選中后點擊紅框內的鎖形圖標鎖定
b)鎖定后如下所示,如果想解鎖,點擊紅框內解鎖圖標即可
2) 使用Group分組
把你所需要的元素選擇的元素選定之后選擇鎖定,然后點擊右鍵選擇Groupping選擇Group,這樣你所選的元素就會自然的成為一組,你可以隨意的拖動一組內的元素,在將選中的元素放置到合適的位置之后,還可以分組元素進行拆分,點擊右鍵Ungroup即可。操作示意圖如下:
a) 將元素選定后,點擊右鍵選擇紅框中的選項即可組成一組
b) 如果想拆分的話,選中元素后,右鍵選擇紅框中提示即可分組
二、 動態的顯示層
這種效果現在應用的已經很多了,這里就不再做過多的解釋,直接通過一個小示例向大家講解如何制作動態的顯示層,同時也把我在原型設計中遇到的問題和大家一塊分享一下,避免使大家走彎路。
a) 頁面設計如下,首先我們在頁面上放一個按鈕,當我們點擊的時候動態的彈出上邊截圖中的層。
b) 我們將要動態顯示的層選中,也就是除“動態顯示層”以為的部分,然后點擊右鍵選擇Convert,進而選擇Convert to Dynamic Panel,即將所選中的元素轉換為動態面板
c) 轉換之后頁面上的元素即不能點擊了,就好像是一張靜態的圖片,這個時候我們要雙擊該元素,彈出如下對話框,在對話框中為該動態面板起一個名字
d) 然后我們再點擊右鍵,選擇編輯動態面板,將該面板設為隱藏如下圖所示
e) 設置過后動態面板區域變成淺黃色,這時我們要選中“顯示動態面板”按鈕,然后雙擊又側的Onclick事件,如下圖所示:
f) 雙擊OnClick事件之后,彈出如下框,在下邊選擇
紅框標識部分“show panel”即為彈出動態面板,后邊Step4中要記得勾選我們要顯示的動態面板,這里也就是我們之前起的名為”Olive”的動態面板。點擊確認就OK了。
g) 如果想把整個文檔全部都預覽可以按F5,如果只是想預覽當前頁可按Ctr+F5,預覽效果如下:
1) 點擊前
2) 點擊后
三、 動態顯示層的關閉
通過剛剛的示例,我想大家肯定都可以做出動態的顯示層,可是又一個問題出來了,層顯示之后如何關閉呢?還是通過示例一步一步跟大家講解一下吧
a) 還記得我們在上邊“二、c)”中的截圖嗎,不記得也沒關系,請看下圖
圖中有一個State1的列表項,該列表項主要是為了顯示動態面板的狀態,點擊F2可以為該項重命名,不命名也可以,直接雙擊進入。
b) 進入之后界面如下,在這個頁面中可以對動態面板的狀態進行編輯,這時我們可以選中“確認“,或者”關閉“按鈕,並設置其Onclick事件,如下圖示
圖中紅框內提示“Hide Panel”為隱藏面板,然后再Step4中選擇要隱藏的面板,這里也就是我們之前顯示的”Olive“面板,點擊OK即可。
c) F5運行預覽,在彈出動態面板之后,如果想關閉,直接點擊“確認“按鈕即可關閉效果圖就不再演示了。上圖中還有一些Link、Dynamic Panel等相關的操作,大家都可以多嘗試用一下,比如點擊某個按鈕打開一個新的頁面就可以選中Link 節點下的Open Link in New Window選項等。
備注:
這里基本上就把設計中的一些心得給大家講了一下,下面就講一個在設計過程中遇到的問題,在進行動態面板的顯示時,有時會遇到有些元素動態面板無法遮蓋的情況,這是因為你在元素放置時先放了動態面板,后放了元素,因為這個原型設計工具是按層顯示的,你后來放的元素在最上層,所以動態面板無法遮蓋住,那如何解決這個問題呢?如下圖紅框所示,選擇Order->Bring to Front,意思為將動態顯示層放在最上邊,這樣就可以很好的解決了元素無法遮蓋的情況。另外,因為我用到是英文版的,網上有很多中文版插件或者破解版之類的,如果對英文不感冒的朋友可以下載中文版的來用。
好了,到這里已經差不多把所學到的東西跟大家分享完了,希望可以對大家有所幫助,如果有不對的地方,還請大家批評指正。
有轉載的朋友,麻煩您記得標明出處。謝謝