本文會(huì)從場(chǎng)景的定義和分析、場(chǎng)景分析對(duì)于交互設(shè)計(jì)兩個(gè)方面，詳細(xì)說(shuō)一下筆者對(duì)于特定場(chǎng)景下設(shè)計(jì)的理解和感受。

上周在公司內(nèi)部做了一次關(guān)于交互和UI設(shè)計(jì)的演講，整理完之后發(fā)現(xiàn)還有一些東西值得留下來(lái)。也算是把當(dāng)時(shí)的逐字稿分享給大家，當(dāng)然會(huì)稍微有些不同，逐字稿也是寫得慘不忍睹。閑言少敘，我們開始。

相信大家都在網(wǎng)上看過(guò)老羅（羅永浩）在星巴克打臉的視頻，這個(gè)視頻每次在老羅有什么新聞的時(shí)候都會(huì)被挖出來(lái)發(fā)一遍，我們?cè)谶@個(gè)視頻中還是可以看出很多東西的。 包括用戶體驗(yàn)、營(yíng)銷方法、甚至文化差異等等。真的很有意思。

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

但確實(shí)對(duì)于點(diǎn)單的客戶最初會(huì)造成很大困惑，這就和頁(yè)面一樣，如果沒(méi)有對(duì)場(chǎng)景進(jìn)行分析，設(shè)計(jì)就會(huì)給用戶帶來(lái)困擾和一些非常不適的心里感受。那么設(shè)計(jì)出的輸出物也可能是一次交互設(shè)計(jì)和UI設(shè)計(jì)的失敗。

（圖一：失敗的設(shè)計(jì)）

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

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

看這些非常精美的按鈕，可以說(shuō)UI做到了極致，那你可以說(shuō)這是個(gè)好設(shè)計(jì)嗎？

顯然不是，他錯(cuò)在哪里？

錯(cuò)在他脫離了場(chǎng)景，表意的換亂造成操作的不確定性和糟糕的用戶體驗(yàn)。

我們?cè)诳聪聢D二顯然它是合格的，為什么呢？

場(chǎng)景對(duì)了！

藍(lán)色代表功能，灰色代表取消功能，紅色代表刪除并有提示作用。在上傳文件管理的操作場(chǎng)景下，這樣的表達(dá)就符合了這個(gè)場(chǎng)景的功能特點(diǎn)。

我在接下來(lái)的文章中會(huì)從場(chǎng)景的定義和分析、場(chǎng)景分析對(duì)于交互設(shè)計(jì)詳細(xì)展開來(lái)說(shuō)一下自己對(duì)于特定場(chǎng)景下設(shè)計(jì)的理解和感受。

一、場(chǎng)景的定義和分析

在設(shè)計(jì)中很多需求是針對(duì)場(chǎng)景來(lái)提出的，有計(jì)時(shí)的需求、有對(duì)比的需求、有需要瀏覽的需求。

轉(zhuǎn)化成頁(yè)面的話，就是這樣，每一個(gè)需求都會(huì)有他的場(chǎng)景，所以我們需要知道什么叫場(chǎng)景，場(chǎng)景的定義有很多每一個(gè)資料或者文獻(xiàn)都有不同的定義，但讓我覺(jué)得總結(jié)下來(lái)，場(chǎng)景不會(huì)離開這些：

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

用微信和好友聊天時(shí)一種場(chǎng)景。記錄工作時(shí)間是一種場(chǎng)景，記錄工時(shí)的同時(shí)我繼續(xù)工作又是一種場(chǎng)景，場(chǎng)景的應(yīng)用真的是無(wú)處不在。

比如一個(gè)計(jì)時(shí)功能的應(yīng)用，他可能的場(chǎng)景就是，一名律師，在下午的星巴克接待了他的委托人。這個(gè)就是場(chǎng)景。

在了解了場(chǎng)景后，我們要繼續(xù)認(rèn)識(shí)場(chǎng)景的類型?？聪氯绾卫脠?chǎng)景的不同來(lái)捋清設(shè)計(jì)的思路：

場(chǎng)景類型一 基于目標(biāo)或者任務(wù)的場(chǎng)景

