來(lái)源：smashingmagazine

-翻譯渣，求輕噴

手機(jī)UX設(shè)計(jì)越來(lái)越成熟南蹂。一個(gè)衡量它的方法是犬金，看下我們所支配的工具。我們用原型工具（如：Balsamiq, Axure, Fireworks）建立線框圖和可點(diǎn)擊原型(click-dummies)，幫助我們解釋特定的UX晚顷》寤铮跨瀏覽器框架(Cross-browser frameworks) （如：PhoneGap, Zurb Foundation, jQuery Mobile)幫我們用Web自然語(yǔ)言（如：HTML, CSS, JavaScript）來(lái)建立原型。

WHY该默？一個(gè)使用草圖的案例

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

這就是為什么我建議匣摘，在你跟你最?lèi)?ài)的工具著急之前，先去畫(huà)草圖來(lái)了解問(wèn)題裹刮，繼而提出概念音榜。

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

• 我們有一個(gè)很緊的限期捧弃，已經(jīng)沒(méi)有時(shí)間去涂鴉了≡穑現(xiàn)在就要開(kāi)始去做了。
• 用[ 填一個(gè)你喜歡的工具 ]來(lái)做設(shè)計(jì)會(huì)更快违霞。我需要更快地得到結(jié)果嘴办。
• 我們需要把結(jié)果交給我們的[ 客戶或合作伙伴、同事 ]买鸽。不能把手繪草圖給他們看备畦。
• Sorry, 我不會(huì)畫(huà)洁桌。

這些反對(duì)理由我不止聽(tīng)過(guò)很多次噪窘，我也跟我自己說(shuō)過(guò)很多遍鳖粟。

確定問(wèn)題和解決方案

草圖給我們探索問(wèn)題的空間，同時(shí)確立解決方案的空間弹砚。它構(gòu)筑我們對(duì)問(wèn)題的理解，同時(shí)幫助我們找出可能的解決方案枢希。

當(dāng)我們畫(huà)出我們的想法桌吃、新的靈感就會(huì)出現(xiàn)。含糊的和忽略細(xì)節(jié)的草圖可以孕育靈感苞轿。這里茅诱，含糊是好事，因?yàn)槲覀儠?huì)在腦海中補(bǔ)充所有空白搬卒。（這叫腦補(bǔ)瑟俭，對(duì)吧？）契邀。這就是草圖的“衍生力”：它捕獲我們已有的想法摆寄，激發(fā)新的火花。就像Bill Buxton在用戶體驗(yàn)草圖設(shè)計(jì)(Sketching User Experiences)里面說(shuō)過(guò)：

從草圖里學(xué)到的，大部分基于草圖天然含糊不清微饥。它們不會(huì)詳細(xì)說(shuō)明所有的事逗扒，而是參與其中、鼓勵(lì)欠橘，各種由創(chuàng)造者不經(jīng)意間整合到草圖上的東西矩肩。

通過(guò)用草圖畫(huà)出各種解決方案，我們可以探索它們肃续，而不用交付它們黍檩。這給我們新的視角，提出新的問(wèn)題始锚。畫(huà)草圖本質(zhì)上就是頭腦風(fēng)暴的練習(xí)刽酱。

畫(huà)草圖的「成本」

把東西從腦海中拿出的最快方法就是拿一支筆、一張紙疼蛾，然后迅速畫(huà)出來(lái)肛跌。在原型工具上做同樣的事會(huì)花更多的時(shí)間：首先創(chuàng)建一個(gè)新項(xiàng)目，然后選擇正確的庫(kù)察郁；在畫(huà)布上畫(huà)矩形衍慎，然后畫(huà)箭頭來(lái)連接這些矩形；調(diào)整一下所有的東西皮钠，讓它們好看些稳捆；然后……然后30分鐘，甚至更長(zhǎng)的時(shí)間過(guò)去了麦轰。

如果不喜歡畫(huà)在紙上的東西乔夯，可以拋到垃圾桶里面，再重新畫(huà)一個(gè)款侵。用原型工具的話末荐，所有的事都變困難了，因?yàn)樵谏厦婊ㄙM(fèi)了的時(shí)間新锈、力氣——即使這不是一個(gè)好的靈感甲脏。重來(lái)就更難了。相反妹笆，紙質(zhì)草圖更廉價(jià)块请、更快。

