繼上篇文章，本文來(lái)談?wù)劸W(wǎng)站聊天機(jī)器人設(shè)計(jì)的第二部分：非語(yǔ)言類溝通的設(shè)計(jì)。

1.信息排布

機(jī)器人和用戶的頭像及其消息的排列方式也不應(yīng)隨意。以下有兩種最常見(jiàn)的對(duì)話顯示類型

A.頭像+消息對(duì)齊（在多數(shù)情況下左對(duì)齊）一個(gè)個(gè)縱向排列

消息對(duì)齊的布局

B.頭像+信息兩端對(duì)齊

兩端對(duì)齊的消息布局

我們認(rèn)為方案B更能反映真實(shí)的對(duì)話。通常，當(dāng)兩個(gè)人談話時(shí)，他們會(huì)互相看著對(duì)方。因此為了使對(duì)話式UI更自然，對(duì)話者的頭像和他們的消息也應(yīng)該這樣顯示。

2.聊天機(jī)器人的形象

我們很幸運(yùn)，因?yàn)閏hopchop有一個(gè)品牌形象。更重要的是，因?yàn)樗麚碛幸粋€(gè)預(yù)先設(shè)計(jì)好的外觀素材庫(kù)可供我們使用，所以Cody可以非常完美的適用于任何目的的對(duì)話式UI。我認(rèn)為很快公司就會(huì)開(kāi)始通過(guò)測(cè)試不同的聊天機(jī)器人頭像來(lái)衡量和優(yōu)化對(duì)話式UI的轉(zhuǎn)化率。

不僅如此，我可以肯定，如果我們有Cody的女版形象，那么用戶的反應(yīng)將與現(xiàn)在使用男性形象的表現(xiàn)完全不同。

Cody的頭像變體

另一方面，我認(rèn)為應(yīng)該避免使用真人照片作為聊天機(jī)器人頭像。這將令人困惑——我是在跟機(jī)器人說(shuō)話，還是跟人說(shuō)話?設(shè)計(jì)師對(duì)于機(jī)器人的視覺(jué)外觀真的應(yīng)該非常小心。順便說(shuō)一個(gè)，這是一個(gè)進(jìn)化的事實(shí)過(guò)程：面部識(shí)別是兒童成長(zhǎng)的首要能力之一，而且通常在他們學(xué)會(huì)說(shuō)話之前幾個(gè)月就會(huì)發(fā)生。

注：這塊筆者是舉例人類幼兒在成長(zhǎng)過(guò)程中的自然發(fā)育過(guò)程，如果聊天機(jī)器人使用人類形象可能會(huì)對(duì)幼齡及其他方面有困難的用戶在使用過(guò)程中帶來(lái)阻礙

除此之外，如果你想用你的真名作為你的機(jī)器人的名字，請(qǐng)確保你的腳本也反映了你的真實(shí)性格。否則和機(jī)器人聊天可能會(huì)對(duì)你的真實(shí)形象產(chǎn)生不利影響。

3.聊天機(jī)器人的面部表情

面部表情是非常重要的。我們也想把它包含在我們的項(xiàng)目中。

眨眼的訊息：

人們平均每分鐘眨10次眼。Cody也是如此。此外，眨眼可以是一個(gè)額外的非語(yǔ)言信號(hào)（例如：呃，我只是開(kāi)玩笑，只是開(kāi)玩笑）。

眨眼狀態(tài)下的聊天機(jī)器人頭像

六種基礎(chǔ)的情感：

另外，聊天機(jī)器人的反應(yīng)可以歸結(jié)為6種基本情緒之一：

• 幸福
• 悲傷
• 驚訝
• 恐懼
• 厭惡
• 憤怒

科迪的表情樣本

4.用戶的面部表情（實(shí)驗(yàn)）

我們希望用戶能夠向Cody發(fā)送非語(yǔ)言類信息。我們使用用戶頭像來(lái)做到這一點(diǎn)。通過(guò)將光標(biāo)懸停在頭像處，用戶可以改變他們的面部表情，作為對(duì)Cody信息的反應(yīng)。它并不能很明顯地反映真實(shí)的面部表情，但它會(huì)利用對(duì)話式UI進(jìn)行另一種形式的交流。

代替用戶的面部表情

