關(guān)于交互Demo設(shè)計的一些建議
為方便產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)及項目相關(guān)人員能夠看到直觀的效果,進(jìn)行更有效的溝通;提供直觀的產(chǎn)品設(shè)想,說明用戶將如何與產(chǎn)品進(jìn)行交互,在交互設(shè)計的過程中一定會產(chǎn)出各種各樣的產(chǎn)出物,如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。
這里簡單分享下自己在項目過程中的交互Demo設(shè)計的一些心得。
Axure
制作交互Demo的軟件有很多,個人比較喜歡且習(xí)慣的就是Axure。Axure操作簡單明了,對于初學(xué)者來說,非常容易上手;它也擁有強(qiáng)大的交互演示動作,對于高級使用者來說,制作非常高保真的演示Demo, 也是非常有成就感的。
Balsamiq
提供了豐富的手繪風(fēng)格的web常用元件,能創(chuàng)建接近于紙上手繪的原型,讓人有眼前一亮的感覺,個人建議初稿方案的時候可以考慮用這個更能吸引人。
Mockups
與Balsamiq 風(fēng)格相似,而 Mockups最大的特色是網(wǎng)頁版,無需下載安裝,可以基于web的存儲在任意電腦上聯(lián)機(jī)打開。
其他還有一些工具,就不做介紹了,因為個人也沒有使用過,比如:
Microsoft Office Visio、Pencil sketch、Design Studio、Prototype Composer、Lucid Spec、Irise Professional Edition、Adobe Reader…
每個軟件都是各有特色,也有利弊,但軟件都只是工具,用哪個都無妨,只要符合自己的習(xí)慣就好,關(guān)鍵是產(chǎn)出物。
相對中保真的交互Demo
工具之后,就是Demo稿的設(shè)計了。在平常的項目中,我基本上都是使用Axure 工具,也是大家常用的工具。而交互Demo也只要出到相對中保真的狀態(tài)即可,所謂的相對中保真,就是產(chǎn)出交付物中能體現(xiàn)出用戶在每個頁面上期望看到的內(nèi)容,以及這些內(nèi)容在頁面上的相對優(yōu)先級,并要提供流程說明和操作方式及響應(yīng)狀態(tài)的表述。
不是粗糙的草稿方案,也不要出太高保真的視覺效果。草稿方案,可以用手繪或者接近手繪效果的工具(balsamiq、Mockups),不見得都需要用axure; 而高保真的原型需要花費更多的精力,也不夠高效,除非是用于匯報演示方案、或是為可用性測試制作高保真原型。
一、遵守柵格規(guī)范
很多新人交互設(shè)計師都比較容易忽略這一點,沒有按照柵格規(guī)范來布局,這樣容易導(dǎo)致的結(jié)果就是:視覺設(shè)計師在按照柵格排版時,發(fā)現(xiàn)在交互稿中能排下的內(nèi)容,在視覺稿中排不下了,這樣就還得返回去改交互稿,或是需要重新設(shè)計布局。
所以要養(yǎng)成習(xí)慣,在設(shè)計初時,一定要先根據(jù)柵格進(jìn)行布局,同時也要保證交互稿中的字號、間距盡量符合視覺要求(比如間距最小10像素等),以免給視覺造成不必要的困擾。
二、不要使用截圖與顏色
有些產(chǎn)品人員或設(shè)計師為了能方便,拼湊各種競品的截圖,組成一個頁面。這樣即不規(guī)范,也大大降低了交互稿的檔次,還會對視覺設(shè)計師也有一定的干擾,個人是非常厭惡的。
另外,交互階段的產(chǎn)出方案,應(yīng)該更聚焦在信息布局、內(nèi)容層次、操作流程。不太建議在交互稿上使用色彩(除了文字或特殊狀態(tài)),避免對視覺設(shè)計師造成不必要的干擾。如果真的有一些關(guān)于想法,可以通過文字描述,或者直接告訴視覺設(shè)計師需要營造什么樣的氛圍,達(dá)到什么效果。
讓色彩、質(zhì)感、具體形勢交給視覺設(shè)計師,多點空間讓視覺設(shè)計師去盡情發(fā)揮。
三、不要沉迷于復(fù)雜的交互動作效果
Axure提供了豐富的動作腳本支持,使得動態(tài)模擬真實界面交互變成可能, 能實現(xiàn)狀態(tài)切換、時間動畫以及其他一些驚人的小玩意。
但有時候我們需要思考,在日常項目中是否需要花費這么多的精力和時間?
這也取決于于這個原型是用于什么情境。如果原型是用以進(jìn)行早期的可用性測試,或為爭取資源的高保真演示匯報Demo,也許需要我們快速產(chǎn)出接近于實際界面的可操作效果。
而如果只是用于流程中的交互物,提供給視覺設(shè)計師或前端工程師進(jìn)行開發(fā),那么過度的設(shè)計和效果只能是浪費精力。
四、一定要有一套屬于自己的控件庫
把常用的控件、功能組建、圖標(biāo)、標(biāo)注等制作成通用的標(biāo)準(zhǔn)小單元,插入到部件庫(widgets),在制作交互Demo時,只需要調(diào)出需要的控件即可,這可以大大的提高你的效率。
關(guān)于原型控件,每個原型工具都有,可以網(wǎng)上搜索或者調(diào)用下他人分享的。但個人建議,還是根據(jù)自己的習(xí)慣或產(chǎn)品設(shè)計規(guī)范,制作一套自用的標(biāo)準(zhǔn)控件庫。
五、善用master,提高效率
大量的頁面進(jìn)行統(tǒng)一的更新也是相當(dāng)麻煩的一件事。在制作時,直接用master制作復(fù)用的模塊,來取代復(fù)制黏貼,在需要調(diào)整時,只需要調(diào)整master文件即可。
master是Axure提供的類似于自定義組件的功能,你可以在master設(shè)計常用的交互組件,然后在不同的頁面引用,如頁面頭尾、菜單等會在大部分頁面公用內(nèi)容,非常適合做成master,然后在各個界面中拖曳相應(yīng)到指定位置。這樣當(dāng)這些共用內(nèi)容需要修改時,只需修改mater即可。
六、版本存檔也很重要
Demo,跟實際產(chǎn)品一樣,是會迭代和不斷被修改的,所以,一定要記得存檔。即使是在同一個原型上做修改,也一定要做記錄,這對后續(xù)回顧很重要。
后話:交互Demo設(shè)計,是每個交互設(shè)計師最最基本的技能,這也是一個梳理思路很好的方式,但不是唯一的形勢,Axure也不是唯一工具。只要能清晰表達(dá)產(chǎn)品思路、界面UI、流程邏輯及交互狀態(tài)的好用工具都是值得去嘗試的。
(原文鏈接:http://heyuchan.com/?p=529)
master怎么用?