為什么我堅持手繪原型圖?

12 評論 30995 瀏覽 156 收藏 10 分鐘

譯者按:原文作者Dustin Senos是Medium的前設(shè)計主管。他發(fā)現(xiàn)手繪的原型圖才真正有助于我們的思考,而用Axure或sketch畫出來后,一是容易造成思維定勢,二是后期改起來非常麻煩。在數(shù)字化的今天,筆和紙在很多時候其實仍然有不可取代的價值。

11年前,我加入了一家設(shè)計外包公司。當(dāng)時我才20歲,剛剛?cè)胄小n^幾年,我比較著眼于視覺設(shè)計,整天想著如何讓這個質(zhì)地更加逼真?調(diào)整一下光影,網(wǎng)站會不會更好看?怎么樣讓按鈕更加有光澤?經(jīng)常是客戶提出一個點子,我問幾個問題,然后就是打開Photoshop開干了。幾天后,我就給他看一兩個版本的視覺稿,然后根據(jù)反饋進(jìn)行調(diào)整,接著就進(jìn)入開發(fā)階段。當(dāng)時我覺得吧,最牛逼的設(shè)計師就是能設(shè)計出最漂亮的網(wǎng)頁的人。

隨著經(jīng)驗漸長,我意識到在開始視覺設(shè)計前把給客戶看一下原型圖可以節(jié)省雙方的時間。但是畫原型圖感覺總是怪怪的。原型圖的目的是在客戶和我決定好方向并且正式動工前留出快速修改的空間。原型畫起來應(yīng)該是很快的,改起來也應(yīng)該是方便的。但是總覺得在紙上畫出來的原型太low,不好展示給客戶看,于是我就花不少時間用軟件畫原型。然而這種數(shù)字原型圖很少激發(fā)有實質(zhì)意義的討論,說實話,一旦畫好原型,我們就很少改動了。

現(xiàn)在回想起來,我沒有體會到原型圖的價值,是因為我根本就用錯了。它只被我們用來當(dāng)做證據(jù),防止客戶在后期隨意改動需求。而我沒有意識的是,原型圖可以打破設(shè)計的思維局限,讓你更清楚地找到正確的方向,防止你在錯誤的道路上走到黑。

新手經(jīng)常是看重視覺效果勝于功能設(shè)計,因為視覺稿很容易傳播并且評判:

  • 這個頁面是不是符合目前的潮流?
  • 在Dribbble上是不是拿了很多贊?
  • 是否足夠扁平化?

新手看重視覺的另一個原因,就是漂亮的設(shè)計做起來總是相對容易的,放簡歷里也好看。

圖片來自Julie Zhou的文章《初級設(shè)計師 vs. 資深設(shè)計師》

初級設(shè)計師很難跳出第一個想法,總覺得把這個方案做得光鮮漂亮,就一定會成功 。

資深設(shè)計師的思維

干了10年設(shè)計后,我明白了搞清楚事情運作的規(guī)律以及背后的原因比好看的設(shè)計要重要得多。資深設(shè)計師會花更多的時間來思考方向是什么,而不是怎么好看怎么來。正如上面兩張圖顯示的一樣,他們的解決思路是完全不一樣的。

那么,如何避免陷入第一個想法?如何在短時間內(nèi)提出多種方案呢?如何確定這個思路優(yōu)于上一個,或勝過下一個?

什么是有效的原型圖

在進(jìn)入視覺設(shè)計前,我是如何強迫自己去探索各種可能性并且確定靠譜的方向的呢?接下來,我就跟大家分享一個簡單的技巧-拿起紙和筆來畫。手繪原型圖畫起來很快,并且覺得不行的話,可以立刻丟掉,不會覺得可惜。團(tuán)隊其他人有什么想法,都可以隨時拿起筆在上面畫出來。

開始

拿一本方格筆記本,畫至少20個方框。如果你是做移動端設(shè)計的,最好把長寬比跟手機屏幕保持一致。如果是做PC端或網(wǎng)頁的,就用電腦顯示屏的比例。

過程

想想解決問題都有哪些思路,然后動筆畫出來。先畫出第一個想法,然后第二個,直到把20個方框都填滿。

你會發(fā)現(xiàn)很難填滿每個方框,這就對了。如果你發(fā)現(xiàn)自己思路枯竭的,就給自己加上更苛刻的限制條件:如果菜單是環(huán)形會怎么樣?如果只有圖片呢?如果沒有圖片呢?蘋果會怎么設(shè)計?谷歌會怎么處理?如果沒有列表的話呢?有多少方法可以把重要的界面元素放在靠近拇指的地方?就我個人而言,一般畫到第10個方框的時候,思路才會真正打開。

如果你想的是如何布局,可以畫得非常簡單,用T指代標(biāo)題,V指代視頻,RV指代相關(guān)視頻,Sub指代次級導(dǎo)航,這樣你就可以專注于布局,而不是UI細(xì)節(jié)。