草圖拳缠，也是交流的工具

草圖是個(gè)強(qiáng)大的工具墩新，讓利益相關(guān)者參與設(shè)計(jì)過(guò)程。接下來(lái)的「雞」「蛋」問(wèn)題就是一個(gè)典型：利益相關(guān)者在沒(méi)看到解決方案的視覺(jué)范例之前窟坐，不能規(guī)劃一個(gè)完整的需求海渊。但是設(shè)計(jì)師不愿意在明確需求之前開(kāi)始做出解決方案——我們盡可能避免修改绵疲，因?yàn)檫@會(huì)導(dǎo)致額外的工作。

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

畫(huà)草圖入門(mén)門(mén)檻低，允許非設(shè)計(jì)師參與芙盘。（是否分發(fā)筆給利益相關(guān)者是個(gè)個(gè)人品味和受爭(zhēng)議的問(wèn)題驯用。你要整理好自己的思緒。）

由于草圖是粗糙和未完成的儒老，反饋也是相對(duì)容易蝴乔。有些人忍住，直到看到一頁(yè)漂亮的完成度高的版本驮樊，因?yàn)樗麄冋J(rèn)為所有的工作都必須落實(shí)下來(lái)薇正。高保真的視覺(jué)會(huì)分散人們的注意力——他們更多地評(píng)價(jià)視覺(jué)設(shè)計(jì)或細(xì)節(jié)。草圖才讓他們專(zhuān)注于核心概念囚衔。

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

畫(huà)草圖不是畫(huà)畫(huà)

普遍誤解草圖必須要漂亮，但交互設(shè)計(jì)不是藝術(shù)班练湿。你的草圖不需要好看猴仑；它們只需要承載你的想法。它們要能引發(fā)討論和形成想法肥哎；它們不太可能裝裱起來(lái)辽俗，掛在墻上。只要你能畫(huà)矩形篡诽、箭頭崖飘、圓形和簡(jiǎn)筆畫(huà)就夠了。就像Joshua Brewer在“草圖杈女、草圖坐漏、草圖”上說(shuō)：

草圖并不是最終目標(biāo)。最終目標(biāo)是繪制你在草圖中得到的東西碧信。所以不必?fù)?dān)心你會(huì)畫(huà)不好。

學(xué)習(xí)怎么去畫(huà)草圖已經(jīng)超出本篇文章的范圍街夭，但是下面的一些展示砰碴、文章、書(shū)籍都挺基礎(chǔ)：

• “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)

怎么畫(huà)草圖（不是教畫(huà)畫(huà)-板丽。-）

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

發(fā)散性草圖

一開(kāi)始趁尼，你可能收集關(guān)于手機(jī)應(yīng)用（或網(wǎng)站）的不同想法。開(kāi)始畫(huà)出應(yīng)用某一個(gè)頁(yè)面（或一部分）的各個(gè)版本猖辫。你有兩個(gè)目標(biāo)：形成很多想法酥泞，同時(shí)探索和評(píng)估它們。你得到越多的想法啃憎，你就有更多的選擇芝囤。這個(gè)過(guò)程通常叫“發(fā)散性草圖(divergent sketching)”。

對(duì)于這類(lèi)型畫(huà)草圖辛萍，有一個(gè)很有用的工具叫悯姊，多頁(yè)模板(multi-page template)。它提供足夠的空間在同一頁(yè)上畫(huà)6個(gè)版本贩毕，它還在屏幕范圍提供一些指導(dǎo)悯许。通過(guò)展示不同的想法，遲些就更容易比較和討論它們辉阶。

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

上面的截圖展示一個(gè)應(yīng)用主菜單的6種想法（生動(dòng)形象地證明我的草圖并不好看）谆甜。我通常不會(huì)提出6個(gè)版本垃僚，但是我至少會(huì)做3個(gè)版本。因?yàn)檫@是頭腦風(fēng)暴店印，你希望有更多選擇冈在，數(shù)量才是你想要的。

如果你剛好缺乏想法按摘，瀏覽一些手機(jī)UI的畫(huà)廊來(lái)獲得靈感（如：Inspired UI, Pttrns, Lovely UI, UI Parade）包券。它們通過(guò)標(biāo)題、特征（如：主菜單炫贤、對(duì)話框）來(lái)分類(lèi)陳列解決方案溅固。吸收你喜歡的東西，把它們糅合到你的想法里兰珍。

