交互方案該畫(huà)到什么程度？來(lái)看全棧設(shè)計(jì)師的總結(jié)！

Z Yuhan：作為一個(gè)經(jīng)歷了「全棧 -> 非科班 -> 海歸學(xué)院派 -> BAT」的交互設(shè)計(jì)師，我也算是閱讀和學(xué)習(xí)過(guò)各種類(lèi)型的資料了。有一個(gè)問(wèn)題長(zhǎng)期默默困擾著包括我在內(nèi)的很多交互設(shè)計(jì)師，然而卻從未受到應(yīng)有的關(guān)注，那就是交互方案應(yīng)該畫(huà)到什么程度？

Dribbble 這類(lèi)圖片資料注重設(shè)計(jì)趨勢(shì)，交互進(jìn)階（自我宣傳一下）這類(lèi)博文資料注重設(shè)計(jì)理念，學(xué)術(shù)研究和書(shū)籍這類(lèi)官方資料注重設(shè)計(jì)方法……大家不約而同地把「具體實(shí)施」這一步驟忽略了。跟 UI 視覺(jué)不同，交互設(shè)計(jì)確實(shí)對(duì)于畫(huà)圖沒(méi)有什么明確的要求……但是，我摔過(guò)的無(wú)數(shù)坑都驗(yàn)證了一個(gè)無(wú)法逃避的事實(shí)：

恰當(dāng)?shù)谋磉_(dá)形式能夠?qū)λ枷雮鬟_(dá)和工作效率起到事半功倍的效果；不恰當(dāng)?shù)谋磉_(dá)形式可能讓人對(duì)你的設(shè)計(jì)造成誤解，甚至低估你的能力水平。

下面我將結(jié)合大家的普遍理解和個(gè)人經(jīng)歷分析一下各類(lèi)交互方案的優(yōu)劣以及對(duì)表達(dá)形式的探索。下文將介紹的類(lèi)型有：線框圖、偽視覺(jué)稿、去色稿和色塊稿。

一、線框圖

△ 圖片來(lái)源：Lucidchart

這可能是交互方案最原始的狀態(tài)了吧，「你想要設(shè)計(jì)一款程序，于是構(gòu)思一下信息排布和功能組件，然后用簡(jiǎn)單快速的方式畫(huà)下來(lái)。」

在早期，線框圖是唯一的交互方案表現(xiàn)形式，因?yàn)榇蠹也粫?huì)在畫(huà)稿時(shí)顧慮太多。如果你去翻翻國(guó)外人機(jī)交互的經(jīng)典資料或者學(xué)術(shù)論文，會(huì)發(fā)現(xiàn)上面的圖例在現(xiàn)在的我們看來(lái)大多丑到無(wú)法呼吸。

△ 圖片來(lái)源：Matching HCI Design Patterns to Workflow within an Agile Process

但是這種原始而單純的表現(xiàn)形式，已經(jīng)不太適應(yīng)現(xiàn)在的設(shè)計(jì)環(huán)境了。在更加激烈競(jìng)爭(zhēng)和注重審美的今天，大家的交互方案的形式性要求越來(lái)越高。在這種環(huán)境中，如果你依舊只把交互方案畫(huà)到線框圖這種程度，哪怕設(shè)計(jì)想法再好，方案也很容易被 PK 掉。

除非你有機(jī)會(huì)能夠解釋清楚線框圖背后的設(shè)計(jì)意圖，但是拋去一小丟丟偏愛(ài)學(xué)術(shù)的科班設(shè)計(jì)師之外，大部分人都不太可能有這個(gè)耐心的。

二、偽視覺(jué)稿

△ 圖片來(lái)源：Ramotion

如果沒(méi)有說(shuō)明解釋?zhuān)憧赡芤詾樯蠄D是扁平簡(jiǎn)約中規(guī)中矩的視覺(jué)稿，實(shí)際上它只是交互方案罷了。很多交互設(shè)計(jì)師孜孜不倦地在視覺(jué)效果上加重投入，哪怕明明知道視覺(jué)設(shè)計(jì)師會(huì)將其完全顛覆，哪怕常常被開(kāi)發(fā)誤當(dāng)做最終視覺(jué)方案……如果太過(guò)，這樣破壞方法論和設(shè)計(jì)體系的操作方式，真的有點(diǎn)病態(tài)。

我以前也經(jīng)常這么干，理由很簡(jiǎn)單，就是競(jìng)爭(zhēng)。

我在本科時(shí)參加過(guò)一個(gè)挺山寨的 UI 設(shè)計(jì)大賽，當(dāng)時(shí)是抱著體驗(yàn)一下國(guó)內(nèi)比賽的感覺(jué)和同學(xué)組了個(gè)隊(duì)。這個(gè)比賽分了好幾次復(fù)賽，第一次是檢驗(yàn)前期調(diào)研；第二次復(fù)賽是檢驗(yàn)線框圖；第三次復(fù)賽是檢驗(yàn)完整方案。我們第一個(gè)階段還比較認(rèn)真，以我個(gè)人項(xiàng)目和比賽經(jīng)歷，按照計(jì)劃下去應(yīng)該不會(huì)太差，但是沒(méi)想到在第二次復(fù)賽就被刷下來(lái)了。

