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

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

回顧職業生涯的這段傻白甜時光，才發現原來這樣的做法其實是誤用了線框圖這種設計工具，并沒有發揮到其真正的價值，因為我用錯了地方，或者說用得太過片面了。以我這個從業11年的老司機現在的眼里看來，線框圖其實就是將項目細分成好多小任務，然后一步步的完成，將項目從“探索期”推進到“準備認真搞起期”，而上面提到的，防止用戶或者領導改變主意殺你一個措手不及只是其中一個小小的方面。當時我沒有留意到，其實線框圖的更深層次的意義是幫助你擺脫一些設計上非常明顯的而陷入當中又難以逃出的定勢思維，它幫助你更好的讓你看清自己的想要的東西，讓你在走上錯路之前先慢慢地選好一個正確的方向。

初級設計師的設計進程

以上這則小插圖是從大神Julie Zhou的文章，Junior Designers vs. Senior Designer（初級設計師與高級設計的對比）中拿來的。很好了闡述了新人們在畫線框的時候普遍都存在的一個現象：當一個想法出來之后我們都知道先用線框畫下來，但是畫著畫著，總覺得不對勁，總覺得加上視覺元素之后才能真正看出效果來。在線框圖階段，這個“看出效果來”不知道浪費了多少設計小新的時間。

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

高級設計師的設計流程

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

一輛小破車，無論你噴多貴的車漆，也不會讓它內在變更好。

所以，我們怎么才能夠避免在不成熟的idea上面花去了過多的時間精力？怎么才能在避免浪費過多時間的前提下拿出盡量多的問題解決方案？怎么對方案之間的優劣作出正確的判斷？

做有用的線框圖

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

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

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

第一步

開始吧。我會拿起一本好點的筆記本，先畫上大概20個矩形框作為我們的屏幕，請按照你們所要設計的對象設備屏幕的比例來畫。

第二步

拿起筆，先把最先出現在你腦海中的東西畫出來，然后繼續思考，盡量在每個矩形里面都畫上你的idea。

在這個過程中，你基本不可能畫出20個你都很滿意的方案來，然而這就是重點，讓你從舒適區中跳出來，強迫自己想一些自己不知道的東西。當然，并不是讓你像完任務一樣毫無道理地畫滿20個矩形，當你感到畫無可畫、想無可想的時候，試著讓自己做一些以前都沒做過的東西，比如：只留下圖片怎么樣？沒圖片會怎樣？蘋果有案例看看嗎？谷歌會怎么做呢？如果不用列表會怎樣呢？能不能把重要的東西放在靠近用戶拇指那一側呢？對于我來說，當畫到第十個idea左右，有趣的東西就差不多來了。也請記得暫時忽略視覺設計思維，暫時看起來是很丑，但是線框圖階段我們設計的是功能結構。

如果沒有把20個都填滿，那么勉強一下自己，想多一些，直到自己真的想不出任何方案來了。要舍得在產品的功能性上面運營更多的時間，即便畫出的來的東西可能看起來非常怪異。

第三步

理想狀態下，當上述的步驟得出了結果，那么接下來就應該轉入視覺層面上的工作了對嗎？但是這種情況實際上很少見，我建議先別急著打開電腦。讓你的想法在紙上多呆一陣子，讓這種一切還能改變的狀態多留久一些。

將脫穎而出的方案拿出來，在新的紙上畫出更大的矩形框，將方案畫成保真度更高的線框圖。這個階段我們主要的任務就是驗證這些方案能否承載得起更多的細節。

當這些工作做完之后你就能夠拿去跟同事領導進行探討了，看看有沒什么改進的地方。由于我們之前的工作一直是在紙上進行的，已經節省了好多時間，而且目前我們的方案還停留在紙上，這時候一定要擺好心態，不要怕改，繼續發揮線框圖的作用。

下一階段

僅花去了相對較少的時間，你可能就得到了一個或數個拿得出手的方案。因為前面你已經做出了你想得到的和不那么容易想得到的假設，又得到了數次反饋，對方案的細節也有了一定的探索了。（拿著線框圖就做線框圖的事情，在收集反饋意見的時候也請盡量引導大家往基本框架和功能的層面去討論。）

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

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

「優設七月份的交互設計好文」

畫線框圖之前要做哪些事？
《畫線框圖前，交互設計師要做的3件事》

網易云音樂設計師的教程：
《超全面！教你打造美觀清晰易使用的交互文檔》

為AR應用做設計有哪些要注意的？
《現在超火！為AR應用做交互設計時需要思考的3個問題（有彩蛋）》

原文地址：zyxscientist

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com