我很醜,可是我有脈絡:用 Axure 建構概念原型

「妳平常都習慣用什麼設計軟體呢?」新公司的部門主管這樣問我,『我都是用 Sketch 耶』其實我會的也只有那一個,「不過我們這裡的設計師都是用 Axure 噢,妳會想嘗試看看嗎?」Axure 嗎⋯⋯努力回想了一下,似乎是在中國 UI/UX 圈子討論度比較高的軟體,這正是跳脫舒適圈的好機會,『好!我學!』

Sketch 是目前 UI/UX 軟體的顯學,除去 Mac Only 這個比較不友善的缺點,它集種種優點於一身 — — 輕量、可重複利用和同步更動的 Symbols、豐富的 Plugins、簡易的 Prototyping 等特色功能,似乎接近完美、無可挑惕。

我不免對 Axure 產生質疑「不都是畫介面,為何不用強大的 Sketch就好,Axure 的預設物件都很簡陋耶,這樣畫面會很醜!」這個念頭在我腦中閃過之時,我才意識到過去犯了多大的錯誤:

過於注重表面的視覺呈現 (Visual Design) 而非核心的使用者需求 (User Needs)。

一、Axure 讓你專注在真正重要的事情上

我不會硬把 Axure 拿來和 Sketch 做比較,兩者各司其職也各有突出的地方,Sketch 比較適合做介面設計 (Interface Design),而 Axure 則是適合做互動/交互設計 (Interaction Design)。

設計大舌頭的文章〈Wireframe 與 Prototype 的不同〉提到繪製線框稿 (Wireframe) 的主要目的是:

  • 呈現產品頁面上主要的資訊
  • 呈現資訊在頁面上的排版與架構
  • 可視覺化,便於描述使用者如何與產品互動

另外,使用 Wireframe 的好處有:

  • 更專注於功能面、資訊架構面、使用者體驗、操作流程、使用性
  • 避免視覺設計的干擾,而無法達成或混淆收集回饋的目的
  • 若是需求改變也可以很快的做出調整

Axure 的簡陋反而讓你能夠在產品設計前期排除視覺紛擾、專注在真正重要的事情上,快速繪製低擬真 (low-fidelity) 的 Wireframe,同時也可以做到中高擬真 (mid- to high-fidelity) 的互動原型 (Prototype)。

二、Axure 初始畫面

中間大面積空白是主要繪製區域,不像 Sketch 能夠新增多個 Artboards 並且自由調整 Artboards 大小,Axure 的畫面大小是以物件的邊界來界定。這裡簡單介紹各個 Panel 的主要功能:

1. Pages

和 Sketch 不同的是,Axure 的 Pages 有階層關係(樹狀結構),甚至還可以新增資料夾,利於管理大型的複雜網站。

2. Libraries

預設 Default, Flow, Icons 三種 Libraries,裡頭的 Box, Ellipse, Image ⋯⋯等物件統稱為 Widget,點選拖拉到中間畫布即可開始編輯。

官方另外提供數十種 Libraries 讓你下載使用(付費/免費),檔案副檔名是 .rplib,點擊 Hamburger Menu 選擇 Load Library 新增 Library。

3. Masters

類似於 Sketch 的Symbol,可以製作成重複利用、同步更動的物件。要特別注意的是Axure 並沒有 Overrides 功能,不能做太彈性、個別的調整。

4. Inspector

Style 可以編輯 Pages 和 Widgets 的樣式;Properties 則是新增各種互動觸發事件的地方,能夠做到很細緻、接近真實的使用情境;若是需要補充和註記可以在 Notes 紀錄,發佈時會以一個藍色小小的 Notes Icon 顯示,點選就能看到補充資訊。

5. Outline

查看在同一個 Page 上所有的 Widgets,有 Filter 和 Search 功能。

三、實用線上資源

總結

雖然說 Axure 的學習成本比 Sketch 還要更高一些,對美感要求很高的設計師也可能會為自己產出灰灰醜醜的畫面而感到痛苦,不過使用 Axure 會幫助你對產品資訊架構、流程、邏輯有更全面的理解,跳脫對視覺的執著。

對於本文有任何建議、回饋、想法,都歡迎在底下留言噢!也可以透過我的 Facebook 聯繫我:)

💜✨ 先好好過生活,才能好好做設計 ✨💜

💜✨ 先好好過生活,才能好好做設計 ✨💜