你曾有過開發(fā)一個網(wǎng)站或是一款應用的想法嗎？事實上我們很容易的就能蹦出一兩個點子沐兰，但之后就會發(fā)現(xiàn)哆档，這其中最困難的莫過于如何將這些想法以用戶界面的形式表現(xiàn)出來。而在這時住闯，手繪草圖設計就該派上大用場了瓜浸。其實在創(chuàng)意產業(yè)和建筑領域，人們使用草圖設計來開展工作已經由來已你曾有過開發(fā)一個網(wǎng)站或是一款應用的想法嗎比原？事實上我們很容易的就能蹦出一兩個點子插佛，但之后就會發(fā)現(xiàn)，這其中最困難的莫過于如何將這些想法以用戶界面的形式表現(xiàn)出來量窘。而在這時雇寇，手繪草圖設計就該派上大用場了。其實在創(chuàng)意產業(yè)和建筑領域蚌铜，人們使用草圖設計來開展工作已經由來已久锨侯。就連達芬奇也會在他開始制造自己的那些發(fā)明之前，先進行草圖設計冬殃。所以說不管你有多么的聰明囚痴，你都不可能僅僅依靠在腦袋里轉一轉，就把一個想法很完整的建立起來审葬。因此對于每一位設計師來說深滚，手繪草圖都是你在構建想法時必不可少的奕谭。

任何一個想法都需要被“翻譯”成用戶界面

設計用戶界面是一個過程，它往往從一個點子開始 痴荐，但需要被轉換成用戶界面血柳。僅僅說我這個應用里包涵XYZ是遠遠不夠的。你還需要知道每一個用戶在眾多的設備屏幕上看到它時該如果操作XYZ蹬昌。在你思考用戶體驗的時候混驰，草圖設計就可以幫助你把這些模糊的想法轉換成可被視覺識別的用戶界面。哪怕你已經知道自己的應用可以運行哪些操作皂贩，草圖設計則幫助你去理解應用該如何達到用戶期望栖榨。

手繪的方式使你很形象的掌握在不同的設備之間用戶體驗到底是怎么樣的，而不至于讓這些想法過于模糊明刷。事實上婴栽，草圖設計將使得你的用戶界面設計更加清晰，更具視覺性辈末。

手繪草圖不是線框圖

很多設計師錯誤的混淆了手繪草圖和線框圖的區(qū)別愚争。它們之間相似但卻不相同。對于圖解用戶界面概念他們都很有幫助挤聘，但是線框圖和手繪草圖借助的都是不同的媒介轰枝，應對的也是不同的目的。

當你在進行手繪草圖時组去，你是在試圖搞清楚最基本的概念：即你的應用需求如何以用戶界面的形式展現(xiàn)出來鞍陨。當然，我們有很多種方法來做這件事从隆，但這里你需要清楚的是哪種才是適合你的诚撵。事實上在草圖設計階段，我們常常會使用紙和筆這類最簡單的工具键闺。這主要是為了方便我們進行大量而快速的思考寿烟，哪怕其中的一些想法不太令人滿意。在這個階段的用戶界面設計辛燥，細節(jié)并不是最重要的筛武，最重要的是搞清楚用戶在每個切換的界面之間會看看到哪些最基本的東西，因為這些才是決定用戶期望的關鍵因素挎塌。

而當你在進行線框圖設計時畅铭，你其實是在草圖理念的基礎上完善整個界面的設計：即當采用了這些像素級的灰色布局后，應用到底該如何呈現(xiàn)勃蜘。這中間你關注的將是更多的細節(jié)，諸如尺寸假残，布局以及元素的順序缭贡。你必須考慮整個頁面的所有元素細節(jié)炉擅，而不再是一些最基本的元素。當你在使用像素級的布局進行設計時阳惹，你將站在更精確的角度看待應用是如何運行的谍失。而一旦你完成了整個線框圖的設計，界面設計的概念也將變的更為清晰和準確莹汤。

在線框圖設計之前最好就開始手繪草圖

大多數(shù)設計師都有自己的一套工作方式快鱼。其中有一些人會跳過手繪草圖而直接進行線框圖的設計，甚至有些還會跳過這兩個程序直接開始更為具體的產品原型設計纲岭。但不管你忽略了其中的哪一個抹竹，你都會因此丟失掉界面設計的許多概念和細節(jié)。到最后止潮，關鍵元素的缺失以及細節(jié)上的不夠精確窃判，都將給整個界面設計工作帶來諸多障礙，而究其原因就在于我們的設計流程出現(xiàn)了混亂喇闸。