要描述的是用戶想做什么，不是如何去做。這種類型的場(chǎng)景是大面積的場(chǎng)景，用途在確定網(wǎng)站架構(gòu)和內(nèi)容的時(shí)候作用較大。

比如：一名律師想要記錄和客戶談話的時(shí)間，并很快記錄下來(lái)。

場(chǎng)景類型二 精細(xì)化的場(chǎng)景

掌握用戶的細(xì)節(jié)，了解更深的用戶信息和習(xí)慣。這些細(xì)節(jié)能幫助我們更深入的理解用戶特征及行為。知道了這些信息，我們更容易設(shè)計(jì)出讓用戶更舒服、更易操作的產(chǎn)品。

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

場(chǎng)景類型三 全面的測(cè)試場(chǎng)景

站在用戶的角度呈現(xiàn)用戶完成任務(wù)的每一步操作除了背景信息之外，還包含了用戶完成任務(wù)的所有操作步驟。它可以用來(lái)完整地呈現(xiàn)用戶完成某個(gè)任務(wù)的所有操作步驟，它很好的解釋了用戶是如何利用你的產(chǎn)品一步步操作完成自己的目標(biāo)。

比如說(shuō)：根據(jù)上面律師會(huì)客戶的分析，我們會(huì)做一款計(jì)時(shí)器放到手機(jī)端產(chǎn)品中，并且是不打擾他其他工作，也不會(huì)出現(xiàn)任何聲音，停止計(jì)時(shí)后我們會(huì)讓他直接錄入記錄文字。

在了解了一些場(chǎng)景的概念后，我們簡(jiǎn)單了解下什么叫場(chǎng)景設(shè)計(jì)：

場(chǎng)景設(shè)計(jì)，即一系列場(chǎng)景的判斷與分析，理解用戶每一場(chǎng)景的痛點(diǎn)及需求，結(jié)合上文場(chǎng)景，預(yù)期用戶下一步的目標(biāo)及意圖，通過(guò)設(shè)計(jì)縮短關(guān)鍵流程，輔助用戶提高操作效率。

場(chǎng)景設(shè)計(jì)分為四點(diǎn)，首先我們要把這些場(chǎng)景列舉出來(lái)，形成一個(gè)流程圖，找出其中最關(guān)鍵的場(chǎng)景。

通過(guò)關(guān)鍵的場(chǎng)景，我們要找到用戶當(dāng)前的痛點(diǎn)和需求，并且結(jié)合場(chǎng)景預(yù)期用戶的需求和行為。

我們了解了場(chǎng)景和需求之后，我們的設(shè)計(jì)要、貼心、高效、富有情感的細(xì)節(jié)表達(dá)。我們的產(chǎn)品則是要更具有易用性。

為了檢測(cè)我們通過(guò)上一步設(shè)計(jì)策略產(chǎn)出的方案是否符合標(biāo)準(zhǔn)，這一步我們需要對(duì)方案進(jìn)行衡量判斷，結(jié)合設(shè)計(jì)目標(biāo)，我們?cè)O(shè)定了四個(gè)衡量標(biāo)準(zhǔn)：效率、驚喜、感動(dòng)、期待?？偨Y(jié)起來(lái)就是簡(jiǎn)單和高效。

二、 場(chǎng)景分析對(duì)于交互設(shè)計(jì)

我們剛剛了解了場(chǎng)景和場(chǎng)景分析，我們繼續(xù)今天第二個(gè)題目：場(chǎng)景分析對(duì)于交互設(shè)計(jì)。

那么交互設(shè)計(jì)師要如何設(shè)計(jì)頁(yè)面呢？

如果是我 我會(huì)了解用戶的目標(biāo)，繼續(xù)剛才的例子，用戶的目標(biāo)就是想要計(jì)時(shí)。

用戶進(jìn)入界面的場(chǎng)景，直接進(jìn)入、上次計(jì)時(shí)后忘記停止再次進(jìn)入、在PC端計(jì)時(shí)后忘記結(jié)束后再進(jìn)入。這些都是可能的進(jìn)入方式，我們要針對(duì)每一種場(chǎng)景設(shè)計(jì)不同的任務(wù)流程。

我們?cè)敿?xì)列舉出每一個(gè)環(huán)節(jié)的流程之后我們分析他記入頁(yè)面的預(yù)期，計(jì)時(shí)功能，可以編輯內(nèi)容。

