當(dāng)?shù)谝淮伍_(kāi)始設(shè)計(jì)交互式產(chǎn)品時(shí)，我是非常掙扎的。小的項(xiàng)目都還好，但是當(dāng)交互變得復(fù)雜時(shí)，我注意到工具、團(tuán)隊(duì)的交流甚至是我自己的思考都開(kāi)始失效了。我看到今天許多創(chuàng)業(yè)公司面臨著同樣的問(wèn)題。所以我想（和大家）分享一些方法，利用這些方法我已經(jīng)在過(guò)去的幾年中改變了處理復(fù)雜大型產(chǎn)品的設(shè)計(jì)過(guò)程。

過(guò)去常常進(jìn)行頁(yè)面設(shè)計(jì)

回顧大學(xué)，我們主要設(shè)計(jì)海報(bào)，圖書(shū)封面，（網(wǎng)站）主頁(yè)和很多其它頁(yè)面。我們使用 Adobe Illustrator 和 Photoshop 軟件，它們?cè)谠O(shè)計(jì)頁(yè)面時(shí)表現(xiàn)都非常棒。同行的批評(píng)是非常有用的，因?yàn)榕u(píng)本身就非常類似于使用產(chǎn)品：一個(gè)普通的觀眾走到他們之前沒(méi)有見(jiàn)過(guò)的事物面前，然后看上幾分鐘。在一個(gè)設(shè)計(jì)工作室看到一張海報(bào)就好像走在大街上看到這張同樣的海報(bào)。

以頁(yè)面為中心的設(shè)計(jì)不是服務(wù)于 APP 的

一旦你將要處理一個(gè)擁有十多個(gè)頁(yè)面和數(shù)百個(gè)狀態(tài)的APP時(shí)，你不能像（設(shè)計(jì)）一張海報(bào)一樣在大腦中 Hold 住整個(gè)產(chǎn)品。我注意到我們團(tuán)隊(duì)在圍繞著單個(gè)頁(yè)面發(fā)郵件，討論著單個(gè)頁(yè)面，給所有頁(yè)面命名時(shí)僅僅只是記錄（keep track）。但是我們對(duì)如何把頁(yè)面和特征組合在一起（這件事）沒(méi)有任何的關(guān)注。

我們把產(chǎn)品當(dāng)作一組頁(yè)面來(lái)思考。但是這種工作方法有一個(gè)問(wèn)題：人們?cè)鯓釉诂F(xiàn)實(shí)生活中體驗(yàn)這款產(chǎn)品是不重要的。在任何地方人們都在很短的時(shí)間流里使用產(chǎn)品，大概從30秒到幾分鐘。

一個(gè)用戶可能在一個(gè)搜索結(jié)果中首先注意到你的產(chǎn)品，花一分鐘的時(shí)間大概瀏覽一下這款產(chǎn)品，然后離開(kāi)。他們可能回來(lái)，注冊(cè)，然后再次離開(kāi)。他們可能打開(kāi)來(lái)自這款產(chǎn)品的郵件，回來(lái)，購(gòu)買產(chǎn)品，然后離開(kāi)。每一個(gè)這樣的小故事都是人們實(shí)際情況下體驗(yàn)?zāi)愕漠a(chǎn)品的一種方式。

一個(gè)產(chǎn)品不是（簡(jiǎn)單的）一組頁(yè)面——它是這些頁(yè)面組成的使用場(chǎng)景。

如果你的團(tuán)隊(duì)沒(méi)有關(guān)注這些使用場(chǎng)景，如果你孤立地思考每個(gè)頁(yè)面，那么你的想法將和實(shí)際使用你的產(chǎn)品的用戶完全不同。

以場(chǎng)景為中心的設(shè)計(jì)

一旦我意識(shí)到使用場(chǎng)景是我們實(shí)際上設(shè)計(jì)的東西，一切都變得簡(jiǎn)單起來(lái)。但是我對(duì)保持關(guān)注的故事仍然有困惑——我不斷地發(fā)現(xiàn)自己在思考個(gè)別頁(yè)面。

所以我開(kāi)始通過(guò)不同的方式來(lái)突破我的設(shè)計(jì)過(guò)程。我改變了工具，可交付成果，以及如何和我的團(tuán)隊(duì)一起工作。這里有我發(fā)現(xiàn)的最好的四種可以專注于故事的方法。