養(yǎng)成給草圖加標(biāo)題的習(xí)慣侍郭。這貨讓你更好地區(qū)分它們和再次找到它們。我添加注釋來(lái)解釋草圖和它們背后思考過(guò)程（長(zhǎng)處掠河、不足亮元、與其他概念相比較權(quán)衡、問(wèn)題唠摹、新特色等等）爆捞。標(biāo)簽和日程表也是的做法。

收斂性草圖

當(dāng)你已經(jīng)有很多不同版本的草圖時(shí)勾拉，選一個(gè)最佳的方案煮甥。不幸的是盗温，單是一幅草圖很難代表所有的情況。大部分情況下成肘，你需要整合想法卖局、或者部分想法到一個(gè)優(yōu)勝概念中。你需要通過(guò)添加更多的細(xì)節(jié)來(lái)進(jìn)一步探索双霍。用開(kāi)白的地方做注釋砚偶。寫(xiě)下所有問(wèn)題、想法店煞、重要的和不清晰的地方蟹演，所有即將討論的問(wèn)題。這會(huì)讓別人更好地了解你的思考過(guò)程顷蟀。這個(gè)環(huán)節(jié)通常叫“收斂性草圖(convergent sketching)”酒请。

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

生成UI流程圖

在你把想法歸納成一套的關(guān)鍵界面后羞反，下一步就是探索它們?cè)趺绰?lián)系在一起。生成一些UI流程圖(UI flows)（也就是一系列關(guān)鍵幀）來(lái)展示用戶怎么用你的解決方案來(lái)完成任務(wù)囤萤。UI流程圖標(biāo)識(shí)界面中哪些元素被使用（如：哪個(gè)按鈕被點(diǎn)擊過(guò)昼窗，哪個(gè)手勢(shì)被用過(guò)）和系統(tǒng)反饋（如：動(dòng)畫(huà)、過(guò)渡涛舍、彈出對(duì)話框或新界面）澄惊。同時(shí)也展示關(guān)鍵界面的不同狀態(tài)（如：一開(kāi)始的空白、稍后被內(nèi)容填充滿）富雅。

你不適用UI流程圖來(lái)可以想象不同的結(jié)果（如：一列搜索結(jié)果vs一個(gè)空白列表）掸驱。你的流程圖不再是線性的；不同的分支會(huì)有不同的結(jié)果没佑。但盡量限制一個(gè)流程圖中分支的數(shù)量毕贼。每一個(gè)分支都會(huì)增加復(fù)雜度，是你的流程圖更難被理解蛤奢。同時(shí)也會(huì)更難去解釋它們鬼癣。

你不需要畫(huà)出所以用例的草稿；通常挑重要的來(lái)畫(huà)啤贩。帕雷托法則提出一個(gè)好方法：畫(huà)出20％的功能就可以應(yīng)對(duì)80％的情況待秃。

我通常從一個(gè)關(guān)鍵用例開(kāi)始畫(huà)，嘗試找出一個(gè)解決它的方案痹屹。我會(huì)在界面上標(biāo)識(shí)交互和用箭頭把它們聯(lián)系在一起章郁。我解釋每一個(gè)步驟和標(biāo)簽，通常我會(huì)瘋狂做注釋痢掠。

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

要采取的步驟

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

• 列出你有的所有消息和你想要收集的信息。
• 先畫(huà)一套草圖（如：不同的關(guān)鍵界面或UI流程圖）象缀。
• 自己檢查草圖
  1. 每一套草圖的長(zhǎng)處和缺點(diǎn)分別時(shí)什么蔬将？
  2. 所有的UI元素和數(shù)據(jù)都始終如一？（也就是相同的元素用于相同的任務(wù)）
  3. 你用相同的方式來(lái)展示數(shù)據(jù)央星？
  4. 互動(dòng)選項(xiàng)是否清晰霞怀？
