起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識手繪移動端極致體驗(yàn)
(Lennart Hennigs?著 ? ? Ellazou & Charrywang譯 ? ?Crispinzhu校正 ? ??查看原文?? 轉(zhuǎn)載請注明出處)
移動端用戶體驗(yàn)設(shè)計(jì)正日趨成熟。衡量這一點(diǎn)的方法之一就是看工具。原型工具可以讓我們創(chuàng)建線框圖以及點(diǎn)擊事件，比如Balsamiq、Axure以及Fireworks，幫助我們詮釋目標(biāo)用戶體驗(yàn)。跨瀏覽器的框架工具如PhoneGap、Zurb Foundation以及jQuery Mobile可以幫助我們用互聯(lián)網(wǎng)本地化語言來創(chuàng)建原型：HTML、CSS以及JavaScript。
為什么？舉個(gè)草圖的案例
與以往幾乎沒有時(shí)間來設(shè)計(jì)極致的體驗(yàn)來比，我們似乎處于一個(gè)相對更好的處境。然而，這些工具也伴隨著隱藏成本：它們引導(dǎo)我們跳過了創(chuàng)造一個(gè)良好設(shè)計(jì)的產(chǎn)品必經(jīng)的關(guān)鍵步驟——也就是花時(shí)間去理解我們所面對的問題。
這也就是為什么我會建議在打開你鐘愛的工具之前，先手繪著理解問題并想出概念。
現(xiàn)在，你可能想的是如下問題：
“我們的截止時(shí)間很緊迫，根本沒有時(shí)間再去涂鴉。我們必須馬上開始?！?br />
“在XX工具里設(shè)計(jì)是目前為止比較快的方式，我必須很快能看到結(jié)果。”
“我們必須把結(jié)果給我們的客戶或合作伙伴或同事看。我們不能給他們看手繪
的線稿。”
“不好意思，我真的不會畫畫?！?/p>
我不僅聽別人幾次這樣反對，我對自己也這么說過。
定義問題和解決方案
手繪可以讓我們一邊探索問題一邊定義解決方案。它可以結(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)造者們不自覺的融入各種不同的解釋?！?/p>
通過手繪不同的解決方案，我們不用立刻實(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)，它們在澄清和解決各種問題上都是有用的?！?/p>
我們的小伙伴可以直接指出我們想法上的鴻溝，共同討論可能的解決方案和替代方案。他們可以很好的理解我們的草圖，并且在想法的細(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)心?！?/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)說服你認(rèn)同手繪應(yīng)該是你工作流程中的一部分了。讓我們聊一聊在移動項(xiàng)目中手繪什么吧。
發(fā)散式手繪
一開始，你需要為你的移動應(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”。
創(chuàng)建UI流程
在歸結(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è)典型手繪的步驟分解：
- 列出已有的信息和確立的目標(biāo)
- 繪制第一組草圖（例如一個(gè)關(guān)鍵界面的各種方案或一個(gè)初始UI流程）
- 自我復(fù)查草圖
每個(gè)方案的優(yōu)點(diǎn)和缺點(diǎn)是什么？
UI組件和數(shù)據(jù)是否保持一致？（就是說同一任務(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)?strong>手繪是為了在提出解決方案的同時(shí)增進(jìn)對問題的理解。在手繪后寫下繪制過程中產(chǎn)生的的問題。它們會指引你走向正確的方向。
超越手繪
在創(chuàng)建關(guān)鍵頁面和核心用例的草圖后，你會希望在真實(shí)的手機(jī)上試驗(yàn)?zāi)愕母拍盍?。?a >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é)中，請牢記以下原則。它們能幫助你保持正確：
- 偷懶
別嘗試去再造一個(gè)輪子。手繪時(shí)利用現(xiàn)成的模版。 - 激發(fā)靈感
瀏覽設(shè)計(jì)范式庫和手機(jī)UI圖庫，查看線框圖示例。挑選你喜歡的，糅合你自己的想法，創(chuàng)造一些新方案。 - 適可而止
你的手繪要能傳達(dá)你的想法。不要迷失在（不重要的）細(xì)節(jié)中。 - 帕累托怎么用？
你解決方案中只有小部分特性將被最頻繁地使用。聚焦在它們上面。想清楚哪20%的方案會在80%的時(shí)間里被用到？ - 保持統(tǒng)一性
用已有的手繪標(biāo)記或創(chuàng)建一種你自己的方式。這樣是的你的手繪更可靠。同事能較好地理解你的風(fēng)格，花更少的時(shí)間瀏覽完手繪并給予反饋。 - 詳盡注釋
手繪過程中，會涌現(xiàn)各種新命題、想法、問題。記下它們，否則，你就忘了。 - 開放心態(tài)
將你的手繪公之于眾。把它們釘在墻上，并勤于向他人演示方案并獲取反饋。 - 陷入懷疑時(shí)，繼續(xù)手繪
當(dāng)你不能確信某個(gè)方案時(shí)，重新開始衍化方案。列舉出它們的利弊并從反饋中想清楚什么是最佳方案。
手繪愉快！
作者：騰訊mxd
很不錯(cuò)的文章