網(wǎng)站設(shè)計(jì)

Website development

網(wǎng)站設(shè)計(jì)的設(shè)計(jì)師要畫草圖

發(fā)布時(shí)間：2017-04-21 08:57:07

我對(duì)用戶體驗(yàn)草圖繪制的體會(huì)，我們的導(dǎo)師，草圖繪制大師Kate Rutter教會(huì)了我們?nèi)绾瓮ㄟ^草圖將自己的創(chuàng)意呈現(xiàn)于紙上。下面是為大家分享一些能夠用于快速、有效繪制草圖的實(shí)體或抽象工具。

為什么要繪制草圖？

作為用戶體驗(yàn)設(shè)計(jì)師，我們應(yīng)當(dāng)能夠自如的與不同的職能團(tuán)隊(duì)協(xié)作打造復(fù)雜、有效的產(chǎn)品。為了確保未來的成功，在產(chǎn)品創(chuàng)造的早期階段形成多樣的創(chuàng)意是必不可少的，因?yàn)楹玫膭?chuàng)意往往出現(xiàn)于創(chuàng)造過程。通過收集有關(guān)創(chuàng)意的反饋信息，可以讓我們?cè)陂_始進(jìn)一步工作之前達(dá)到去偽存真的效果。

就我個(gè)人而言，馬克筆和紙就像鑰匙一樣能夠開啟我腦中充滿童年色彩的創(chuàng)意、探索空間，這一空間也是打造創(chuàng)意的理想境界。

你的設(shè)計(jì)需要哪種類型的反饋？

作品的詳實(shí)程度，與我們預(yù)期得到的反饋情況之間有著直接的聯(lián)系。如果我們呈現(xiàn)出一個(gè)彩色、詳盡的PSD模擬圖，那么可能會(huì)聽到如下的反饋：

“你為什么要選這個(gè)字體”（也就是說，反饋面會(huì)比較窄）

但是，如果你呈現(xiàn)出一個(gè)手繪的UI草圖，可能會(huì)得到如下的反饋：

“用戶應(yīng)該怎么從這添加好友”（亦即：反饋面比較廣）

在設(shè)計(jì)早期，我們需要盡可能寬泛（概括性）的反饋。不要讓對(duì)方的注意力被吸引到設(shè)計(jì)的表象上去。

另外，如果詳實(shí)程度過高，就會(huì)過早的把我們框入到既定的創(chuàng)意范圍內(nèi)并刺激我們?cè)谕昝莱潭壬香@牛角尖。但是通過紙和筆，就可以避免很多這一類陷阱。

從心理學(xué)角度講，看非正式的草圖，會(huì)比看精心修飾過的內(nèi)容更加容易激發(fā)觀看者提出建設(shè)性的意見。即便是黑白的矢量UI草圖也能抑制對(duì)方提出太有針對(duì)性的反饋。

不一定要很漂亮，但一定要簡單。

很多同行不會(huì)自詡為大藝術(shù)家，好在我們干的活也并非藝術(shù)，而是信息傳達(dá)。但即便你不認(rèn)為自己是個(gè)藝術(shù)家，學(xué)習(xí)一些基本的技術(shù)技巧也能夠幫助你通過草圖繪制表達(dá)自己。不當(dāng)藝術(shù)家實(shí)際上反而能讓你把精力集中到創(chuàng)意，而非草圖是否美觀上，百利而無一害。

而對(duì)于自詡為藝術(shù)家的人，其所面臨的難點(diǎn)就在于如何在短期批量出產(chǎn)草圖時(shí)放下對(duì)完美的追求。這對(duì)于熱衷打造精美圖形和線條的設(shè)計(jì)師來說，恐怕會(huì)很難。使用Time boxing這套工具則可以幫助設(shè)計(jì)師克服這一困難，實(shí)現(xiàn)快速創(chuàng)意。要記住，我們的目標(biāo)是創(chuàng)造出快速的信息傳達(dá)媒介。

來看看這套工具：

你需要使用下列工具：

1.寬記號(hào)筆——要突出表現(xiàn)對(duì)象時(shí)使用

2.細(xì)記號(hào)筆——用于繪制主要圖形

3.超細(xì)記號(hào)筆——用于繪制較小的細(xì)節(jié)

