來源：smashingmagazine

-翻譯渣，求輕噴

手機UX設計越來越成熟。一個衡量它的方法是，看下我們所支配的工具。我們用原型工具（如：Balsamiq, Axure, Fireworks）建立線框圖和可點擊原型(click-dummies)，幫助我們解釋特定的UX?？鐬g覽器框架(Cross-browser frameworks) （如：PhoneGap, Zurb Foundation, jQuery Mobile)幫我們用Web自然語言（如：HTML, CSS, JavaScript）來建立原型。

WHY？一個使用草圖的案例

我們似乎很快就能達到設計好體驗的新高度。然而，這些工具伴隨著隱形成本：它們誘惑我們跳過去創(chuàng)造一個精心設計產(chǎn)品的關(guān)鍵——這花費了很多時間去了解我們遇到的問題。

這就是為什么我建議，在你跟你最愛的工具著急之前，先去畫草圖來了解問題，繼而提出概念。

現(xiàn)在，你可能想到下面的某種情況

• 我們有一個很緊的限期，已經(jīng)沒有時間去涂鴉了?，F(xiàn)在就要開始去做了。
• 用[ 填一個你喜歡的工具 ]來做設計會更快。我需要更快地得到結(jié)果。
• 我們需要把結(jié)果交給我們的[ 客戶或合作伙伴、同事 ]。不能把手繪草圖給他們看。
• Sorry, 我不會畫。

這些反對理由我不止聽過很多次，我也跟我自己說過很多遍。

確定問題和解決方案

草圖給我們探索問題的空間，同時確立解決方案的空間。它構(gòu)筑我們對問題的理解，同時幫助我們找出可能的解決方案。

當我們畫出我們的想法、新的靈感就會出現(xiàn)。含糊的和忽略細節(jié)的草圖可以孕育靈感。這里，含糊是好事，因為我們會在腦海中補充所有空白。（這叫腦補，對吧？）。這就是草圖的“衍生力”：它捕獲我們已有的想法，激發(fā)新的火花。就像Bill Buxton在用戶體驗草圖設計(Sketching User Experiences)里面說過：

從草圖里學到的，大部分基于草圖天然含糊不清。它們不會詳細說明所有的事，而是參與其中、鼓勵，各種由創(chuàng)造者不經(jīng)意間整合到草圖上的東西。

通過用草圖畫出各種解決方案，我們可以探索它們，而不用交付它們。這給我們新的視角，提出新的問題。畫草圖本質(zhì)上就是頭腦風暴的練習。

畫草圖的「成本」

把東西從腦海中拿出的最快方法就是拿一支筆、一張紙，然后迅速畫出來。在原型工具上做同樣的事會花更多的時間：首先創(chuàng)建一個新項目，然后選擇正確的庫；在畫布上畫矩形，然后畫箭頭來連接這些矩形；調(diào)整一下所有的東西，讓它們好看些；然后……然后30分鐘，甚至更長的時間過去了。

如果不喜歡畫在紙上的東西，可以拋到垃圾桶里面，再重新畫一個。用原型工具的話，所有的事都變困難了，因為在上面花費了的時間、力氣——即使這不是一個好的靈感。重來就更難了。相反，紙質(zhì)草圖更廉價、更快。

草圖，也是交流的工具

草圖是個強大的工具，讓利益相關(guān)者參與設計過程。接下來的「雞」「蛋」問題就是一個典型：利益相關(guān)者在沒看到解決方案的視覺范例之前，不能規(guī)劃一個完整的需求。但是設計師不愿意在明確需求之前開始做出解決方案——我們盡可能避免修改，因為這會導致額外的工作。

擺脫這種困境的方法就是在一個合作性的工作室里，畫出可能性方案的草圖，如：設計工作室 (詳見Will Evans的文章“介紹設計工作室的方法論”)。我們可以與利益相關(guān)者一步步研究我們的概念（包括可選方案），向他們解釋他們的需求的設計效果。

畫草圖入門門檻低，允許非設計師參與。（是否分發(fā)筆給利益相關(guān)者是個個人品味和受爭議的問題。你要整理好自己的思緒。）

由于草圖是粗糙和未完成的，反饋也是相對容易。有些人忍住，直到看到一頁漂亮的完成度高的版本，因為他們認為所有的工作都必須落實下來。高保真的視覺會分散人們的注意力——他們更多地評價視覺設計或細節(jié)。草圖才讓他們專注于核心概念。

