本文會從場景的定義和分析、場景分析對于交互設計兩個方面，詳細說一下筆者對于特定場景下設計的理解和感受。

上周在公司內部做了一次關于交互和UI設計的演講，整理完之后發現還有一些東西值得留下來。也算是把當時的逐字稿分享給大家，當然會稍微有些不同，逐字稿也是寫得慘不忍睹。閑言少敘，我們開始。

相信大家都在網上看過老羅（羅永浩）在星巴克打臉的視頻，這個視頻每次在老羅有什么新聞的時候都會被挖出來發一遍，我們在這個視頻中還是可以看出很多東西的。 包括用戶體驗、營銷方法、甚至文化差異等等。真的很有意思。

首先我們要肯定星巴克這樣杯型的命名是有著他一套營銷邏輯的。星巴克的點單環節，可以說是一次游戲、一次社交行為及表演，客戶在此也得到了某種程度上的滿足。

但確實對于點單的客戶最初會造成很大困惑，這就和頁面一樣，如果沒有對場景進行分析，設計就會給用戶帶來困擾和一些非常不適的心里感受。那么設計出的輸出物也可能是一次交互設計和UI設計的失敗。

（圖一：失敗的設計）

我們首先來看這個界面（圖一），真的很好看很漂亮，按鈕的質感和配色都無可挑剔，但是大家有沒有注意到，這個管理上傳文件的彈窗在功能操作上的感受會讓人有和老羅一樣的感受。

它的界面有上傳、刪除、和取消功能，但我們看這張圖片，我們真的無法去判斷如何操作，它功能按鈕做的雖然很精致，但是配色方面讓用戶覺得無從下手——我們經常作為警示的紅色用到了取消，我們最常用的上傳功能用到了灰色，按照普通用戶的操作習慣來說，最長按的就是刪除的按鈕，顯然這是讓人崩潰的設計。我很難去快速地識別和操作。

看這些非常精美的按鈕，可以說UI做到了極致，那你可以說這是個好設計嗎？

顯然不是，他錯在哪里？

錯在他脫離了場景，表意的換亂造成操作的不確定性和糟糕的用戶體驗。

我們在看下圖二顯然它是合格的，為什么呢？

場景對了！

藍色代表功能，灰色代表取消功能，紅色代表刪除并有提示作用。在上傳文件管理的操作場景下，這樣的表達就符合了這個場景的功能特點。

我在接下來的文章中會從場景的定義和分析、場景分析對于交互設計詳細展開來說一下自己對于特定場景下設計的理解和感受。

一、場景的定義和分析

在設計中很多需求是針對場景來提出的，有計時的需求、有對比的需求、有需要瀏覽的需求。

轉化成頁面的話，就是這樣，每一個需求都會有他的場景，所以我們需要知道什么叫場景，場景的定義有很多每一個資料或者文獻都有不同的定義，但讓我覺得總結下來，場景不會離開這些：

• 誰（who）
• 在什么時候(when)
• 在什么地方(where)
• 做了什么事情(do)
• 周圍環境怎么樣(how)

用微信和好友聊天時一種場景。記錄工作時間是一種場景，記錄工時的同時我繼續工作又是一種場景，場景的應用真的是無處不在。

比如一個計時功能的應用，他可能的場景就是，一名律師，在下午的星巴克接待了他的委托人。這個就是場景。

在了解了場景后，我們要繼續認識場景的類型?？聪氯绾卫脠鼍暗牟煌瑏磙矍逶O計的思路：

場景類型一 基于目標或者任務的場景

要描述的是用戶想做什么，不是如何去做。這種類型的場景是大面積的場景，用途在確定網站架構和內容的時候作用較大。

比如：一名律師想要記錄和客戶談話的時間，并很快記錄下來。

場景類型二 精細化的場景

掌握用戶的細節，了解更深的用戶信息和習慣。這些細節能幫助我們更深入的理解用戶特征及行為。知道了這些信息，我們更容易設計出讓用戶更舒服、更易操作的產品。

就像剛才的例子，如果我們把它精細化，一名律師，在周六下午2點和客戶約在了他住宿樓下的星巴克見面，在他座位周圍的人都在安靜的學習或休息，所以他和客戶說話的聲音很小，也不希望被任何聲音打擾。

場景類型三 全面的測試場景

站在用戶的角度呈現用戶完成任務的每一步操作除了背景信息之外，還包含了用戶完成任務的所有操作步驟。它可以用來完整地呈現用戶完成某個任務的所有操作步驟，它很好的解釋了用戶是如何利用你的產品一步步操作完成自己的目標。

