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