当前位置 - 股票行情交易網 - 裝修設計 - 如何使用Axure高效完成高保真原型?

如何使用Axure高效完成高保真原型?

工作經歷前期工作

頁面邏輯梳理

利用思維導圖,以功能點(完成目標)為導圖的第壹級子集,梳理頁面,其實這件事情很困難,如果沒有熟悉業務的同事幫助,會消耗相當長的時間,我這裏也是很大方面借助了Chester之前的整理。由於整個的視覺文件都是英文的,所以還是花了不少時間去理解。

之後我根據頁面布局,將布局類似的頁面從新歸類到壹起,這是為了方便後期多層動態面板的設置及頁面間的復制。

得心應手的部件庫

使用Axure,自然少不了給力的部件庫,強大的部件庫可以極大程度上提高我們的效率,增強演示效果。網上也可以搜索到壹些還不錯的部件庫。但是別人的部件庫未必適合我們的產品風格及需要,所以最好還是要有自己的部件庫。我是個懶人,所以我經常做壹勞永逸的事情,由於我長期從事電商工作,所以我專門設計了壹個電商專用部件庫,再加上從其他人的部件庫中汲取的復雜交互部件,現在我的部件庫中已具備了90余個部件,基本可以應對常規設計的絕大部分情況。

另外,由於部件庫是自己制作的,所以非常熟悉,用起來自然得心應手,事半功倍。

正式工作

背景設置

這裏說的背景設置壹方面就是妳們所理解的背景設置,另外壹方面是指通過設置形狀(無邊框,填充顏色同背景色或透明)來設置背景。

為什麽要做這麽壹件多此壹舉的事情呢?這是考慮到壹些可變部件,比如移動到絕對位置,固定在瀏覽器等等,另外壹方面如果不制作這層背景,那麽在制作動態面板時,搞不清楚外部情況,或者文字/圖片放在最頂部,絕對是件很別扭的事。

交互規則統壹

由於我所設計Software Web application是由UI設計師完成的,所以在交互規則上欠統壹,主要是以下幾個方面:1、下拉效果2、tab滑動效果3、hover選中4、面板切換推拉方式。這時,我就與Chester商量統壹的方式,他給予我極大的信任及自由,這讓我不再畏手畏腳,從而放心大膽地選擇或從新設計交互方式。

設計風格統壹

主要是字體,字號、顏色、形狀、圓角等,在此不提。

母版制作

母版,相信大家都經常用的,好處多多,諸如方便修改,復制簡單等等。這裏我要說說自己的母版制作規則:

1.只做頻繁使用的地方

只是為了控制母版的數量,方便後期叠代時的梳理與查找。

2.先難後易

復雜交互往往是由多個簡單交互組成,所以在完成了復雜交互後,許多簡單交互只需要復制即可,而如果先做簡單交互,則在組成復雜交互時可能會受到邏輯順序和層級關系的影響,反而增加制作難度。

3.先全局後細節

在制作母版時,往往會遇到做完壹個母版後,發現之前的母版可以跟這個母版合並,因此先做全局的母版更容易考慮到壹些細節性的部件,進而減少操作難度。同時先做全局母版也更利於我對頁面布局的把控,能夠增加效率與成就感。

4.常用break away

這裏即把母版作為壹個部件用,因為在設計中不能及時制作相應的部件,所以將常用部件生成母版後,通過break away還原成部件是壹個不錯的選擇。

5.命名很重要

命名真的很重要,如果名字起不好,就很有可能混淆,尤其是與其他人***同完成時,命名尤為重要。

2.5瘋狂的中繼器

中繼器是Axure7.0推出的功能,許多axure的使用者看到中繼器的高級函數就望而卻步,加上動態面板足夠強大,以至於明珠蒙塵。我在高保真的制作中使用了大量的中繼器,壹個頁面中甚至使用超過4個,我甚至想到把絕大多是部件都轉化成中繼器。個人認為中繼器有以下幾個好處:

1.靈活性強

2.交互簡單

3.復制簡單

當然中繼器也有諸多不足,動態面板依然是Axure部件中的王者。

多層動態面板

針對頁面布局類似的頁面,我采用了多層動態面板的做法,以至於最終那110頁視覺圖被我做成了9張網頁,最多的壹個頁面的主動態面板有8層,演示下來也是相當流暢。在使用多層動態面板時,應註意如下幾點:

1.註意面板層級及其他頁面的邏輯

因為在制作頁面或動態面板時,往往是做好了前面壹個再做後面後面,或者復制前面壹個為新的頁面或模板,而之前頁面或面板與之後的對象之間的聯系,如鏈接,按鍵等的交互是在後期加上去的,這就會出現忘記增加交互的情況。

2.註意層級關系,善用面板隱藏

各個部件間的層級關系許多妥善處理,並且經常使用部件管理中的隱藏部件功能,才不會犯層級錯誤,顯示不完全的低級錯誤。

3.命名很重要

同母版部分。

其他

1.細節討論

問題是在執行時發現的,遇到疑惑或者趕緊不合理的地方,記錄下來,與業務人員或者設計人員討論,並提出自己的觀點,確保大家都clear,才能保證設計的快速展開。

2.時間管理

拿到任務後,我對任務進行了評估,然後得出自己每天工作9個小時要完成35頁左右的結論。但實際上有經驗的axure使用者都知道,困難都在前期,後面速度會非常快。

我使用的是番茄計時器,3天裏平均每天工作19個番茄時間(25min*19),加上休息時間,大概每天工作9~10個小時,第壹天第壹個母版我做了5個小時,全天完成22個頁面,但在第三天的下午5點鐘我就完成了110個頁面的任務。

3.進度管理

為了明確知道自己的進度,我使用前期準備的頁面邏輯導圖,每隔壹段時間就在導圖上用黑色標註自己已經完成的頁面,這樣壹方面讓我對自己的進度有了較好的把控,另壹方面也讓Chester那邊明確我的進度,能夠知根知底。

收尾工作

任務找茬

利用Axure預覽生成的頁面,加上之前做的導圖,地毯式找茬。主要找以下幾個方面的問題:1、交互、設計風格統壹2、鏈接是否正確3、排版問題

完善復雜交互

在制作過程中,為了趕進度,再征得Chester的同意的情況下,我漏掉了極少的諸如記錄地址,中繼器多種排序等復雜交互,這個時候自然查漏補缺,盡量完善

撰寫原型修改記錄文檔

由於我對原視覺設計圖進行了較大的修改,雖然很多部分已經講給 Chester聽了,但撰寫這份文檔還是很有必要的。按照頁面--模塊--交互的層級關系,我最終整理了7頁的修改記錄文檔反饋給Chester。

總結

交互設計應當是每個產品經理的基本功,雖然交互工具的使用並不代表交互水平,但善用交互工具無疑能夠增強我們的交互功力,使我們的思維邏輯更加縝密,並能了解產品邏輯,甚至研發實現難度。

作者:朝聆夕改

來源:互聯網er的早讀課

互聯網從業者必備微信公眾號:woshipm,如果妳已經關註了,證明妳已經很牛逼了。