或者電燈泡指代文件鏈接,折線圖指代分析內(nèi)容。

如果你要關(guān)注UI布局和元素,那么可以畫出如下圖的高保真原型圖。


到了這個階段,20個方框都畫完了,你腦子也應(yīng)該非常疲倦。如果方框還沒有填完,逼著你自己繼續(xù)。如果還有余力的話,翻到背面,看看還能不能畫出其他的方案。繼續(xù)深挖,直到盡頭。即使畫出來的東西有點怪異,也不要緊。

現(xiàn)在所有的方框都滿了,仔細(xì)看一下,然后挑出幾個看起來可行的方案。拿著這幾個跟其他人討論,問問他們是怎么想的。很有意思的是,當(dāng)你逼著自己把思路說出來時,你會有意外的收獲。

重復(fù)上述過程

不要以為已經(jīng)萬事大吉,可以動工做視覺稿了。還是要審視原型圖,因為是手繪的,還沒定下來,隨時都可以修改,什么都可能會改動。

現(xiàn)在選出最有效的幾個方案,畫出高保真的手繪稿。建議用更大的方框,我一般是一張A4紙里分成4個方框。這個時候,我們就要看看加入更多細(xì)節(jié)之后,這幾個方法還能不能hold得住。

搞定之后,把高保真手繪稿給其他人看看,收集反饋??梢杂檬謾C拍下來,發(fā)給客戶看。因為你畫這種原型圖用不了多少時間,所以你潛意識里會更加樂意接受意見,反正改起來也很快。

下一步

就這樣,在很短的時間,你在紙上已經(jīng)畫滿了解決問題的各種方案。你逼著自己打開了思路,還想出一些不是那么顯而易見的點子。你也已經(jīng)收獲了好幾輪的反饋,在理想的情況下,某些方案是可行的,你就可以朝著該方向進(jìn)行更深入的思考。你還沒受到顏色,字體,光澤,或者其他任何視覺因素的干擾。你收到的反饋都是比較高層次的,概念上的,而不是美學(xué)上或細(xì)枝末節(jié)的。

接下來做什么就取決于你自己了。Google有一個概念,叫做“尋找矛盾”,那就是看看不同方案之間的區(qū)別是什么,然后選擇最好的方式向前推進(jìn)。通常呢,我會把確定的幾個頁面串聯(lián)在一起,在操作流程中看看這個頁面的上一個頁面是什么?下一個頁面是什么?然后用軟件做出動態(tài)原型圖,來感受一下在設(shè)備上是如何操作的。

希望這個技巧能幫助你迅速地找到多個有效方案。

當(dāng)我還在Medium的時候,負(fù)責(zé)Medium推特賬號的Nick Fisher告訴我,他在發(fā)布之前,經(jīng)常會草擬十個版本。他在確定最終的版本前,會逼著自己用不同的方式寫出來。所以,多嘗試多探索。

 

譯者:兢兢君

譯文地址:http://www.jianshu.com/p/7e6aa27bb87d

本文由 @兢兢君 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 說的方法可以,不考慮細(xì)節(jié),先做布局,20個格子,拓寬思路,選定可行方案,細(xì)化,再細(xì)化。這部分有啟發(fā)。但是手繪真的很慢?。。?!我覺得AXURE真的很快的,改起來也很方便。不過也可能是因為我不會畫畫

    來自上海 回復(fù)
  2. 除了裝逼,我想不出手繪的理由 ??

    來自河南 回復(fù)
  3. 手繪感覺最大的好處可能是更能帶動思維,但是要說后期修改,確實軟件比較方便。個人感覺手繪在頁面布局設(shè)計的時候可以用,后面還是用軟件吧。不過手繪出來裝逼還是不錯的

    回復(fù)
  4. 用axure類的工具也好,手繪也好,都只是完成設(shè)計所借助的工具而已,相比工具的運用,思維才更重要。所以,是不是手繪原型圖反而沒有那么重要了。。

    來自北京 回復(fù)
  5. Axure或sketch畫出來后….二是后期改起來非常麻煩—-這一點并不贊同,axure用母版,改起來還是很快的,相反,倒覺得手繪改起來很麻煩,尤其在同一框架下多個頁面,看看插圖的那些元素吧…

    來自江蘇 回復(fù)
  6. 雖說這實施起來比較方便,但是 這是不是得要求一定基礎(chǔ)啊。。要不然畫出來總是怪怪的。。

    來自香港 回復(fù)
  7. 請教下,在移動端怎么查看動態(tài)原型圖呢,
    您說的動態(tài)原型圖是axure實現(xiàn)的嗎?

    來自北京 回復(fù)
  8. ?? 手繪高保真、、、、、、、、、

    來自江蘇 回復(fù)
  9. 挺好的

    來自江蘇 回復(fù)
  10. ??

    來自廣東 回復(fù)
  11. ??

    來自廣東 回復(fù)
  12. ??

    來自廣東 回復(fù)