4.30%或40%灰色馬克筆——用于添加陰影以及讓特點(diǎn)區(qū)域深入背景中

5.黃色熒光筆——用于繪制關(guān)鍵點(diǎn)，例如交互區(qū)域

6.一沓繪圖紙

7.便利貼

8.小貼紙

9.計(jì)時(shí)器

技巧

熱身練習(xí)：在Tradecraft的課堂上，用戶體驗(yàn)設(shè)計(jì)師會(huì)學(xué)習(xí)如何在計(jì)時(shí)器的幫助下繪制草圖。一般我們首先會(huì)看一套網(wǎng)站的截圖，然后用5秒鐘時(shí)間繪制出自己所關(guān)注到的5個(gè)元素。其效果大致如下：

這項(xiàng)練習(xí)能夠強(qiáng)迫我們的大腦進(jìn)行詳實(shí)度思考并跳出完美主義的局限。我們會(huì)首先思考貼近度、層次關(guān)系和主次關(guān)系等基本視覺概念，并會(huì)注意到吸引注意力的內(nèi)容及其原因。經(jīng)常進(jìn)行這項(xiàng)練習(xí)能夠鍛煉自己的思維能力。

創(chuàng)意形成：我們開始對(duì)產(chǎn)品或功能進(jìn)行創(chuàng)意繪制。在此過程中，我們需要快速完成下列各階段，每個(gè)階段限時(shí)5到10分鐘：

1. 有哪些問題？描繪出目標(biāo)用戶及其所面臨的問題：

2. 你的創(chuàng)意對(duì)解決這個(gè)問題有何幫助？畫出你的用戶用你的產(chǎn)品解決問題的情景。

3. 產(chǎn)品如何使用——畫出6種用戶與產(chǎn)品/功能交互或使用產(chǎn)品/功能解決問題的情景：

提示：每個(gè)方框的大小相當(dāng)于一個(gè)便利貼

4.票選創(chuàng)意

如果你們是團(tuán)隊(duì)合作，可以用貼紙投票選出有趣或重要的一個(gè)設(shè)計(jì)范圍進(jìn)行深入（藍(lán)色是你隊(duì)友的投票，紅色是你自己的投票。）如果你是一個(gè)人，那票數(shù)多的人估計(jì)就是你自己了。

5.做出5套快速UI草圖

設(shè)想你的設(shè)計(jì)在UI中向用戶呈現(xiàn)的方式。你不需要畫出界面的所有細(xì)節(jié)，只需要畫出與你當(dāng)前所探索范圍相關(guān)的內(nèi)容。

然后選出你中意的一套UI草圖。

6.詳細(xì)UI草圖

在這一步，你可以開始拓展自己的UI創(chuàng)意，并思考如何對(duì)其進(jìn)行進(jìn)一步深入。使用注解說明可能存在疑問的地方。這次的草圖需要讓人一眼能夠看明白。

提示：草圖中加入用戶元素能夠強(qiáng)調(diào)出你選擇當(dāng)前設(shè)計(jì)的理由。

7. 畫出前后流程

下面，你可以開始考慮與當(dāng)前界面前后聯(lián)系的屏幕界面，進(jìn)而初步思索交互方式。這一步需要用黃色的熒光筆和灰色馬克筆來凸顯出重要的部分以及交互內(nèi)容。

總結(jié)

上述的全部過程時(shí)長約45分鐘。這一神奇的流程能夠幫助你快速獲得創(chuàng)意。

養(yǎng)成快速繪制草圖呈現(xiàn)創(chuàng)意的習(xí)慣。不要管草圖漂不漂亮，將精力集中到如何清楚傳達(dá)創(chuàng)意訊息上。要記?。?/span>

“UBU（丑但是有用）遠(yuǎn)比（漂亮但是沒意義）有效”——Kate Rutter

創(chuàng)意草圖繪制有許多技巧，對(duì)于哪些方法有效也存在著各種不同的理論。你可以多多練習(xí)，自己探索適合自己的方法。

衷心希望各位設(shè)計(jì)師和非設(shè)計(jì)師朋友提供有關(guān)創(chuàng)意草圖繪制的意見。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7226,0.html

上一篇：大的影響營銷是適應(yīng)當(dāng)前的趨勢(shì)

下一篇：網(wǎng)頁速度影響搜索引擎的排名，你能夠做什么

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理