5.使用表情符號(hào)

現(xiàn)在人們都使用表情圖這并不奇怪。這很普遍也很有用這些表情圖大大豐富了非語(yǔ)言層面的書(shū)面溝通。

比較以下兩條短語(yǔ)

• A.我討厭你！
• B.我討厭你！

我想對(duì)于我們大多數(shù)人來(lái)說(shuō)，B可以很容易地被翻譯成：我喜歡你，伙計(jì)！ 顯然，Cody和我們大多數(shù)人一樣使用表情符號(hào)。

帶有表情符號(hào)的信息

6.交流感情的表達(dá)——?jiǎng)赢?huà)對(duì)話

動(dòng)畫(huà)可以將對(duì)話式UI的用戶體驗(yàn)提升到下一個(gè)層次，使用戶的UI交互過(guò)程更加自然和愉快。但這并不是全部，動(dòng)畫(huà)元素可以在整個(gè)對(duì)話中扮演一個(gè)重要的角色，負(fù)責(zé)所謂的phatic expression(情感表達(dá))的部分工作。簡(jiǎn)單地說(shuō)，這就是使談話順暢的一切。

注：此處動(dòng)畫(huà)化對(duì)于聊天機(jī)器人的意義譯者認(rèn)為：更多的是增加機(jī)器人的情感化圖像表達(dá)，phatic expression在此處更多的是代表“圖像化情感（回應(yīng)式）表達(dá)”聯(lián)想一下我們平時(shí)使用表情的情景吧，也許對(duì)于你的理解有所幫助

動(dòng)態(tài)化的聊天機(jī)器人頭像

當(dāng)兩人見(jiàn)面時(shí)，他們通常會(huì)用握手來(lái)開(kāi)始交談。它可以讓談話者更接近對(duì)方，觀察他們的眼睛，更清楚地看到他們的臉。因此，Cody的頭像在對(duì)話開(kāi)始時(shí)稍微大一些，允許用戶熟悉Cody，當(dāng)?shù)谝粋€(gè)消息被交換時(shí)，頭像又會(huì)變小。

輸入狀態(tài)

簡(jiǎn)單的輸入狀態(tài)展示可以起到情感上語(yǔ)言交流的效果，它可以告訴用戶：保持冷靜，親愛(ài)的，我還在這里，請(qǐng)給我些時(shí)間回復(fù)。

輸入狀態(tài)有很多種形式。這是最常見(jiàn)的一個(gè)：

輸入狀態(tài)展示

輸入狀態(tài)和懸停狀態(tài)

此外，我們決定利用表達(dá)輸入狀態(tài)的圖標(biāo)來(lái)啟發(fā)用戶——嘿，該你說(shuō)了。用戶頭像旁邊會(huì)顯示一個(gè)靜態(tài)的輸入狀態(tài)圖標(biāo)，然后當(dāng)用戶的鼠標(biāo)劃過(guò)或懸停在一些區(qū)域時(shí)，比如說(shuō)下圖所示的按鍵，輸入狀態(tài)的圖標(biāo)將會(huì)進(jìn)行動(dòng)效展示。

懸停激活輸入指示器

結(jié)尾

這絕對(duì)是?The Rectangles（團(tuán)隊(duì)名）近期研究的最有趣的項(xiàng)目之一。 當(dāng)他們?cè)诰€的人還是很少的時(shí)候，為他們?cè)O(shè)計(jì)一個(gè)對(duì)話式的網(wǎng)站，對(duì)我們的團(tuán)隊(duì)來(lái)說(shuō)是一個(gè)有趣的挑戰(zhàn)。 這讓我們學(xué)到了很多東西，說(shuō)實(shí)話 – 我們可能等不到另外一個(gè)這樣的項(xiàng)目。

現(xiàn)在，我們也可以看到 – 用戶體驗(yàn)設(shè)計(jì)的未來(lái)已經(jīng)到來(lái)。

相關(guān)閱讀

UI原則會(huì)話：網(wǎng)站聊天機(jī)器人設(shè)計(jì)全過(guò)程（上）

原文鏈接：https://medium.com/swlh/conversational-ui-principles-complete-process-of-designing-a-website-chatbot-d0c2a5fee376

本文由@百度UXC?翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議