編者按：O2O席卷各大城市的時(shí)候，設(shè)計(jì)師該如何與時(shí)俱進(jìn)，打造線上和線下無(wú)割裂感的用戶(hù)體驗(yàn)？今天阿里的李恬同學(xué)用一個(gè)特別有趣的例子（如何追到喜歡日系風(fēng)格的女生），分享用戶(hù)體驗(yàn)設(shè)計(jì)中一個(gè)超實(shí)用的方法：五線譜。想知道如何進(jìn)行一場(chǎng)「好感倍增」的約會(huì)？這篇絕對(duì)讓你恍然大悟！

如果說(shuō)我們做的業(yè)務(wù)最終輸出的是一首歌，那我們?cè)O(shè)計(jì)師就是歌曲的編曲者。產(chǎn)品和運(yùn)營(yíng)進(jìn)行歌曲本身的創(chuàng)作，我們?cè)O(shè)計(jì)師在了解了歌曲主題、聽(tīng)眾是誰(shuí)之后，選擇樂(lè)器進(jìn)行編配，最終輸出一個(gè)編曲DEMO，由工程師進(jìn)行錄音、均衡和輸出。我們的設(shè)計(jì)過(guò)程應(yīng)該如音樂(lè)創(chuàng)作一般美好～

一、背景：

見(jiàn)網(wǎng)友、見(jiàn)筆友已經(jīng)成了一種見(jiàn)光死的另一種說(shuō)法，在線上聊天時(shí)浪漫深情憂(yōu)郁的才子，見(jiàn)面時(shí)成了這樣：滿(mǎn)臉胡渣的黑臉大叔，在一條垃圾隨處見(jiàn)的小巷子里請(qǐng)你吃烤串：

這是因?yàn)橛|點(diǎn)發(fā)生了變化。 在線上聊天時(shí)用戶(hù)觸點(diǎn)是聊天工具，網(wǎng)友設(shè)計(jì)的是語(yǔ)言藝術(shù)，他的設(shè)計(jì)目標(biāo)是把自己打造成深情憂(yōu)郁男子，你們之間的交互也僅限于聊天工具提供的功能如文字、表 情等；但見(jiàn)面時(shí)，觸點(diǎn)不是數(shù)字設(shè)備，而是真實(shí)的人、真實(shí)的飯?zhí)?，觸點(diǎn)發(fā)生變化，但設(shè)計(jì)方案卻沒(méi)有因?yàn)橛|點(diǎn)的變化去結(jié)合設(shè)計(jì)目標(biāo)「憂(yōu)郁深情男子」對(duì)觸點(diǎn)界面 進(jìn)行調(diào)整，這就是一種一致性體驗(yàn)上的斷裂。

除此之外，還有體驗(yàn)流程的斷裂或不可用、不易用，很多都是由于對(duì)用戶(hù)的連續(xù)行為、行為地點(diǎn)、觸點(diǎn)考慮不全導(dǎo)致的，隨著O2O業(yè)務(wù)的發(fā)展這些問(wèn)題隨處可見(jiàn)。

左：比如這個(gè)支付成功頁(yè)，單獨(dú)看是沒(méi)有一點(diǎn)問(wèn)題的。但是當(dāng)餐廳服務(wù)員告訴我要把這個(gè)頁(yè)面展示給他，并且他咪著眼睛抄寫(xiě)訂單編號(hào)的時(shí)候，我和服務(wù)員的 體驗(yàn)都不好。一來(lái)沒(méi)有引導(dǎo)我需要打開(kāi)這個(gè)頁(yè)面，二來(lái)服務(wù)員彎下腰來(lái)靠近我的手機(jī)同時(shí)拿紙筆記錄很麻煩。解決方案有很多，就不說(shuō)了。

右：這個(gè)天花板上的旗幟，里面的二維碼非常小，根本無(wú)法掃碼成功。這也是典型的沒(méi)有考慮到用戶(hù)行為場(chǎng)景和觸點(diǎn)導(dǎo)致的體驗(yàn)斷裂。

