進(jìn)階好文！設(shè)計(jì)大牛在線框圖階段的工作流程是怎樣的？

編者按：初級(jí)設(shè)計(jì)師的設(shè)計(jì)流程和高級(jí)設(shè)計(jì)師有什么區(qū)別？一組線框圖就能看出來(lái)！今天@-朱宇軒?這篇好文傳授的線框圖流程，可以幫你避免在不成熟的idea上面花去了過(guò)多的時(shí)間精力，并在短時(shí)間內(nèi)拿出盡量多的問(wèn)題解決方案，同時(shí)對(duì)方案之間的優(yōu)劣作出正確的判斷。全是干貨！

十一年前的我21歲，剛畢業(yè)，進(jìn)了一家小agency做視覺(jué)設(shè)計(jì)，大家也都知道，做agency肯定會(huì)遇到一言不合就改改改的殘暴客戶，他們才不會(huì)管你鮮肉不鮮肉。做了段時(shí)間我學(xué)精了，開(kāi)始學(xué)會(huì)用電子檔的線框圖去見(jiàn)客戶，然后嘗試和他們講清楚一切。線框圖嘛，好畫好改，跟客戶坐而論道根本不虛。一般走這樣的流程的話，客戶就很少會(huì)提出一些匪夷所思的新“需求”，項(xiàng)目往后推薦大方向也不大會(huì)改變很多了。

回顧職業(yè)生涯的這段傻白甜時(shí)光，才發(fā)現(xiàn)原來(lái)這樣的做法其實(shí)是誤用了線框圖這種設(shè)計(jì)工具，并沒(méi)有發(fā)揮到其真正的價(jià)值，因?yàn)槲矣缅e(cuò)了地方，或者說(shuō)用得太過(guò)片面了。以我這個(gè)從業(yè)11年的老司機(jī)現(xiàn)在的眼里看來(lái)，線框圖其實(shí)就是將項(xiàng)目細(xì)分成好多小任務(wù)，然后一步步的完成，將項(xiàng)目從“探索期”推進(jìn)到“準(zhǔn)備認(rèn)真搞起期”，而上面提到的，防止用戶或者領(lǐng)導(dǎo)改變主意殺你一個(gè)措手不及只是其中一個(gè)小小的方面。當(dāng)時(shí)我沒(méi)有留意到，其實(shí)線框圖的更深層次的意義是幫助你擺脫一些設(shè)計(jì)上非常明顯的而陷入當(dāng)中又難以逃出的定勢(shì)思維，它幫助你更好的讓你看清自己的想要的東西，讓你在走上錯(cuò)路之前先慢慢地選好一個(gè)正確的方向。

初級(jí)設(shè)計(jì)師的設(shè)計(jì)進(jìn)程

以上這則小插圖是從大神Julie Zhou的文章，Junior Designers vs. Senior Designer（初級(jí)設(shè)計(jì)師與高級(jí)設(shè)計(jì)的對(duì)比）中拿來(lái)的。很好了闡述了新人們?cè)诋嬀€框的時(shí)候普遍都存在的一個(gè)現(xiàn)象：當(dāng)一個(gè)想法出來(lái)之后我們都知道先用線框畫下來(lái)，但是畫著畫著，總覺(jué)得不對(duì)勁，總覺(jué)得加上視覺(jué)元素之后才能真正看出效果來(lái)。在線框圖階段，這個(gè)“看出效果來(lái)”不知道浪費(fèi)了多少設(shè)計(jì)小新的時(shí)間。

