《產品設計法則》第三章《像素前的草圖》

INVISION 出品原文

產品設計法則

原文作者 Aaron Walter

譯文 Souche UED 牛小餅

原文地址:https://www.designbetter.co/principles-of-product-design

譯文非INVISION官方制作,僅供學習,請勿他用,轉載請注明原文出處

在成功的設計驅動的公司內,即使是最強大的設計團隊,在打造最好的產品時都有著共同的設計方法。這種進行全面性研究的核心設計方法是最棒的,它會幫助你的設計團隊,提高產出質量,加快產出速度,提高協作能力。產品設計法則,結合了設計思考的力量,將會快速提升你的團隊在實踐這種設計方法時的水平。


03

像素前的草圖

發散思考

現代設計師的工作都處在一個抽象的計算機世界里,我們每一個動作都可以做到精確且不費力。精確細致固然重要,但它不應該出現在我們的想法還不明確的時候,也就是設計過程的早期階段。如果創意探索的起始非常精美,那就需要警惕了。

這種過早的精美呈現會造成一種已經找到最終方案的假象,這是建筑師Frank Gehry在做項目時會極力避免的。他的作品總是在探索中逐漸成型。Gehry Partners的設計合伙人Craig Webb就經常聽到Gehry說“如果我知道這條路通向哪兒,我就不會去了”對于Gehry來說,創造的巔峰存在于未知。

他的創作過程起始于粗略的概念。他和他的團隊畫草圖,做模型,然后總結輸出效果。如果結果不盡如人意,他們會拋棄掉,重新再來。粗糙的早期輸出會使得工作成果不精確,但帶著很強的延展性。

“我已經通過草圖和模型作為我的語言,很好的表達了自己”

FRANK GEHRY, GEHRY PARTNERS

上百個模型和草圖覆蓋了Frank Gehry工作室的墻面和桌面,它們見證了創造過程的開始是寬泛的,這樣才會在達成明確一致的方向之前,有足夠的空間去探索更多的好點子。

圖1. Frank Gehry的工作室簡直是一個手稿草圖和模型大碰撞的現場,純手工的創意過程,在探索中創造價值

雖然Gehry的工作是特殊的,但工作的過程卻是可以借鑒的。許多創意工作者都會開始于寬泛的概念,然后再將它們細化。不幸的是,許多軟件設計團隊反其道而行之——他們起始于細節并且很快進入了優化。

Steve Jobs曾經提出的一個非常有名的論點——計算機就是“一輛人類思維的自行車”。計算機的確幫助我們縮短工作時間,完成更復雜且精密的工作,還使我們擁有連接各種大量數據的超級能力,但如果使用不當,它們也會阻礙我們創造的過程。

“人類思維的自行車”摘自:《史蒂夫?喬布斯:遺失的訪談 》2011

這個比喻來自蘋果以前的一條廣告:計算機是頭腦的自行車

以下轉自豆瓣:https://www.douban.com/note/274939271/

主持人:我想知道喬布斯的熱情所在,是什么在激勵他?

喬布斯:我小時候曾在《科學美國人》上拜讀過一篇文章,文中對比了地球上各種不同物種的移動速率,比如熊、猩猩、浣熊、鳥類、魚類等——當然還有人類——計算它們每移動一公里消耗的熱量,最后禿鷲贏了,它的移動效率最高。作為萬物之靈的人類,排在倒數第幾位。但是雜志特地測量了人類騎自行車的速率。結果把禿鷲遠遠甩在了身后,在排名上遙遙領先。這篇文章給我留下了深刻的印象,人類擅長發明工具,工具賦予我們奇妙的能力。蘋果以前有一條廣告:計算機是頭腦的自行車,我徹頭徹尾地堅信如果將來有人回顧人類歷史,計算機將是人類最偉大的發明。能在硅谷參與這項發明,我覺得自己很幸運。這就好比畫幾何向量。開始時失之毫厘,結果會謬以千里。我覺得我們也才剛剛起步,如果找對方向,以后會進展得非常順利。我們已經嘗試了幾次,結果讓人非常滿意。

計算機讓我們直接接觸到了像素——一個所有元素都在網格上對齊的空間里,帶著各種色彩,一切都有規有矩。雖然精美的輸出十分珍貴,然而很難被拋棄,這會使得在創造探索中只有少數點子被很好的優化。

在尋找好的設計方案的時候,我們應該遵循Frank Gehry的理念:粗略的延展不同的方案,直至找到那一個更值得細致打磨和深入精準研究的方案。

我們可以通過讓手稿代替像素,給創意過程多一些思考空間,創造出更棒的設計。


視頻1:Kevin Cheng - Sketching

視頻1譯文:

手繪草圖非常強大,因為它可以做到非常流暢,不會被網格之類的東西束縛住。并且它很容易被丟棄,你也不會覺得可惜。它是從物理上把你的腦和手連接了起來。在畫的過程中,可以是好玩的,它允許你畫出有些傻傻的東西,而且你也不會感到被任何屏幕給框住。手繪草圖也非常迅速。它允許任何人來畫。所以你可以請5個團隊成員同時一起畫,畫完了就扔也沒關系。我見過很多團隊有類似的做法,比如Google Venture的Daniel Burka就代領他的團隊做過,或是在設計過程中采用Sprint工作法的時候,還有些其他頭腦風暴的過程中,我都見過所有人在一開始同時手繪草圖。因為它非常簡單迅速,所以不管你畫畫技能好不好,都可以非常快速的表達出很多想法。

什么是Design Sprint

手稿的力量

手稿是一件非常低調的工具,然而它卻成就了成千上萬的偉大創意點。它是計算機設計的反面,它簡單并且功能非常有限,但正因這些限制使得它非常高效。

“我每次做重要的事情,都從鉛筆和紙開始”

手繪草圖對于創意過程非常重要,是因為:

1.草圖具有很大的包容性。不光是設計師——任何人都可以用一支筆在紙上清楚的表達出自己的想法。這件事誰都辦得到,人人平等。

2.草圖肯定是低保真的。快速手繪草圖通常不會表達一個很完整的想法,這給了所有人一個信號:這份手稿完全開放接受任何建議和反饋。

3.草圖不需要什么繪畫技巧。相較于在設計軟件的各種設置和樣式挑選里迷失自己,你可以在手稿中更關注于你的想法。

4.草圖非常快速且成本很低。你可以在短短幾分鐘里,嘗試很多種不同的方案去解決一個問題,而且如果你把這些草圖扔了也不會覺得可惜,因為你花費了很少的時間。

當我們在紙上呈現想法的時候,會發生一些魔法效應。Dave GrayXPLANE的創始人,《Gamestorming》的聯合作者,在描述手稿時說道“這就是一個自我對話的過程”。Gabriela Goldschmidt, Technion Israel Institute of Technology的榮譽教授發表在《Creativity Research Journal》上的《in a study of the sketching practices of architects》文章中,表達了類似的觀點。她發現雖然一開始,手繪是為了表現已有的一些想法,但他們可能會進化出一些預想不到結果——形成一些新點子。動手畫草圖其實是一個持續思考的過程。

專業小貼士——一起游戲大風暴吧

暢銷書《Gamestorming》由Dave Gray, Sunni Brown, and James Macanufo所著。這是一本給創新者,規則破壞者和改變者的游戲書,它包含了超過80個游戲——其中有許多涉及到畫草圖——你的團隊可以一起玩這些游戲,產生一些新點子。

有許多產品設計師很本能的都會畫草圖。Stanley Wood, Spotify設計總監告訴我們“我們許多設計師都會先動手畫,同時他們會不斷的思考,產生多種多樣的想法。但大多數時候,他們并不會把這些手稿給任何人看。”

當然了,草圖,也是一種強大的溝通手段。Slack的設計團隊互相分享手繪草圖,并且完全拋開樣式,單純討論其中的概念。

“在Slack我們都從在紙上涂涂畫畫開始發散。能夠很好的幫助人們仔細思考的工具是非常稀有的。但是在紙上畫出一些抖動的線條卻幫助你保持關注在那些真真切切的問題上。你可以快速在不同的想法切換或者產生新的想法,不過它畢竟不是最終產品方案。人們不會被它的樣式困擾,而會集中注意力在它的想法和概念上。”


Mailchimp設計團隊發現草圖是一個與工程師們溝通的重要橋梁。Mailchimp設計總監Todd Dominey發現“像素級的設計稿會把人們嚇壞”。當工程師們看見高保真的設計稿時,會覺得一切已經塵埃落定,他們只需要實現這些設計。但當一個手稿草圖呈現給工程師們,他們就非常清楚,設計過程仍開放討論,他們可以參與其中。


圖1:Lullabot設計團隊的所有項目都起始于在紙上畫出大致的草圖,甚至在設計格萊美獎App的時候亦是如此


無藝術要求

一般大家都會覺得“手繪稿”這個詞會和這樣一個情境聯系來:一個藝術家坐在一間巴黎的咖啡店里,放松地用一些寬松的線條捕捉著他看到的場景,最后勾勒出精準的形狀。但其實在你畫UI草圖或者是溝通一個產品利益點的時候,完全不需要具有如此的藝術水準。如果你可以畫出一些框,能寫出一些文字標注,足矣。


圖2:一個快速簡陋的手繪草圖依舊能夠表達出一個想法或者幫你探索新點子