用戶(hù)行為就像音樂(lè)一樣，是連續(xù)的，以往互聯(lián)網(wǎng)設(shè)計(jì)只針對(duì)一類(lèi)觸點(diǎn)比如PC端的某套系統(tǒng)、無(wú)線端的某個(gè)APP，而通過(guò)制定DPL，也可以將跨實(shí)體觸點(diǎn) 的數(shù)字觸點(diǎn)保持在體驗(yàn)上的連續(xù)和一致性。但O2O中隨著用戶(hù)行為在不同場(chǎng)景的切換，單獨(dú)對(duì)一類(lèi)觸點(diǎn)進(jìn)行分析去設(shè)計(jì)是不完整甚至是割裂的。

二、《O2O用戶(hù)體驗(yàn)五線譜》方法：

1. 方法論概念

早在20世紀(jì)九十年代初，Richard Buchanan教授就把交互設(shè)計(jì)的對(duì)象定義為行為 —— 「Creating and supporting human activities through the mediating influence of products」（通過(guò)產(chǎn)品的媒介作用來(lái)創(chuàng)造和支持人的行為）。在這里的媒介（本文稱(chēng)為觸點(diǎn)），可以是軟硬件，也可能是身體的某個(gè)部位，甚至可能是外在 的環(huán)境媒介。產(chǎn)品界面僅是媒介的一種，O2O場(chǎng)景下的觸點(diǎn)會(huì)有更多真實(shí)實(shí)體、人物等。

所以在這里介紹O2O用戶(hù)體驗(yàn)五線譜，我們使用線的形式，表現(xiàn)出用戶(hù)在我們?cè)O(shè)定的業(yè)務(wù)場(chǎng)景中連續(xù)的行為，像音樂(lè)一樣連續(xù)不間斷，并且線譜的形式擴(kuò)展性較好，增加一條線即可增加一個(gè)維度。

在這個(gè)方法里我們使用5條線，包括用戶(hù)行為、地點(diǎn)、觸點(diǎn)、設(shè)計(jì)策略、設(shè)計(jì)方案，其中用戶(hù)行為、地點(diǎn)、觸點(diǎn)是即定的，也就是在進(jìn)行設(shè)計(jì)前已確定好內(nèi)容 的維度，屬于產(chǎn)品與運(yùn)營(yíng)層面，同時(shí)隨著行為的變化，地點(diǎn)與觸點(diǎn)發(fā)生變化，設(shè)計(jì)策略與設(shè)計(jì)方案需要結(jié)合地點(diǎn)與觸點(diǎn)特性進(jìn)行推導(dǎo)。而在整個(gè)過(guò)程中常量維度為用 戶(hù)、設(shè)計(jì)目標(biāo)，就像一首曲子事先的定調(diào)與定速度一樣，設(shè)計(jì)策略與方案需要遵循整體目標(biāo)為特定用戶(hù)打造。

所以五線譜的方法核心是，在多觸點(diǎn)任務(wù)過(guò)程中，以用戶(hù)連續(xù)行為為主線，隨著行為與地點(diǎn)、觸點(diǎn)的變化，圍繞設(shè)計(jì)目標(biāo)，結(jié)合地點(diǎn)、觸點(diǎn)特性進(jìn)行設(shè)計(jì)，保證用戶(hù)獲得符合場(chǎng)景的體驗(yàn)。

縱向在針對(duì)單個(gè)用戶(hù)行為進(jìn)行設(shè)計(jì)時(shí)首先需要有以下幾點(diǎn)考慮：

