移動(dòng)端用戶體驗(yàn)設(shè)計(jì)正日趨成熟。衡量這一點(diǎn)的方法之一就是看工具。原型工具可以讓我們創(chuàng)建線框圖以及點(diǎn)擊事件，比如Balsamiq、Axure以及Fireworks，幫助我們?cè)忈屇繕?biāo)用戶體驗(yàn)。跨瀏覽器的框架工具如PhoneGap、Zurb Foundation以及jQuery Mobile可以幫助我們用互聯(lián)網(wǎng)本地化語(yǔ)言來(lái)創(chuàng)建原型：HTML、CSS以及JavaScript。

為什么？舉個(gè)草圖的案例

與以往幾乎沒有時(shí)間來(lái)設(shè)計(jì)極致的體驗(yàn)來(lái)比，我們似乎處于一個(gè)相對(duì)更好的處境。然而，這些工具也伴隨著隱藏成本：它們引導(dǎo)我們跳過了創(chuàng)造一個(gè)良好設(shè)計(jì)的產(chǎn)品必經(jīng)的關(guān)鍵步驟——也就是花時(shí)間去理解我們所面對(duì)的問題。
這也就是為什么我會(huì)建議在打開你鐘愛的工具之前，先手繪著理解問題并想出概念。
現(xiàn)在，你可能想的是如下問題：
“我們的截止時(shí)間很緊迫，根本沒有時(shí)間再去涂鴉。我們必須馬上開始?！?br>“在XX工具里設(shè)計(jì)是目前為止比較快的方式，我必須很快能看到結(jié)果。”
“我們必須把結(jié)果給我們的客戶或合作伙伴或同事看。我們不能給他們看手繪
的線稿?！?br>“不好意思，我真的不會(huì)畫畫。”

我不僅聽別人幾次這樣反對(duì)，我對(duì)自己也這么說(shuō)過。

定義問題和解決方案

手繪可以讓我們一邊探索問題一邊定義解決方案。它可以結(jié)構(gòu)化我們目前對(duì)問題的理解，同時(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)造者們不自覺的融入各種不同的解釋?！?/p>

通過手繪不同的解決方案，我們不用立刻實(shí)現(xià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分鐘過去了。
如果我們不喜歡紙上畫的東西，可以將它扔進(jìn)垃圾桶然后重新開始。然而用原型工具的話，扔掉一些東西就比較困難了，因?yàn)槲覀兓ㄙM(fèi)了時(shí)間和努力去創(chuàng)建它——就算那個(gè)想法不是最好的，重新開始也更困難。反過來(lái)說(shuō)，紙上手繪的內(nèi)容則成本低廉，實(shí)現(xiàn)迅速。

捕捉和評(píng)估設(shè)想最快的方式就是將它勾畫出來(lái)。

把草圖作為溝通工具

不過俗話說(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各種問題上都是有用的?！?/p>

我們的小伙伴可以直接指出我們想法上的鴻溝，共同討論可能的解決方案和替代方案。他們可以很好的理解我們的草圖，并且在想法的細(xì)節(jié)上給出一些反饋。向其他人展示我們的想法也會(huì)讓我們反思自己的想法。借此展示想法，我們會(huì)看到錯(cuò)誤的地方以及找到更好的替代方案。

把草圖作為合作工具

草圖作為一種有力的工具可以讓項(xiàng)目關(guān)注人們?cè)谠O(shè)計(jì)過程中盡早參與進(jìn)來(lái)。在定義的過程中，以下雞生蛋的問題非常典型：項(xiàng)目關(guān)注人們?cè)诳吹揭恍┛梢暬慕鉀Q方案之前，是沒法制定一套完整的需求的，但是我們?cè)O(shè)計(jì)師在沒確定需求穩(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ì)師也可以參與。（到底是否通過手繪的方式與項(xiàng)目關(guān)注人討論，即取決于個(gè)人偏好，也存在許多爭(zhēng)議。你需要自己做決定。）
由于草稿是粗略不完整的，給出反饋也就更加容易。一些人會(huì)隱忍不發(fā)，直到看到一個(gè)看上去完成度很好的頁(yè)面，因?yàn)樗麄冋J(rèn)為所有的工作必須要有一定的深入才行。高保真的視覺效果也會(huì)分散大家的注意力——大家會(huì)更傾向于討論視覺效果或微妙細(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)是在手繪過程中你學(xué)到了什么。所以即使你不會(huì)手繪也不用擔(dān)心?！?/p>

