交互設(shè)計方案要提交什么樣的圖?

作為一個經(jīng)歷了“全棧 -> 非科班 -> 海歸學(xué)院派 -> BAT”的交互設(shè)計師,我也算是閱讀和學(xué)習(xí)過各種類型的資料了。有一個問題長期默默困擾著包括我在內(nèi)的很多交互設(shè)計師,然而卻從未受到應(yīng)有的關(guān)注,那就是本文標(biāo)題——交互設(shè)計方案要提交什么樣圖?

Dribbble這類圖片資料注重設(shè)計趨勢,交互進階這類博文資料注重設(shè)計理念,學(xué)術(shù)研究和書籍這類官方資料注重設(shè)計方法……大家不約而同地把“具體實施”這一步驟忽略了。跟UI和視覺不同,交互設(shè)計確實對于畫圖沒有什么明確的要求……但是,我摔過的無數(shù)坑都驗證了一個無法逃避的事實:

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

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

線框圖

這可能是交互方案最原始的狀態(tài)了吧:“你想要設(shè)計一款程序,于是構(gòu)思一下信息排布和功能組件,然后用簡單快速的方式畫下來?!?

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

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

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

偽視覺稿

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

我以前也經(jīng)常這么干,理由很簡單,就是競爭。

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

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

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

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

1、交互設(shè)計師需要在工作價值之外的地方投入更多的精力,維護成本更是成倍增加

2、在大量的稿件傳遞中,很容易分不清哪些是交互方案,哪些是視覺方案,讓人誤解

3、太細致的交互方案會產(chǎn)生過多的風(fēng)格引導(dǎo),限制了視覺設(shè)計的發(fā)揮潛力

去色稿

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

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

1、由于不考慮彩色,投入的精力相對少一些

2、不會讓人誤以為是視覺方案

3、對視覺風(fēng)格的引導(dǎo)性低一些

4、標(biāo)注用任何顏色都會很顯眼

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

色塊稿

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

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

· 復(fù)用性較高的動效

· 涉及到大量界面、對細節(jié)要求不高的流程圖

· 純粹的排版設(shè)計

· 頁面局部的重新設(shè)計,不重新設(shè)計的其余部分就可以用色塊簡單示意

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

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

總結(jié)

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

 

 

作者:Z_Yuhan

鏈接:https://www.jianshu.com/p/a671ba2529e5

來源:簡書

每天更新,
全站高品質(zhì)素材免費下載!