-考慮用戶(hù)行為，是否為主動(dòng)行為，主動(dòng)行為是指用戶(hù)主動(dòng)選擇的，是經(jīng)過(guò)思考，選項(xiàng)很多，需要我們進(jìn)行激勵(lì)才會(huì)轉(zhuǎn)化到的行為。業(yè)務(wù)層面并沒(méi)有在用戶(hù)的 主動(dòng)行為上做強(qiáng)激勵(lì)，就需要我們用設(shè)計(jì)的力量引導(dǎo)用戶(hù)的主動(dòng)行為，我稱(chēng)之為轉(zhuǎn)化關(guān)鍵點(diǎn)（標(biāo)紅星），也就是要喚起用戶(hù)何種感受時(shí)會(huì)轉(zhuǎn)化。被動(dòng)行為是指不需激 勵(lì)自然會(huì)產(chǎn)生的一步，比如我在餐廳點(diǎn)完菜了，下一步自然是吃飯。再考慮主動(dòng)行為前是否有合力行為，就是連續(xù)的用戶(hù)行為共同喚起用戶(hù)的轉(zhuǎn)化關(guān)鍵點(diǎn)，在這部分 行為中要反復(fù)關(guān)注到喚起用戶(hù)轉(zhuǎn)化的感受。

- 分析地點(diǎn)特性，用戶(hù)行為的環(huán)境有什么特點(diǎn)，會(huì)對(duì)用戶(hù)行為有什么影響，如何輔助設(shè)計(jì)

- 分析觸點(diǎn)特性，O2O業(yè)務(wù)中，觸點(diǎn)會(huì)以實(shí)體、數(shù)字兩種形式出現(xiàn)，要清楚這些觸點(diǎn)都有怎樣的特性，如何輔助設(shè)計(jì)。

然后進(jìn)行設(shè)計(jì)的推導(dǎo)時(shí)，可以用以下的方式去輔助自己思考：

- 用戶(hù)在（什么特性）的地方

- 利用有（什么特性）的觸點(diǎn)

- 做（什么動(dòng)作、交互）的用戶(hù)行為

- 為讓用戶(hù)體驗(yàn)達(dá)到（怎樣）的設(shè)計(jì)目標(biāo)

- 考慮到（什么用戶(hù)感受、激勵(lì)）的轉(zhuǎn)化關(guān)鍵點(diǎn)

- 在這1步或多步，有（怎樣）的設(shè)計(jì)策略。設(shè)計(jì)策略是圍繞整體目標(biāo)針對(duì)這這1步或多步行為的設(shè)計(jì)方向，到這一步為止我們?cè)谶@個(gè)場(chǎng)景的設(shè)計(jì)思考已經(jīng)比較周全了。

- 最后是設(shè)計(jì)方案的推導(dǎo)，就是針對(duì)具體設(shè)計(jì)的對(duì)象產(chǎn)生具體方案，可以思考，為實(shí)現(xiàn)（怎樣）的設(shè)計(jì)策略，利用（哪個(gè)/些具體的）地點(diǎn)或場(chǎng)景的特性，利用（哪個(gè)/些具體的）的觸點(diǎn)特性。

2. 方法論具體應(yīng)用

我們下面就以一個(gè)通俗的例子來(lái)詮釋這種方法。

有個(gè)男孩為了追求自己心儀的女孩，希望通過(guò)做親自為她做飯的形式提升女孩對(duì)她的好感度，在這里業(yè)務(wù)方就是男孩，用戶(hù)就是女孩。

根據(jù)業(yè)務(wù)訴求，為了讓我心儀的女生感覺(jué)我重視她，為她親自做一頓晚餐，使我們有更多時(shí)間相處并且她對(duì)我產(chǎn)生好感；根據(jù)用戶(hù)訴求，一位文藝、日系的單純女生，對(duì)浪漫戀情還有向往，希望身邊的人與出入場(chǎng)所都有文藝氣質(zhì)，內(nèi)心的聲音是成為蒼井優(yōu)一般的文藝女神。

我們推導(dǎo)出了這次的設(shè)計(jì)目標(biāo)是「讓她感覺(jué)我重視她、相處時(shí)感到舒適，將自己打造成日系無(wú)公害暖男，晚餐整體（菜品、環(huán)境）的文藝?yán)寺庀ⅰ埂?/span>