方法一：在畫(huà)線框圖之前使用故事板

在開(kāi)始設(shè)計(jì)產(chǎn)品之前我會(huì)思考它的一個(gè)使用場(chǎng)景，這對(duì)于產(chǎn)品的成功是至關(guān)重要的。產(chǎn)品的核心很有可能是由十幾個(gè)或是更多的使用場(chǎng)景組成的，但是我只選擇一個(gè)開(kāi)始。然后我構(gòu)建了一個(gè)故事板——很像漫畫(huà)。如果我已經(jīng)在腦海里有了線框圖，那么故事板的每個(gè)框架在界面上都會(huì)有一個(gè)對(duì)應(yīng)的頁(yè)面。有時(shí)候我得到的更多是抽象的使用場(chǎng)景，每個(gè)框架都是一個(gè)小型交互數(shù)據(jù)塊：用戶閱讀或點(diǎn)擊的任何區(qū)域。

好吧，這不是火箭科學(xué)，但這門學(xué)科在很多方面都有幫助：

• 故事板幫我同樣專注于我們需要設(shè)計(jì)的所有屏幕——其中一些甚至可以被搜索引擎用來(lái)搜索信息片段或電子郵件。
• 故事板強(qiáng)迫我去思考用戶目標(biāo)，因?yàn)樗鼈冿@示了如何在產(chǎn)品中完成任務(wù)。
• 一旦我們認(rèn)同故事板是對(duì)公司最重要的東西，它們能夠幫忙選定所有功能在屏幕上的優(yōu)先級(jí)。
• 故事板真的能夠幫助我專注于屏幕之間的切換，一個(gè)按鈕在屏幕上要有它的意義，但它也需要設(shè)定好用戶將在接下來(lái)的屏幕上看到什么。

而且最棒的部分是，我可以反復(fù)使用這些相同的故事板，所以它大幅加快了我的其它工作速度。當(dāng)我向團(tuán)隊(duì)展示UI設(shè)計(jì)稿時(shí)，我需要向他們展示一個(gè)故事板。當(dāng)用戶開(kāi)始使用產(chǎn)品的時(shí)候，我們可以在一組屏幕上向用戶展示相同的故事板。如果我們做出了一個(gè)可交互的demo或者完成了一個(gè)產(chǎn)品的介紹視頻，就如你猜測(cè)的那樣——我們需要一個(gè)故事板。

方法二：用 Fireworks 渲染整個(gè)使用場(chǎng)景

我知道大多數(shù)的設(shè)計(jì)師都使用 Photoshop 或 Illustrator ，況且是視覺(jué)設(shè)計(jì)，沒(méi)有什么軟件比它們更好了。但是如果我們正在設(shè)計(jì)故事板，那么設(shè)計(jì)標(biāo)準(zhǔn)應(yīng)該是將來(lái)用戶會(huì)看到的高保真頁(yè)面。這些故事板可能需要20~30個(gè)頁(yè)面，如果用 Photoshop 去設(shè)計(jì)它們會(huì)變得很艱難，所以大部分的設(shè)計(jì)師不會(huì)找這麻煩，我們又再次回到設(shè)計(jì)單個(gè)頁(yè)面。幸運(yùn)的是， Fireworks?有一些巧妙的功能能夠使設(shè)計(jì)盡可能地保持以故事為中心：

• 內(nèi)置網(wǎng)頁(yè)：您可以在一個(gè)文件中建立一個(gè)完整的故事。上下方向鍵可以很容易地翻閱故事班，看看到底用戶將看到什么。
• 母版：如果頁(yè)眉或圖標(biāo)出現(xiàn)在多個(gè)頁(yè)面，你可以把它做成一個(gè)母版。然后，如果你需要在用戶測(cè)試之修正一個(gè)圖標(biāo)，你不必單獨(dú)修改20個(gè)文件。
• 查找和替換：團(tuán)隊(duì)可以在設(shè)計(jì)進(jìn)程的中途修改一個(gè)功能的名字嗎？沒(méi)問(wèn)題。
• 高保真：您可以在同一個(gè)工具中把一個(gè)粗糙的線框圖變成一個(gè)好看的線框圖，一旦故事板是固化的（solid），你可以為了更好的細(xì)節(jié)設(shè)計(jì)而回到 Photoshop 軟件中。

