為方便產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)及項(xiàng)目相關(guān)人員能夠看到直觀的效果，進(jìn)行更有效的溝通；提供直觀的產(chǎn)品設(shè)想，說明用戶將如何與產(chǎn)品進(jìn)行交互，在交互設(shè)計(jì)的過程中一定會(huì)產(chǎn)出各種各樣的產(chǎn)出物，如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。

這里簡(jiǎn)單分享下自己在項(xiàng)目過程中的交互Demo設(shè)計(jì)的一些心得。

Axure

制作交互Demo的軟件有很多，個(gè)人比較喜歡且習(xí)慣的就是Axure。Axure操作簡(jiǎn)單明了，對(duì)于初學(xué)者來說，非常容易上手；它也擁有強(qiáng)大的交互演示動(dòng)作，對(duì)于高級(jí)使用者來說，制作非常高保真的演示Demo, 也是非常有成就感的。

Balsamiq

提供了豐富的手繪風(fēng)格的web常用元件，能創(chuàng)建接近于紙上手繪的原型，讓人有眼前一亮的感覺，個(gè)人建議初稿方案的時(shí)候可以考慮用這個(gè)更能吸引人。

Mockups

與Balsamiq 風(fēng)格相似，而 Mockups最大的特色是網(wǎng)頁(yè)版，無需下載安裝，可以基于web的存儲(chǔ)在任意電腦上聯(lián)機(jī)打開。

其他還有一些工具，就不做介紹了，因?yàn)閭€(gè)人也沒有使用過，比如：

Microsoft Office Visio、Pencil sketch、Design Studio、Prototype Composer、Lucid Spec、Irise Professional Edition、Adobe Reader…

每個(gè)軟件都是各有特色，也有利弊，但軟件都只是工具，用哪個(gè)都無妨，只要符合自己的習(xí)慣就好，關(guān)鍵是產(chǎn)出物。

相對(duì)中保真的交互Demo

工具之后，就是Demo稿的設(shè)計(jì)了。在平常的項(xiàng)目中，我基本上都是使用Axure 工具，也是大家常用的工具。而交互Demo也只要出到相對(duì)中保真的狀態(tài)即可，所謂的相對(duì)中保真，就是產(chǎn)出交付物中能體現(xiàn)出用戶在每個(gè)頁(yè)面上期望看到的內(nèi) 容，以及這些內(nèi)容在頁(yè)面上的相對(duì)優(yōu)先級(jí)，并要提供流程說明和操作方式及響應(yīng)狀態(tài)的表述。

不是粗糙的草稿方案，也不要出太高保真的視覺效果。草稿方案，可以用手繪或者接近手繪效果的工具(balsamiq、Mockups)，不見得都需 要用axure; 而高保真的原型需要花費(fèi)更多的精力，也不夠高效，除非是用于匯報(bào)演示方案、或是為可用性測(cè)試制作高保真原型。

一、遵守柵格規(guī)范

很多新人交互設(shè)計(jì)師都比較容易忽略這一點(diǎn)，沒有按照柵格規(guī)范來布局，這樣容易導(dǎo)致的結(jié)果就是：視覺設(shè)計(jì)師在按照柵格排版時(shí)，發(fā)現(xiàn)在交互稿中能排下的內(nèi)容，在視覺稿中排不下了，這樣就還得返回去改交互稿，或是需要重新設(shè)計(jì)布局。

所以要養(yǎng)成習(xí)慣，在設(shè)計(jì)初時(shí)，一定要先根據(jù)柵格進(jìn)行布局，同時(shí)也要保證交互稿中的字號(hào)、間距盡量符合視覺要求（比如間距最小10像素等），以免給視覺造成不必要的困擾。

二、不要使用截圖與顏色

有些產(chǎn)品人員或設(shè)計(jì)師為了能方便，拼湊各種競(jìng)品的截圖，組成一個(gè)頁(yè)面。這樣即不規(guī)范，也大大降低了交互稿的檔次，還會(huì)對(duì)視覺設(shè)計(jì)師也有一定的干擾，個(gè)人是非常厭惡的。

