設計筆記006：UE/UX與UI的概念和具體內容

前言

【設計筆記】欄目，

分享遊戲設計和遊戲理念。

內容包括但不僅限於：

業內知名的遊戲設計理論、

市面熱門遊戲的創新設計、

被市場驗證過的設計細節……

等等。

欄目不定期更新，適用行業新人學習。

正文

剛入行的新人，在與美術、技術溝通的時候，常常不瞭解也不理解UED、UI以及UE/UX這些專業術語以及相互之間的區別。

這導致在溝通時因為缺乏專業性而難以說服美術、技術進行遊戲UI設計的功能開發或者是調整優化。

我一直都向大家強調，遊戲策劃是一個越往上走，綜合能力要求越高的工種。尤其是對致力於成為主策劃、製作人的同學來說，一定要培養自己對其他模組內容的專業性，對美術、技術等內容都要有一定程度上的瞭解和理解。

用你的專業性說服美術同事和技術同事，能夠更好地推進工作。

拿我自己來說，做任何一個功能或者是小的優化，我都會和技術同事溝通，向他解釋做這項內容的重要性，而不是簡單地以一句“老大要求做的”就敷衍了事。

下面我就著重講講遊戲設計中，UE/UX與UI的概念和具體內容。

1.UE/UX（User Experience）

UE/UX，英文全稱是User Experience，通常譯為使用者體驗。

UE/UX加個“D”就成了UED，英文全稱是User Experience Design。業內通常譯為使用者體驗設計。

使用者體驗是個人主觀感受，從哲學的角度而言，是主觀的、精神層面的感知。但優秀的使用者體驗是共性的，是可以由好的設計（Good design）來創造的。

從總的設計大類來說，很多設計師都推崇迪特·拉姆斯（Dieter Rams）的“十項原則”：

• 好的設計是創新的（Good design is innovative）；
• 好的設計是實用的（Good design makes a product useful）；
• 好的設計是唯美的（Good design is aesthetic）；
• 好的設計讓產品說話（Good design helps a product to be understood）；
• 好的設計是謙虛的（Good design is unobtrusive）；
• 好的設計是誠實的（Good design is honest）；
• 好的設計堅固耐用（Good design is durable）；
• 好的設計是細緻的（Good design is thorough to the last detail）；
• 好的設計是環保的（Good design is concerned with the environment）；
• 好的設計是極簡的（Good design is as little design as possible）。
  

而在遊戲設計中，使用者介面的設計是使用者體驗（遊戲體驗）的重要一環，也是使用者（玩家）感知最明顯、感受最直接的。

所以使用者介面的設計在遊戲設計中就尤為重要。

當然以上“設計十原則”並不是全部適用於遊戲使用者介面的設計，但其精神內質是共通的。

通常我們將使用者介面設計分為視覺介面設計、人機互動設計、邏輯功能設計三個部分，這三個部分內容不是絕對獨立的，而是互有交叉、互相聯絡又互相制約。

比如說，你視覺介面做得很唯美、很極簡，就很容易影響人機互動的實用性。同理邏輯功能設計亦如此。

優秀的遊戲使用者介面設計，通常是三者達到一種完美的平衡，需要審美優臻、經驗豐富、能力出色的遊戲策劃來進行全域性把控。

而我們在工作中，要理解並且能夠運用“設計十原則”，和美術同事、技術同事溝通時要把工作的重要性講透，讓他們也理解工作的必要性。

比如說，專案主策指示你要把揹包介面做優化，你有理解為什麼要做這項優化嗎（具體到哪個優化點對應哪個體驗優化）？有把你的理解講給美術同事和技術同事嗎？

如果你做到了以上兩點，別的不說，至少美術同事和技術同事認可你的專業性，極大地有助於工作的推進。

2.UI（User Interface）

UI，英文全稱是User Interface，業內通常譯為使用者介面。

所謂使用者介面，是指對軟體的視覺介面、人機互動、操作邏輯的整體設計。使用者介面是構成使用者體驗的重要部分，是有實體的、能被使用者觸控並感知的。

以遊戲為例，遊戲主介面、單個的功能介面等等，都是使用者介面。


UI設計師們根據實際情況，通常將UI的組成部分單元稱為元件。常見的元件有按鈕、進度條、滾動條、核取方塊、文字輸入框、文字、圖片……

而我在上面也提到過，使用者介面分為視覺介面設計、人機互動設計、邏輯功能設計三個部分。其中：

視覺介面設計，主要由美術人員和遊戲策劃把控；

人機互動設計，主要由遊戲策劃把控；

邏輯功能設計，主要由前端技術和遊戲策劃把控。

這裡要額外提一下，所謂的GUI（Graphic User Interface，通常譯為圖形使用者介面）其實也就是我們簡稱的UI。

而UI加個“D”就成UID，英文全稱是User Interface Design，業內通常譯為使用者介面設計。

對於我們遊戲策劃而言，要了解UI設計中常用的元件以及元件的適用情況。關於這個，我曾經出過一篇設計筆記，詳細介紹了UI元件的分類、各自的優劣。感興趣的可以去看看，建議收藏《【設計筆記005】UI設計方法論》。

還有不少同學會把UI與UE/UX弄混，實際上只要懂得兩者的英文全稱，就完全不會出現這個誤解。

很明顯，UI（User Interface）是使用者介面，是實在的、有實體存在的圖形介面；而UE/UX（User Experience）是使用者體驗，是主觀的、精神層面的感知集合。

與UI相關的是UI的組成部分即元件。和美術、技術同事討論的時候，我們會說“這個按鈕的形狀不好看”，這就是在討論UI設計。

而與UE/UX相關的是主觀感受。如“這個按鈕的位置過於偏中間，不符合移動端使用者的喜歡邊緣觸控的操作習慣”，這就是在討論UE/UX。

有個UI設計師在一篇文章中寫到：

說到UI，聯想到的是以下內容：

導航、次導航、選單、下拉選單、按鈕、連結、視窗、圓角、陰影、錯誤提示、警報、更新、核取方塊、密碼輸入框、搜尋框、文字輸入、單選框、文字框、懸停狀態、選擇狀態、按下狀態、工具提示條、橫幅廣告、嵌入式視訊、滑動效果、滾動、點選、圖示、色彩、列表、幻燈片、文字轉換、標記、通知、漸變、彈出視窗、轉盤、確定/取消等等。

而說到UE/UX，則是聯想到以下內容：

人、幸福、解決問題、理解需求、愛、效率、娛樂、快樂、愉悅、微笑、靈魂、溫暖、個性、歡樂、滿意、滿足、得意、興奮、福佑、極度興奮、便捷、魅惑、魔力、生產力、成效等等。

3.結語

文章寫到這裡，相信大家都初步瞭解了UE/UX與UI的概念。希望大家能夠在實際的工作中注重培養自己對UI設計的專業性，給美術同事和技術同事一點點愛。

最後擺四個問題：

UE/UX具體是指什麼？UED又是什麼？

UI具體是指什麼？UID又是什麼？

希望大家能從本篇文章中有所收穫。

相關閱讀：
設計筆記001：“私人訂製”禮包，解決付費投放不精準的新方法？
設計筆記002：日常任務環加小劇情：加強遊戲沉浸感的新思路？（文案向）
設計筆記003：關卡設計的流程（系統向）
設計筆記004：關卡設計的需要具備哪些要素？
設計筆記005：UI設計方法論其一：如何在借鑑的基礎上優化？

作者：策劃木木
來源：木木遊職
原地址：https://mp.weixin.qq.com/s/B8dk2I8Fxr21iMX0XwOniw