所有人都可以畫草圖——這并不是設計師專屬的神圣領域。你可以邀請其他人參與到設計過程中,這會幫助你產生更多不同角度的設計方案。工程師、產品經理、客戶執行、律師——任何人都可以參與進來——通過畫手稿,幫助你把抽象的產品點轉化為具體方案。

動手畫草圖能讓大家都參與進來。業務方可以,開發工程師也可以。讓大家可以在不需要設計的情況下參與到最終產品方案的決策中來。

FRED BEECHER, THE NERDERY

專業小貼士——如何說服一個人把想法畫出來呢?

你是否曾經嘗試讓某人描述一個抽象的想法,但你無法準確理解它?這時候,你讓他們把這個想法畫出來,他們會回答“別別,我畫不了”無論你如何跟他們保證,這完全跟繪畫水平無關,他們還是不愿意。Dennis Kardys, WSOL的設計總監遇到過很多這樣的情況,這時候他會用一個辦法讓客戶克服他們對繪畫的抗拒。Dennis會先幫他的客戶畫,但是故意畫錯。接著,他會問“是這樣嗎?”。客戶解釋了一遍后,Dennis會再畫錯一次。這時候,挫敗感會促使客戶奪過鉛筆開始自己畫他們的想法。“啊,我明白了”Dennis回答。在破冰之后,Dennis發現,客戶會在接下來的會談時間里繼續畫他們的更多想法。對于大多數人來說,手繪草圖可能不是一種很本能的表達方式。你需要給他們一些激勵,讓你的同事能自然的在紙上探索他們的想法。


分享草圖

一個帶有限制要求的簡單小活動可能會讓你的團隊適應畫手稿這種探索想法的方式。Todd Zaki WarfelWorkday的前高級設計總監,他組織了一個團隊畫手稿活動叫做6-8-5:你和你的同事們每人畫6-8中設計方案,時間控制在5分鐘內。在如此短的時間里,沒有人有機會掉進精細描繪畫稿的旋渦里,這非常重要。總之,目的就是讓大家關注在想法的探索和表達上,完全摒棄“我畫的不好”的想法。在這個練習里,每個人的草圖都會不可避免的非常潦草。

可以這樣分步驟實現:

1.把你的團隊集合在一起——設計師、工程師、產品經理,和一些項目關鍵領域知識的專家。人數限制在8個以內,確保討論產出結果的效率。

2.分給每個人一張A5或者A4大小的紙。把紙折疊3次,形成6個區塊(6份手繪草圖的位置)。如果你希望得到更多產品點,那就給每個人2張紙,每張紙折2次,4個區塊。


3.清楚的闡述這個項目的目標產出物,劃定一個框架。比如“我們希望快速提升用戶在App的活躍度。我們該怎么做呢?”

4.設置一個5分鐘的計時器,并且規定所有人必須獨自、安靜的完成自己的方案(確保大家的注意力集中在自己的想法上)

5.當倒計時結束,每個團隊成員都要呈現自己的手稿。討論每一個手稿上的每一個想法是非常關鍵的。帶有批判性的反饋會讓你看到,哪些想法是最好的。

“畫草圖是我們設計過程中的重要一環。我們大家會在一起畫草圖,然后分享自己的視角和想法”

AARON IRIZARRY, NASDAQ

你可能會奇怪,為什么所有人要獨立畫草圖而不是一起畫在一個白板上。根據對團隊頭腦風暴這一活動的反復研究表明,當我們在一起腦暴的時候,我們產出更少的點子,而且質量也更差。Keith Sawyer,華盛頓大學的心理學家這樣總結到:“經過幾十年持續研究發現,團體頭腦風暴產出的點子數量要遠遠少于,同樣人數的團隊,他們分別思考,然后再分享各自想法的數量。”

所以請牢記,在創意過程的初期,我們最好盡可能多的踏入不同的領域,而不要直接專注于深挖1或2個點子。


在不同階段,選擇適合的工具

你用來畫草圖的工具會直接影響產出的速度和思考探索的范為有多廣。如果用細線筆或是自動鉛筆,你可能會不自覺的傾向于畫細節,這會讓你變慢。為了避免畫出細節,Jason FriedBasecamp的聯合創始人,用粗線條的馬克筆,在大張的紙上畫草圖。這樣就很難畫出界面的細節。從而,你不得不集中注意力在產品流程和人們將會如何使用你的產品上。



視頻2:Dave Gray--sketching

Dave Gray, XPLANE創始人,正在與Basecamp的Jason Fried談論他是如何在手繪草圖的過程中探索想法的。

當產品點需要被優化,中等粗細的記號筆可以幫助你更加細致的探索你的想法。相對于手繪本,單張的紙對于畫手稿是最好的,他們可以被容易的分享,或者貼到墻上,或者被回收。需要畫一些UI細節概念的設計師發現Copic的灰色記號筆很適合在草圖上增加一些層級、明示效果


