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

1.信息排布

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

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

消息對齊的布局

B.頭像+信息兩端對齊

兩端對齊的消息布局

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

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

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

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

Cody的頭像變體

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

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

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

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

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

眨眼的訊息：

人們平均每分鐘眨10次眼。Cody也是如此。此外，眨眼可以是一個額外的非語言信號（例如：呃，我只是開玩笑，只是開玩笑）。

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

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

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

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

科迪的表情樣本

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

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

代替用戶的面部表情

5.使用表情符號

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

比較以下兩條短語

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

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

帶有表情符號的信息

6.交流感情的表達(dá)——動畫對話

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

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

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

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

輸入狀態(tài)

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

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

輸入狀態(tài)展示

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

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

懸停激活輸入指示器

結(jié)尾

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

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

相關(guān)閱讀

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

原文鏈接：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)載。

題圖來自unsplash，基于CC0協(xié)議