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