怎樣在Axure中創建高保真的Axure原型(二)

技巧四:翻轉組件

無論是一個組件還是一組小組件集,在Axure6.5中都不止一種翻轉方式。在選中組件後,使用組件屬性窗格,手動控制組件或文字的翻轉角度。如果是選中一個組件集,則裏面的每個組件都會各自翻轉,打破你之前自定義的圖形組合。

翻轉組件1

若想快速旋轉部件,選中它,將鼠標光標移到拖動點並同時按住Cmd(Mac)或Ctrl鍵(PC)。此時鼠標光標將由一個旋轉圖標取代。這種方法不僅速度更快,也能保留自定義組合的形狀。

翻轉組件2

技巧五:使用帶有按鈕圖形的圖像

使用帶有按鈕圖形的圖像1

創建帶有翻轉的按鈕或許很簡單,但再在之上添加一個圖標卻不是那麼容易。在上圖中,帶有按鈕的圖像包含了兩個組件,因爲這兩個組件都有OnMouseEnter事件,所以它們很容易有衝突。

下面的動畫顯示了兩個按鈕,每個上面都有圖標。請注意當光標移動到按鈕上面的圖標上時左邊的圖標區域閃爍,觸發了OnMouseEnter事件,而右邊按鈕上的圖標並沒有閃爍。

使用帶有按鈕圖形的圖像2

這是因爲左邊的圖標堆疊在按鈕圖形之上,所以當光標經過圖標時它忽略了下面按鈕圖形的OnMouseEnter事件。

避免這種閃爍一種方法是將圖標(最好是以透明的PNG格式)放置在按鈕圖形的下面,使用透明的漸變色作爲按鈕圖形的填充,如下圖所示。這樣,圖標將透過上面的按鈕圖形顯示,也能保證按鈕的OnMouseEnter事件是光標經過時唯一觸發的事件。

使用帶有按鈕圖形的圖像3

如果你還沒有一個圖標組件庫加載到你的組件窗格,Icon Finder能爲你提供一個很好的解決方案,讓你快速添加圖標到你的Axure原型中。當你需要的免費的圖標來創建完備的組件庫時,它也可以派上用場。

技巧六:利用現代的表單元素

記得當瀏覽器最開始支持CSS3 border-radius屬性的那一天,世界各地的設計師和開發人員都無比興奮激動,因爲他們終於可以在短短幾秒鐘內創建彎曲的表單元素,不再需要使用多個圖像和複雜的代碼。你也可以說,現代的表單元素的出現使我們從此告別了枯燥、四四方方的文本字段,而可以組合圓角矩形圖形和與文本字段組件。

利用現代的表單元素1

將一個圓角矩形圖形拖動到設計窗格中,然後再將一個文本框組件拖到它上面。切換文本框的邊框,並調整其不透明度爲0%。此時文本框沒有邊界,且是完全透明的,利用它可以創造出一種帶有圓角的表單字段的視覺。

利用現代的表單元素2

試着嘗試不同的字體大小、填充顏色、透明度,甚至切換默認/選定的組件狀態等,你能創建出更多可用的交互。

利用現代的表單元素3

 

>>擴展閱讀:怎樣在Axure中創建高保真的Axure原型(一)

http://blog.csdn.net/u010706368/article/details/13018059

>>快速原型設計工具Axure RP下載 http://www.evget.com/product/2978/download

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章