你所需要克服的事是你不愿意把粗糙的的作品展示給別人看。

畫草圖不是畫畫

普遍誤解草圖必須要漂亮，但交互設計不是藝術(shù)班。你的草圖不需要好看；它們只需要承載你的想法。它們要能引發(fā)討論和形成想法；它們不太可能裝裱起來，掛在墻上。只要你能畫矩形、箭頭、圓形和簡筆畫就夠了。就像Joshua Brewer在“草圖、草圖、草圖”上說：

草圖并不是最終目標。最終目標是繪制你在草圖中得到的東西。所以不必擔心你會畫不好。

學習怎么去畫草圖已經(jīng)超出本篇文章的范圍，但是下面的一些展示、文章、書籍都挺基礎：

• “The ‘Art’ of Sketching Interfaces” (slides), Jason Mesut and Sam Smith
• “Sketching 101” (slides), 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)

怎么畫草圖（不是教畫畫-。-）

我相信畫草圖已經(jīng)成為你工作流程的一部分，我們說一下怎么為手機項目畫草圖

發(fā)散性草圖

一開始，你可能收集關(guān)于手機應用（或網(wǎng)站）的不同想法。開始畫出應用某一個頁面（或一部分）的各個版本。你有兩個目標：形成很多想法，同時探索和評估它們。你得到越多的想法，你就有更多的選擇。這個過程通常叫“發(fā)散性草圖(divergent sketching)”。

對于這類型畫草圖，有一個很有用的工具叫，多頁模板(multi-page template)。它提供足夠的空間在同一頁上畫6個版本，它還在屏幕范圍提供一些指導。通過展示不同的想法，遲些就更容易比較和討論它們。

網(wǎng)上有很多現(xiàn)成的模板（通常我用Erik Loehfelm的）。選擇你喜歡的就好。

上面的截圖展示一個應用主菜單的6種想法（生動形象地證明我的草圖并不好看）。我通常不會提出6個版本，但是我至少會做3個版本。因為這是頭腦風暴，你希望有更多選擇，數(shù)量才是你想要的。

如果你剛好缺乏想法，瀏覽一些手機UI的畫廊來獲得靈感（如：Inspired UI, Pttrns, Lovely UI, UI Parade）。它們通過標題、特征（如：主菜單、對話框）來分類陳列解決方案。吸收你喜歡的東西，把它們糅合到你的想法里。

養(yǎng)成給草圖加標題的習慣。這貨讓你更好地區(qū)分它們和再次找到它們。我添加注釋來解釋草圖和它們背后思考過程（長處、不足、與其他概念相比較權(quán)衡、問題、新特色等等）。標簽和日程表也是的做法。

收斂性草圖

當你已經(jīng)有很多不同版本的草圖時，選一個最佳的方案。不幸的是，單是一幅草圖很難代表所有的情況。大部分情況下，你需要整合想法、或者部分想法到一個優(yōu)勝概念中。你需要通過添加更多的細節(jié)來進一步探索。用開白的地方做注釋。寫下所有問題、想法、重要的和不清晰的地方，所有即將討論的問題。這會讓別人更好地了解你的思考過程。這個環(huán)節(jié)通常叫“收斂性草圖(convergent sketching)”。

關(guān)于發(fā)散性草圖和收斂性草圖的更多資訊，請看Leah Buley’s presentation from FailCon 2010, “Good Design Faster” 和Brandon Shauer’s article “Sketchboards: Discover Better + Faster UX Solutions”。

生成UI流程圖

在你把想法歸納成一套的關(guān)鍵界面后，下一步就是探索它們怎么聯(lián)系在一起。生成一些UI流程圖(UI flows)（也就是一系列關(guān)鍵幀）來展示用戶怎么用你的解決方案來完成任務。UI流程圖標識界面中哪些元素被使用（如：哪個按鈕被點擊過，哪個手勢被用過）和系統(tǒng)反饋（如：動畫、過渡、彈出對話框或新界面）。同時也展示關(guān)鍵界面的不同狀態(tài)（如：一開始的空白、稍后被內(nèi)容填充滿）。

你不適用UI流程圖來可以想象不同的結(jié)果（如：一列搜索結(jié)果vs一個空白列表）。你的流程圖不再是線性的；不同的分支會有不同的結(jié)果。但盡量限制一個流程圖中分支的數(shù)量。每一個分支都會增加復雜度，是你的流程圖更難被理解。同時也會更難去解釋它們。

