11年前，我21歲時(shí)，加入了一家小型設(shè)計(jì)機(jī)構(gòu)，這是我第一份全職工作。在那里的前幾年，我大部分時(shí)間花在了視覺設(shè)計(jì)上—''我該怎樣讓這個(gè)質(zhì)地看上去更逼真？''、''將光源換個(gè)角度會(huì)不會(huì)好點(diǎn)？''、''我設(shè)計(jì)的Button還能更光滑點(diǎn)嗎？'' 通?？蛻粽f一個(gè)idea，我向他詢問些問題后就打開PS開始設(shè)計(jì)了。然后幾天后向該客戶展示一到兩個(gè)視覺方向，收集一些反饋，做些修改，就可以投入開發(fā)了。在那里工作的最大感受就是，那里最優(yōu)秀的設(shè)計(jì)師做出的網(wǎng)站都是外表很炫的。

隨著工作的深入，我認(rèn)識(shí)到在視覺設(shè)計(jì)前向客戶展示線框圖，會(huì)很節(jié)省雙方的時(shí)間。但這又會(huì)有些尷尬。設(shè)計(jì)線框在我們決定了設(shè)計(jì)方向之前，幫我們提供了快速修改的可能性和空間。線框圖可以快速創(chuàng)建和修改。但是，在白紙上畫線框圖難免會(huì)給客戶一種太隨便和不受重視的感覺。因此我開始在移動(dòng)設(shè)備上畫線框圖，在向客戶展示這些線框圖時(shí)，我發(fā)現(xiàn)基本上不會(huì)激起他們大范圍的意見。事實(shí)上，看過線框圖后，我們就不會(huì)輕易改變?cè)O(shè)計(jì)方向。

回首看，我過去沒有意識(shí)到線框圖的有點(diǎn)是因?yàn)槲野阉麄兎旁诹隋e(cuò)誤的位置上。線框圖在過去被我用來當(dāng)做一個(gè)項(xiàng)目從''探索階段''到''待設(shè)計(jì)階段''的檢驗(yàn)盒—阻止客戶在產(chǎn)品設(shè)計(jì)的晚期又改變主意。還有一點(diǎn)是，線框圖有一個(gè)好處：他可以跳出明顯的設(shè)計(jì)范例，讓你能更好堅(jiān)守產(chǎn)品目標(biāo)，幫你慢下來直至抓住正確方向。

新手設(shè)計(jì)師的路線

1.jpg

Julie Zhou的文章《新手設(shè)計(jì)師VS老手設(shè)計(jì)詩》，它描述了一個(gè)我們?cè)O(shè)計(jì)師都很容易掉進(jìn)去的的陷阱：受到自己第一個(gè)念頭的束縛。

對(duì)于新手設(shè)計(jì)師來說，在功能性和視覺性二者間，他們更愿意把時(shí)間花在后者上。視覺設(shè)計(jì)是一個(gè)很方便著手的點(diǎn)，因?yàn)樗苋菀妆环窒砗驮u(píng)價(jià)：這圖是否符合當(dāng)下的流行趨勢(shì)？它在Dribbble上是不是受到很多贊同？夠''輕''嗎？漸變是否做到位了？閃耀的視覺設(shè)計(jì)很快就可以做到，而且放在作品集里非常體面，自豪地說''這是我設(shè)計(jì)的！''

老手設(shè)計(jì)師的路線

2.jpg

在設(shè)計(jì)世界傲游了10年，我認(rèn)識(shí)到，一個(gè)東西的存在方式或者它之所以是它現(xiàn)在所呈現(xiàn)的樣子，這個(gè)原因比它的外表更重要。老手設(shè)計(jì)師花費(fèi)更少的時(shí)間在光鮮亮麗四個(gè)字上，更多的時(shí)間在讓創(chuàng)造物行使在正確的軌跡上。以上所談旨在說明，老手設(shè)計(jì)師使用不同的方式來提供正確的解決方案.

給一輛破損的車上色，不管你涂的多美觀，也改變不了它不能使用的事實(shí)。

所以，怎樣避免陷入你的第一感覺呢？怎樣思考出更多的解決方案呢？怎樣辨別方案孰優(yōu)孰劣呢？

易用的線框圖

我分享一個(gè)我自己用來強(qiáng)制自己探索更多可能性的方法。本文以后提到的「線框」都是指紙上線框圖。紙上線框圖很容易上手，還能讓團(tuán)隊(duì)所有人都加入線框圖的設(shè)計(jì)中來。

通過紙上線框圖，我們可以避免將完美的線框圖誤認(rèn)為是好的idea。

準(zhǔn)備

