產(chǎn)品經(jīng)理必備技能:用草圖來規(guī)劃網(wǎng)站

0 評論 17946 瀏覽 22 收藏 15 分鐘

Planning Your Web Design with Sketches

設計院校中有大量的基本課程。大企業(yè)與創(chuàng)業(yè)公司都在采取回歸本源的設計方式,這一點也不稀奇。

無論你是個終身的涂鴉藝術家,還是一位嚴肅的商標設計師,通過紙張?zhí)剿黛`感都是一項重要的設計技能。

別怕!鉛筆這類工具的力量不會消亡。在這個專注設備的時代,簡單、久經(jīng)考驗的設計方式仍然大有可為。

實際上,我已經(jīng)聽到一種日漸強烈的聲音,反對將工時浪費在高保真photoshop效果圖上。手繪稿讓你以一種靈活巧妙的方式,創(chuàng)作迭代式的漸進設計,不必為了高保真設計圖和電子稿而超支時間。

不論你是大公司還是自由設計師,通過快速手繪與客戶交流想法,是一項相當重要的手段。

為什么手繪?

手繪稿在某些方面對線框圖甚至電子稿有所優(yōu)勢。它便攜、親切、富有創(chuàng)造力,并且久經(jīng)考驗。再沒什么比紙和鉛筆(或者鋼筆)更簡單的了。

我也發(fā)現(xiàn),手繪稿對客戶而言足夠通俗,使他們能夠提出意見并且做出修改。高保真效果圖看起來就像是“成品”或者即將完成,那會束縛客戶提出改進建議的意愿(可樂橙在這里真的忍不住要插一句,這完全不符合國情啊,不科學啊!)。手繪稿相對散漫、友好、非正式……你可以擦掉進行修改。

Wireframes tend to be very text-heavy and rarely communicate art direction and tone. Especially for photography and visual assets. When's the last time a big

線框圖總是充斥大量文字,極少反映出美術趨向和設計基調(diào)。特別是對于照片和視覺元素。你可曾見過一個大叉叉?zhèn)鬟_出了照片內(nèi)容?

通過手繪稿,你可以快速、近乎思維練習式地迅速記錄下你的創(chuàng)意。它能飛快見效,讓你在屏幕前花更少工時,從而擁有更多時間來產(chǎn)生創(chuàng)意。卷起袖管然后尋找答案吧。

Another Wireframe

This eventually turned into a Photoshop comp for the client. You can see how it resembles the traditional wireframe but more closely mirrors the art direction of the comp.

它最終會轉化為photoshop的視覺稿給客戶。你會發(fā)現(xiàn)它與傳統(tǒng)線框圖相近,卻能更接近地反映出設計稿的美術趨向。

通過手繪,能夠消滅那些僅僅為了占位的圖片。要知道,你放在原型圖和效果圖中的一個大叉叉,代表著這里將放入一張真實的圖片。你就會省著用你那些昂貴的版權圖片了。

This is the comp for the website. Do you see the progression from sketch and wireframe to final comp?

這就是網(wǎng)站的效果圖。你能看出草圖到線框圖再到效果圖的變化嗎?

從哪入手

有一點可以肯定,多加練習才能精通。隨身攜帶筆記本來涂鴉、迭代、速寫,保持這項技能處在最佳狀態(tài)。

我發(fā)現(xiàn),練習的最好辦法,就是在任何排隊的時候拿出來畫一畫——比如買咖啡、雜貨店購物、等待火車……只要是等待時間,都可以用來手繪。

畫下你的所見,這個技巧會對以后有幫助,當你需要向客戶展示的時候。畫下每個給你帶來靈感的東西,隨身攜帶筆記本就意味著你可以隨時記錄靈感,留待以后使用。

隨著手繪量的增加,你會開始學著精煉你的手繪稿,并將它們轉化為更加正式的插圖或繪畫。

為網(wǎng)頁設計而手繪

規(guī)劃一個網(wǎng)站時,手繪可以成為非常重要的一環(huán)。你可以把它用于設計、用戶體驗測試、界面元素,甚至嘗試字體設計方面的創(chuàng)意。

我曾經(jīng)在多個網(wǎng)站中用它來想象一些創(chuàng)意元素,比如照片和圖標。我也在關鍵界面問題上使用過這個辦法,例如怎樣使一個按鈕或圖標更加直觀友好。

交流設計元素的推演變化時,手繪也是最好的方法??蛻粝矚g這個有創(chuàng)造性的環(huán)節(jié)。他們會深陷于此,并也喜歡上手繪。

我有個客戶說過:“哇,好像我想什么你就能馬上畫出來。太不可思議了!”這就是和客戶面談時,飛快手繪的魔力。

注意!多加練習

Doodlers Anonymous

Doodlers Anonymous是個不錯的地方,可以作為學習的起點,看看別人如何手繪、涂鴉并思考他們的創(chuàng)意。它也是一個很棒的分享社區(qū)和同行交流場所。

注意,現(xiàn)實是殘酷的。鉆研手繪會很艱苦。如果你不夠老練,或者沒有將你的繪圖稿打磨好……那么找些工作之外的時間專門來畫。

可以在?Worldwide Sketchcrawl,?Doodlers Anonymous?和?Urban Sketchers?這樣的網(wǎng)站找到靈感。

訂閱一些手繪博客,鉆研那些日志和手繪稿。然后問問自己,準備好在客戶面前繪畫了嗎?

Urban Sketchers

Urban Sketchers是一個致力于觀察研究手繪的國際非營利組織。他們在Flickr和Facebook上有著完善的社區(qū)。他們博客的重要組成,是一個由手繪選稿記者構成的核心小組,他們在全世界范圍內(nèi)收集別人分享的作品。在他們的網(wǎng)站和Flickr、Facebook社區(qū)里,你可以找到很多頗具啟發(fā)性的方式來素描你身邊的世界。

記住,簡筆畫沒法給人留下什么印象。具備手繪的能力是非常重要的開端。在投入到客戶的項目中之前,你可能得花些時間“練習”和理解如何用手繪來表達想法。

Early digital sketch

這是一件早期的電子手繪作品。當時我在實驗混合型的電子線框圖,用Wacom數(shù)位板草草畫成的。從這些早期手繪作品中,我學到了對客戶而言,簡筆畫是遠遠不夠的。

手繪時應該提出的問題

首先問問自己,是否了解所設計頁面中的所有元素?如果是個改版項目,我會檢查現(xiàn)有內(nèi)容,思考用戶希望看到什么。

如果是個新站點,我會瀏覽同行網(wǎng)站,做一些競爭分析,然后看看那些最“典型”的用戶需要什么,將這些內(nèi)容加入列表中。

接下來,我會詢問客戶是否有某些設計偏好。很多情況下,客戶都有他們自己喜歡和推崇的網(wǎng)站。了解這些,并領會他們偏好的設計語言是非常有幫助的。配色方案、字體、語言/文案風格、視覺元素,還有那些會影響到市場專員的設計趨勢。Pinterest、氛圍圖片庫和“尋寶游戲”,有助于掌握一個客戶的個人喜好。

手繪表達設計

private school web design

以此為例,這是我給一所私立學校設計網(wǎng)站時畫的。目的就是避免花大量時間在高保真photoshop效果圖上,也能把主頁的線框圖具象化。

首先,我用便簽條或者寫一份文檔,來收集這個頁面的最關鍵信息。當然,最開始都是在紙上寫字,但文字是具有代表性的靈感源頭,而且能為我整理出一份所需的導航、內(nèi)容、支持信息的綜合列表。

然后,我會將文字項的列表轉化為縮略圖。畫出導航、內(nèi)容區(qū)塊、廣告、欄目、支持信息區(qū)塊、頁頭、頁尾等等。如果紙張不夠用,就在下方再粘一張。

接著,我會選出最終優(yōu)勝的創(chuàng)意,用于最后的手繪稿。一旦我形成一系列有用的創(chuàng)意,就決定朝著它的方向繼續(xù)進行。在這個階段我總能從客戶和設計師同行那里獲得大量的反饋。手繪看起來非常通俗,客戶在選出最佳創(chuàng)意時也感覺更輕松,此時,距離正式的PSD效果圖還早。

典型的項目流程

Photoshop comp fully-rendered

這是從手繪線框圖演化來的高保真Photoshop視覺稿。能從中看出手繪對于照片的美術趨向產(chǎn)生的幫助。

在大多數(shù)項目中,我從簡單的矩形入手,畫出一系列縮略圖。這個過程相當簡單,但它能幫助我產(chǎn)生一系列確定的方案,供客戶、項目經(jīng)理、和設計師同行選擇。

當我們談及縮略圖和其背后的創(chuàng)意時,我會根據(jù)選定的縮略圖進一步畫出草圖。這些粗糙的草圖主要為了確定內(nèi)容優(yōu)先級,推動頁面布局的定稿。我也會畫出照片和創(chuàng)意元素,比如該布局中的按鈕或其他圖標圖形元素。

在草圖階段,我希望回答諸如“用戶要的是什么”和“如何體現(xiàn)內(nèi)容優(yōu)先級”這類問題。這個階段非常需要合作討論。我會將草圖與客戶、經(jīng)理、項目同僚和其他設計師分享。如果有必要,我們會暫停一會兒,畫出一兩個草圖擺到用戶面前以供測試。然后重復這一階段,對草圖進行精煉、迭代和推演。

一旦草圖的方向明確了,我會畫出正式的手繪稿。像傳統(tǒng)線框圖一樣,手繪線框圖的頁面上有確定內(nèi)容……文字、圖標和照片。于是,我對于照片的美術趨向在手繪稿中得到了檢驗和探討。我也通過手繪線框圖來將最終的UI元素具象化,確保它們有用。我們通常會對這些進行測試,甚至對于某些非常復雜的界面,還要畫出那些用戶會遇到的過渡界面的線框圖。

很多次,進行到正式陳述的階段時,我會用墨水代替石墨來畫圖。墨水能為手繪稿增加一點正式感,如果再加入顏色,我就不必擔心遺漏頁面上某些實際UI元素。

最終,你總會形成自己的流程。手繪最神奇的地方在于,它能達到完全的自由。你能在任何時候捕捉靈感。

畫好會議手繪稿所需的“插件”

Finding useful tools

找到合適的工具來為客戶手繪很重要。我是Uni-Bal Vision的忠實粉絲,它是防水的。一支順手的筆刷,可以很好地大面積填充深色墨水。

所以,總而言之,下面介紹一些畫好互動手繪稿所需的“會議”用品。

鋼筆——我愛用鋼筆繪圖。當然,用墨水揮灑創(chuàng)意需要一定的自信,不過你可以隨時重畫那些線條??蛻粢蚕矚g墨水的清晰。我最愛的鋼筆是Uni-Ball Vision。它是防水的,可以放心用水彩筆畫上顏色。

“便攜式”白板——找一塊舊白板,將它切成更小更易攜帶的“移動”白板。移動白板可以跟著你穿梭于辦公室之間,還能通過Evernote來記錄迭代修改和手繪稿。

大素描本——別在客戶項目中用小素描本,不要怕,找些14英寸寬的東西來用。盡可能在大的東西上呈現(xiàn)創(chuàng)意。

活動掛圖——它和便攜白板類似……是件不可思議的工具,能讓你的客戶緊密圍繞某個創(chuàng)意或概念。而有粘性的那種能粘在墻上,用來應對長時間設計會議和整個下午的團隊工作。

結論

作為一名設計師,最貴重的財產(chǎn)就是你的頭腦??焖偌磁d表達視覺信息的能力,讓你區(qū)別于網(wǎng)頁開發(fā)流程中的其他角色。而手繪能將你從鼠標和顯示器中解放出來,現(xiàn)場展現(xiàn)客戶所需的答案。

具備了可靠的手繪技巧,設計師可以即興表達創(chuàng)意,將交談轉化為實實在在的創(chuàng)新。手繪可以很通俗閑散,能讓整個項目保持親切。

那么,拿起一只鋼筆或鉛筆、一本素描本,然后將你的涂鴉轉化雇主和客戶的銷售額吧。

文章來源:產(chǎn)品中國

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!