你不需要畫出所以用例的草稿；通常挑重要的來畫。帕雷托法則提出一個好方法：畫出20％的功能就可以應對80％的情況。

我通常從一個關(guān)鍵用例開始畫，嘗試找出一個解決它的方案。我會在界面上標識交互和用箭頭把它們聯(lián)系在一起。我解釋每一個步驟和標簽，通常我會瘋狂做注釋。

閱讀以下文章，將會對怎么畫手機界面和UI流程圖的草圖有更深印象。Gisele Muller’s article “Inspiring UI Wireframe Sketches”; MOObileFrames——一個展示手機線框圖草稿的博客；WireframesJakub Linowski的網(wǎng)站。你也可以在你的流程圖中用Jakub’s “Interactive Sketching Notation” (PDF) 。

要采取的步驟

這樣有一些情景，將會告訴你上述的3步怎么互相聯(lián)系。下面是一些典型草圖的步驟：

• 列出你有的所有消息和你想要收集的信息。
• 先畫一套草圖（如：不同的關(guān)鍵界面或UI流程圖）。
• 自己檢查草圖
  1. 每一套草圖的長處和缺點分別時什么？
  2. 所有的UI元素和數(shù)據(jù)都始終如一？（也就是相同的元素用于相同的任務）
  3. 你用相同的方式來展示數(shù)據(jù)？
  4. 互動選項是否清晰？
• 從別人那獲取反饋。從同事開始，如果可以的話，從潛在客戶那獲取。
  1. 他們的第一印象是什么？
  2. 他們最喜歡什么？為什么？
  3. 他們不喜歡什么？為什么？
  4. 你的草圖中有哪些不清晰的地方？
  5. 他們有什么建議？他們?yōu)槭裁磿@樣建議？
• 對概念進行迭代更新
  1. 你可以把不同概念的長處整合成一個新概念嗎？
  2. 這些草圖可以被闡明嗎？
  3. 其中一些步驟可以去掉或簡化嗎？
• 根據(jù)最初的反饋堅持結(jié)果
  1. 會出現(xiàn)新問題嗎？
  2. 你得到什么新的見解？

你可以看到這里有很多「為什么？」的問題。這是因為畫草圖是為了嘗試去了解問題，同時解決它們。在草圖旁邊寫下這些草圖遇到的問題，這回引導你得到正確的概念。

草圖之后的事

在你畫完關(guān)鍵界面的草圖和主要用例后，你可能希望在手機上應用你的概念。應用（如：Pop, Protosketch）可以讓你導入草圖，然后把它們做出原型。這是一個快速、低保真的方法讓你對整個概念的交互有直觀感受，這會讓原型交互變得更為真實。

或者，把你的界面導入到更多功能的工具中（如：Axure），在那做一個原型。

不管你用什么方法。你的目的是真實手機上快速測試你的概念和效果。

結(jié)論（Take-Aways）

草圖幫你更好地理解你試圖解決的問題，讓設想可能的解決方案。這是一個快速、廉價的方法去做頭腦風暴，在你交付之前去做很多UI想法的測試。草圖加速概念的生成、迭代界面，讓反饋來的更快一些，也更容易做改變。

在你下一個草圖中，記著下列的一些原則。它們會讓你走上正軌：

• 懶一點
  不要試圖從新發(fā)明車輪，用模板去指導你畫草圖。
• 激發(fā)靈感
  流量設計樣式庫，手機UI畫廊，線框圖展示。吸收你喜歡的東西，把它們糅合到你的想法了，想出一些新東西。
• 不要追求完美
  你的草圖需要貫穿你的想法。不要在（不重要）的細節(jié)上迷失自我。
• Pareto 原則
  一小套方案的特色會被多次使用。專注在這上面。20％的解決方案就能應對80％的問題。
• 一致性
  用現(xiàn)有草圖符合或自己開發(fā)一套。這會讓你的草圖變得更可靠，同時也會理解的的設計，這會減少看草圖的時間。
• 注釋
  在畫草圖的過程中，新的問題、想法會浮現(xiàn)出來。記下來，不然就會失去他們。
• 開拓思維
  公開你的草圖。把它們釘在墻上，把他們展示給其他人看來獲取反饋。
• 有疑惑的時候，就多畫幾張
  如果你對一個解決方案感到疑惑，那就畫一個新版本。列出它們的正反兩面(pros and cons)，收集反饋，看下哪個更好。

享受草圖！