然后我們梳理出在「邀請(qǐng)女孩到家就餐」的過(guò)程中，她的行為是「收到邀請(qǐng) — 接受邀請(qǐng) — 到訪家中 — 等待晚餐 — 共享晚餐…」，在接受邀請(qǐng)的一步屬于主動(dòng)行為，我們先將其標(biāo)紅星，很遺憾在業(yè)務(wù)層面男孩子沒(méi)有能力將女孩的偶像請(qǐng)來(lái)共進(jìn)晚餐，我們只能通過(guò)設(shè)計(jì)的力量去加 強(qiáng)主動(dòng)行為的轉(zhuǎn)化。

各個(gè)行為對(duì)應(yīng)的地點(diǎn)與觸點(diǎn)，也就是前期在產(chǎn)品運(yùn)營(yíng)層面（即男孩）已確定的用戶(hù)行為觸點(diǎn)分別為「微信 — 家的玄關(guān) — 客廳及相關(guān)配套 — 晚餐及相關(guān)配套 — 微信」，過(guò)程中觸點(diǎn)有四種變化，這樣的情況我們就可以用「五線譜」的方法對(duì)各個(gè)觸點(diǎn)進(jìn)行設(shè)計(jì)推導(dǎo)。地點(diǎn)的維度幫助我們了解用戶(hù)觸點(diǎn)所在場(chǎng)景，輔助我們進(jìn)行 設(shè)計(jì)方案的發(fā)散。這里我們把兩個(gè)在過(guò)程中的常量，用戶(hù)與設(shè)計(jì)目標(biāo)作為指導(dǎo)，不同觸點(diǎn)的設(shè)計(jì)關(guān)鍵點(diǎn)的考慮，都圍繞著用戶(hù)與設(shè)計(jì)目標(biāo)展開(kāi)，以保證整體設(shè)計(jì)方 向。

下一步我們就可以針對(duì)每一步用戶(hù)行為，結(jié)合地點(diǎn)與觸點(diǎn)特性進(jìn)行設(shè)計(jì)策略與方案的發(fā)散。

以「收到邀請(qǐng) — 接受邀請(qǐng)」這兩個(gè)行為為例，地點(diǎn)與觸點(diǎn)均一樣，我們使用同一套設(shè)計(jì)策略（在地點(diǎn)與觸點(diǎn)類(lèi)型相同或性質(zhì)類(lèi)似的連續(xù)行為下可使用同一套設(shè)計(jì)策略）。

首先分析行為，接受邀請(qǐng)是主動(dòng)行為，由于男孩在業(yè)務(wù)層面沒(méi)有進(jìn)行強(qiáng)化，我們需要用設(shè)計(jì)喚起女孩「男生無(wú)害，晚餐有趣」的感受，能激勵(lì)她接受邀請(qǐng)；然 后分析行為地點(diǎn)，使用微信接受邀請(qǐng)可以在任何地點(diǎn)，為顯得「男生無(wú)害」，我們可以進(jìn)行地點(diǎn)的假設(shè)，是在一個(gè)「在有安全感的、舒適的地方」女孩更容易接受邀 請(qǐng)；再進(jìn)行觸點(diǎn)的分析，「微信自帶各種溝通輔助工具如表情包、照片、視頻、位置、分享等」。

所以輔助設(shè)計(jì)推導(dǎo)的思考過(guò)程為:

- 女孩在（有安全感、舒適）的地方

- 利用（微信以及其自帶溝通輔助工具如表情包、照片、視頻、位置、分享等）的觸點(diǎn)

- 做（收到邀請(qǐng)與接受邀請(qǐng)）的用戶(hù)行為

- 為讓用戶(hù)體驗(yàn)達(dá)到（讓她感覺(jué)我重視她、我是日系無(wú)公害暖男、相處感到舒適）的目標(biāo)

- 考慮到（讓她感到我無(wú)害、約會(huì)有趣）的轉(zhuǎn)化關(guān)鍵點(diǎn)

推導(dǎo)出的設(shè)計(jì)策略為: 選擇用戶(hù)有安全感與舒適的地點(diǎn)與時(shí)間，利用微信中可體現(xiàn)無(wú)害、溫暖的視覺(jué)元素，使用日系風(fēng)格照片、分享等工具體現(xiàn)對(duì)約會(huì)重視程度以及展示個(gè)人魅力。