畫草圖遠程作業

Lullabot是一家創意機構,他們服務的客戶有SpaceX、格萊美、GE和Martha Stewart等。在Lullabot,大家一起畫草圖,在創意過程中是非常重要的環節。每一個新項目伊始,他們都要進行手繪草圖,但這支設計團隊與之前講到的團隊都有所不同,他們是完全遠程協作的。

創意總監Jared Ponchot想到了一個簡單便宜的方法讓團隊成員來克服遠距離同時協作的困難。他給每個設計師配備了一個USB攝像頭,IPEVO。每個花費60美元,Jared甚至給工程師、客戶甚至那些重要的合作伙伴配備這個攝像頭,如此一來,他們也可以參與到早期的手繪草圖階段。

圖3:IPEVO攝像頭對于遠程協作的團隊來說,非常適合用于同步繪制手稿的過程


就像其他很多的遠程團隊一樣,Lullabot通過Google Hangouts開展遠程會議。在他們的會議中,只是把普通攝像頭換成了IPEVO。每個團隊成員都可以看到其他成員在草圖上表達的想法,或者當場進行繪制來解釋一個新概念。


圖4:Lullabot創意總監Jared Ponchot正在為他的遠程團隊手繪草圖


圖5:IPEVO攝像頭可以在Google Hangouts中使用,向遠程團隊展示手繪草圖


Ponchot的辦法非常簡單有效。它保證了他的團隊在項目的初期能夠對設計方案有包容性,而非直接開始像素級的設計,這會使得他們在執行時迷失方向。

相關閱讀:Freehand–a fast, flexible new way to collaborate in real time


執行前的創意點

在電腦上開始設計之前,先進行手繪草圖有很多好處,最重要的一點就是草圖能然跟我們專注于創意點,而非創造視覺藝術上的魅力。設計常被描述成為別人解決問題的一種行為。在以解決問題為目的的時候,我們必須集中精神,無法再分散注意力到視覺的沖擊效果上。

“在我整個職業生涯中,無論何時,我總是起始于一個低保真的草圖,它會為我開啟一扇門,邀請更多的人參與進來,并且使我專注于理清那些主要問題。我總是用盡可能簡單的草圖來進行徹底大規模的探索和思考,只有當你發現無法再有任何進展的時候,那才可以進入下一個設計環節。”

JOSH BREWER, ABSTRACT


在像素之前使用鉛筆畫草圖,可以讓其他人參與到你的設計過程中,成為你的設計伙伴。從你的同事那里汲取更廣泛的視野會幫助你的團隊產出更優的設計方案。

這里有一個把草圖先于像素執行到實際中的待辦事項列表:

· 在電腦上開始設計之前,可以在紙上畫出各種想法。畫草圖是一種思考的過程,這會幫助你探尋到意料之外的點子。

· 讓工程師、產品經理和項目的其他關鍵人物都來參與到設計項目的早期階段里來。這會讓每個人都對項目有一個明確的統一目標,并且產生一種主人翁思考角度。

· 如果你的團隊或者客戶不在同一個地方辦公,那就用USB攝像頭來同步這些草圖上的想法。

· 粗線條的記號筆或者時間限制可以幫助你專注于創意點的思考上,避免迷失在追求美觀的細節里。



視頻3:Liz Danzico - Sketching

視頻3譯文:

在紙上畫 vs 使用數字繪圖工具,到底用哪個,這是個有趣的問題。我的答案是,可以從在紙上畫開始。我們已經討論這個問題很久了,比如,設計師是否應該掌握熟練的手繪,是否在讀研究生之前是否應該深諳透視繪畫技法。但我想,現如今,重要的是人們有一個工具可以用來表達想法。因為想法與表達之間,總是會有一些損耗和偏差。所以有時候,你可能不敢動手畫,怕畫不好。但使用在紙上或者白板上畫出來是最簡便最直接的,這是一種盡可能移除損耗的方法。所以,其實使用數字繪圖工具也是同樣的道理,你做的事情也是努力以合理的方式表達想法,無論是為了用戶最終去使用它,或者是開發會在其基礎之上實現功能等等。所以,在想法和最終表達之間,移出所有的障礙,準確呈現是最重要的。

延生閱讀

Sketching the User Experience

Drawing Ideas: A Hand-Drawn Approach for Better Design

The Doodle Revolution: Unlock the Power to Think Differently

Gamestorming: A Playbook for Innovators, Rulebreakers, and Changemakers

Draw Toast: Solving Wicked Problems by Sketching

The Messy Art Of UX Sketching

The product design sprint: diverge

Sketch, Sketch, Sketch

164 Ideas in 5 Hours of Remote Sketching

Sketching Software

Designing Together Apart

Sketchboarding: Discover Better Faster UX Solutions

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容