初級(jí)設(shè)計(jì)師總是無(wú)意之中就把注意力過(guò)多的集中到視覺(jué)層面之上，而忽視了功能上面的設(shè)計(jì)，而功能上的設(shè)計(jì)卻正正是線框圖階段最緊要的事情。視覺(jué)層次，最先也最易被感受和判斷，所以大家容易被吸引過(guò)去，想是不是符合最先的潮流啦，能不能在追波上得到很多贊啦，夠不夠扁平啦，夠不夠漸變啦，能不能發(fā)票圈炫耀一下啦，能不能放到簡(jiǎn)歷里面啦blabla。初級(jí)設(shè)計(jì)師容易陷入這種讓視覺(jué)滿足過(guò)分占據(jù)我們大腦的錯(cuò)誤狀態(tài)之中。

高級(jí)設(shè)計(jì)師的設(shè)計(jì)流程

在設(shè)計(jì)界摸爬滾打多年之后，哥領(lǐng)略到了，搞清楚一個(gè)東西的運(yùn)作方式，遠(yuǎn)遠(yuǎn)比它看起來(lái)怎么樣更加重要。高級(jí)設(shè)計(jì)師會(huì)更少地花時(shí)間在外觀上面，他們反而會(huì)在選擇一個(gè)正確的發(fā)展方向上面更舍得花心思。看看上面那幅圖，高級(jí)設(shè)計(jì)師解決問(wèn)題的方法和初級(jí)小鮮肉截然不同。

一輛小破車，無(wú)論你噴多貴的車漆，也不會(huì)讓它內(nèi)在變更好。

所以，我們?cè)趺床拍軌虮苊庠诓怀墒斓膇dea上面花去了過(guò)多的時(shí)間精力？怎么才能在避免浪費(fèi)過(guò)多時(shí)間的前提下拿出盡量多的問(wèn)題解決方案？怎么對(duì)方案之間的優(yōu)劣作出正確的判斷？

做有用的線框圖

下面我會(huì)跟大家分享我在線框圖階段的工作流程，流程本身不重要，重要的是里面的思路。

一般我會(huì)在線框圖階段探索解決問(wèn)題的辦法。本文中的線框圖指的是紙質(zhì)線框圖，紙質(zhì)線框圖的好處大家都知道，真正的快，真正的好，真正的簡(jiǎn)單，每個(gè)人都能畫，修改起來(lái)也不會(huì)心疼。（詳見(jiàn)譯者的另外一篇文章《先別急著畫高保真原型》）

使用紙質(zhì)線框圖能夠避免你把“漂亮的線框圖”跟“好的idea”混淆。

第一步

開(kāi)始吧。我會(huì)拿起一本好點(diǎn)的筆記本，先畫上大概20個(gè)矩形框作為我們的屏幕，請(qǐng)按照你們所要設(shè)計(jì)的對(duì)象設(shè)備屏幕的比例來(lái)畫。

第二步

拿起筆，先把最先出現(xiàn)在你腦海中的東西畫出來(lái)，然后繼續(xù)思考，盡量在每個(gè)矩形里面都畫上你的idea。

在這個(gè)過(guò)程中，你基本不可能畫出20個(gè)你都很滿意的方案來(lái)，然而這就是重點(diǎn)，讓你從舒適區(qū)中跳出來(lái)，強(qiáng)迫自己想一些自己不知道的東西。當(dāng)然，并不是讓你像完任務(wù)一樣毫無(wú)道理地畫滿20個(gè)矩形，當(dāng)你感到畫無(wú)可畫、想無(wú)可想的時(shí)候，試著讓自己做一些以前都沒(méi)做過(guò)的東西，比如：只留下圖片怎么樣？沒(méi)圖片會(huì)怎樣？蘋果有案例看看嗎？谷歌會(huì)怎么做呢？如果不用列表會(huì)怎樣呢？能不能把重要的東西放在靠近用戶拇指那一側(cè)呢？對(duì)于我來(lái)說(shuō)，當(dāng)畫到第十個(gè)idea左右，有趣的東西就差不多來(lái)了。也請(qǐng)記得暫時(shí)忽略視覺(jué)設(shè)計(jì)思維，暫時(shí)看起來(lái)是很丑，但是線框圖階段我們?cè)O(shè)計(jì)的是功能結(jié)構(gòu)。