方法三：在紙上回顧整個(gè)使用場(chǎng)景

當(dāng)我們團(tuán)隊(duì)到了需要審查設(shè)計(jì)稿的時(shí)候，我?guī)缀鯊膩?lái)不展示孤立的一個(gè)個(gè)頁(yè)面，相反，我將會(huì)把一個(gè)故事板里的所有頁(yè)面都打印出來(lái)，然后把他們鋪在很長(zhǎng)的會(huì)議桌上或者用膠帶把它們貼在墻上。

這樣的工作方法非常好，因?yàn)閳F(tuán)隊(duì)人員可以近距離地看到一個(gè)頁(yè)面上的所有細(xì)節(jié)。他們可以往后退一步，看到相鄰的頁(yè)面，想想頁(yè)面之間的交互切換。甚至他們可以后退更多以看到整個(gè)故事板，這有助于讓每個(gè)人對(duì)頁(yè)面上需要有的內(nèi)容的用戶目標(biāo)和任務(wù)保持相同觀點(diǎn)。

當(dāng)我向其他設(shè)計(jì)師展示工作內(nèi)容時(shí)，我將跳過(guò)圖紙僅僅是在電腦上點(diǎn)擊屏幕——他們將獲得所需信息。而且我發(fā)現(xiàn)打印的這種方法對(duì)工程師和PM們來(lái)說(shuō)是非常有幫助的，他們不會(huì)像我一樣花整天的時(shí)間來(lái)研究交互設(shè)計(jì)。哦對(duì)了，在設(shè)計(jì)的時(shí)候你可以直接用紙做筆記，并且可以把他們帶回你的辦公桌上作為下次的迭代素材。

方法四：不要發(fā)送 mockups ，記錄屏幕錄像。

這是我所知道的最奇怪又是最有幫助的設(shè)計(jì)交付物。我過(guò)去常常通過(guò)電子郵件來(lái)解釋交互細(xì)節(jié)。我會(huì)附上一組頁(yè)面，然后努力去解釋它們是如何組合在一起的。這寫起來(lái)很痛苦，而且閱讀起來(lái)也不是那么輕松。所以我開(kāi)始用ScreenFlow錄制故事板的視頻。由于每個(gè)頁(yè)面已經(jīng)建在Fireworks中，我只需要假裝去點(diǎn)擊用戶會(huì)點(diǎn)擊的地方，跳轉(zhuǎn)到下一個(gè)頁(yè)面，然后對(duì)著相機(jī)描述正在發(fā)生什么。第一個(gè)視頻我花了很長(zhǎng)的時(shí)間去錄制，并且通過(guò)實(shí)踐的方式克服了我的怯場(chǎng)，不久之后，我錄制視頻的速度要比寫郵件快得多了。

我常常驚訝于真正的產(chǎn)品是如何從這些視頻當(dāng)中感受到的。因?yàn)樗鼈兛梢院芎玫啬M最終的產(chǎn)品是什么樣的。它會(huì)成為收集反饋的一個(gè)很好的工具，它幾乎像再次批判了一個(gè)簡(jiǎn)單的海報(bào)。

以上這些僅僅是一些我已經(jīng)改變的工作方法，它們能讓我和我的團(tuán)隊(duì)專注于故事場(chǎng)景。我很好奇是否其他人已經(jīng)注意到了以頁(yè)面為中心的設(shè)計(jì)和以場(chǎng)景為中心的設(shè)計(jì)之間的不同？你有學(xué)到什么方法可以讓你在設(shè)計(jì)過(guò)程中專注于這些故事場(chǎng)景嗎？

原文地址：點(diǎn)擊跳轉(zhuǎn)

本文由@沈曉馬?原創(chuàng)獨(dú)家授權(quán)發(fā)布，本文禁止在本人未允許的情況下，任何形式的全文轉(zhuǎn)載和部分轉(zhuǎn)載。若您喜歡本文，請(qǐng)分享本文的鏈接到您喜歡的平臺(tái)。