這份指南將通過一個猜數字的對話游戲案例,帶你體會設計對話UI的過程與方法。通過這個案例,會向你詮釋一些核心概念,并提供一些幫助構建良好體驗的實踐參考。
往期回顧:
在開始之前,我們先來重溫下之前章節中介紹的對話設計主要步驟:
- 選擇正確的用戶場景。適合對話UI的場景通常比較簡單、直觀,不需要太復雜性的互動。
- 創建用戶畫像。你的對話表達與功能的呈現方式能夠體現一致性、品牌訴求和人的個性特征。
- 撰寫對話。這個過程中你會構思出大量的對話,并探索出最好的實現方式。
- 進行測試。大聲念出對話,用模擬工具進行測試,確保對話聽起來比較自然,接近人類的對話方式。
- 實現和迭代。使用API.AI實現對話功能,或用Actions SDK在你自己的工具平臺中開發。
一. 選擇正確的用戶場景
游戲對于完成任務的角度來說,是低風險的,但是難點在于用戶很容易會陷入無聊,所以游戲的對話UI需要有較高的吸引力,來滿足用戶的高期望。
對于直觀對話來說,猜數字的游戲是一個很好的例子,不需要用戶太多背景知識,這樣可以有探索的機會,并且便于測試UI的邊界。
二. 創建用戶畫像
人物畫像可以幫助你設計、撰寫UI對話,所以要盡早確定,這樣就能更容易的決策出正確的用詞、語法和句子結構。
我們這個游戲的用戶畫像具有以下的特征:
- 樂觀、愉悅、鼓舞人心。
- 有引導性、機智,能夠推動游戲進行,并鼓勵用戶探索。
- 不會很正式,會采用簡單的語言,這樣游戲能夠吸引不同的用戶年齡層與群體。
我們給它取個名字,叫「數字精靈」,賦予它更多人的個性特征,這些特征源自人們對「魔法」的認知,以及對猜數字游戲的內在期望。
要注意的是,即使你沒有為對話UI注入「人格」,用戶在與對話交互時還是會感受到一個「人」的存在。
三. 撰寫對話
現在我們已經確定了游戲的用戶場景,并構建了用戶畫像,可以準備好開始構思對話框架,梳理用戶旅程了。
對于我們的數字精靈游戲,我們列出了下面的對話作為開始。讓我們跟隨這些對話去了解它們揭示的設計思考與最佳實踐。
對話段落1:愉悅路徑
這段對話描述了一種典型的一個游戲回合過程,用戶猜了三次。
例子中的英文比較易懂,而且原文傳達的更為準確,所以就不做逐句翻譯了,但是我會在圖片下方結合一些文字做簡單的解釋,幫助大家理解。
下一步做什么?要開始編程了嗎?
目前進行到這一步,看起來還不錯,對嗎?但是如果我們就在這里停止,開始專注于這段「愉悅路徑」對話的開發,那么游戲將會非常無聊。用戶有可能在游戲里循環玩上百個回合,所以其實我們可以有很多機會去添加一些趣味性,以持續地吸引用戶。
對話段落2:連續玩兩次的愉悅路徑
這段對話描述了用戶連續玩兩次,猜更多回合的過程。
完善你的用戶畫像
以上對話比前一段對話包含更多的談話回合,所以可以觀察到我們是如何將人格特性注入其中的。這樣設計可以讓游戲更為獨特,但是同時為了覆蓋這些特殊場景,也會增加一些開發成本。
對話段落3:試探性的猜測
這段對話描述了一個用戶隨機說一個數字,系統提供一些線索幫助他們猜出正確答案。(這個例子中,正確答案是23)。
保持讓用戶處于正軌上
有時用戶會嘗試測試系統的邊界,去看看會發生什么(像上面的例子中,系統已經提示要比50更小,然而用戶還是繼續猜90)。以上的這段對話展示了我們如何引導用戶朝著最終要猜出的數字目標前進,同時又能夠包容多樣變化,并保持吸引力。
對話段落4:試探性的猜測
上面的例子中,用戶在猜數字的過程中,突然問長城有多長,系統巧妙的問用戶「你已經退出猜數字游戲了嗎」,這樣來請求確認,以推進對話。
對話段落5:對于超出時間的對話修復
上面的例子中,用戶長時間不回答,系統會智能的根據時長做出不同的響應判斷。
對話段落6:用戶連續三次猜同一個數字
掌控「不好」的輸入
上面這個例子中,用戶故意連續猜三次50,不顧系統的提示,而系統以比較幽默的口吻來回應。
既然這是一個游戲,所以我們可以用有趣的方式來引導處于邊緣場景的用戶,這可以作為設計的一部分。這些邊緣場景也值得去認真打磨構思,因為我們的目標用戶就是這些容易去探索系統極限的人,所以可以更加關注如何去滿足他們的需求。你可能會注意到上面這個例子的錯誤與段落3中的例子比較類似。在把對話用編程實現的過程中,需要注意這些類似的場景,看是否可以用對應的邏輯框架來處理,同時又能夠保留這種多樣性。
對話段落7:退出游戲。用戶放棄,游戲結束
上面這個例子中,用戶直接說出「我放棄了」,系統也能夠根據這個指令,并且告訴用戶正確答案。
四. 進行測試
完成了一組對話的撰寫后,可以大聲的把它們念出來,因為你很有可能撰寫對話時采用書面語言,所以通過念出每段對話能夠幫你找到表達不合適的地方。除此以外,你還可以用谷歌的在線模擬器檢驗:輸入對話文字,讓系統運行讀出來。做了這些工作之后,你會逐漸發現自己越來越能夠掌握撰寫對話的技巧。
下圖是谷歌在線模擬器的界面:
歡迎關注譯者的微信公眾號:愛新覺羅米
「必馬!完整的設計流程合集」
- UI 設計丨超贊干貨!一個完整的UI設計流程是怎樣的?
- 品牌設計丨用一個實戰案例,幫你認識完整的品牌設計流程
- 產品設計 | 一個完善的產品設計流程是怎樣的?聽聽美團設計師怎么說
- 交互設計丨夠專業!一個完整的交互設計流程是怎樣的?
- 圖標設計丨超實用!聊聊圖標設計流程及小技巧
- UED 團隊設計丨接地氣!國內知名UED團隊的設計流程是怎樣的?
================明星欄目推薦================
優優教程網: UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。
設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