比如說：根據上面律師會客戶的分析，我們會做一款計時器放到手機端產品中，并且是不打擾他其他工作，也不會出現任何聲音，停止計時后我們會讓他直接錄入記錄文字。

在了解了一些場景的概念后，我們簡單了解下什么叫場景設計：

場景設計，即一系列場景的判斷與分析，理解用戶每一場景的痛點及需求，結合上文場景，預期用戶下一步的目標及意圖，通過設計縮短關鍵流程，輔助用戶提高操作效率。

場景設計分為四點，首先我們要把這些場景列舉出來，形成一個流程圖，找出其中最關鍵的場景。

通過關鍵的場景，我們要找到用戶當前的痛點和需求，并且結合場景預期用戶的需求和行為。

我們了解了場景和需求之后，我們的設計要、貼心、高效、富有情感的細節表達。我們的產品則是要更具有易用性。

為了檢測我們通過上一步設計策略產出的方案是否符合標準，這一步我們需要對方案進行衡量判斷，結合設計目標，我們設定了四個衡量標準：效率、驚喜、感動、期待?？偨Y起來就是簡單和高效。

二、 場景分析對于交互設計

我們剛剛了解了場景和場景分析，我們繼續今天第二個題目：場景分析對于交互設計。

那么交互設計師要如何設計頁面呢？

如果是我 我會了解用戶的目標，繼續剛才的例子，用戶的目標就是想要計時。

用戶進入界面的場景，直接進入、上次計時后忘記停止再次進入、在PC端計時后忘記結束后再進入。這些都是可能的進入方式，我們要針對每一種場景設計不同的任務流程。

我們詳細列舉出每一個環節的流程之后我們分析他記入頁面的預期，計時功能，可以編輯內容。

了解并分析了這些之后，我們就可以開始完整他的所有信息，設計她的細節并開始交互。

這樣的方法就是場景化的交互設計。

站在用戶的角度去思考問題，為用戶所處的場景，提供相應的解決方案，做好信息的整理與分類，引導每一類用戶能夠準確快速的找到相應的功能。

他總結起來可以分為三大部分：需求分析、場景分析、原型設計。

要求分析階段，我們要分析各種的需求，我們設定的場景不是在想當然中完成的，而是通過對調查研究用戶現場，并從中獲取有效信息和經驗等方式來進行的。

場景分析，是設計的核心階段，這個階段是情景設定過程中的核心階段，可以細分為用戶調研、分析和模擬流程。

通過用戶的研究，并分析用戶的具體行為和對產品的具體要求；場景分析是將獲取到的信息進行結構化及視覺化 分析環境，載體（pc 手機 觸屏等）；模擬產品被使用的全過程，這些模擬的過程必須反應用戶對產品的要求，能夠充分地描述用戶在產品使用過程中遇到的問題，并進一步提出解決問題的方案，通過這個階段，設計師可以清楚地觀察到用戶在產品使用中呈現出怎樣的形態。

制作我們的demo原型，可以對原型進行測試和易用性的評價，可以讓設計師進一步了解用戶需求、了解用戶和產品之間的關系，為最終產品方案提供最有力的價值。

原型設計階段，在原型制作過程中可以生成形式多樣的模型，我們可以通過直接使用這些模型來進行產品的測試及適用性評價。通過這個評價過程，設計師可以進一步觀察用戶和產品之間存在其他關系，并未產品最終設計方案提供參考價值。

我們可以給以上交互的場景總結做一個總結——需求場景、環境場景、具體應用場景。

• 需求來源于用戶在現實生活中遇見的問題，用戶需要一種有效解決問題的措施，這個措施就是交互設計提供的方案。也就是說，用戶的需求就是做設計最根本的依據，可以把需求當做一個場景。
• 場景的第二部分我歸結為環境場景，環境場景包括用戶使用應用時的時空狀態以及人體的肢體動作狀態。
• 應用場景，我們可以總結為，應用產品的系統、應用產品時系統狀態、產品目前的運行狀態。

最后我們總結一下今天的內容，我們首先知道了場景的概念誰（who），在什么時候(when)，在什么地方(where)，做了什么事情(do)，周圍環境怎么樣(how)。我們還了解了交互需要在場景中考慮什么，了解了場景化的交互設計。

最后想和大家說的是，設計有很多種方法，每一種方法都可以幫助我們輸出好的設計，我今天說的只是我這些年工作的一個總結和心得，通過一些文獻和資料擺在了這里，分享給大家，希望我們可以互相交流溝通，輸出更好的設計。

本文由 @Derek 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。