• 從別人那獲取反饋。從同事開(kāi)始莉给，如果可以的話毙石，從潛在客戶那獲取。
  1. 他們的第一印象是什么颓遏？
  2. 他們最喜歡什么徐矩？為什么？
  3. 他們不喜歡什么叁幢？為什么滤灯？
  4. 你的草圖中有哪些不清晰的地方？
  5. 他們有什么建議曼玩？他們?yōu)槭裁磿?huì)這樣建議鳞骤？
• 對(duì)概念進(jìn)行迭代更新
  1. 你可以把不同概念的長(zhǎng)處整合成一個(gè)新概念嗎？
  2. 這些草圖可以被闡明嗎演训？
  3. 其中一些步驟可以去掉或簡(jiǎn)化嗎弟孟？
• 根據(jù)最初的反饋堅(jiān)持結(jié)果
  1. 會(huì)出現(xiàn)新問(wèn)題嗎？
  2. 你得到什么新的見(jiàn)解样悟？

你可以看到這里有很多「為什么拂募？」的問(wèn)題。這是因?yàn)?strong>畫(huà)草圖是為了嘗試去了解問(wèn)題窟她，同時(shí)解決它們陈症。在草圖旁邊寫(xiě)下這些草圖遇到的問(wèn)題，這回引導(dǎo)你得到正確的概念震糖。

草圖之后的事

在你畫(huà)完關(guān)鍵界面的草圖和主要用例后录肯，你可能希望在手機(jī)上應(yīng)用你的概念。應(yīng)用（如：Pop, Protosketch）可以讓你導(dǎo)入草圖吊说，然后把它們做出原型论咏。這是一個(gè)快速优炬、低保真的方法讓你對(duì)整個(gè)概念的交互有直觀感受，這會(huì)讓原型交互變得更為真實(shí)厅贪。

或者蠢护，把你的界面導(dǎo)入到更多功能的工具中（如：Axure），在那做一個(gè)原型养涮。

不管你用什么方法葵硕。你的目的是真實(shí)手機(jī)上快速測(cè)試你的概念和效果。

結(jié)論（Take-Aways）

草圖幫你更好地理解你試圖解決的問(wèn)題贯吓，讓設(shè)想可能的解決方案懈凹。這是一個(gè)快速、廉價(jià)的方法去做頭腦風(fēng)暴悄谐，在你交付之前去做很多UI想法的測(cè)試介评。草圖加速概念的生成、迭代界面尊沸，讓反饋來(lái)的更快一些威沫，也更容易做改變。

在你下一個(gè)草圖中洼专，記著下列的一些原則棒掠。它們會(huì)讓你走上正軌：

• 懶一點(diǎn)
  不要試圖從新發(fā)明車(chē)輪，用模板去指導(dǎo)你畫(huà)草圖屁商。
• 激發(fā)靈感
  流量設(shè)計(jì)樣式庫(kù)烟很，手機(jī)UI畫(huà)廊，線框圖展示蜡镶。吸收你喜歡的東西雾袱，把它們糅合到你的想法了，想出一些新東西官还。
• 不要追求完美
  你的草圖需要貫穿你的想法芹橡。不要在（不重要）的細(xì)節(jié)上迷失自我。
• Pareto 原則
  一小套方案的特色會(huì)被多次使用望伦。專(zhuān)注在這上面林说。20％的解決方案就能應(yīng)對(duì)80％的問(wèn)題。
• 一致性
  用現(xiàn)有草圖符合或自己開(kāi)發(fā)一套屯伞。這會(huì)讓你的草圖變得更可靠腿箩，同時(shí)也會(huì)理解的的設(shè)計(jì)，這會(huì)減少看草圖的時(shí)間劣摇。
• 注釋
  在畫(huà)草圖的過(guò)程中珠移，新的問(wèn)題、想法會(huì)浮現(xiàn)出來(lái)。記下來(lái)钧惧，不然就會(huì)失去他們暇韧。
• 開(kāi)拓思維
  公開(kāi)你的草圖。把它們釘在墻上浓瞪，把他們展示給其他人看來(lái)獲取反饋锨咙。
• 有疑惑的時(shí)候，就多畫(huà)幾張
  如果你對(duì)一個(gè)解決方案感到疑惑追逮，那就畫(huà)一個(gè)新版本。列出它們的正反兩面(pros and cons)粹舵，收集反饋钮孵，看下哪個(gè)更好。

享受草圖眼滤！