另外，交互階段的產(chǎn)出方案，應(yīng)該更聚焦在信息布局、內(nèi)容層次、操作流程。不太建議在交互稿上使用色彩（除了文字或特殊狀態(tài)），避免對(duì)視覺設(shè)計(jì)師造成不必要的干擾。如果真的有一些關(guān)于想法，可以通過文字描述，或者直接告訴視覺設(shè)計(jì)師需要營(yíng)造什么樣的氛圍，達(dá)到什么效果。

讓色彩、質(zhì)感、具體形勢(shì)交給視覺設(shè)計(jì)師，多點(diǎn)空間讓視覺設(shè)計(jì)師去盡情發(fā)揮。

三、不要沉迷于復(fù)雜的交互動(dòng)作效果

Axure提供了豐富的動(dòng)作腳本支持，使得動(dòng)態(tài)模擬真實(shí)界面交互變成可能, 能實(shí)現(xiàn)狀態(tài)切換、時(shí)間動(dòng)畫以及其他一些驚人的小玩意。

但有時(shí)候我們需要思考，在日常項(xiàng)目中是否需要花費(fèi)這么多的精力和時(shí)間？

這也取決于于這個(gè)原型是用于什么情境。如果原型是用以進(jìn)行早期的可用性測(cè)試，或?yàn)闋?zhēng)取資源的高保真演示匯報(bào)Demo，也許需要我們快速產(chǎn)出接近于實(shí)際界面的可操作效果。

而如果只是用于流程中的交互物，提供給視覺設(shè)計(jì)師或前端工程師進(jìn)行開發(fā)，那么過度的設(shè)計(jì)和效果只能是浪費(fèi)精力。

四、一定要有一套屬于自己的控件庫(kù)

把常用的控件、功能組建、圖標(biāo)、標(biāo)注等制作成通用的標(biāo)準(zhǔn)小單元，插入到部件庫(kù)（widgets），在制作交互Demo時(shí)，只需要調(diào)出需要的控件即可，這可以大大的提高你的效率。

關(guān)于原型控件，每個(gè)原型工具都有，可以網(wǎng)上搜索或者調(diào)用下他人分享的。但個(gè)人建議，還是根據(jù)自己的習(xí)慣或產(chǎn)品設(shè)計(jì)規(guī)范，制作一套自用的標(biāo)準(zhǔn)控件庫(kù)。

五、善用master，提高效率

大量的頁(yè)面進(jìn)行統(tǒng)一的更新也是相當(dāng)麻煩的一件事。在制作時(shí)，直接用master制作復(fù)用的模塊，來取代復(fù)制黏貼，在需要調(diào)整時(shí)，只需要調(diào)整master文件即可。

master是Axure提供的類似于自定義組件的功能，你可以在master設(shè)計(jì)常用的交互組件，然后在不同的頁(yè)面引用，如頁(yè)面頭尾、菜單等會(huì)在 大部分頁(yè)面公用內(nèi)容，非常適合做成master，然后在各個(gè)界面中拖曳相應(yīng)到指定位置。這樣當(dāng)這些共用內(nèi)容需要修改時(shí)，只需修改mater即可。

六、版本存檔也很重要

Demo，跟實(shí)際產(chǎn)品一樣，是會(huì)迭代和不斷被修改的，所以，一定要記得存檔。即使是在同一個(gè)原型上做修改，也一定要做記錄，這對(duì)后續(xù)回顧很重要。

??? 后話：交互Demo設(shè)計(jì)，是每個(gè)交互設(shè)計(jì)師最最基本的技能，這也是一個(gè)梳理思路很好的方式，但不是唯一的形勢(shì)，Axure也不是唯一工具。只要能清晰表達(dá)產(chǎn)品思路、界面UI、流程邏輯及交互狀態(tài)的好用工具都是值得去嘗試的。

原文鏈接：http://heyuchan.com/?p=529