Axure8.0小案例:電動機原型

Bin
6 評論 12806 瀏覽 133 收藏 6 分鐘

話說Axure RP 8.0beta版發布相當一段時間了,由于自己好久沒動手畫過原型了,新版本發布之時木有及時圍觀。今天鬼使神差地去裝了Axure RP 8.0簡單了解了一下它的新功能。

打開8.0注意到的第一個改變就是用戶界面的變化。這樣的變化讓新手更容易去掌握,提升了操作效率,界面變得更簡單易用。

例如:8.0整合了7.0中三個獨立功能面板——“元件的交互與說明”,“元件的屬性與樣式”和“頁面屬性”。將頁面屬性從底部(原本很難找到)移動到編輯區的右側,為編輯區增加了更多操作空間。

再如,工具欄內的“頁面”和“母版”被刪除。最常用的按鈕,如“添加頁”和“搜索”,已被移到窗格的標題。其余的選項仍然可以下拉菜單、快捷鍵以及拖放進行使用。

又如,用戶在制作原型過程中,很容易忽略掉為元件、動態面板、圖片等元素命名,從而很容易引起很多不必要的麻煩。而8.0很突出元素命名窗口。將操作頻率很高的預覽功能單獨放出一個按鈕來,解決了用戶必須通過鍵盤F5預覽的痛點。這些很小的改變,作用卻是巨大的。

除了界面的改版,Axure RP 8.0還在元件、圖片處理、事件、做了不少改進和完善。已忍不住想在畫布上擼上一把!搗騰一番后,制作了一個小的案例【電動機原理】,正好涉及到8.0的許多新功能,先展示一下效果:

md

對于熟悉Axure的同學來說,這個原型有兩個值得一提的“難點”,一是電動機“轉子”形狀的設計,它并非一張圖片,而是利用元件中的矩形來實現的。另一個是如何觸發“轉子”旋轉起來。我們一個個來拆解!

一、轉子

chaikai

我們可以把“轉子”拆解成三個組成部分A:餅圖 B:隨機線 C:雙色環。只要把ABC的制作過程描述清楚,就很容易拼出“轉子”的形狀了。

  • A:餅圖,Axure8.0開始在矩形的形狀增加了一些新的形狀(如左下圖,所示一目了然,無需解釋)
  • B:隨機線,由鋼筆工具繪制而成。鋼筆工具非常強大,可以畫出任意你喜歡的形狀,不用PS也不用求設計濕幫忙。(如右下圖所示,一個拽拽的表情,雖然看上去像個胖紙,依然那么自信。哈哈)

gangbi

接下來我們重點講講雙色環,這將引入Axure8.0元件形狀一個革命性功能“改變形狀”,它一共擁有“水平翻轉”“垂直翻轉”“合并”“去除”“相交”“排除”六大功能。利用下圖對這幾個功能簡單的解釋一下:

gaibian

有了上述知識,要做那個雙色環,就是輕而易舉的事情了。見下圖操作方法:

huan

至此,那個旋轉的家伙就畫完了。值得一提的是,在應用上述六大功能的時候,兩個元素選中的先后順序會影響最終的結果,只有自己動手實驗一把才能明白其中道理。

二、旋轉事件

正如您所猜,旋轉的事件在Axure RP 8.0的自帶的事件,它可以對形狀、圖片、動態面板等元件實現旋轉。這如果放在Axure RP 7.0要實現旋轉事件,需要使用各種三角函數去實現sin/cos/tan/cot哈哈,為難學渣君了!只要在按鈕里寫入以下事件,輕松搞定。直接貼圖:

shijian

當然,轉動的圈數,速度,效果都可以設置。

總結

通過上述簡單的例子我們了解到Axure RP 8.0新增的一些亮點。

  1. 豐富了元件自定義的形狀。
  2. 新增了鋼筆工具。
  3. 新增了“改變形狀”功能。
  4. 新增“旋轉”事件。

除此以外,Axure8.0還新增改版尺寸的事件。新增標注功能等等等等。感興趣的同學可以繼續玩,直到把它玩壞。。。哈哈呼呼

 

本文作者@陳濱淋,國內某知名電商公司產品總監,起點學院北京1508期優秀學員。首發于人人都是產品經理,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你好,能私聊下么?

    回復
  2. 鋼筆工具這么畫線段啊 我只能畫圖形 ?

    來自本機地址 回復
  3. 旋轉不起來,怎么破

    來自廣東 回復
  4. 改變形狀這個新功能是不是還有BUG啊。。去除功能并不能好好聽話,藍色圓和半圓一起去除后,藍色圓是剩下一半,但是!!會自動有新的垂直線補充缺口啊。

    來自廣東 回復