我很醜,可是我有脈絡:用Axure 建構概念原型
文章推薦指數: 80 %
我不會硬把Axure 拿來和Sketch 做比較,兩者各司其職也各有突出的地方,Sketch 比較適合做介面設計(Interface Design),而Axure 則是適合做互動/交互設計 ...
GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite我很醜,可是我有脈絡:用Axure建構概念原型「妳平常都習慣用什麼設計軟體呢?」新公司的部門主管這樣問我,『我都是用Sketch耶』其實我會的也只有那一個,「不過我們這裡的設計師都是用Axure噢,妳會想嘗試看看嗎?」Axure嗎⋯⋯努力回想了一下,似乎是在中國UI/UX圈子討論度比較高的軟體,這正是跳脫舒適圈的好機會,『好!我學!』Sketch是目前UI/UX軟體的顯學,除去MacOnly這個比較不友善的缺點,它集種種優點於一身——輕量、可重複利用和同步更動的Symbols、豐富的Plugins、簡易的Prototyping等特色功能,似乎接近完美、無可挑惕。
我不免對Axure產生質疑「不都是畫介面,為何不用強大的Sketch就好,Axure的預設物件都很簡陋耶,這樣畫面會很醜!」這個念頭在我腦中閃過之時,我才意識到過去犯了多大的錯誤:過於注重表面的視覺呈現(VisualDesign)而非核心的使用者需求(UserNeeds)。
本文架構一、Axure讓你專注在真正重要的事情上二、Axure初始畫面三、實用線上資源一、Axure讓你專注在真正重要的事情上我不會硬把Axure拿來和Sketch做比較,兩者各司其職也各有突出的地方,Sketch比較適合做介面設計(InterfaceDesign),而Axure則是適合做互動/交互設計(InteractionDesign)。
設計大舌頭的文章〈Wireframe與Prototype的不同〉提到繪製線框稿(Wireframe)的主要目的是:呈現產品頁面上主要的資訊呈現資訊在頁面上的排版與架構可視覺化,便於描述使用者如何與產品互動另外,使用Wireframe的好處有:更專注於功能面、資訊架構面、使用者體驗、操作流程、使用性避免視覺設計的干擾,而無法達成或混淆收集回饋的目的若是需求改變也可以很快的做出調整Axure的簡陋反而讓你能夠在產品設計前期排除視覺紛擾、專注在真正重要的事情上,快速繪製低擬真(low-fidelity)的Wireframe,同時也可以做到中高擬真(mid-tohigh-fidelity)的互動原型(Prototype)。
延伸閱讀|知乎:Sketch畫原型比Axure好用嗎?為什麼?二、Axure初始畫面中間大面積空白是主要繪製區域,不像Sketch能夠新增多個Artboards並且自由調整Artboards大小,Axure的畫面大小是以物件的邊界來界定。
這裡簡單介紹各個Panel的主要功能:1.Pages和Sketch不同的是,Axure的Pages有階層關係(樹狀結構),甚至還可以新增資料夾,利於管理大型的複雜網站。
2.Libraries預設Default,Flow,Icons三種Libraries,裡頭的Box,Ellipse,Image⋯⋯等物件統稱為Widget,點選拖拉到中間畫布即可開始編輯。
官方另外提供數十種Libraries讓你下載使用(付費/免費),檔案副檔名是.rplib,點擊HamburgerMenu選擇LoadLibrary新增Library。
DownloadWidgetLibraries|AxureDownloadwidgetlibrariesforAxureincludingicons,designpatterns,andUIelementsformobiledeviceslikeiPhone…www.axure.com3.Masters類似於Sketch的Symbol,可以製作成重複利用、同步更動的物件。
要特別注意的是Axure並沒有Overrides功能,不能做太彈性、個別的調整。
4.InspectorStyle可以編輯Pages和Widgets的樣式;Properties則是新增各種互動觸發事件的地方,能夠做到很細緻、接近真實的使用情境;若是需要補充和註記可以在Notes紀錄,發佈時會以一個藍色小小的NotesIcon顯示,點選就能看到補充資訊。
5.Outline查看在同一個Page上所有的Widgets,有Filter和Search功能。
三、實用線上資源官方資源・Axure官方網站・Axure官方教學・Axure官方論壇悠識・Axure特色・Axure線上教學人人都是產品經理・Axure相關教學總結雖然說Axure的學習成本比Sketch還要更高一些,對美感要求很高的設計師也可能會為自己產出灰灰醜醜的畫面而感到痛苦,不過使用Axure會幫助你對產品資訊架構、流程、邏輯有更全面的理解,跳脫對視覺的執著。
對於本文有任何建議、回饋、想法,歡迎在底下留言!也可以透過我的Facebook聯繫我🙌🏻--3MorefromKathrynWangFollow💜✨先好好過生活,才能好好做設計✨💜Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedKathrynWang2.8KFollowers💜✨先好好過生活,才能好好做設計✨💜FollowMorefromMediumvamsiadurthyCaseStudy:DesigningaResidenceprovidingappforfeasibletenancy…NidhiGROW-Aplantappconcept.AdenChanDigitalWalletforSeniorCitizen — aUXcasestudyCharlotteinBootcampError-preventiondesignofdigitalformsHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable
延伸文章資訊
- 1Axure RP - UX Prototypes, Specifications, and Diagrams in ...
Infinite Interactions, Unlimited Power. Axure RP is the only UX tool that gives UX professionals ...
- 2[教學] Axure 假網站製作軟體入門 - BELLEAYA 雜七雜八創作小窩
Axure 假網站製作軟體入門什麼叫做「假網站」呢?其實就是一種網站通常是要讓客戶先大致瞭解網站的一些功能跟操作流程只是因為設計者畢竟不可能一次就 ...
- 3身為PM不可或缺的-Axure RP 網站原型設計軟體 - 歐斯瑞
今天要介紹一套原型製作軟體:Axure RP,可以讓網站企劃人員或是資訊架構師快速且簡易的建立網站的wireframe、流程圖、prototype和規格。甚至,UI/UX介面設計師也可以 ...
- 4友環公司-Axure RP 網站原型建構軟體網頁設計
Axure RP 是Axure Software Solution公司旗艦產品,是一款專業、快速的網頁原型設計工具,讓設計者能夠高效率製作產品原型,快速繪製線框圖、流程圖、網站架構圖、 ...
- 5我很醜,可是我有脈絡:用Axure 建構概念原型
我不會硬把Axure 拿來和Sketch 做比較,兩者各司其職也各有突出的地方,Sketch 比較適合做介面設計(Interface Design),而Axure 則是適合做互動/交互設計 ...