當第一次開始設計交互式產品時，我是非常掙扎的。小的項目都還好，但是當交互變得復雜時，我注意到工具、團隊的交流甚至是我自己的思考都開始失效了。我看到今天許多創業公司面臨著同樣的問題。所以我想（和大家）分享一些方法，利用這些方法我已經在過去的幾年中改變了處理復雜大型產品的設計過程。

過去常常進行頁面設計

回顧大學，我們主要設計海報，圖書封面，（網站）主頁和很多其它頁面。我們使用 Adobe Illustrator 和 Photoshop 軟件，它們在設計頁面時表現都非常棒。同行的批評是非常有用的，因為批評本身就非常類似于使用產品：一個普通的觀眾走到他們之前沒有見過的事物面前，然后看上幾分鐘。在一個設計工作室看到一張海報就好像走在大街上看到這張同樣的海報。

以頁面為中心的設計不是服務于 APP 的

一旦你將要處理一個擁有十多個頁面和數百個狀態的APP時，你不能像（設計）一張海報一樣在大腦中 Hold 住整個產品。我注意到我們團隊在圍繞著單個頁面發郵件，討論著單個頁面，給所有頁面命名時僅僅只是記錄（keep track）。但是我們對如何把頁面和特征組合在一起（這件事）沒有任何的關注。

我們把產品當作一組頁面來思考。但是這種工作方法有一個問題：人們怎樣在現實生活中體驗這款產品是不重要的。在任何地方人們都在很短的時間流里使用產品，大概從30秒到幾分鐘。

一個用戶可能在一個搜索結果中首先注意到你的產品，花一分鐘的時間大概瀏覽一下這款產品，然后離開。他們可能回來，注冊，然后再次離開。他們可能打開來自這款產品的郵件，回來，購買產品，然后離開。每一個這樣的小故事都是人們實際情況下體驗你的產品的一種方式。

一個產品不是（簡單的）一組頁面——它是這些頁面組成的使用場景。

如果你的團隊沒有關注這些使用場景，如果你孤立地思考每個頁面，那么你的想法將和實際使用你的產品的用戶完全不同。

以場景為中心的設計

一旦我意識到使用場景是我們實際上設計的東西，一切都變得簡單起來。但是我對保持關注的故事仍然有困惑——我不斷地發現自己在思考個別頁面。

所以我開始通過不同的方式來突破我的設計過程。我改變了工具，可交付成果，以及如何和我的團隊一起工作。這里有我發現的最好的四種可以專注于故事的方法。

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

在開始設計產品之前我會思考它的一個使用場景，這對于產品的成功是至關重要的。產品的核心很有可能是由十幾個或是更多的使用場景組成的，但是我只選擇一個開始。然后我構建了一個故事板——很像漫畫。如果我已經在腦海里有了線框圖，那么故事板的每個框架在界面上都會有一個對應的頁面。有時候我得到的更多是抽象的使用場景，每個框架都是一個小型交互數據塊：用戶閱讀或點擊的任何區域。

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

1、故事板幫我同樣專注于我們需要設計的所有屏幕——其中一些甚至可以被搜索引擎用來搜索信息片段或電子郵件。

2、故事板強迫我去思考用戶目標，因為它們顯示了如何在產品中完成任務。

3、一旦我們認同故事板是對公司最重要的東西，它們能夠幫忙選定所有功能在屏幕上的優先級。

4、故事板真的能夠幫助我專注于屏幕之間的切換，一個按鈕在屏幕上要有它的意義，但它也需要設定好用戶將在接下來的屏幕上看到什么。

而且最棒的部分是，我可以反復使用這些相同的故事板，所以它大幅加快了我的其它工作速度。當我向團隊展示UI設計稿時，我需要向他們展示一個故事板。當用戶開始使用產品的時候，我們可以在一組屏幕上向用戶展示相同的故事板。如果我們做出了一個可交互的demo或者完成了一個產品的介紹視頻，就如你猜測的那樣——我們需要一個故事板。

方法二：用 Fireworks 渲染整個使用場景

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

1、內置網頁：您可以在一個文件中建立一個完整的故事。上下方向鍵可以很容易地翻閱故事班，看看到底用戶將看到什么。

2、母版：如果頁眉或圖標出現在多個頁面，你可以把它做成一個母版。然后，如果你需要在用戶測試之修正一個圖標，你不必單獨修改20個文件。

3、查找和替換：團隊可以在設計進程的中途修改一個功能的名字嗎？沒問題。

4、高保真：您可以在同一個工具中把一個粗糙的線框圖變成一個好看的線框圖，一旦故事板是固化的（solid），你可以為了更好的細節設計而回到 Photoshop 軟件中。

方法三：在紙上回顧整個使用場景

當我們團隊到了需要審查設計稿的時候，我幾乎從來不展示孤立的一個個頁面，相反，我將會把一個故事板里的所有頁面都打印出來，然后把他們鋪在很長的會議桌上或者用膠帶把它們貼在墻上。

這樣的工作方法非常好，因為團隊人員可以近距離地看到一個頁面上的所有細節。他們可以往后退一步，看到相鄰的頁面，想想頁面之間的交互切換。甚至他們可以后退更多以看到整個故事板，這有助于讓每個人對頁面上需要有的內容的用戶目標和任務保持相同觀點。

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

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

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

我常常驚訝于真正的產品是如何從這些視頻當中感受到的。因為它們可以很好地模擬最終的產品是什么樣的。它會成為收集反饋的一個很好的工具，它幾乎像再次批判了一個簡單的海報。

以上這些僅僅是一些我已經改變的工作方法，它們能讓我和我的團隊專注于故事場景。我很好奇是否其他人已經注意到了以頁面為中心的設計和以場景為中心的設計之間的不同？你有學到什么方法可以讓你在設計過程中專注于故事這些故事場景嗎？

譯文地址：點擊查看

本文由@沈曉馬?原創獨家授權發布，本文禁止在本人未允許的情況下，任何形式的全文轉載和部分轉載。若您喜歡本文，請分享本文的鏈接到您喜歡的平臺。