交互方案該畫到什麼程度？

05-21

交互方案該畫到什麼程度？

來自專欄交互進階

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

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

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

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

線框圖

圖片來源：Lucidchart

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

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

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

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

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

圖片來源：Ramotion

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

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

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

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

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

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

圖片來源：Patryk Sobczak

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

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

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

圖片來源：Eddie Lobanovskiy

圖片來源：Jeff Broderick

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

圖片來源：Ramil Derogongun

圖片來源：Autumn Mariano

圖片來源：Ramotion

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

由於沒有細節，所以就算使用色彩也不會讓人產生視覺方案的感覺：

圖片來源：Jared Erondu

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

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

——

P.S. 封面的配圖插畫是我的手繪哦～