了解并分析了這些之后，我們就可以開始完整他的所有信息，設(shè)計(jì)她的細(xì)節(jié)并開始交互。

這樣的方法就是場(chǎng)景化的交互設(shè)計(jì)。

站在用戶的角度去思考問(wèn)題，為用戶所處的場(chǎng)景，提供相應(yīng)的解決方案，做好信息的整理與分類，引導(dǎo)每一類用戶能夠準(zhǔn)確快速的找到相應(yīng)的功能。

他總結(jié)起來(lái)可以分為三大部分：需求分析、場(chǎng)景分析、原型設(shè)計(jì)。

要求分析階段，我們要分析各種的需求，我們?cè)O(shè)定的場(chǎng)景不是在想當(dāng)然中完成的，而是通過(guò)對(duì)調(diào)查研究用戶現(xiàn)場(chǎng)，并從中獲取有效信息和經(jīng)驗(yàn)等方式來(lái)進(jìn)行的。

場(chǎng)景分析，是設(shè)計(jì)的核心階段，這個(gè)階段是情景設(shè)定過(guò)程中的核心階段，可以細(xì)分為用戶調(diào)研、分析和模擬流程。

通過(guò)用戶的研究，并分析用戶的具體行為和對(duì)產(chǎn)品的具體要求；場(chǎng)景分析是將獲取到的信息進(jìn)行結(jié)構(gòu)化及視覺(jué)化 分析環(huán)境，載體（pc 手機(jī) 觸屏等）；模擬產(chǎn)品被使用的全過(guò)程，這些模擬的過(guò)程必須反應(yīng)用戶對(duì)產(chǎn)品的要求，能夠充分地描述用戶在產(chǎn)品使用過(guò)程中遇到的問(wèn)題，并進(jìn)一步提出解決問(wèn)題的方案，通過(guò)這個(gè)階段，設(shè)計(jì)師可以清楚地觀察到用戶在產(chǎn)品使用中呈現(xiàn)出怎樣的形態(tài)。

制作我們的demo原型，可以對(duì)原型進(jìn)行測(cè)試和易用性的評(píng)價(jià)，可以讓設(shè)計(jì)師進(jìn)一步了解用戶需求、了解用戶和產(chǎn)品之間的關(guān)系，為最終產(chǎn)品方案提供最有力的價(jià)值。

原型設(shè)計(jì)階段，在原型制作過(guò)程中可以生成形式多樣的模型，我們可以通過(guò)直接使用這些模型來(lái)進(jìn)行產(chǎn)品的測(cè)試及適用性評(píng)價(jià)。通過(guò)這個(gè)評(píng)價(jià)過(guò)程，設(shè)計(jì)師可以進(jìn)一步觀察用戶和產(chǎn)品之間存在其他關(guān)系，并未產(chǎn)品最終設(shè)計(jì)方案提供參考價(jià)值。

我們可以給以上交互的場(chǎng)景總結(jié)做一個(gè)總結(jié)——需求場(chǎng)景、環(huán)境場(chǎng)景、具體應(yīng)用場(chǎng)景。

• 需求來(lái)源于用戶在現(xiàn)實(shí)生活中遇見(jiàn)的問(wèn)題，用戶需要一種有效解決問(wèn)題的措施，這個(gè)措施就是交互設(shè)計(jì)提供的方案。也就是說(shuō)，用戶的需求就是做設(shè)計(jì)最根本的依據(jù)，可以把需求當(dāng)做一個(gè)場(chǎng)景。
• 場(chǎng)景的第二部分我歸結(jié)為環(huán)境場(chǎng)景，環(huán)境場(chǎng)景包括用戶使用應(yīng)用時(shí)的時(shí)空狀態(tài)以及人體的肢體動(dòng)作狀態(tài)。
• 應(yīng)用場(chǎng)景，我們可以總結(jié)為，應(yīng)用產(chǎn)品的系統(tǒng)、應(yīng)用產(chǎn)品時(shí)系統(tǒng)狀態(tài)、產(chǎn)品目前的運(yùn)行狀態(tài)。

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

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

本文由 @Derek 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。