五年時(shí)間轉(zhuǎn)瞬即逝，在自己小窩的最后一個(gè)周末；眼看著家當(dāng)和心情都被打包的差不多了，整個(gè)人卻終于感冒發(fā)燒腹瀉垮了下來(lái)，這是鬧哪樣呢。所幸本周前面幾天可以抽出些時(shí)間做掉這篇譯文，今天發(fā)掉先。接下來(lái)的兩個(gè)月，大概要集中業(yè)余零散精力放在一本iOS書(shū)的翻譯上了；希望還能有些時(shí)間分給這邊。雜七雜八就到這里，我們直接進(jìn)入正文——草圖原型實(shí)戰(zhàn)技巧，沒(méi)有務(wù)虛的大道理，每個(gè)內(nèi)容要點(diǎn)都很實(shí)用。走著。

在如今的用戶(hù)體驗(yàn)及產(chǎn)品圈子里，越來(lái)越多的人開(kāi)始了解到草圖及相關(guān)的原型工作對(duì)于整個(gè)設(shè)計(jì)流程的重要意義；不過(guò)在實(shí)際工作中，真正會(huì)拿起紙和筆的人貌似不是很多。作為一名用戶(hù)體驗(yàn)設(shè)計(jì)師，我（英文原文作者）每天都會(huì)畫(huà)草圖，我還霸著辦公室的一整面墻，在上面鋪滿(mǎn)草圖，標(biāo)注著各種上下文情景腳本。

確實(shí)，使用電腦中的原型設(shè)計(jì)軟件代替紙和筆，在很多時(shí)候是一種省時(shí)省力的做法，不過(guò)從可視化與實(shí)體化的角度來(lái)看，這并不是最好的解決方案。當(dāng)你正在構(gòu)思網(wǎng)站頁(yè)面或是移動(dòng)應(yīng)用的布局，琢磨著功能流程及上下文情景腳本的時(shí)候，拿起筆畫(huà)畫(huà)草圖才是更加直接有效的方式——它可以幫助你集中精力解決眼前的問(wèn)題，盡情的勾勒各種想法，而不必為工具軟件的使用方法或功能限制等方面的因素分散注意力。

很多文章都會(huì)告訴你草圖這東西有多給力，但是基本不會(huì)從實(shí)戰(zhàn)的角度進(jìn)行深入而細(xì)致的講解；本文則不然，我會(huì)實(shí)打?qū)嵉膹木唧w執(zhí)行的角度，向大家介紹一些常用技巧及其背后的道理，這些都是我和其他很多用戶(hù)體驗(yàn)設(shè)計(jì)師在每天的工作中所要用到的。

草圖 ≠ 繪畫(huà)

從視覺(jué)角度上講，即使最完美的草圖作品，與真正意義上的“繪畫(huà)”相比也是相距甚遠(yuǎn)的。如同你的思維與靈感，草圖應(yīng)該處于一種持續(xù)變化的狀態(tài)，隨時(shí)可以根據(jù)需求進(jìn)行調(diào)整。你確實(shí)不必掌握那些真正的繪畫(huà)技能，不過(guò)有相關(guān)經(jīng)驗(yàn)的話自然更好。

那么草圖的本質(zhì)到底是什么呢？簡(jiǎn)單來(lái)說(shuō)：

草圖是思維的表達(dá)方式，用來(lái)解決問(wèn)題。

草圖是一種可視化的、更加清晰有效的溝通方式。

畫(huà)草圖是一種技能，實(shí)踐的越多，能力越強(qiáng)。

不要太在意草圖在“繪畫(huà)”方面的視覺(jué)效果，試著把它當(dāng)作海報(bào)來(lái)審視——你第一眼看到的是什么？細(xì)節(jié)信息在什么地方？記住，人的目光總會(huì)被細(xì)節(jié)與強(qiáng)烈的對(duì)比所吸引。

就像語(yǔ)言表達(dá)能力可以決定人與人之間互相了解的程度，草圖的表現(xiàn)力也會(huì)直接影響到產(chǎn)品設(shè)計(jì)流程中的信息溝通。好在，我們有一些不錯(cuò)的方法可以學(xué)習(xí)和運(yùn)用，在實(shí)踐中逐漸提高自己的草圖表達(dá)技能。

分層作業(yè)

技巧

初期，使用淺灰色的馬克筆（大約20%到30%的灰度）勾畫(huà)輪廓和布局結(jié)構(gòu)；在進(jìn)入界面元素的細(xì)節(jié)部分之后，逐漸使用顏色更深的馬克筆或鋼筆。

解釋

從淺色開(kāi)始初步的框架工作，會(huì)讓事情變的容易些；在這個(gè)階段，犯些錯(cuò)誤也無(wú)妨，你可以逐步評(píng)估和調(diào)整想法。把線畫(huà)的凌亂些也沒(méi)太大所謂，在接下來(lái)的階段，使用顏色更深的線條逐步完善草圖之后，沒(méi)人會(huì)注意到這些早期的淺色輪廓。

隨著靈感落實(shí)成為確定的想法，并不斷的躍然紙上，我們使用的顏色也可以逐步加深了，必要的時(shí)候可以使用鋼筆來(lái)勾勒細(xì)節(jié)。通過(guò)灰度的差異來(lái)體現(xiàn)界面的邏輯，整個(gè)草圖的層次感會(huì)非常鮮明。

分層的做法還可以幫助我們?cè)诔跗趯⒆⒁饬Ψ旁趦?nèi)容結(jié)構(gòu)與視圖繼承等方面，不至于一開(kāi)始就被各種細(xì)節(jié)問(wèn)題和想法糾纏。如果你知道眼下的界面中需要一個(gè)列表，但不清楚列表項(xiàng)中的具體內(nèi)容，那么就使用淺色筆隨便畫(huà)些曲線來(lái)代替文案；在之后的細(xì)節(jié)階段，再回過(guò)頭來(lái)用深色筆添加一些具體的范例內(nèi)容。

注意

如果你更習(xí)慣于使用圓珠筆起草，并且打算接下來(lái)用馬克筆做輔助的話，記得將圓珠筆的墨跡晾干先，否則會(huì)被馬克筆中的酒精成分污濁掉。

經(jīng)過(guò)越來(lái)越多的實(shí)踐，你也許開(kāi)始變的更有把握，而逐漸忽視淺色底層繪制；最終結(jié)果也許不會(huì)很壞，但我個(gè)人仍然建議保留這一步驟，因?yàn)槟憧梢栽谶@個(gè)階段里做很多實(shí)驗(yàn)性的摸索，一點(diǎn)點(diǎn)評(píng)估和落實(shí)頭腦中的想法。

標(biāo)簽： 草圖原型 用戶(hù)體驗(yàn) 產(chǎn)品體驗(yàn) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。