因?yàn)槲覀兒軉渭兊亟庾x比賽規(guī)則后，在第二次復(fù)賽（語(yǔ)音+PPT）如實(shí)上交了精心準(zhǔn)備的線框圖。即便我們的方案分明在創(chuàng)意、合理程度和完成度上都很好，然而在外行評(píng)委的眼里，這種黑白灰的簡(jiǎn)陋線框圖比起其它組色彩繽紛的視覺(jué)稿，相差太遠(yuǎn)了。哪怕那些視覺(jué)稿其實(shí)非常丑，調(diào)研、設(shè)計(jì)思路和可行性和比我們差好幾個(gè)檔次。

從此之后我學(xué)到了，在有競(jìng)爭(zhēng)的情況下，不要以為別人說(shuō)線框圖就只給線框圖，那樣想簡(jiǎn)直太單純了。

有的設(shè)計(jì)團(tuán)隊(duì)里，交互稿必須達(dá)到近似視覺(jué)稿的細(xì)致程度已經(jīng)是不成文的規(guī)則。長(zhǎng)久來(lái)看，我覺(jué)得這樣做其實(shí)并不太好，因?yàn)椋?/p>

• 交互設(shè)計(jì)師需要在工作價(jià)值之外的地方投入更多的精力，維護(hù)成本更是成倍增加。
• 在大量的稿件傳遞中，很容易分不清哪些是交互方案，哪些是視覺(jué)方案，讓人誤解。
• 太細(xì)致的交互方案會(huì)產(chǎn)生過(guò)多的風(fēng)格引導(dǎo)，限制了視覺(jué)設(shè)計(jì)的發(fā)揮潛力。

三、去色稿

△ 圖片來(lái)源：Patryk Sobczak

這種表現(xiàn)形式可以看作是上文偽視覺(jué)稿的去色版，就是在視覺(jué)風(fēng)格上可以自由發(fā)揮，但是除了黑白灰之外不用任何色彩。

這種方式在具有較高的觀賞性和細(xì)致程度的同時(shí)，比起偽視覺(jué)稿好處是：

• 由于不考慮彩色，投入的精力相對(duì)少一些。
• 不會(huì)讓人誤以為是視覺(jué)方案。
• 對(duì)視覺(jué)風(fēng)格的引導(dǎo)性低一些。
• 標(biāo)注用任何顏色都會(huì)很顯眼。

如果在顏色選取上稍微突破一下，還可以在不做過(guò)多視覺(jué)預(yù)設(shè)的基礎(chǔ)上，增加方案的吸引力。

△ 圖片來(lái)源：Eddie Lobanovskiy

△ 圖片來(lái)源：Jeff Broderick

四、色塊稿

這算是一種比較新的探索了。有時(shí)候交互方案不需把界面所有細(xì)節(jié)都展示出來(lái)，可以用色塊來(lái)代替圖片和文字。

△ 圖片來(lái)源：Ramil Derogongun

△ 圖片來(lái)源：Autumn Mariano

△ 圖片來(lái)源：Ramotion

這么省事的方法，顯然不能夠隨便使用，可以用到的場(chǎng)景有：

• 復(fù)用性較高的動(dòng)效。
• 涉及到大量界面、對(duì)細(xì)節(jié)要求不高的流程圖。
• 純粹的排版設(shè)計(jì)。
• 頁(yè)面局部的重新設(shè)計(jì)，不重新設(shè)計(jì)的其余部分就可以用色塊簡(jiǎn)單示意。

由于沒(méi)有細(xì)節(jié)，所以就算使用色彩也不會(huì)讓人產(chǎn)生視覺(jué)方案的感覺(jué)。

△ 圖片來(lái)源：Jared Erondu

如果交互方案都能這么搞，那真是能省不少時(shí)間……不過(guò)這當(dāng)然不可能的。

總結(jié)

所以，交互方案該畫(huà)到什么程度呢？我這里雖然給了一寫(xiě)建議，但是具體情況還是要具體分析。請(qǐng)結(jié)合一下項(xiàng)目需要、團(tuán)隊(duì)風(fēng)格以及自身喜好選擇合適的表現(xiàn)形式吧。

歡迎關(guān)注作者的微信公眾號(hào)：「交互進(jìn)階」

「高手經(jīng)驗(yàn)！幫你打造思路清晰易使用的交互稿」

• 《解讀交互稿模板：如何讓設(shè)計(jì)稿更規(guī)范化？》
• 《一個(gè)完整的交互設(shè)計(jì)稿有哪些必備元素？》
• 《進(jìn)階好文！讓人舒服的的交互設(shè)計(jì)稿該有的5個(gè)特點(diǎn)》
• 《細(xì)微處見(jiàn)功夫！聊聊那些不被重視的交互稿細(xì)節(jié)》
• 《如何讓交互稿的體驗(yàn)更好？網(wǎng)易設(shè)計(jì)師總結(jié)的10個(gè)知識(shí)點(diǎn)》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com