設(shè)計(jì)方案是針對(duì)具體對(duì)象進(jìn)行具體設(shè)計(jì)，即為：

- 在晚上8點(diǎn)至10點(diǎn)間發(fā)起聊天（即假設(shè)女孩在家）；

- 聊天語(yǔ)氣溫柔，使用兔斯基表情；

- 向?qū)Ψ秸故咀约涸?jīng)的廚藝作品使用日系風(fēng)格濾鏡;

- 發(fā)送用MAKA制作的精美邀請(qǐng)函；

- 對(duì)方接受邀請(qǐng)后表示開(kāi)心；

- 用位置發(fā)送家庭地址，給女孩出行建議；

- 提示她早點(diǎn)休息，給她分享一首安靜的輕音樂(lè)；

女孩到訪男孩家后的有連續(xù)行為「到達(dá)家中 — 等待晚餐 — 共享晚餐 — 離開(kāi)」，觸點(diǎn)都是實(shí)體，地點(diǎn)都是在男孩家中，因此我們可使用一套設(shè)計(jì)策略，這些連續(xù)行為下女孩的感受，會(huì)合力影響到下一個(gè)用戶(hù)行為「女孩再次收到邀請(qǐng)與接 受」，轉(zhuǎn)化的關(guān)鍵點(diǎn)在于女孩在整個(gè)合力行為的過(guò)程中感到「放松、感動(dòng)」。

因此在這個(gè)過(guò)程的設(shè)計(jì)中需要反復(fù)關(guān)注到女孩這種感受，所以結(jié)合設(shè)計(jì)目標(biāo)、地點(diǎn)、觸點(diǎn)特性，在這幾步用戶(hù)行為，推導(dǎo)的設(shè)計(jì)策略就是，「在女孩的觸點(diǎn)， 視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)、嗅覺(jué)等多方面針對(duì)女孩日系的喜好進(jìn)行設(shè)計(jì)，讓女孩感受到放松與舒適，同時(shí)在女孩觸點(diǎn)表現(xiàn)出家庭型文藝暖男氣息」，再進(jìn)一步推導(dǎo)的設(shè)計(jì)方 案，例如在「等待晚餐」時(shí)，地點(diǎn)在客廳，觸點(diǎn)是「沙發(fā)、茶具、水果、糖果等招待相關(guān)」，設(shè)計(jì)方案則是「沙發(fā)與茶幾整潔干凈，準(zhǔn)備亞麻質(zhì)感靠墊；準(zhǔn)備日系茶 具、果盤(pán)，水果擺放精美；為她泡一杯日式抹茶；茶幾錯(cuò)落放幾本文藝書(shū)，其中一本為正讀狀態(tài)；播放小野麗莎音樂(lè)；提示女孩可使用的服務(wù)比如電視、iPad 等」

三、回顧幾個(gè)重要的點(diǎn)：

1. 五線譜設(shè)計(jì)方法，適用于多觸點(diǎn)任務(wù)的業(yè)務(wù)。

2. 五線譜是以用戶(hù)連續(xù)行為為主線，隨著行為與地點(diǎn)、觸點(diǎn)的變化，圍繞設(shè)計(jì)目標(biāo)，結(jié)合地點(diǎn)、觸點(diǎn)特性進(jìn)行設(shè)計(jì)，保證用戶(hù)獲得符合場(chǎng)景的體驗(yàn)。

3. 在做多觸點(diǎn)設(shè)計(jì)時(shí)多思考：用戶(hù)在做（什么動(dòng)作、交互）的行為時(shí)，在（什么特性）的地方，可利用（哪個(gè)/些具體的）地點(diǎn)或場(chǎng)景的特性；使用有（什么特性）的 觸點(diǎn)，可利用（哪個(gè)/些具體的）的觸點(diǎn)特性；為讓用戶(hù)體驗(yàn)達(dá)到（怎樣）的設(shè)計(jì)目標(biāo)；考慮到（什么用戶(hù)感受、激勵(lì)…）的轉(zhuǎn)化關(guān)鍵點(diǎn)。