學(xué)習(xí)如何手繪不是本文的內(nèi)容，但是可以從以下的宣講、文章以及書目當(dāng)中學(xué)習(xí)到一些基礎(chǔ)：

• “The ‘Art’ of Sketching Interfaces”（PPT文檔），作者Jason Mesut和Sam Smith
• “Sketching 101” （PPT文檔），作者Jackson Fox
• “The Messy Art of UX Sketching”，作者Peiter Buick
• 《Sketching User Experiences: The Workbook》，作者Saul Greenberg，Sheelagh Carpendale，Nicolai Marquardt，Bill Buxton（Morgan Kaufman出版：2011）

如何手繪

現(xiàn)在，但愿我已經(jīng)說(shuō)服你認(rèn)同手繪應(yīng)該是你工作流程中的一部分了。讓我們聊一聊在移動(dòng)項(xiàng)目中手繪什么吧。

發(fā)散式手繪

一開始，你需要為你的移動(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)的人），不過我會(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)、與其他方案之間的抉擇、問題、新特性，等等）。打標(biāo)簽和登記日期同樣是不錯(cuò)的習(xí)慣。

收斂式手繪

一旦你對(duì)一個(gè)界面繪制了多個(gè)版本的草稿時(shí)，就可以選擇最佳解決方案了。不幸的是，單一的草圖很難驗(yàn)證所有界面。大多數(shù)情況下，你需要糅合幾個(gè)創(chuàng)意或創(chuàng)意中的不同方面形成優(yōu)勝概念。為了達(dá)到這個(gè)目的，你需要通過繪制更詳盡的草圖來(lái)深入探究。利用空白區(qū)域做標(biāo)注。草草記下全部問題、新想法、要點(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”。

創(chuàng)建UI流程

在歸結(jié)幾個(gè)關(guān)鍵頁(yè)面的創(chuàng)意后，下一步就要探索它們?nèi)绾闻浜鲜褂昧恕榇?，?chuàng)建一些UI流程（也就是一系列的關(guān)鍵頁(yè)面）展示一個(gè)用戶將如何通過你的解決方案完成一則任務(wù)。UI流程強(qiáng)調(diào)了使用什么界面元素（例如點(diǎn)擊哪個(gè)按鈕或使用何種手勢(shì)），系統(tǒng)如何反饋（例如系統(tǒng)通過一個(gè)動(dòng)畫、轉(zhuǎn)場(chǎng)、彈出框或新頁(yè)面做出反饋）。它們同樣展示關(guān)鍵界面的不同狀態(tài)（例如，最初的空白然后填入內(nèi)容）。
你可以視覺化呈現(xiàn)一個(gè)UI流程中的不同結(jié)果（例如搜索有結(jié)果頁(yè)和搜索無(wú)結(jié)果頁(yè)）。你的流程最好不再僅僅是單線。不同的分支流程將展示不同的結(jié)果。不過要盡量限制單個(gè)UI流程中分支的數(shù)量。每增加一個(gè)分支都會(huì)提升復(fù)雜度，讓你的流程難以理解，也令它們很難被解釋清楚。

UI流程視覺化呈現(xiàn)了用戶如何從A到B的過程。

你不需要繪出所有的用例，選擇重要且被使用最多的用例。帕累托原則是個(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è)典型手繪的步驟分解：

• 列出已有的信息和確立的目標(biāo)
• 繪制第一組草圖（例如一個(gè)關(guān)鍵界面的各種方案或一個(gè)初始UI流程）
• 自我復(fù)查草圖

每個(gè)方案的優(yōu)點(diǎn)和缺點(diǎn)是什么？

UI組件和數(shù)據(jù)是否保持一致？（就是說(shuō)同一任務(wù)中是否使用了相同的組件）