在這種情況下袄琳，你要么在線框圖的設計中去提煉界面概念，要么在具體的產品原型階段去細化界面的精確度燃乍。但這其實是適得其反的唆樊，因為創(chuàng)建最基本的界面概念本該在手繪草圖設計時就該完成的，而線框圖的設計是使這些基本概念更趨于細節(jié)化刻蟹。事實上逗旁，到了產品原型階段，界面的視覺圖形設計和內容已經完成座咆，而不是該退回去重新提煉界面的最初概念痢艺。當你忽略了手繪草圖和線框圖，你不得不把這些工作在壓縮到一個階段里去執(zhí)行介陶。對于設計師來說堤舒，這不僅把事情變得更為困難，界面的基本設計理念也會因為沒有得到足夠的重視而讓我們丟失掉許多東西哺呜。

手繪草圖將幫助你與他人一起進行頭腦風暴

手繪草圖最大優(yōu)勢之一就是在這個過程中舌缤，你可以快速的表達自己的想法，并以這種方式邀請他人與你一起進行用戶界面的設計某残。無論你是在白板還是在一張普普通通的紙上進行創(chuàng)作国撵，最重要的是你的同伴可以通過它來理解關于界面設計的基本理念，有了這樣的基礎玻墅，他們在進行各自的工作時將可以為你提供所需要的幫助介牙。另外，你也可以從他們那里得到一些反饋澳厢，甚至一些他們的想法环础，而這種充分的討論囚似，會使得界面設計環(huán)節(jié)更加的完善。而對于你的客戶們來說线得，他們甚至可以通過手繪草圖自己將想法表達出來饶唤。當所有人都在專注于同一個界面設計時，小組的所有人可以在清晰理解的基礎上贯钩，有效的的推進整個項目募狂。

手繪草圖將幫助你更快的思考，更有效率的工作

如果沒有提煉出最基本的界面設計理念角雷，那么要做好線框圖的設計將是很困難的祸穷，因為你不能如你所想的那樣進行快速的布局設計。但假如你已經有了這方面的基礎理念谓罗，你就可以按照自己的工作方式來進行用戶體驗設計粱哼。我們的想法總是源源不斷的，但是我們要知道在像素畫布上進行表達是遠遠沒有將它們放在簡單的紙筆上來的快檩咱。手繪草圖允許我們快速的探索不同的選擇揭措，以從中選出我們覺得最好的方式。如果當我們在線框圖設計之前就獲得了最基本的界面設計理念刻蚯，那么整個設計過程將變得更有效率绊含。

草圖將使你的線框圖包含更多的細節(jié)設計和精確性

假如你的線框圖包含了最基本的界面設計理念，你就不需要勞神哪種方式應該被帶到用戶界面中來炊汹。雖然有很多方法幫助我們在執(zhí)行用戶體驗設計時以達到我們預期躬充，但是假如你在手繪草圖階段就已經完成了，那在線框圖階段就不需要增加不必要的負擔讨便。界面設計的基本理念將讓你的線框圖設計包含更多的細節(jié)充甚，因為你已經花費了很多的時間去將它精確化，所以在思考采取何種方式的設計時只需花費較少的時間霸褒。到最后伴找，你的線框圖設計已經具備了足夠多的細節(jié)和精確性，你就有更多的精力投入到原型設計階段的視覺表現(xiàn)和內容上废菱。

草圖雖然難看技矮，但管用！

相信我殊轴，你不需要具備專業(yè)的繪圖功底就可以玩轉草圖設計衰倦。要知道，哪怕你畫的再難看旁理，它仍舊很管用樊零。草圖設計關注的并不是你的藝術才能，它看中的是你如何去表現(xiàn)不同的界面設計理念孽文。手繪草圖為我們提供了一種窺視自身想法的入口驻襟。你在想法上任何一點細微的變動十性，都可以在草圖設計時迅速的得到調整。這不像是最后的產品原型設計塑悼，手繪草圖不需要很美觀，這就意味著你不需要任何專業(yè)上的技能也可以操作它們楷掉。另外厢蒜，它還可以讓你的團隊成員很容易的參與進來，這樣就可以為最開始的界面設計工作帶來很多的價值烹植。

永遠不要低估了草圖的力量

事實上斑鸦，手繪草圖為接下來的設計工作定義了基礎。這些基礎對于精巧的用戶體驗設計和團隊溝通來說草雕，是非常核心的巷屿。也許你已經知道想要的用戶界面是什么樣的，因而覺得不再需要進行手繪草圖設計墩虹。但是當你實際的去進行草圖設計時嘱巾，你會發(fā)現(xiàn)跟你最初的想法相比，這里出現(xiàn)了更多的可能性诫钓，所以有可能你之前預設的道路并不是最好的旬昭。手繪草圖可以將你的用戶界面所出現(xiàn)的所有可能性包含進去，而從如此眾多的可能性中選擇什么菌湃，則完全取決于你自己问拘。

原創(chuàng)翻譯@一筆一畫的小胡子

原文鏈接：http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/