拿出一本筆記本，畫出至少20個(gè)小的長方形網(wǎng)格，如果你的設(shè)計(jì)工作是基于手機(jī)UI，那么將他們?cè)O(shè)為該設(shè)備的寬高比。如果是桌面UI，那么將他們?cè)O(shè)為電腦顯示器的寬高比。

過程

現(xiàn)在，用你的鋼筆畫出所有可能的、不同的方案去應(yīng)對(duì)你要解決的設(shè)計(jì)問題。草繪出首先想到的一些idea，然后將他們拋出腦后，在窮盡一切可能性前不要停止思考。

當(dāng)然，你不會(huì)用一個(gè)方案去填所有的格子。你會(huì)盡量拓寬思維，從大腦舒適區(qū)到未知部分。如果你絞盡腦汁想到一個(gè)新的想法，一定要強(qiáng)迫問問自己如下問題：如果這個(gè)菜單是輻射狀會(huì)怎樣？如果只有圖片/沒有圖片會(huì)怎樣？如果沒有列表或網(wǎng)格呢？怎樣把最重要的元素放在用戶手指最近的地方？對(duì)我來說，往往在10次下筆之后會(huì)發(fā)現(xiàn)開始好玩兒了。

如果你想找到一種最佳的排版方式，你可以用T（titile）V（Video）RV（related video）Sub（sub-navigation） 等關(guān)鍵字占位，讓你專心排版而不是過多關(guān)注UI元素：

3.jpg

或者也許用（燈泡）代表鏈接或（對(duì)號(hào)）代表分析：

4.jpg

在排版的時(shí)候，你的手繪可以適當(dāng)?shù)馗哔|(zhì)量一點(diǎn)：

5.jpg

在這點(diǎn)上，你可能會(huì)覺得累，如果盒子還沒被填滿，強(qiáng)迫自己繼續(xù)。如果你還剩余腦汁，翻頁然后繼續(xù)畫出你腦中的創(chuàng)意。到達(dá)思維隧道的底端，直至覺得奇怪為止。

既然已填滿了所有的格子，就可以觀察他們，選擇一些看起來比較有前途的創(chuàng)意，并與其他伙伴談?wù)?，聽聽他人的意見。?qiáng)制你自己用語言表達(dá)概念，這時(shí)你會(huì)發(fā)現(xiàn)新的有趣的靈感。

重復(fù)過程

下一步最好也不要是視覺設(shè)計(jì)。再次提醒你不要拘泥于像素這件事。將比較出彩的創(chuàng)意高質(zhì)量地畫出，然后再新的一頁上畫一個(gè)更大的盒子，一張A4紙上最好畫4個(gè)盒子。此時(shí)試著將這些方案細(xì)節(jié)化，看看是否還是可行的：

6.jpg

7.jpg

如果是以前，我會(huì)用iPhone拍下照片將這些草圖發(fā)給客戶。因?yàn)槟氵€沒有在這些草圖上花費(fèi)時(shí)間，所以就不擔(dān)心收集反饋后還要浪費(fèi)更多時(shí)間。

下一步

你幾乎不可能將一個(gè)問題的解決方案填滿一整頁紙。但你強(qiáng)制自己拓寬思維，至少想出了一些不那么大眾化的創(chuàng)意。你收集到反饋后，理想上一些創(chuàng)意會(huì)很有戲，然后再將他們細(xì)節(jié)化。不被困在在顏色、類型、光或其他視覺設(shè)計(jì)的層面上，你收集到的也是高質(zhì)量的信息和概念上的反饋，而非美學(xué)上和過細(xì)的信息，也很容易通過草繪來具象化。

下一步怎么做看你了。這時(shí)，我發(fā)現(xiàn)依賴Google Venture的「尋找沖突」概念，對(duì)區(qū)分眾多創(chuàng)意和真正的方案很有幫助。我常常重復(fù)草繪這件事，思考如何將某個(gè)頁面適應(yīng)到一個(gè)流程里，此頁面的前一頁是什么？之后的頁面呢？在草繪過很多方案后，再用軟件設(shè)計(jì)出可以在設(shè)備上體驗(yàn)的保真原型。

通過這些方法，你可以快速想出很多創(chuàng)意，通過對(duì)比比較，留下那些你選擇了的，一定不要向你的第一個(gè)想法低頭哦。

順便提一句：將這種方法應(yīng)用到非設(shè)計(jì)的事上

我在Medium工作的同事，Nick Fisher，一個(gè)經(jīng)常發(fā)推特的人。他告訴我，他發(fā)推前會(huì)強(qiáng)制自己用10種不同方式去表達(dá)，然后選一條最完美的發(fā)布??？

（本文譯自Medium 文/Dustin Senos 譯/豆子糖）