2014-12-10 周周
(Lennart Hennigs 著 Ellazou & Charrywang譯 Crispinzhu校正 查看原文 轉(zhuǎn)載請(qǐng)注明出處)
移動(dòng)端用戶體驗(yàn)設(shè)計(jì)正日趨成熟。衡量這一點(diǎn)的方法之一就是看工具。原型工具可以讓我們創(chuàng)建線框圖以及點(diǎn)擊事件，比如Balsamiq、Axure以及Fireworks，幫助我們?cè)忈屇繕?biāo)用戶體驗(yàn)?？鐬g覽器的框架工具如PhoneGap、Zurb Foundation以及jQuery Mobile可以幫助我們用互聯(lián)網(wǎng)本地化語(yǔ)言來(lái)創(chuàng)建原型：HTML、CSS以及JavaScript。
與以往幾乎沒(méi)有時(shí)間來(lái)設(shè)計(jì)的體驗(yàn)來(lái)比，我們似乎處于一個(gè)相對(duì)更好的處境。然而，這些工具也伴隨著隱藏成本：它們引導(dǎo)我們跳過(guò)了創(chuàng)造一個(gè)良好設(shè)計(jì)的產(chǎn)品必經(jīng)的關(guān)鍵步驟——也就是花時(shí)間去理解我們所面對(duì)的問(wèn)題。
這也就是為什么我會(huì)建議在打開你鐘愛的工具之前，先手繪著理解問(wèn)題并想出概念。
現(xiàn)在，你可能想的是如下問(wèn)題：
“我們的截止時(shí)間很緊迫，根本沒(méi)有時(shí)間再去涂鴉。我們必須馬上開始?！?/span>
“在XX工具里設(shè)計(jì)是目前為止比較快的方式，我必須很快能看到結(jié)果?！?/span>
“我們必須把結(jié)果給我們的客戶或合作伙伴或同事看。我們不能給他們看手繪
的線稿?！?/span>
“不好意思，我真的不會(huì)畫畫?！?/span>
我不僅聽別人幾次這樣反對(duì)，我對(duì)自己也這么說(shuō)過(guò)。
手繪可以讓我們一邊探索問(wèn)題一邊定義解決方案。它可以結(jié)構(gòu)化我們目前對(duì)問(wèn)題的理解，同時(shí)幫助我們找到可能的解決方案。
當(dāng)我們手繪出自己的想法時(shí)，新的主意也會(huì)萌生。模糊和缺乏細(xì)節(jié)的草圖會(huì)培育出新的思路。在這里，模糊是件好事，因?yàn)槲覀儠?huì)自動(dòng)嘗試填補(bǔ)腦中的空白。這也正是草圖富有“創(chuàng)造性“的原因：它捕捉到我們已經(jīng)成型的想法，并迸發(fā)出新的火花。正如Bill Buxton在《Sketching User Experiences》中提到的：
“從草圖上學(xué)習(xí)到的內(nèi)容很大程度上是基于其表現(xiàn)的模糊性。也就是說(shuō)，他們并不指定所有事情，而是鼓勵(lì)創(chuàng)造者們不自覺(jué)的融入各種不同的解釋?！?/span>
通過(guò)手繪不同的解決方案，我們不用立刻實(shí)現(xiàn)其中一種，就可以探索他們的可行性。這為我們提供了新的見解，也提出了新的問(wèn)題。手繪本質(zhì)上就是一個(gè)頭腦風(fēng)暴的鍛煉。
把我們腦袋里的東西倒出來(lái)最快的方式就是拿起一只筆和一張紙迅速的畫出來(lái)。在我們鐘愛的原型工具里來(lái)做這件事情則需要花費(fèi)太多的時(shí)間：我們需要先創(chuàng)建一個(gè)項(xiàng)目，使用合適的庫(kù)，將一些小矩形放在畫布上，畫一些小箭頭來(lái)連接這些矩形，把所有的元件都調(diào)整一下讓它們看上去更好看一些——30分鐘過(guò)去了。
如果我們不喜歡紙上畫的東西，可以將它扔進(jìn)垃圾桶然后重新開始。然而用原型工具的話，扔掉一些東西就比較困難了，因?yàn)槲覀兓ㄙM(fèi)了時(shí)間和努力去創(chuàng)建它——就算那個(gè)想法不是最好的，重新開始也更困難。反過(guò)來(lái)說(shuō)，紙上手繪的內(nèi)容則成本低廉，實(shí)現(xiàn)迅速。
捕捉和評(píng)估設(shè)想最快的方式就是將它勾畫出來(lái)。
不過(guò)俗話說(shuō)，一圖勝千言。草圖可以讓我們與合作者以及項(xiàng)目關(guān)注人們一塊探討對(duì)項(xiàng)目當(dāng)前的理解。我們可以使用很多不同的表現(xiàn)方式去詮釋項(xiàng)目不同的方面（下一個(gè)章節(jié)中我們會(huì)介紹最常用的一種方式）。在《餐巾紙的背后》一書中，Dan Roam提到：
“圖片可以表示很復(fù)雜的概念，概括大量信息，并以一種我們?nèi)菀卓慈菀桌斫獾姆绞匠尸F(xiàn)，它們?cè)诔吻搴徒鉀Q各種問(wèn)題上都是有用的?！?/span>
我們的小伙伴可以直接指出我們想法上的鴻溝，共同討論可能的解決方案和替代方案。他們可以很好的理解我們的草圖，并且在想法的細(xì)節(jié)上給出一些反饋。向其他人展示我們的想法也會(huì)讓我們反思自己的想法。借此展示想法，我們會(huì)看到錯(cuò)誤的地方以及找到更好的替代方案。
草圖作為一種有力的工具可以讓項(xiàng)目關(guān)注人們?cè)谠O(shè)計(jì)過(guò)程中盡早參與進(jìn)來(lái)。在定義的過(guò)程中，以下雞生蛋的問(wèn)題非常典型：項(xiàng)目關(guān)注人們?cè)诳吹揭恍┛梢暬慕鉀Q方案之前，是沒(méi)法制定一套完整的需求的，但是我們?cè)O(shè)計(jì)師在沒(méi)確定需求穩(wěn)定完善之前，是不愿意開工去實(shí)施解決方案的——我們想要去避免不必要的反復(fù)修訂，因?yàn)檫@會(huì)導(dǎo)致額外的工作。
擺脫這種困境的一種方法是在協(xié)作式工作坊里來(lái)手繪可能的解決方案，比如這一期設(shè)計(jì)工作室（參看Will Evans的文章“Introduction to Design Studio Methodology“）。我們可以帶領(lǐng)項(xiàng)目關(guān)注人們一步步的理解我們的概念（和其他備案），向他們解釋他們的需求對(duì)設(shè)計(jì)的影響。
草圖的入門門檻也很低，非設(shè)計(jì)師也可以參與。（到底是否通過(guò)手繪的方式與項(xiàng)目關(guān)注人討論，即取決于個(gè)人偏好，也存在許多爭(zhēng)議。你需要自己做決定。）
由于草稿是粗略不完整的，給出反饋也就更加容易。一些人會(huì)隱忍不發(fā)，直到看到一個(gè)看上去完成度很好的頁(yè)面，因?yàn)樗麄冋J(rèn)為所有的工作必須要有一定的深入才行。高保真的視覺(jué)效果也會(huì)分散大家的注意力——大家會(huì)更傾向于討論視覺(jué)效果或微妙細(xì)節(jié)，而不是聚焦在想法概念上。草圖會(huì)讓他們聚焦在核心概念上。
你唯一需要克服的就是不愿意將未經(jīng)打磨的作品展示給他人的心理障礙。
一個(gè)常見的誤區(qū)就是你的草圖必須要畫的很漂亮。但交互設(shè)計(jì)可不是上藝術(shù)課。你的草圖不需要看上去很漂亮；它們只需要表達(dá)出你的想法就可以。它們應(yīng)該是引發(fā)討論和催生想法的；它們并不是掛在墻上的藝術(shù)品。只要你會(huì)畫方框，箭頭，圓圈和簡(jiǎn)筆畫，你就可以畫草圖。正如Joshua Brewer在“Sketch, Sketch, Sketch”一文中提到：
“草圖不是最終目標(biāo)。最終目標(biāo)是在手繪過(guò)程中你學(xué)到了什么。所以即使你不會(huì)手繪也不用擔(dān)心?！?/span>
學(xué)習(xí)如何手繪不是本文的內(nèi)容，但是可以從以下的宣講、文章以及書目當(dāng)中學(xué)習(xí)到一些基礎(chǔ)：
現(xiàn)在，但愿我已經(jīng)說(shuō)服你認(rèn)同手繪應(yīng)該是你工作流程中的一部分了。讓我們聊一聊在移動(dòng)項(xiàng)目中手繪什么吧。
一開始，你需要為你的移動(dòng)應(yīng)用或網(wǎng)站收集不同的創(chuàng)意。開始繪制出針對(duì)一個(gè)關(guān)鍵頁(yè)面或其中一部分的各種版本。目標(biāo)有兩個(gè)：獲取大量不同的想法，同時(shí)加以探索和評(píng)價(jià)。想法越多，后期的選擇就越多。這個(gè)階段通常被稱為“發(fā)散式手繪”。
這個(gè)階段的手繪有一種有效的多頁(yè)模版的工具。它提供了一頁(yè)以內(nèi)繪制6個(gè)不同版本方案的空間，并且它留出了指引描述的空間。不同創(chuàng)意一起呈現(xiàn)，為后續(xù)的比較和討論提供便捷。
有很多在線模版（我最常使用Erik Loehfelm的模板）。選一個(gè)你喜歡的模板。
各種全局導(dǎo)航的變化方案線框稿
上面的截圖展示了關(guān)于一個(gè)App主菜單六個(gè)不同設(shè)計(jì)方案（順帶說(shuō)一句，它生動(dòng)地證明了我的草圖并不漂亮）。我并不總能想出6個(gè)不同版本（我喜歡告訴自己我是一個(gè)追求結(jié)構(gòu)的人），不過(guò)我會(huì)針對(duì)一個(gè)單頁(yè)面努力創(chuàng)造至少3種變化方案。因?yàn)檫@是一場(chǎng)頭腦風(fēng)暴，并且你會(huì)在后續(xù)的討論中需要多種選擇的可能性。在這里數(shù)量即朋友。
如果你碰巧才思枯竭，瀏覽一些手機(jī)UI圖冊(cè)去激發(fā)新思路（例如 Inspired UI, Pttrns, Lovely UI 和UI Parade）。它們演示了按主題或特性分組的解決方案（例如主菜單，聊天窗口）。匯集起你喜歡的草圖，組合成你自己的創(chuàng)意。
養(yǎng)成對(duì)每張草圖命名的習(xí)慣。這樣更容易標(biāo)注出方案之間的差別，并便于后續(xù)引用。我會(huì)增加說(shuō)明和標(biāo)注去解釋草圖以及它們后面貫穿的思路（比如優(yōu)點(diǎn)、缺點(diǎn)、與其他方案之間的抉擇、問(wèn)題、新特性，等等）。打標(biāo)簽和登記日期同樣是不錯(cuò)的習(xí)慣。
一旦你對(duì)一個(gè)界面繪制了多個(gè)版本的草稿時(shí)，就可以選擇最佳解決方案了。不幸的是，單一的草圖很難驗(yàn)證所有界面。大多數(shù)情況下，你需要糅合幾個(gè)創(chuàng)意或創(chuàng)意中的不同方面形成優(yōu)勝概念。為了達(dá)到這個(gè)目的，你需要通過(guò)繪制更詳盡的草圖來(lái)深入探究。利用空白區(qū)域做標(biāo)注。草草記下全部問(wèn)題、新想法、要點(diǎn)或不明之處，以及留待討論的事項(xiàng)。這些都將幫助他人更好的理解你的思路。這項(xiàng)工作通常被稱為“收斂式手繪”。
更多關(guān)于發(fā)散式手繪和收斂式手繪的信息，請(qǐng)查看 Leah Buley在2010年失敗者大會(huì)（FailCon大會(huì)）的演說(shuō)：“Good Design Faster”，和Brandon Shauer的文章“Sketchboards: Discover Better + Faster UX Solutions”。
在歸結(jié)幾個(gè)關(guān)鍵頁(yè)面的創(chuàng)意后，下一步就要探索它們?nèi)绾闻浜鲜褂昧?。為此，?chuàng)建一些UI流程（也就是一系列的關(guān)鍵頁(yè)面）展示一個(gè)用戶將如何通過(guò)你的解決方案完成一則任務(wù)。UI流程強(qiáng)調(diào)了使用什么界面元素（例如點(diǎn)擊哪個(gè)按鈕或使用何種手勢(shì)），系統(tǒng)如何反饋（例如系統(tǒng)通過(guò)一個(gè)動(dòng)畫、轉(zhuǎn)場(chǎng)、彈出框或新頁(yè)面做出反饋）。它們同樣展示關(guān)鍵界面的不同狀態(tài)（例如，最初的空白然后填入內(nèi)容）。
你可以視覺(jué)化呈現(xiàn)一個(gè)UI流程中的不同結(jié)果（例如搜索有結(jié)果頁(yè)和搜索無(wú)結(jié)果頁(yè)）。你的流程最好不再僅僅是單線。不同的分支流程將展示不同的結(jié)果。不過(guò)要盡量限制單個(gè)UI流程中分支的數(shù)量。每增加一個(gè)分支都會(huì)提升復(fù)雜度，讓你的流程難以理解，也令它們很難被解釋清楚。
UI流程視覺(jué)化呈現(xiàn)了用戶如何從A到B的過(guò)程。
你不需要繪出所有的用例，選擇重要且被使用最多的用例。帕累托原則是個(gè)很好的標(biāo)準(zhǔn)：20%的功能會(huì)在80%的時(shí)間里被使用到。
我通常從一則重要用例開始繪制并最終解決它。我會(huì)強(qiáng)調(diào)出各個(gè)界面之間的交互，通常用箭頭連接彼此。我會(huì)解釋每一步驟并標(biāo)記重要頁(yè)面。同樣，我會(huì)寬泛地做上注釋。
關(guān)于如何激發(fā)手機(jī)界面和UI流程繪制創(chuàng)意，請(qǐng)查看Gisele Muller的文章“Inspiring UI Wireframe Sketches”； MOObileFrames 一個(gè)提供手機(jī)界面線框圖的博客；Wireframes，Jakub Linowski的個(gè)人站點(diǎn)。你也可以將Jakub的Interactive Sketching Notation（PDF文檔）運(yùn)用到你的UI流程中。
為了給你更多的上下文環(huán)境，并演示上文提及的三種方式之間的關(guān)系，現(xiàn)在提供一個(gè)典型手繪的步驟分解：
你是否發(fā)現(xiàn)，這里有很多的“為什么”。這是因?yàn)?strong>手繪是為了在提出解決方案的同時(shí)增進(jìn)對(duì)問(wèn)題的理解。在手繪后寫下繪制過(guò)程中產(chǎn)生的的問(wèn)題。它們會(huì)指引你走向正確的方向。
在創(chuàng)建關(guān)鍵頁(yè)面和核心用例的草圖后，你會(huì)希望在真實(shí)的手機(jī)上試驗(yàn)?zāi)愕母拍盍?。?a style="text-decoration:none;color:#666666;">Pop和Protosketch實(shí)現(xiàn)了導(dǎo)入草圖的照片，將它們轉(zhuǎn)變成原型。這種超快的低保真方法可以對(duì)交互方案找到一些感覺(jué)。這兩款應(yīng)用都允許你定義可點(diǎn)擊熱區(qū)和頁(yè)面的切換，這令得交互原型更真實(shí)。
此外，可以選擇導(dǎo)入頁(yè)面到像Axure這類更高級(jí)的軟件中生成原型。
無(wú)論你選擇什么工具，你的目標(biāo)是在真實(shí)的手機(jī)上用很小的代價(jià)快速測(cè)試原型。
手繪可以幫助你更好的理解問(wèn)題并可視化潛在的解決方案。這是一種快速且省錢的頭腦風(fēng)暴方式，同時(shí)它也在鎖定方案前測(cè)試很多的概念。手繪加速了概念創(chuàng)想和反復(fù)階段，在方案變更較容易的階段實(shí)現(xiàn)了早期問(wèn)題反饋。
在你下次手繪環(huán)節(jié)中，請(qǐng)牢記以下原則。它們能幫助你保持正確：
手繪愉快！
掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái)）
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com