Z Yuhan：作為一個經歷了「全棧 -> 非科班 -> 海歸學院派 -> BAT」的交互設計師，我也算是閱讀和學習過各種類型的資料了。有一個問題長期默默困擾著包括我在內的很多交互設計師，然而卻從未受到應有的關注，那就是交互方案應該畫到什么程度？

Dribbble 這類圖片資料注重設計趨勢，交互進階（自我宣傳一下）這類博文資料注重設計理念，學術研究和書籍這類官方資料注重設計方法……大家不約而同地把「具體實施」這一步驟忽略了。跟 UI 視覺不同，交互設計確實對于畫圖沒有什么明確的要求……但是，我摔過的無數坑都驗證了一個無法逃避的事實：

恰當的表達形式能夠對思想傳達和工作效率起到事半功倍的效果；不恰當的表達形式可能讓人對你的設計造成誤解，甚至低估你的能力水平。

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

一、線框圖

△ 圖片來源：Lucidchart

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

在早期，線框圖是唯一的交互方案表現形式，因為大家不會在畫稿時顧慮太多。如果你去翻翻國外人機交互的經典資料或者學術論文，會發(fā)現上面的圖例在現在的我們看來大多丑到無法呼吸。

△ 圖片來源：Matching HCI Design Patterns to Workflow within an Agile Process

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

除非你有機會能夠解釋清楚線框圖背后的設計意圖，但是拋去一小丟丟偏愛學術的科班設計師之外，大部分人都不太可能有這個耐心的。

二、偽視覺稿

△ 圖片來源：Ramotion

如果沒有說明解釋，你可能以為上圖是扁平簡約中規(guī)中矩的視覺稿，實際上它只是交互方案罷了。很多交互設計師孜孜不倦地在視覺效果上加重投入，哪怕明明知道視覺設計師會將其完全顛覆，哪怕常常被開發(fā)誤當做最終視覺方案……如果太過，這樣破壞方法論和設計體系的操作方式，真的有點病態(tài)。

我以前也經常這么干，理由很簡單，就是競爭。

我在本科時參加過一個挺山寨的 UI 設計大賽，當時是抱著體驗一下國內比賽的感覺和同學組了個隊。這個比賽分了好幾次復賽，第一次是檢驗前期調研；第二次復賽是檢驗線框圖；第三次復賽是檢驗完整方案。我們第一個階段還比較認真，以我個人項目和比賽經歷，按照計劃下去應該不會太差，但是沒想到在第二次復賽就被刷下來了。

因為我們很單純地解讀比賽規(guī)則后，在第二次復賽（語音+PPT）如實上交了精心準備的線框圖。即便我們的方案分明在創(chuàng)意、合理程度和完成度上都很好，然而在外行評委的眼里，這種黑白灰的簡陋線框圖比起其它組色彩繽紛的視覺稿，相差太遠了。哪怕那些視覺稿其實非常丑，調研、設計思路和可行性和比我們差好幾個檔次。

從此之后我學到了，在有競爭的情況下，不要以為別人說線框圖就只給線框圖，那樣想簡直太單純了。

有的設計團隊里，交互稿必須達到近似視覺稿的細致程度已經是不成文的規(guī)則。長久來看，我覺得這樣做其實并不太好，因為：

• 交互設計師需要在工作價值之外的地方投入更多的精力，維護成本更是成倍增加。
• 在大量的稿件傳遞中，很容易分不清哪些是交互方案，哪些是視覺方案，讓人誤解。
• 太細致的交互方案會產生過多的風格引導，限制了視覺設計的發(fā)揮潛力。

三、去色稿

△ 圖片來源：Patryk Sobczak

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

這種方式在具有較高的觀賞性和細致程度的同時，比起偽視覺稿好處是：

• 由于不考慮彩色，投入的精力相對少一些。
• 不會讓人誤以為是視覺方案。
• 對視覺風格的引導性低一些。
• 標注用任何顏色都會很顯眼。

如果在顏色選取上稍微突破一下，還可以在不做過多視覺預設的基礎上，增加方案的吸引力。

△ 圖片來源：Eddie Lobanovskiy

△ 圖片來源：Jeff Broderick

四、色塊稿

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

△ 圖片來源：Ramil Derogongun

△ 圖片來源：Autumn Mariano

△ 圖片來源：Ramotion

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

• 復用性較高的動效。
• 涉及到大量界面、對細節(jié)要求不高的流程圖。
• 純粹的排版設計。
• 頁面局部的重新設計，不重新設計的其余部分就可以用色塊簡單示意。

由于沒有細節(jié)，所以就算使用色彩也不會讓人產生視覺方案的感覺。

△ 圖片來源：Jared Erondu

如果交互方案都能這么搞，那真是能省不少時間……不過這當然不可能的。

總結

所以，交互方案該畫到什么程度呢？我這里雖然給了一寫建議，但是具體情況還是要具體分析。請結合一下項目需要、團隊風格以及自身喜好選擇合適的表現形式吧。

歡迎關注作者的微信公眾號：「交互進階」

「高手經驗！幫你打造思路清晰易使用的交互稿」

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

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

優(yōu)優(yōu)教程網： UiiiUiii.com 是優(yōu)設旗下優(yōu)質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com