過去常常進行頁面設計
回顧大學，我們主要設計海報，圖書封面，（網站）主頁和很多其它頁面。我們使用 Adobe Illustrator 和 Photoshop 軟體，它們在設計頁面時表現都非常棒。同行的批評是非常有用的，因為批評本身就非常類似於使用產品：一個普通的觀眾走到他們之前沒有見過的事物面前，然後看上幾分鐘。在一個設計工作室看到一張海報就好像走在大街上看到這張同樣的海報。
以頁面為中心的設計不是服務於 APP 的
一旦你將要處理一個擁有十多個頁面和數百個狀態的APP時，你不能像（設計）一張海報一樣在大腦中 Hold 住整個產品。我注意到我們團隊在圍繞著單個頁面發郵件，討論著單個頁面，給所有頁面命名時僅僅只是記錄（keep track）。但是我們對如何把頁面和特徵組合在一起（這件事）沒有任何的關注。
我們把產品當作一組頁面來思考。但是這種工作方法有一個問題：人們怎樣在現實生活中體驗這款產品是不重要的。在任何地方人們都在很短的時間流裡使用產品，大概從30秒到幾分鐘。
一個使用者可能在一個搜尋結果中首先注意到你的產品，花一分鐘的時間大概瀏覽一下這款產品，然後離開。他們可能回來，註冊，然後再次離開。他們可能開啟來自這款產品的郵件，回來，購買產品，然後離開。每一個這樣的小故事都是人們實際情況下體驗你的產品的一種方式。
一個產品不是（簡單的）一組頁面——它是這些頁面組成的使用場景。
如果你的團隊沒有關注這些使用場景，如果你孤立地思考每個頁面，那麼你的想法將和實際使用你的產品的使用者完全不同。
以場景為中心的設計
一旦我意識到使用場景是我們實際上設計的東西，一切都變得簡單起來。但是我對保持關注的故事仍然有困惑——我不斷地發現自己在思考個別頁面。
所以我開始通過不同的方式來突破我的設計過程。我改變了工具，可交付成果，以及如何和我的團隊一起工作。這裡有我發現的最好的四種可以專注於故事的方法。
方法一：在畫線框圖之前使用故事板
在開始設計產品之前我會思考它的一個使用場景，這對於產品的成功是至關重要的。產品的核心很有可能是由十幾個或是更多的使用場景組成的，但是我只選擇一個開始。然後我構建了一個故事板——很像漫畫。如果我已經在腦海裡有了線框圖，那麼故事板的每個框架在介面上都會有一個對應的頁面。有時候我得到的更多是抽象的使用場景，每個框架都是一個小型互動資料塊：使用者閱讀或點選的任何區域。
好吧，這不是火箭科學，但這門學科在很多方面都有幫助：
- 故事板幫我同樣專注於我們需要設計的所有螢幕——其中一些甚至可以被搜尋引擎用來搜尋資訊片段或電子郵件。
- 故事板強迫我去思考使用者目標，因為它們顯示瞭如何在產品中完成任務。
- 一旦我們認同故事板是對公司最重要的東西，它們能夠幫忙選定所有功能在螢幕上的優先順序。
- 故事板真的能夠幫助我專注於螢幕之間的切換，一個按鈕在螢幕上要有它的意義，但它也需要設定好使用者將在接下來的螢幕上看到什麼。
而且最棒的部分是，我可以反覆使用這些相同的故事板，所以它大幅加快了我的其它工作速度。當我向團隊展示UI設計稿時，我需要向他們展示一個故事板。當使用者開始使用產品的時候，我們可以在一組螢幕上向使用者展示相同的故事板。如果我們做出了一個可互動的demo或者完成了一個產品的介紹視訊，就如你猜測的那樣——我們需要一個故事板。
方法二：用 Fireworks 渲染整個使用場景
我知道大多數的設計師都使用 Photoshop 或 Illustrator ，況且是視覺設計，沒有什麼軟體比它們更好了。但是如果我們正在設計故事板，那麼設計標準應該是將來使用者會看到的高保真頁面。這些故事板可能需要20~30個頁面，如果用 Photoshop 去設計它們會變得很艱難，所以大部分的設計師不會找這麻煩，我們又再次回到設計單個頁面。幸運的是， Fireworks 有一些巧妙的功能能夠使設計儘可能地保持以故事為中心：
- 內建網頁：您可以在一個檔案中建立一個完整的故事。上下方向鍵可以很容易地翻閱故事班，看看到底使用者將看到什麼。
- 母版：如果頁首或圖示出現在多個頁面，你可以把它做成一個母版。然後，如果你需要在使用者測試之修正一個圖示，你不必單獨修改20個檔案。
- 查詢和替換：團隊可以在設計程式的中途修改一個功能的名字嗎？沒問題。
- 高保真：您可以在同一個工具中把一個粗糙的線框圖變成一個好看的線框圖，一旦故事板是固化的（solid），你可以為了更好的細節設計而回到 Photoshop 軟體中。
方法三：在紙上回顧整個使用場景
當我們團隊到了需要審查設計稿的時候，我幾乎從來不展示孤立的一個個頁面，相反，我將會把一個故事板裡的所有頁面都列印出來，然後把他們鋪在很長的會議桌上或者用膠帶把它們貼在牆上。
這樣的工作方法非常好，因為團隊人員可以近距離地看到一個頁面上的所有細節。他們可以往後退一步，看到相鄰的頁面，想想頁面之間的互動切換。甚至他們可以後退更多以看到整個故事板，這有助於讓每個人對頁面上需要有的內容的使用者目標和任務保持相同觀點。
當我向其他設計師展示工作內容時，我將跳過圖紙僅僅是在電腦上點選螢幕——他們將獲得所需資訊。而且我發現列印的這種方法對工程師和PM們來說是非常有幫助的，他們不會像我一樣花整天的時間來研究互動設計。哦對了，在設計的時候你可以直接用紙做筆記，並且可以把他們帶回你的辦公桌上作為下次的迭代素材。
方法四：不要傳送 mockups ，記錄螢幕錄影。
這是我所知道的最奇怪又是最有幫助的設計交付物。我過去常常通過電子郵件來解釋互動細節。我會附上一組頁面，然後努力去解釋它們是如何組合在一起的。這寫起來很痛苦，而且閱讀起來也不是那麼輕鬆。所以我開始用ScreenFlow錄製故事板的視訊。由於每個頁面已經建在Fireworks中，我只需要假裝去點選使用者會點選的地方，跳轉到下一個頁面，然後對著相機描述正在發生什麼。第一個視訊我花了很長的時間去錄製，並且通過實踐的方式克服了我的怯場，不久之後，我錄製視訊的速度要比寫郵件快得多了。
我常常驚訝於真正的產品是如何從這些視訊當中感受到的。因為它們可以很好地模擬最終的產品是什麼樣的。它會成為收集反饋的一個很好的工具，它幾乎像再次批判了一個簡單的海報。
以上這些僅僅是一些我已經改變的工作方法，它們能讓我和我的團隊專注於故事場景。我很好奇是否其他人已經注意到了以頁面為中心的設計和以場景為中心的設計之間的不同？你有學到什麼方法可以讓你在設計過程中專注於這些故事場景嗎？
相關閱讀
評論(1)