如果沒(méi)有把20個(gè)都填滿，那么勉強(qiáng)一下自己，想多一些，直到自己真的想不出任何方案來(lái)了。要舍得在產(chǎn)品的功能性上面運(yùn)營(yíng)更多的時(shí)間，即便畫出的來(lái)的東西可能看起來(lái)非常怪異。

第三步

理想狀態(tài)下，當(dāng)上述的步驟得出了結(jié)果，那么接下來(lái)就應(yīng)該轉(zhuǎn)入視覺(jué)層面上的工作了對(duì)嗎？但是這種情況實(shí)際上很少見(jiàn)，我建議先別急著打開(kāi)電腦。讓你的想法在紙上多呆一陣子，讓這種一切還能改變的狀態(tài)多留久一些。

將脫穎而出的方案拿出來(lái)，在新的紙上畫出更大的矩形框，將方案畫成保真度更高的線框圖。這個(gè)階段我們主要的任務(wù)就是驗(yàn)證這些方案能否承載得起更多的細(xì)節(jié)。

當(dāng)這些工作做完之后你就能夠拿去跟同事領(lǐng)導(dǎo)進(jìn)行探討了，看看有沒(méi)什么改進(jìn)的地方。由于我們之前的工作一直是在紙上進(jìn)行的，已經(jīng)節(jié)省了好多時(shí)間，而且目前我們的方案還停留在紙上，這時(shí)候一定要擺好心態(tài)，不要怕改，繼續(xù)發(fā)揮線框圖的作用。

下一階段

僅花去了相對(duì)較少的時(shí)間，你可能就得到了一個(gè)或數(shù)個(gè)拿得出手的方案。因?yàn)榍懊婺阋呀?jīng)做出了你想得到的和不那么容易想得到的假設(shè)，又得到了數(shù)次反饋，對(duì)方案的細(xì)節(jié)也有了一定的探索了。（拿著線框圖就做線框圖的事情，在收集反饋意見(jiàn)的時(shí)候也請(qǐng)盡量引導(dǎo)大家往基本框架和功能的層面去討論。）

線框圖階段的工作大致完成之后要去做什么在這里我們就不討論了，但是我可以簡(jiǎn)單的分析一下自己接下來(lái)的工作流程。我推薦大家去讀讀Searching for Conflicts?這篇文章，它里面的概念對(duì)我判斷idea之間的異同和設(shè)計(jì)工作的推進(jìn)有一些啟發(fā)性的幫助。通常我不會(huì)那么快就結(jié)束掉線框階段的工作，我會(huì)將關(guān)鍵屏的線框圖放到流程里面的再考慮一番，看看前后銜接上面會(huì)不會(huì)出現(xiàn)問(wèn)題，當(dāng)這一步走查工作完成之后我才會(huì)制作電子格式的原型，然后在真實(shí)設(shè)備上體驗(yàn)。

理想條件之下，通過(guò)這個(gè)方法，你能夠得到數(shù)個(gè)不同的想法，最后對(duì)比之下選出一個(gè)你認(rèn)為最佳的方案。這樣你就能夠最大程度之上避免了過(guò)早的拿出了并不那么成熟的方案了。我想這就是作線框圖的真正價(jià)值。

「優(yōu)設(shè)七月份的交互設(shè)計(jì)好文」

畫線框圖之前要做哪些事？
《畫線框圖前，交互設(shè)計(jì)師要做的3件事》

網(wǎng)易云音樂(lè)設(shè)計(jì)師的教程：
《超全面！教你打造美觀清晰易使用的交互文檔》

為AR應(yīng)用做設(shè)計(jì)有哪些要注意的？
《現(xiàn)在超火！為AR應(yīng)用做交互設(shè)計(jì)時(shí)需要思考的3個(gè)問(wèn)題（有彩蛋）》

原文地址：zyxscientist

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量160萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com