Dribbble這類圖片資料注重設(shè)計(jì)趨勢，交互進(jìn)階（自我宣傳一下）這類博文資料注重設(shè)計(jì)理念，學(xué)術(shù)研究和書籍這類官方資料注重設(shè)計(jì)方法……大家不約而同地把「具體實(shí)施」這一步驟忽略了。跟UI視覺不同，交互設(shè)計(jì)確實(shí)對于畫圖沒有什么明確的要求……但是，我摔過的無數(shù)坑都驗(yàn)證了一個無法逃避的事實(shí)：
恰當(dāng)?shù)谋磉_(dá)形式能夠?qū)λ枷雮鬟_(dá)和工作效率起到事半功倍的效果；不恰當(dāng)?shù)谋磉_(dá)形式可能讓人對你的設(shè)計(jì)造成誤解，甚至低估你的能力水平。
下面我將結(jié)合大家的普遍理解和個人經(jīng)歷分析一下各類交互方案的優(yōu)劣以及對表達(dá)形式的探索。下文將介紹的類型有：線框圖、偽視覺稿、去色稿和色塊稿。
一、線框圖
這可能是交互方案最原始的狀態(tài)了吧，「你想要設(shè)計(jì)一款程序，于是構(gòu)思一下信息排布和功能組件，然后用簡單快速的方式畫下來?！?/span>
在早期，線框圖是唯一的交互方案表現(xiàn)形式，因?yàn)榇蠹也粫诋嫺鍟r顧慮太多。如果你去翻翻國外人機(jī)交互的經(jīng)典資料或者學(xué)術(shù)論文，會發(fā)現(xiàn)上面的圖例在現(xiàn)在的我們看來大多丑到無法呼吸。
但是這種原始而單純的表現(xiàn)形式，已經(jīng)不太適應(yīng)現(xiàn)在的設(shè)計(jì)環(huán)境了。在更加激烈競爭和注重審美的今天，大家的交互方案的形式性要求越來越高。在這種環(huán)境中，如果你依舊只把交互方案畫到線框圖這種程度，哪怕設(shè)計(jì)想法再好，方案也很容易被PK掉。
除非你有機(jī)會能夠解釋清楚線框圖背后的設(shè)計(jì)意圖，但是拋去一小丟丟偏愛學(xué)術(shù)的科班設(shè)計(jì)師之外，大部分人都不太可能有這個耐心的。
二、偽視覺稿
如果沒有說明解釋，你可能以為上圖是扁平簡約中規(guī)中矩的視覺稿，實(shí)際上它只是交互方案罷了。很多交互設(shè)計(jì)師孜孜不倦地在視覺效果上加重投入，哪怕明明知道視覺設(shè)計(jì)師會將其完全顛覆，哪怕常常被開發(fā)誤當(dāng)做最終視覺方案……如果太過，這樣破壞方法論和設(shè)計(jì)體系的操作方式，真的有點(diǎn)病態(tài)。
我以前也經(jīng)常這么干，理由很簡單，就是競爭。
我在本科時參加過一個挺山寨的UI設(shè)計(jì)大賽，當(dāng)時是抱著體驗(yàn)一下國內(nèi)比賽的感覺和同學(xué)組了個隊(duì)。這個比賽分了好幾次復(fù)賽，第一次是檢驗(yàn)前期調(diào)研；第二次復(fù)賽是檢驗(yàn)線框圖；第三次復(fù)賽是檢驗(yàn)完整方案。我們第一個階段還比較認(rèn)真，以我個人項(xiàng)目和比賽經(jīng)歷，按照計(jì)劃下去應(yīng)該不會太差，但是沒想到在第二次復(fù)賽就被刷下來了。
因?yàn)槲覀兒軉渭兊亟庾x比賽規(guī)則后，在第二次復(fù)賽（語音 PPT）如實(shí)上交了精心準(zhǔn)備的線框圖。即便我們的方案分明在創(chuàng)意、合理程度和完成度上都很好，然而在外行評委的眼里，這種黑白灰的簡陋線框圖比起其它組色彩繽紛的視覺稿，相差太遠(yuǎn)了。哪怕那些視覺稿其實(shí)非常丑，調(diào)研、設(shè)計(jì)思路和可行性和比我們差好幾個檔次。
從此之后我學(xué)到了，在有競爭的情況下，不要以為別人說線框圖就只給線框圖，那樣想簡直太單純了。
有的設(shè)計(jì)團(tuán)隊(duì)里，交互稿必須達(dá)到近似視覺稿的細(xì)致程度已經(jīng)是不成文的規(guī)則。長久來看，我覺得這樣做其實(shí)并不太好，因?yàn)椋?/span>
交互設(shè)計(jì)師需要在工作價(jià)值之外的地方投入更多的精力，維護(hù)成本更是成倍增加。在大量的稿件傳遞中，很容易分不清哪些是交互方案，哪些是視覺方案，讓人誤解。太細(xì)致的交互方案會產(chǎn)生過多的風(fēng)格引導(dǎo)，限制了視覺設(shè)計(jì)的發(fā)揮潛力。三、去色稿
這種表現(xiàn)形式可以看作是上文偽視覺稿的去色版，就是在視覺風(fēng)格上可以自由發(fā)揮，但是除了黑白灰之外不用任何色彩。
這種方式在具有較高的觀賞性和細(xì)致程度的同時，比起偽視覺稿好處是：
由于不考慮彩色，投入的精力相對少一些。不會讓人誤以為是視覺方案。對視覺風(fēng)格的引導(dǎo)性低一些。標(biāo)注用任何顏色都會很顯眼。
如果在顏色選取上稍微突破一下，還可以在不做過多視覺預(yù)設(shè)的基礎(chǔ)上，增加方案的吸引力。
四、色塊稿
這算是一種比較新的探索了。有時候交互方案不需把界面所有細(xì)節(jié)都展示出來，可以用色塊來代替圖片和文字。
這么省事的方法，顯然不能夠隨便使用，可以用到的場景有：
復(fù)用性較高的動效。涉及到大量界面、對細(xì)節(jié)要求不高的流程圖。純粹的排版設(shè)計(jì)。頁面局部的重新設(shè)計(jì)，不重新設(shè)計(jì)的其余部分就可以用色塊簡單示意。
由于沒有細(xì)節(jié)，所以就算使用色彩也不會讓人產(chǎn)生視覺方案的感覺。
如果交互方案都能這么搞，那真是能省不少時間……不過這當(dāng)然不可能的。
總結(jié)
所以，交互方案該畫到什么程度呢？我這里雖然給了一寫建議，但是具體情況還是要具體分析。請結(jié)合一下項(xiàng)目需要、團(tuán)隊(duì)風(fēng)格以及自身喜好選擇合適的表現(xiàn)形式吧。
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:Calibri,sans-serif;}
更多關(guān)于云服務(wù)器，域名注冊，虛擬主機(jī)的問題，請?jiān)L問西部數(shù)碼官網(wǎng)：www.ps-sw.cn
