起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識交互方案該畫到什么程度？
交互方案該畫到什么程度呢？本文作者在此給你提供了一點建議，enjoy~
作為一個經歷了“全棧 → 非科班 → 海歸學院派 → BAT”的交互設計師，我也算是閱讀和學習過各種類型的資料了。有一個問題長期默默困擾著包括我在內的很多交互設計師，然而卻從未受到應有的關注，那就是本文標題——交互方案應該畫到什么程度？
Dribbble這類圖片資料注重設計趨勢，交互進階（自我宣傳一下）這類博文資料注重設計理念，學術研究和書籍這類官方資料注重設計方法……大家不約而同地把“具體實施”這一步驟忽略了。跟UI和視覺不同，交互設計確實對于畫圖沒有什么明確的要求……但是，我摔過的無數坑都驗證了一個無法逃避的事實：
恰當的表達形式對能夠對思想傳達和工作效率起到事半功倍的效果；不恰當的表達形式可能讓人對你的設計造成誤解，甚至低估你的能力水平。
——我說的
下面我將結合大家的普遍理解和個人經歷分析一下各類交互方案的優劣以及對表達形式的探索。下文將介紹的類型有：線框圖、偽視覺稿、去色稿和色塊稿。
線框圖
圖片來源：Lucidchart
這可能是交互方案最原始的狀態了吧：“你想要設計一款程序，于是構思一下信息排布和功能組件，然后用簡單快速的方式畫下來?！?/p>
在早期線框圖是唯一的交互方案表現形式，因為大家不會在畫稿時顧慮太多。如果你去翻翻國外人機交互的經典資料或者學術論文，會發現上面的圖例在現在的我們看來大多丑到無法呼吸。
圖片來源：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. 封面的配圖插畫是我的手繪哦～
作者：Z Yuhan，公眾號：體驗進階
來源：https://zhuanlan.zhihu.com/p/34102265?group_id=974951834087071744
本文由 @Z Yuhan?授權發布于人人都是產品經理。未經許可，禁止轉載。
題圖由作者提供
我現在很多時候就是做到偽視覺交互稿，當然前提是在完成交互本職下進行。在我看來，偽視覺交互稿在達到交互要求的條件下，產品和運營那邊更容易獲得認可，可以很直觀的看清之后產品會是什么樣。對于自身的視覺能力也有提高（長期處面對無色的交互稿，感覺設計能力都會受到很大的影響），當然偽視覺交互稿會對UI設計師產生影響，但是某種程度上可以減少了他們一定的工作量或是提出了更高的要求
所以到底畫成什么樣的呢
個人比較偏向色塊稿，能把功能畫清楚的同時，也能把布局梳理得更有主次，更利于演示
一開始都說線框好，簡潔清晰講邏輯就可以也不影響視覺設計；
當時現在做線框感覺也滿足不了自己的某種“沖動”，覺得在線框的基礎上加上色彩還不錯，但是擔心固化設計的思維。
作者文章里的偽視覺感覺不錯，但是需要一定的設計基本功，有點門檻。
色塊稿也挺讓人接受的，不過還不得其法。
多謝作者分享~
偽視覺是水瓶不達標的產品經理，包裝自己的行為。產品經理，與其在整體視覺上做研究，還真不如先把文案、框架、流程整理好再說別的。作為一個設計師，我都要求我的產品經理，把事情描述清楚、準確就好了。他們的視覺設計，基本上都很渣，而且沒有考慮到用戶的視覺體驗、行為習慣。多做多錯，不如交給我自己來。
因為每個公司不同職位上的人能力不一樣，做到什么程度視個人水平而定……
不能同意更多！
嗯，確實。
我個人還是推崇純線框的。