身在設(shè)計(jì)行業(yè)，無論你是哪個領(lǐng)域把将，改稿總是避免不了的诗赌，我們唯一能做的就是把改稿次數(shù)降到最低，向著一稿就過這個理想一步步靠近秸弛。方法總是有的铭若，就看你能不能get到。這幾天我看了一篇不錯的文章递览，Dustin Senos的《How to get value from wireframes》叼屠，通過他自己的工作歷程講述了線框圖是怎樣幫助設(shè)計(jì)師更好的完成設(shè)計(jì)工作的，一篇很實(shí)用文章绞铃，分享給大家镜雨，希望你能有所收獲。
11年前儿捧，我在一家小設(shè)計(jì)公司工作荚坞，我的第一份全職工作挑宠，我那時21。在這家公司的最開始幾年颓影，我專注于視覺設(shè)計(jì)各淀。我能不能把這個結(jié)構(gòu)做的更實(shí)用？把光源換個角度能不能讓這個網(wǎng)站看起來更美觀诡挂？怎樣讓我設(shè)計(jì)的按鈕看起來更炫碎浇？聽客戶拋出一個點(diǎn)子，然后我問一些問題璃俗，接著打開Photoshop就開始設(shè)計(jì)奴璃，幾天之后，給客戶展示一到兩個視覺方案城豁，客戶給出反饋苟穆，我再進(jìn)行修改，之后就在xhtml中編寫網(wǎng)站唱星，這是我當(dāng)時的工作常態(tài)雳旅。
“公司里最好的設(shè)計(jì)師做最漂亮的網(wǎng)站∥和牵”
當(dāng)我的職業(yè)生涯有了進(jìn)一步發(fā)展后，我才知道在進(jìn)行視覺設(shè)計(jì)之前吱晒，先向客戶展示線框圖可以節(jié)省彼此的時間甸饱。不得不說的是，線框圖是一條捷徑仑濒，為我們之后的快速修改留有空間叹话。它比視覺圖像設(shè)計(jì)更容易創(chuàng)建，也更容易修改墩瞳。然而稿紙上的手繪線框圖直接展示給客戶有點(diǎn)簡單粗暴驼壶，所以我會花些時間電子版本。在展示線框圖之后喉酌，我發(fā)現(xiàn)我這很少促進(jìn)一場有意義的談話热凹，而且?guī)缀踝屛覀儚臎]改過設(shè)計(jì)方案。
再回頭去看泪电，以前我并沒有發(fā)現(xiàn)線框圖的價值般妙，因?yàn)槲覜]有正確的使用它。我把它當(dāng)做一個“過渡盒子”相速，將項(xiàng)目從“待開發(fā)狀態(tài)”過渡為“可以開始設(shè)計(jì)狀態(tài)”碟渺，也能有效防止過后客戶改變他們的想法。然而我沒有發(fā)現(xiàn)的是突诬，線框圖的最大用處是建立一個機(jī)制苫拍，從而脫離固定的設(shè)計(jì)套路芜繁。它能夠幫助你穩(wěn)住你的設(shè)計(jì)方向，在你偏離軌道時把你拉回來绒极。
一名初級設(shè)計(jì)師的設(shè)計(jì)過程
上圖來自Julie Zhou的一篇文章《Junior Designers vs. Senior Designers》骏令，描述了一個容易中招的陷阱：腦海中有了第一個想法就馬上開始設(shè)計(jì)，如果我將它設(shè)計(jì)的更漂亮也許結(jié)果會更好集峦。初級設(shè)計(jì)師關(guān)注視覺設(shè)計(jì)多于功能設(shè)計(jì)仍然是很普遍的現(xiàn)象伏社。視覺設(shè)計(jì)更容易評判和分享：這一屏看起來符合當(dāng)前的流行趨勢嗎？它在Dribble上收獲了很多贊嗎塔淤？夠扁平嗎摘昌？元素運(yùn)用的到位了嗎？這幾點(diǎn)尤為符合新手和正在求職的設(shè)計(jì)師高蜂。浮夸的設(shè)計(jì)能夠更快更容易的實(shí)現(xiàn)聪黎，然后放到我們的作品集里，指著說“這是我設(shè)計(jì)的”备恤。
一名高級設(shè)計(jì)師的設(shè)計(jì)過程
在設(shè)計(jì)領(lǐng)域沉淀了十年后稿饰，我懂得了去了解項(xiàng)目怎樣運(yùn)行以及有些事情為什么是這樣，比去發(fā)掘事物看起來怎么樣更重要露泊。高級設(shè)計(jì)師花較少的時間在美化上喉镰，而是花更多的時間去證實(shí)他的設(shè)計(jì)方案是可行的。如上圖所示惭笑，高級設(shè)計(jì)師以獨(dú)特的方式來實(shí)現(xiàn)設(shè)計(jì)成果侣姆。
“一輛出了故障的汽車，無論給它噴多炫的漆沉噩，它都無法上路行駛捺宗。”
那么怎樣來避免打磨你腦海中的第一個想法川蒙？在沒有充足的時間條件下蚜厉，怎樣得出更多的方法？怎么決定其中一個方案比另一個方案好呢畜眨？
線框圖是極有價值的
我想分享一下在我開始進(jìn)行設(shè)計(jì)之前使用的一項(xiàng)技能昼牛，這個技能我用來探索和實(shí)現(xiàn)多個方案。在之后的文章里康聂，我說的“線框圖”是指草稿紙上的手繪線框圖匾嘱。紙版線框圖建立快速，將點(diǎn)子具象化的成本低早抠，而且可以讓團(tuán)隊(duì)中的每個人都能參與其中霎烙。
“紙版的線框圖，使得我們不用再糾結(jié)于是否要改因?yàn)橐粋€好點(diǎn)子而設(shè)計(jì)好的線框圖”。
安排
讓我們開始吧悬垃。首先先拿一個筆記本游昼，然后在上面畫出至少20個矩形框。如果你正在做移動端界面尝蠕，最好讓它和你要設(shè)計(jì)的設(shè)備的尺寸比例大體上相同烘豌。如果你設(shè)計(jì)的是桌面界面，那就和電腦屏幕比例相同看彼。
步驟
現(xiàn)在廊佩，拿起你的筆，用你腦海中解決面臨的問題的一些不同的方法去填滿每一個矩形框靖榕，先從最顯而易見的點(diǎn)子開始标锄，進(jìn)行頭腦風(fēng)暴，直到所有矩形框都填滿了再停下茁计。矩形框里的每一個點(diǎn)子都是很好地方案幾乎是不可能的料皇，而這就是我要說的。你想將你的思考廣度從舒適區(qū)擴(kuò)大到未知區(qū)域星压，如果你在為一個新點(diǎn)子而掙扎時践剂，強(qiáng)迫你自己去思考一些問題并去實(shí)踐，比如：如果菜單是放射狀的會怎樣娜膘？如果沒有圖片會是什么樣的逊脯？蘋果公司會怎么做？谷歌會怎么做竣贪？如果這里沒有列表和網(wǎng)格會怎樣军洼？把最重要的元素放在離用戶拇指最近的地方還有其他不同的方式嗎？對我來說贾富，一般開始10個之后歉眷，這件事就變得有趣了牺六。
如果你正在尋找給屏幕布局的最好方式颤枪，那么使用關(guān)鍵字是很方便的，比如：T (title), V (video), RV (related videos), Sub (sub-navigation)等等淑际，這樣會使你專注于布局而不是界面元素畏纲。
或者一個??來代表文件，一個??來代表數(shù)據(jù)春缕。
如果你專注于界面的布局和元素盗胀，你可以繪制更高的保真度。
到這里锄贼，你的大腦已經(jīng)很疲勞了票灰，所有矩形框也都填滿了。如果還有矩形框沒填滿，那么強(qiáng)迫自己繼續(xù)屑迂。如果你還有剩余的腦汁浸策，那么翻一頁繼續(xù)繪制你腦中的想法。現(xiàn)在所有矩形框都被填滿了惹盼，找出一些看起來比較靠譜的庸汗，去和別人討論，并記錄他們的想法手报。強(qiáng)迫自己用語言去表現(xiàn)這些概念蚯舱，你會發(fā)現(xiàn)很多有趣新奇的點(diǎn)子。
重復(fù)
下一步不是進(jìn)行視覺設(shè)計(jì)掩蛤，即使有這種情況也很少枉昏。再一次強(qiáng)調(diào)，到這一步時盏档，重要的不是去實(shí)現(xiàn)每一個像素凶掰。把稿紙上的想法不斷弱化，所有都是可以改變的◎谀叮現(xiàn)在把那些靠譜的想法繪制成更高的保真度懦窘。在新的一頁上面畫更大的矩形框（我發(fā)現(xiàn)在一頁A4之上畫四個正合適）。到這一步稚配，我們再去看這些想法能不能Hold住更多的細(xì)節(jié)畅涂。
當(dāng)你完成了上述這些步驟后，此時把你的高保真想法展示給別人并獲取反饋是十分有益的道川，之前我曾經(jīng)用蘋果手機(jī)把我的成果拍照發(fā)給我的客戶午衰。當(dāng)你得到反饋后，你不用再擔(dān)心會花費(fèi)很多的時間去修改冒萄，因?yàn)槟悴]有花多少時間在這些線框圖上臊岸。
下一步
在很短的時間里，為了一個問題你用很多不同的想法和點(diǎn)子填滿了每個頁面尊流。你強(qiáng)迫自己去延伸思考帅戒，然后得出一些非顯而易見的想法。在整個過程中崖技，你得到了多次反饋逻住，更理想的是，其中一些很靠譜迎献，并且能夠完善更多的細(xì)節(jié)瞎访。你并沒有上色，打字吁恍，做光效扒秸，或者其他的視覺細(xì)節(jié)打磨播演，你得到的反饋也都是高層次的，概念性的伴奥，而不是關(guān)于審美的宾巍、具體的細(xì)節(jié)等等，并且很容易應(yīng)用到更多的線框圖中當(dāng)去渔伯。
下一步做什么取決于你自己顶霞。我這種時候更多的是重復(fù)我的線框圖繪制過程，思考怎樣更流暢锣吼。在這一屏之前應(yīng)該是怎樣的选浑？之后呢？當(dāng)我給交互流程繪制了不同的方案后玄叠，我會創(chuàng)建電子版的原型圖古徒，去切身感受一下在真實(shí)設(shè)備上的交互。
誠摯地希望通過我這個技能分享读恃，能夠讓你更快速的產(chǎn)生更多想法隧膘，選擇去完善那些你在眾多想法中萬里挑一的方案，而不是在項(xiàng)目開始時你腦海中迸發(fā)的第一個想法寺惫。
以上內(nèi)容由本人原創(chuàng)轉(zhuǎn)譯疹吃，轉(zhuǎn)載請注明出處，否則后果必究西雀。
關(guān)于大寶（我本人）：
互聯(lián)網(wǎng)領(lǐng)域設(shè)計(jì)師萨驶，跨界于廣告、創(chuàng)意艇肴、工業(yè)設(shè)計(jì)腔呜、用戶體驗(yàn)等領(lǐng)域，喜歡潮流再悼，本身卻很土核畴，定期寫文，歡迎提出你感興趣的設(shè)計(jì)冲九、藝術(shù)谤草、創(chuàng)意等話題，試著做一個書寫設(shè)計(jì)來影響你的人娘侍。
歡迎關(guān)注咖刃，閱讀更多原創(chuàng)設(shè)計(jì)思考泳炉。
