身在設計行業(yè)，無論你是哪個領(lǐng)域，改稿總是避免不了的，我們唯一能做的就是把改稿次數(shù)降到最低，向著一稿就過這個理想一步步靠近。方法總是有的，就看你能不能get到。這幾天我看了一篇不錯的文章，Dustin Senos的《How to get value from wireframes》，通過他自己的工作歷程講述了線框圖是怎樣幫助設計師更好的完成設計工作的，一篇很實用文章，分享給大家，希望你能有所收獲。
11年前，我在一家小設計公司工作，我的第一份全職工作，我那時21。在這家公司的最開始幾年，我專注于視覺設計。我能不能把這個結(jié)構(gòu)做的更實用？把光源換個角度能不能讓這個網(wǎng)站看起來更美觀？怎樣讓我設計的按鈕看起來更炫？聽客戶拋出一個點子，然后我問一些問題，接著打開Photoshop就開始設計，幾天之后，給客戶展示一到兩個視覺方案，客戶給出反饋，我再進行修改，之后就在xhtml中編寫網(wǎng)站，這是我當時的工作常態(tài)。
“公司里最好的設計師做最漂亮的網(wǎng)站?！?/p>
當我的職業(yè)生涯有了進一步發(fā)展后，我才知道在進行視覺設計之前，先向客戶展示線框圖可以節(jié)省彼此的時間。不得不說的是，線框圖是一條捷徑，為我們之后的快速修改留有空間。它比視覺圖像設計更容易創(chuàng)建，也更容易修改。然而稿紙上的手繪線框圖直接展示給客戶有點簡單粗暴，所以我會花些時間電子版本。在展示線框圖之后，我發(fā)現(xiàn)我這很少促進一場有意義的談話，而且?guī)缀踝屛覀儚臎]改過設計方案。
再回頭去看，以前我并沒有發(fā)現(xiàn)線框圖的價值，因為我沒有正確的使用它。我把它當做一個“過渡盒子”，將項目從“待開發(fā)狀態(tài)”過渡為“可以開始設計狀態(tài)”，也能有效防止過后客戶改變他們的想法。然而我沒有發(fā)現(xiàn)的是，線框圖的最大用處是建立一個機制，從而脫離固定的設計套路。它能夠幫助你穩(wěn)住你的設計方向，在你偏離軌道時把你拉回來。
一名初級設計師的設計過程
上圖來自Julie Zhou的一篇文章《Junior Designers vs. Senior Designers》，描述了一個容易中招的陷阱：腦海中有了第一個想法就馬上開始設計，如果我將它設計的更漂亮也許結(jié)果會更好。初級設計師關(guān)注視覺設計多于功能設計仍然是很普遍的現(xiàn)象。視覺設計更容易評判和分享：這一屏看起來符合當前的流行趨勢嗎？它在Dribble上收獲了很多贊嗎？夠扁平嗎？元素運用的到位了嗎？這幾點尤為符合新手和正在求職的設計師。浮夸的設計能夠更快更容易的實現(xiàn)，然后放到我們的作品集里，指著說“這是我設計的”。
一名高級設計師的設計過程
在設計領(lǐng)域沉淀了十年后，我懂得了去了解項目怎樣運行以及有些事情為什么是這樣，比去發(fā)掘事物看起來怎么樣更重要。高級設計師花較少的時間在美化上，而是花更多的時間去證實他的設計方案是可行的。如上圖所示，高級設計師以獨特的方式來實現(xiàn)設計成果。
“一輛出了故障的汽車，無論給它噴多炫的漆，它都無法上路行駛?！?/b>
那么怎樣來避免打磨你腦海中的第一個想法？在沒有充足的時間條件下，怎樣得出更多的方法？怎么決定其中一個方案比另一個方案好呢？
線框圖是極有價值的
我想分享一下在我開始進行設計之前使用的一項技能，這個技能我用來探索和實現(xiàn)多個方案。在之后的文章里，我說的“線框圖”是指草稿紙上的手繪線框圖。紙版線框圖建立快速，將點子具象化的成本低，而且可以讓團隊中的每個人都能參與其中。
“紙版的線框圖，使得我們不用再糾結(jié)于是否要改因為一個好點子而設計好的線框圖”。
安排
讓我們開始吧。首先先拿一個筆記本，然后在上面畫出至少20個矩形框。如果你正在做移動端界面，最好讓它和你要設計的設備的尺寸比例大體上相同。如果你設計的是桌面界面，那就和電腦屏幕比例相同。
步驟
現(xiàn)在，拿起你的筆，用你腦海中解決面臨的問題的一些不同的方法去填滿每一個矩形框，先從最顯而易見的點子開始，進行頭腦風暴，直到所有矩形框都填滿了再停下。矩形框里的每一個點子都是很好地方案幾乎是不可能的，而這就是我要說的。你想將你的思考廣度從舒適區(qū)擴大到未知區(qū)域，如果你在為一個新點子而掙扎時，強迫你自己去思考一些問題并去實踐，比如：如果菜單是放射狀的會怎樣？如果沒有圖片會是什么樣的？蘋果公司會怎么做？谷歌會怎么做？如果這里沒有列表和網(wǎng)格會怎樣？把最重要的元素放在離用戶拇指最近的地方還有其他不同的方式嗎？對我來說，一般開始10個之后，這件事就變得有趣了。
如果你正在尋找給屏幕布局的最好方式，那么使用關(guān)鍵字是很方便的，比如：T (title), V (video), RV (related videos), Sub (sub-navigation)等等，這樣會使你專注于布局而不是界面元素。
或者一個??來代表文件，一個??來代表數(shù)據(jù)。
如果你專注于界面的布局和元素，你可以繪制更高的保真度。
到這里，你的大腦已經(jīng)很疲勞了，所有矩形框也都填滿了。如果還有矩形框沒填滿，那么強迫自己繼續(xù)。如果你還有剩余的腦汁，那么翻一頁繼續(xù)繪制你腦中的想法?，F(xiàn)在所有矩形框都被填滿了，找出一些看起來比較靠譜的，去和別人討論，并記錄他們的想法。強迫自己用語言去表現(xiàn)這些概念，你會發(fā)現(xiàn)很多有趣新奇的點子。
重復
下一步不是進行視覺設計，即使有這種情況也很少。再一次強調(diào)，到這一步時，重要的不是去實現(xiàn)每一個像素。把稿紙上的想法不斷弱化，所有都是可以改變的?，F(xiàn)在把那些靠譜的想法繪制成更高的保真度。在新的一頁上面畫更大的矩形框（我發(fā)現(xiàn)在一頁A4之上畫四個正合適）。到這一步，我們再去看這些想法能不能Hold住更多的細節(jié)。
當你完成了上述這些步驟后，此時把你的高保真想法展示給別人并獲取反饋是十分有益的，之前我曾經(jīng)用蘋果手機把我的成果拍照發(fā)給我的客戶。當你得到反饋后，你不用再擔心會花費很多的時間去修改，因為你并沒有花多少時間在這些線框圖上。
下一步
在很短的時間里，為了一個問題你用很多不同的想法和點子填滿了每個頁面。你強迫自己去延伸思考，然后得出一些非顯而易見的想法。在整個過程中，你得到了多次反饋，更理想的是，其中一些很靠譜，并且能夠完善更多的細節(jié)。你并沒有上色，打字，做光效，或者其他的視覺細節(jié)打磨，你得到的反饋也都是高層次的，概念性的，而不是關(guān)于審美的、具體的細節(jié)等等，并且很容易應用到更多的線框圖中當去。
下一步做什么取決于你自己。我這種時候更多的是重復我的線框圖繪制過程，思考怎樣更流暢。在這一屏之前應該是怎樣的？之后呢？當我給交互流程繪制了不同的方案后，我會創(chuàng)建電子版的原型圖，去切身感受一下在真實設備上的交互。
誠摯地希望通過我這個技能分享，能夠讓你更快速的產(chǎn)生更多想法，選擇去完善那些你在眾多想法中萬里挑一的方案，而不是在項目開始時你腦海中迸發(fā)的第一個想法。
以上內(nèi)容由本人原創(chuàng)轉(zhuǎn)譯，轉(zhuǎn)載請注明出處，否則后果必究。
關(guān)于大寶（我本人）：
互聯(lián)網(wǎng)領(lǐng)域設計師，跨界于廣告、創(chuàng)意、工業(yè)設計、用戶體驗等領(lǐng)域，喜歡潮流，本身卻很土，定期寫文，歡迎提出你感興趣的設計、藝術(shù)、創(chuàng)意等話題，試著做一個書寫設計來影響你的人。
歡迎關(guān)注，閱讀更多原創(chuàng)設計思考。
