【軟體操作】Axure RP｜初探專業級原型設計利器｜Prototype
昨天在課堂上，來自悠識 UserXper 的講師大致介紹了Axure這套軟體的元件與互動，收穫很多，覺得功能真的滿強大的，能夠完整呈現一個網頁的長相，並能針對元件、頁面做註記，方便設計師與工程師做溝通，做出專業級的"PRO"totype！在此先做個紀錄並引言分享。
下載：https://www.axure.com/downloadthanks?dl=80pc
（注意：從這個連結進去即會自動跳出下載視窗詢問您下載位置）
可以趁下載同時，一邊先看過下載頁面中的影片，熟悉介面環境，下載好後一打開整體環境畫面就一目了然（如下圖），主要操作方式是以滑鼠拖拉點選做布置。
總之，可以多點右鍵看看（？）
原本要用Html布置或CSS撰寫的畫面效果，在Axure RP上都變得非常簡單，一次到位，之前也有操作Illustator的經驗，所以很快就上手。但怎麼樣設計版面還有流暢的互動，讓使用者用得爽快、直覺，沒有太多雜訊干擾又能想找東西都找得到，才是真功夫。
下一篇與後續會介紹畫面中這些效果，包含List、Button Click、Lightbox、Ease in and out、RWD(Responsive Web Design)等等該如何實作。
如何下載？
首頁：https://www.axure.com下載：https://www.axure.com/downloadthanks?dl=80pc
（注意：從這個連結進去即會自動跳出下載視窗詢問您下載位置）
可以趁下載同時，一邊先看過下載頁面中的影片，熟悉介面環境，下載好後一打開整體環境畫面就一目了然（如下圖），主要操作方式是以滑鼠拖拉點選做布置。
 |
| [Axure RP 軟體介面] |
取得授權？
一般下載後可試用30天，若申請License可續用，而Axure對於在學學生則可提供一年期的授權，只要附上在學證明申請即可。（學生與教師之授權申請網址：https://www.axure.com/edu）
像我自己是在學學生身分，到自己的學校申請並取得在學證明，在上述網址填表過程上傳電子檔即可。（舉例來說，NTU學生到My ePo登入校內帳號後，點選左列最下方在學證明，就能直接下載電子檔，非常方便。他校流程須查詢校內規範，應該也類似。）
像我自己是在學學生身分，到自己的學校申請並取得在學證明，在上述網址填表過程上傳電子檔即可。（舉例來說，NTU學生到My ePo登入校內帳號後，點選左列最下方在學證明，就能直接下載電子檔，非常方便。他校流程須查詢校內規範，應該也類似。）
主畫面包含：
- 紅框部分
- 正中間為畫布：左邊及上面有尺規，可以拉出輔助線。
- 上面為大工具：右鍵後點選 Customize Toolbar 即可選擇自己的常用工具。
- 右上角為輸出：可以預覽自己在各元件、頁面的互動，選擇輸出。
- 綠框部分
- 左邊為頁面區：事先做好有架構的命名，可以節省麻煩、方便溝通。
- 上面為小工具：基本上與Word, Powerpoint一樣，在右邊則可設定Pixel。
- 固定方框
- 預設隱藏
- 右邊為Inspector：至關重要，可以看與被點擊物件相關的所有特性，包含與I/O互動的關係和動畫呈現(Properties)、為它做的註解(Notes)與本身的特質(Style)。像是自適應螢幕大小的設計就是透過Properties中Adaptive的Enable與否來進一步設定完成。
- 其他部分
- 左邊的Libraries：從素材庫這裡，可拉出想要的元件(Widgets)，來做畫面配置，預設包含的素材有Default、Flow、Icon，也可自行匯入自訂。
- 左下角Master：將要通用於各頁的元件組合新增於此，就會一併更改。關於位置是否變動的設定可選擇Place Anywhere / Lock to Master Location / Break Away
- 右下角Outline：圖層調整元件的上下，可以做命名，基本上與PS、AI操作相同。
小工具與大工具兩列的差別：
- 小工具：針對單一元件調整它的內容物（文字相關特性）或其特質（色彩、大小、隱藏）。
- 大工具：針對元件間的互動（排版、圖層、群組），或改變外觀（描點、裁切、分割）。
自訂Libraries的方式：
從官網的Support中找到Widgets下載區 → https://www.axure.com/support/download-widget-libraries。可以將想要的免費素材直接下載，再回到Axure RP中的Libraries右上角的推疊標籤，點選後選擇Load Library... 即可。
強大的右鍵！
不管在各個區塊上面，或是針對單一元件、多元件，右鍵都整理了很重要的功能。舉例來說：
- 白色畫布(Page)上點擊的話，會出現Grid and Guides，方便我們調整輔助線或格點風格做對齊。
- 元件(Widgets)上點擊右鍵可以Convert to Master（倒數第二個），方便我們將這個物件轉成跨頁面的物件。
- 也可以Convert to Dynamic Table（最後一個），方便我們做出動態的選擇性效果，如選單。
- 在Master的物件上點擊右鍵，以改變Drop Behavior。（一般來說原本Convert前會先問要選Anywhere / Lock / Break 哪一種，選錯或想換行為的話可以在這邊改。）
- 大工具列點擊的話，可以設定所有想要的常用功能。
操作流程
在實際走一遍以後，我會覺得一開始的前置作業先做好，像是環境設定上，包含拉出智慧線、設置Adaptive畫面規則、自訂Toolbar、增添Libraries素材、設定Widget Style（Project標籤），針對專案的話，還有各頁面上的命名原則，這些都建立好之後，便能方便對齊，且拖出來物件都準確齊全，就能開始著手在刻版面還有元件互動了。
下一步就是選擇作業的畫布(Page)，然後新增元件於其上、調整元件、還有彼此之間的動作。以一個Widget而言，就是從Library做選擇後丟出來，到小工具列調整它的顏色、長寬、位置等性質；以多個Widgets而言，就是同時選取後，可以利用大工具列作特定功能如群組、調整對齊(Alignment)、分布(Distribution)等等。
接著到右邊Inspector調整其他更細的設置。用Property增加Interaction，選擇適切或想要的互動方法，同時增加變化效果(Translation)。
過程中也會處理到Page之間的動作，可以用link的方式、針對properties做onclick，或是利用能嵌入外部資源的iframe (inline frame)。最後就是作註解、預覽，調整後就能輸出囉！
試驗後小小成果：
 |
| [Prototype 操作畫面] |
心得：
原本要用Html布置或CSS撰寫的畫面效果，在Axure RP上都變得非常簡單，一次到位，之前也有操作Illustator的經驗，所以很快就上手。但怎麼樣設計版面還有流暢的互動，讓使用者用得爽快、直覺，沒有太多雜訊干擾又能想找東西都找得到，才是真功夫。下一篇與後續會介紹畫面中這些效果，包含List、Button Click、Lightbox、Ease in and out、RWD(Responsive Web Design)等等該如何實作。
留言