數(shù)據(jù)展示方式是否相同？

交互選項(xiàng)是否明確？

• 征詢他人的意見。從同事開始再到潛在用戶。

他們的第一印象是什么？

他們最喜歡哪個(gè)？為什么？

最不喜歡哪個(gè)？為什么？

草圖中哪些信息他們不清楚？

他們提了什么改進(jìn)意見？為什么？

• 重審各個(gè)概念方案

是否可以合并各個(gè)概念方案的優(yōu)點(diǎn)于一體？

草圖能進(jìn)一步清理嗎？

步驟能進(jìn)一步縮減嗎？

• 依據(jù)最初的反饋再次復(fù)查

是否引入新的問題？

你可以從中得到什么啟發(fā)？

你是否發(fā)現(xiàn)，這里有很多的“為什么”。這是因?yàn)槭掷L是為了在提出解決方案的同時(shí)增進(jìn)對(duì)問題的理解。在手繪后寫下繪制過程中產(chǎn)生的的問題。它們會(huì)指引你走向正確的方向。

超越手繪

在創(chuàng)建關(guān)鍵頁(yè)面和核心用例的草圖后，你會(huì)希望在真實(shí)的手機(jī)上試驗(yàn)?zāi)愕母拍盍?。像Pop和Protosketch實(shí)現(xiàn)了導(dǎo)入草圖的照片，將它們轉(zhuǎn)變成原型。這種超快的低保真方法可以對(duì)交互方案找到一些感覺。這兩款應(yīng)用都允許你定義可點(diǎn)擊熱區(qū)和頁(yè)面的切換，這令得交互原型更真實(shí)。
此外，可以選擇導(dǎo)入頁(yè)面到像Axure這類更高級(jí)的軟件中生成原型。
無(wú)論你選擇什么工具，你的目標(biāo)是在真實(shí)的手機(jī)上用很小的代價(jià)快速測(cè)試原型。

便攜小貼士

手繪可以幫助你更好的理解問題并可視化潛在的解決方案。這是一種快速且省錢的頭腦風(fēng)暴方式，同時(shí)它也在鎖定方案前測(cè)試很多的概念。手繪加速了概念創(chuàng)想和反復(fù)階段，在方案變更較容易的階段實(shí)現(xiàn)了早期問題反饋。
在你下次手繪環(huán)節(jié)中，請(qǐng)牢記以下原則。它們能幫助你保持正確：

• 偷懶

別嘗試去再造一個(gè)輪子。手繪時(shí)利用現(xiàn)成的模版。

• 激發(fā)靈感

瀏覽設(shè)計(jì)范式庫(kù)和手機(jī)UI圖庫(kù)，查看線框圖示例。挑選你喜歡的，糅合你自己的想法，創(chuàng)造一些新方案。

• 適可而止

你的手繪要能傳達(dá)你的想法。不要迷失在（不重要的）細(xì)節(jié)中。

• 帕累托怎么用？

你解決方案中只有小部分特性將被最頻繁地使用。聚焦在它們上面。想清楚哪20%的方案會(huì)在80%的時(shí)間里被用                    到？

• 保持統(tǒng)一性

用已有的手繪標(biāo)記或創(chuàng)建一種你自己的方式。這樣是的你的手繪更可靠。同事能較好地理解你的風(fēng)格，花更少的時(shí)間瀏覽完手繪并給予反饋。

• 詳盡注釋

手繪過程中，會(huì)涌現(xiàn)各種新命題、想法、問題。記下它們，否則，你就忘了。

• 開放心態(tài)

將你的手繪公之于眾。把它們釘在墻上，并勤于向他人演示方案并獲取反饋。

• 陷入懷疑時(shí)，繼續(xù)手繪

當(dāng)你不能確信某個(gè)方案時(shí)，重新開始衍化方案。列舉出它們的利弊并從反饋中想清楚什么是最佳方案。

手繪愉快！

內(nèi)容源自：騰訊MXD

(Lennart Hennigs 著 Ellazou & Charrywang譯 Crispinzhu校正 查看原文 )