Axure RP 8.0原型設計(一):入門

2016年4月Axure公司發佈了大家期待已久的Axure RP 8.0正式版。Axure RP是產品經理必備的原型製作工具。Axure RP是美國Axure Software Solution公司旗艦產品,是一個專業的快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作爲專門的原型設計工具,它比一般創建靜態原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。並且支持Windows和蘋果Mac雙系統。

Axure RP的下載、安裝和漢化流程:http://www.axure.com.cn/3510/

什麼是原型呢?這個在之前介紹爲什麼需要進行原型設計當中有提到,原型是產品的最初形態,確認用戶對產品界面和操作功能可用性的需求,高保真的原型接近於產品的最終形態,但仍只是原型。產品原型簡單的說就是產品設計成形之前的一個大體框架,對網站來講,就是將頁面模塊、元素進行粗放式的排版和佈局,深入一些,還會加入一些交互性的元素,使其更加具體、形象和生動。

一般在進行主要頁面原型設計之前,設計師需要了解設計需求,如果身兼了需求分析或產品分析等角色,設計過程就會稍微簡單一些,因爲已經瞭解了從用戶需求到轉化成可實現需求的整個過程,否則的話至少需要產品負責人員提供一份功能清單才能開始設計,最好就是能參與到用戶需求的調研裏面,這樣在設計的過程當中就不容易出現設計人員和需求人員對需求理解上的偏差,減少一些溝通的成本。

用AxureRP來做原型設計的優點應該看的很多了,快速,可交互等等,這裏主要結合AxureRP自身的一些功能說明其在原型設計過程當中的應用。借用別人的一張圖,主要從交互設計中涉及的三個主要步驟進行說明:就是先設計一個初始的主要頁面原型,定義頁面流程圖,最後再完善原型的過程。

一、 主要頁面原型

個人建議在開始設計之前,先手繪一份草圖,用來確認上面提到的與需求人員之間的理解差異,這份草圖應有一個大致的輪廓,列出主要的功能,有一個很粗的頁面佈局等等,另外前期的時候不要加入太多的視覺設計,因爲這個只是初始化方案,後面應該還會有比較大的改動,且不應該讓視覺效果搶了原本要說明演示的交互效果的風頭;再者我認爲畢竟設計師和專業的美工還是有差異,視覺設計再好看,到後期美工製作的時候可能根本不按這個風格來設計,就浪費時間,還不如省下時間用在以一些交互設計和設計方案的推敲上,達到一個最優方案的狀態。

開始設計之後就要注意重複頁面的重用了,這個AxureRP的模板管理(Master)功能能夠滿足,就是將某一部分頁面,預計後面其他頁面會用到的,就先做好模板,這個越早做越好,可以省掉很大一部分設計時間,例如頁首,頁尾,標記,ICON等。之前也有介紹過使用模板管理的好處,就不再重複介紹。如果只是簡單的兩三個小頁面的功能,可以不用這個功能,但如果頁面上的交互比較複雜,且頁面數量,元素數量較多的情況下,個人建議還是使用模板管理功能,基本上如果是設計網站或者一個完整的產品的話,肯定都是比較複雜的,如果能在前期就引入模板,後面的設計速度會大大加快,且頁面的結構也會更優化,能夠提高頁面加載速度。

二、 頁面流程圖

在確定主要頁面之後,就可以定義頁面流程了。頁面流程圖有利於向大家展示自己的想法,也有利於思路的整理。可參加之前介紹AxureRP案例時提供的一共以流程圖方式來說明登錄註冊功能的例子。通過頁面流程圖,可以整理頁面的交互行爲,在向他人展示的時候,也可以一目瞭然的看出需要的操作步驟是多少步。

頁面與頁面間的流程圖可以用AxureRP的站點地圖面板裏面的自動生成流程的圖的功能,要使用這個功能,就需要在設計之初就建立好頁面的層級結構,比如一般都有首頁,然後在首頁下面按主要功能模快可能會分成幾個頁面,再在這些頁面下建立各自的功能子頁面,這樣就是三層結構,自動生成出來的頁面流程圖結構也會很清晰,但前提就是要設計好結構,例如按頁面分層次,按功能分層次等。

頁面的流程圖就複雜一些,涉及到一些操作的業務規範和要求,這個就要求設計人員要熟悉用戶需求的,並且還要熟悉一些常見的操作流程,一般都是遞進式的設計,就是第一步是怎樣的,第二步是怎樣的,每個步驟之間按順序從上到下或者從左往右,可以設計成一個頁面,也可以設計成一個頁面內的多個標籤,在設計前要先有構思和大體佈局的想法,這樣在設計時就不會出錯,可以在頁面內或者定義一個流程圖頁面把流程圖單獨畫出來,可以在設計的過程當中做參照。

三、 完善原型

頁面的主要頁面和頁面流程確定之後,就可以完善原型了。這時主要是一些細節的工作,包括前期設計頁面的完善,以及一些交互功能的定義等等,也可以適當的加入一些視覺的東西,但還是不宜加入太多。

需要注意的就是AxureRP的主旨是快速的原型設計,因此在設計過程當中不必太過追求技術效果,一些複雜的交互效果,如果有現成的實例可以用的就借用一下,如果沒用,建議就畫一個簡單的,然後做一下詳細的說明,畢竟做複雜的設計會耗掉相當多的時間。

AxureRP只是一種原型設計工具而已,做交互設計最重要的還是想法,工具只是用來幫實現想法的。不必過於追求技術,不必過於追求視覺表現。把握好整個產品方向的同時,應專注於交互流程、頁面內交互、佈局結構的創新和優化。

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