產品經理手把手教你草圖原型實戰技巧
在如今的使用者體驗及產品圈子裡，越來越多的人開始瞭解到草圖及相關的原型工作對於整個設計流程的重要意義;不過在實際工作中，真正會拿起紙和筆的人貌似不是很多。作為一名使用者體驗設計師，我每天都會畫草圖，我還霸著辦公室的一整面牆，在上面鋪滿草圖，標註著各種上下文情景指令碼。
確實，使用電腦中的原型設計軟 件代替紙和筆，在很多時候是一種省時省力的做法，不過從視覺化與實體化的角度來看，這並不是最好的解決方案。當你正在構思網站頁面或是移動應用的佈局，琢 磨著功能流程及上下文情景指令碼的時候，拿起筆畫畫草圖才是更加直接有效的方式它可以幫助你集中精力解決眼前的問題，盡情的勾勒各種想法，而不必為工具 軟體的使用方法或功能限制等方面的因素分散注意力。
很多文章都會告訴你草圖這東西有多給力，但是基本不會從實戰的角度進行深入而細緻的講解;本文則不然，我會實打實的從具體執行的角度，向大家介紹一些常用技巧及其背後的道理，這些都是我和其他很多使用者體驗設計師在每天的工作中所要用到的。
草圖 ≠ 繪畫
從視覺角度上講，即使最完美的草圖作品，與真正意義上的“繪畫”相比也是相距甚遠的。如同你的思維與靈感，草圖應該處於一種持續變化的狀態，隨時可以根據需求進行調整。你確實不必掌握那些真正的繪畫技能，不過有相關經驗的話自然更好。
那麼草圖的本質到底是什麼呢?簡單來說：
草圖是思維的表達方式，用來解決問題。
草圖是一種視覺化的、更加清晰有效的溝通方式。
畫草圖是一種技能，實踐的越多，能力越強。
不要太在意草圖在“繪畫”方面的視覺效果，試著把它當作海報來審視你第一眼看到的是什麼?細節資訊在什麼地方?記住，人的目光總會被細節與強烈的對比所吸引。
就像語言表達能力可以決定人與人之間互相瞭解的程度，草圖的表現力也會直接影響到產品設計流程中的資訊溝通。好在，我們有一些不錯的方法可以學習和運用，在實踐中逐漸提高自己的草圖表達技能。
分層作業
技巧
初期，使用淺灰色的馬克筆(大約20%到30%的灰度)勾畫輪廓和佈局結構;在進入介面元素的細節部分之後，逐漸使用顏色更深的馬克筆或鋼筆。
解釋
從淺色開始初步的框架工作，會讓事情變的容易些;在這個階段，犯些錯誤也無妨，你可以逐步評估和調整想法。把線畫的凌亂些也沒太大所謂，在接下來的階段，使用顏色更深的線條逐步完善草圖之後，沒人會注意到這些早期的淺色輪廓。
隨著靈感落實成為確定的想法，並不斷的躍然紙上，我們使用的顏色也可以逐步加深了，必要的時候可以使用鋼筆來勾勒細節。透過灰度的差異來體現介面的邏輯，整個草圖的層次感會非常鮮明。
分層的做法還可以幫助我們在初期將注意力放在內容結構與檢視繼承等方面，不至於一開始就被各種細節問題和想法糾纏。如果你知道眼下的介面中需要一個 列表，但不清楚列表項中的具體內容，那麼就使用淺色筆隨便畫些曲線來代替文案;在之後的細節階段，再回過頭來用深色筆新增一些具體的範例內容。
注意
如果你更習慣於使用圓珠筆起草，並且打算接下來用馬克筆做輔助的話，記得將圓珠筆的墨跡晾乾先，否則會被馬克筆中的酒精成分汙濁掉。
經過越來越多的實踐，你也許開始變的更有把握，而逐漸忽視淺色底層繪製;最終結果也許不會很壞，但我個人仍然建議保留這一步驟，因為你可以在這個階段裡做很多實驗性的摸索，一點點評估和落實頭腦中的想法。
放鬆肢體
技巧
在畫長線條的時候，試著讓自己的手與胳膊跟隨著肩膀移動，而不是透過腕子或手肘來用力;只有當你需要快速的畫短線條，或是處理一些區域性細節的時候，手肘的驅動才更加有效。
解釋
肩膀的旋轉驅動，可以幫助你畫出更長更直的線條。如果只借助手腕的力量，你會發現畫出的直線通常是彎的...另外，還可以在畫長線之前，先在起點和終點的位置各做一個標記，以增強目標感。
繪製多邊形
技巧
對於那些由長線條組成的、用來表示頁面或裝置輪廓的矩形和其他多邊形，可以透過旋轉紙面的方法依次畫出邊框線，而自己的姿勢與落筆的角度可以保持不變。
解釋
要在每個方向上都畫出很漂亮的直線，確實不是容易的事情。只會畫橫線不會畫豎線?把紙面旋轉90度好了這樣無論什麼角度的直線，對我們來說其實都是一個方向的，我們自己最習慣的姿勢和落筆的角度就可以保持不變了;簡單又實用。
注意
如果你正在使用白板，這種技巧顯然不適用;還是多練習豎線的畫法吧。
對互動方式的體現
技巧
以普通草圖為基礎，將便籤貼紙附著在圖紙的相關位置上，用來表示那些具有互動性質的介面元素，比如提示氣泡、彈出層、模態視窗(modal windows)等。
我們可以在一張草圖上使用便籤貼紙同時定義多個互動元素，然後按照具體的互動規則，取下一些，再對包含剩餘互動元素的草圖進行掃描和影印，最終就可以得到一套完整的互動示意草圖。
使用不同顏色的貼紙來表示不同型別的互動元素。
一張貼紙的尺寸難以完整的表示模態視窗?在旁邊拼一張好了。
一張貼紙的尺寸對於提示氣泡來說太大了?裁掉一部分也無妨。
解釋
這種方法可以幫助我們在不修改草圖框架的情況下快速的定義頁面元素的互動方式。便籤貼紙的位置可以很方便的被調整，我們還可以在上面勾畫該介面元素中的細節內容。
影印與模板化
有時，對於某些UI元素，你也許要重畫並調整很多次。這不能算是壞事，你可以把這樣的需求看作重新構思並快速迭代的機會。這種情況下，掃描器或影印機可以幫助我們提升一些效率。
技巧
使用掃描器或影印機，將穩定版本的草圖複製多張作為框架模板，在其中繪製那些變動需求比較多的UI元素。另外：
介面中的某個部分畫敗了嗎?用一片白紙覆蓋住，影印一下，使用影印稿繼續。
如果你需要在草圖中使用瀏覽器視窗或是移動裝置作為背景，那麼可以找來一些現成的圖片素材，影印多張為我所用。Smashing Magazine的這篇文章中提供了很多典型的背景框架，包括瀏覽器、手機等。
如果你需要改變某些已完成草圖中的側邊欄，可以用一張白紙畫一個新的，影印幾張，直接貼上到這些需要被修改的草圖中，覆蓋掉舊版的。
解釋
影印機就是傳統版的“Ctrl+C”和“Ctrl+V”，它能幫我們快速生成模板;這種方式不僅能提升效率，而且可以減少我們在實驗和摸索過程中的顧慮如果把某些UI元素搞亂套了，換一張模板重新來過就是了。
另外，如果你需要使用其他色彩的馬克筆來標註重要內容或是繪製特定的介面元素，那麼我建議你畫在影印稿上，這樣可以有效避免不同種類墨水之間的汙濁作用。
勾畫細節
在細節方面，可以使用直尺作為輔助工具。特別是印有刻度的透明直尺，可以讓我們清楚的觀察到正在畫的直線與周圍元素的`相對位置關係。
技巧1
使用直尺和淺灰色馬克筆繪製輔助線。
解釋
這種方式特別適用於規劃那些需要等距分隔的細節元素，包括列表項、圖表、按鈕等;我們可以基於這些輔助線進一步繪製這些元素，在細處體現優雅與嚴謹。
技巧2
在前文“分層作業”的部分，我們提到了首先使用淺灰色的馬克筆繪製介面輪廓及佈局結構;而進入細節部分之後，可以使用顏色更深的馬克筆或是圓珠筆、鋼筆，配合直尺來勾畫。
解釋
在“分層作業”的最後階段，我們會希望最終成型的介面整體以及其中的UI元件能夠清晰的突顯出來，而不要融匯在各種輔助線等干擾元素當中。使用深色筆和直尺，我們可以畫出長而筆直的濃重線條，有效的突出重要部分的邊界。
與“繪畫”不同，我們完全不用迴避對直尺的使用;重要的是，要知道怎樣正確的運用這個工具不要在草圖工作的一開始就使用直尺，它應該在細節部分與最終突出呈現的階段發揮價值。
技巧3
我們還可以使用直尺來快速整齊的裁紙，例如將便籤貼紙裁成更加貼近其所要模擬的UI元素的形狀。
這比從工具箱裡再拿一把剪刀出來要省事兒些，因為尺子已經在我們手邊了...而且過機場安檢時也不會惹什麼麻煩...
把故事講的更加完整
技巧
試著在上下文環境中構思和繪製草圖，展示出當前介面的應用場景和使用方法，或者乾脆直接畫在裝置的速寫圖中。
解釋
這樣做可以迫使我們認真思考應用的使用環境，從草圖階段開始就站在使用者心智的角度思考設計方案，並且能夠儘早發現應用功能設計中的潛在問題。
確實，沒人願意每做一張草圖之前都要首先畫個硬體裝置出來。我並不是說必須要這樣做，但是對裝置及應用環境進行粗略的勾勒，是一件具有長遠價值的 事，尤其對於移動應用來說，對上下文環境的描繪越詳實越好。我個人來說，通常會把移動裝置簡單而完整的畫出來，然後在“螢幕”中按照實際比例繪製應用介面 的草圖這樣做可以讓我時刻留意裝置螢幕的規格尺寸及比例約束。另外，我們還可以大致的描繪出使用者的操作手型，以此來粗略的評估應用介面中的元素互動方 式是否合理。
注意
想要做到這一點，顯然需要具備一定的速寫能力;實在覺得難搞的話也沒關係，就使用我們在“影印與模板化”中提到的方式好了，直接用裝置的圖片做底板，沒問題。
扔掉草圖本
[產品經理手把手教你草圖原型實戰技巧]相關文章：
1.產品經理手把手教你草圖原型實戰技巧