文/康靚

康靚，騰訊互動娛樂北極光工作室羣交互設計師。

導語

很多人認爲用戶體驗就是用戶使用產品時的心理感受以及對產品的體驗評價，其實更簡單地來說，就是用戶在體驗產品時，產品是如何與外界發生交互以及滿足用戶需求的。Jesse James Garrett 在他的《用戶體驗要素-以用戶爲中心的產品設計》一書中，提出一個經典的用戶體驗模型概念，他把用戶體驗拆分成了表現層、框架層、結構層、範圍層以及戰略層，書中他是針對軟件和網頁來解釋這五個要素的，本文中，我們將選擇遊戲界面來分析這五個要素，並且以此爲線索，介紹遊戲交互設計的具體流程。

一、感受用戶體驗要素

表現層

上圖是《王者榮耀》商城的新品頁面，打開這個頁面的時候，可以看到深藍色基調的界面，頁面上動態的英雄，華麗的帶有特效的寶箱，以及很明顯的橙色按鈕。這些界面中呈現給用戶的第一印象就是表現層的內容。

框架層

表現層再往下細分就是框架層，用戶可以感受到整個系統的框架，比如居中的3D英雄信息下方分別有三種不同途徑的購買按鈕；寶箱圖標上，有展示獎勵的圖標。通過頁切控件來用來切換皮膚與英雄、兌換用的貨幣數量等文本顯示，這些都屬於框架層的內容。

結構層

框架層之下就是更加抽象的結構層，框架層將控件和交互元素進行了具體的排布，結構層的作用則是用來規劃整個界面，比如每個區域呈現什麼內容，如何安排用戶的瀏覽路線，買完新品之後會導向什麼頁面，這是一個比較抽象的概念。

範圍層

第四個層級就是範圍層，在範圍層可以看到這個頁面提供什麼以及不提供什麼，比如在新品商城裏面，會主推新品的相關信息，購買途徑以及抽獎途徑等等，但也有一些不提供的東西，比如《王者榮耀》沒有購物車的功能。

戰略層

最後一層就是戰略層，戰略層就是在這個界面要達成什麼目的，這個目的是雙方的：比如對於用戶來說，他通過這個頁面可以用不同的途徑獲取他想要的英雄和皮膚；而對於企業來說，這個頁面則出售了玩家需要的商品，企業可以獲得商業上的回報。

小結

上圖是這五者之間的關係，對於用戶來說，他的感受是從表現層到戰略層自上而下的，但在進行產品設計的時候，則是從下而上開始設計的。但各個層級之間並不是互相獨立，而是處於環環相扣的狀態。在進行具體的產品設計的時候，是一個自下而上的具體和細化的過程，有時候在下一個環節中，可以發現上一個環節裏出現的問題，然後再反過來進行調整，所以這五者之間並非是單純的線性關係。

對於遊戲交互來說，框架層和結構層是交互設計師主要負責的區域，同時戰略層和範圍層也會影響和決定遊戲交互的具體產出。在完成結構層和框架層的搭建之後，同時還要跟進表現層是否正確地傳達了整個框架的內容。下面將以此爲線索，介紹每一個要素對交互設計的意義。

二 、用戶體驗要素與遊戲交互設計

1.產品目標和用戶目標-戰略層

戰略層往往會被描述爲產品目標和用戶目標，而對於遊戲產品來說，則更適合被描述爲“我們想要什麼，我們的用戶是誰？”

對於交互設計師來說，爲了搞清楚用戶是誰，經常會採取用戶研究的方式來明確目標用戶，常用的方法就是定性研究和定量研究。舉個例子，定性研究就是Demo做完之後，找玩家來進行試玩，並收集他對玩法的意見；定量研究最常見的一種方式是問卷調查，幾乎所有的項目在前期都會進行一個這樣的環節，通過這兩種研究方式的結合，可以瞭解用戶的特徵，並嘗試對用戶進行細分。

進行用戶細分時，用戶畫像是一種常見的設計工具。用戶畫像並不是具體用戶的人物側寫，而是根據定量和定性研究的海量真實用戶的數據所綜合出來的一個抽象成果。上圖就是一個標準的用戶畫像。這類用戶會有一些代表性的臺詞，比如“天天玩吃雞”，“特別討厭菜雞”等。用戶畫像還包括他的一些基本信息，比如年齡、性別、是否單身等。還有一個比較大的部分就是敘述性說明，這和研究目標的相關行爲有關，比如他會在什麼時候來進行遊戲。另外有一個比較重要的關鍵屬性就是他的遊戲經驗以及他的技術水平。最後有一些補充信息，可能和這個研究的課題不相關，但是能豐富這個人物的背景。

上圖中，是二次元遊戲的參考用戶畫像，我們總結了四種不同的用戶畫像：IP教徒典型畫像、遊戲宅典型畫像、遊戲向二次元人典型畫像、跟風宅典型畫像等四種。當我們有了具像的用戶畫像之後，可以從寬泛的設計目標轉向特定的用戶羣體，這有助於我們設計的時候進行換位思考。

在戰略層階段，目標用戶的研究對於交互設計的意義是什麼呢？我們通過一個具體案例進行分析：

《蔚藍戰爭》這款二次元手遊，鎖定的目標玩家羣體是二次元萌宅、軍宅等羣體。在進行交互設計時，設計師出了兩個主界面的方案，一個是在3D的場景中使用六個低精度機娘，因爲機能限制，當人物多的時候，模型的面數必然會低；而另一個畫面則是在偏2D的場景中只使用一個高精度的機娘。我們通過用研報告以及用戶研究，發現目標用戶的首要訴求是細節和精緻的畫面，並且對互動以及可觸碰動態的需求比較大，所以最後採取了後者的方案。

因此，我們回看用戶研究的時候，就會比較明確地發現，比起6個低精度的機娘來說，1個高精度的，可互動的策略是更加能夠滿足用戶需求的。這就是目標畫像的意義之一，它可以使整個方案的評估有據可循。

在立項前期，應該儘量地去了解目標用戶，公司內部會有一些用研報告和調查結果的分析，也可以通過外部互聯網查找相關領域的問卷結果和用研報告，這些數據都可以作爲參考。還有一個途徑是通過遊戲直播，觀察競品的遊戲核心玩家是如何與主播進行互動的，也能提供很多參考信息。

2.功能規格和內容需求-範圍層

在戰略層這個階段，需要解決的問題就是“我們要做什麼？”主要的目標就是儘量去了解用戶，在確定了爲誰設計之後，下一步範圍層的主要工作就是專注於功能和內容。

▲梳理前系統藍圖

▲梳理後系統藍圖

從廣義的範圍層來看，它的產出是一份非常完整的系統藍圖，交互設計師在接收完這些內容後，需要對這些功能進行再次分類梳理，瞭解哪些是核心的系統內容，哪些屬於系統的常規玩法。在梳理完系統藍圖後可以看出，它的分類維度跟商業策劃的系統藍圖是不一樣的，這樣的整理對於遊戲的主界面設計是非常必要的，越早梳理出這個系統全集，那麼後期主界面迭代的成本會降低。

除了非常詳細的系統藍圖之外，還需要爲系統藍圖提供一個帶時間規劃的版本。這對於交互設計是非常有幫助的，能使大家明確知道每個版本的節點中整個遊戲的完成度與複雜度，從而知道針對每個版本，哪些交互規則是必須要優先搭建。

至於狹義的範圍層，就是大家非常常見的功能說明，它輸出的形式就是策劃案。一般來說，策劃案都會闡明三點：系統的設計目的，系統的主要/次要流程以及系統各功能的優先級。其中，交互層面最爲關注的是第三點，有時候也會根據第三點對策劃案進行反饋，協商進行策劃案細則的調整優化。

3.交互流程和信息構架-結構層

在範圍層確定以後，就到了搭建結構層的環節，主要包括交互流程和信息架構，簡單來講就是操作的流程，一般圍繞角色、任務和場景三個要素。角色就是誰在玩我們的遊戲，他們的特徵是怎麼樣的。場景就是角色在什麼樣的環境中玩這個遊戲，比如在地鐵上，或者晚上回家了躺在牀上。任務就是指角色要做什麼，他是準備進行買買還是拉小夥伴一起開黑。交互設計師在分析這三個要素之後，需要描述出可能的用戶行爲以及這個系統下可能的場景，並分析用戶在每個任務中存在的訴求。

上圖是一個產品需求分析模板，裏面一步一步地將這個產品的需求、現有問題、產品目標、用戶場景、用戶訴求、體驗目標和設計方案等全部一一列出，再進行詳細的分析，最終規劃出用戶的操作流程，操作流程裏面會明確玩家在這個流程中所經歷的所有界面。

在策劃案的基礎上還需要根據流程和範圍層的內容，做一個比較複雜的信息架構，信息架構上把這個界面所需要的所有信息都列出來，防止以後有所遺漏。這一步不一定反映在交互的輸出物內，但卻是輸出交互稿前必須的過程。

4.從抽象到具體-框架層

在理清楚結構層的前期工作之後，就可以從抽象到具體，開始着手框架層的工作，進行界面的原型設計。每一個交互設計師對於搭建框架層都有自己不同的感悟，下面簡單說一下自己的幾個心得體會。

第一點是遵從佈局習慣。習慣的含義非常廣，比如在橫版遊戲裏，從玩家雙手拿手機的姿勢中可以看出來，上圖中綠色的部分是容易操作的區域。另外在認知與操作習慣上，在眼動的時候，是處於中央凹的習慣，而到了手動的時候，則是結合前面手持的姿勢，劃定出了兩個大拇指容易操作的空間。要想了解更多用戶習慣的準則，推薦大家閱讀《認知與設計——理解UI設計準則》，這本書講得非常仔細，有排版上常用的格式塔原理，視覺的中央凹原理等等。

第二點是在設計的時候儘可能覆蓋更多的場景和狀態，減少開發的迭代版本，通常會優先考慮以下三點：

• 首先是有和無，比如這個界面中在沒有任何材料的時候，如何引導玩家進行材料的獲取。
• 第二是最少和最多，要充分考慮這兩個極限情況，比如玩家名字最長和最短是多少，列表條數最少和最多是多少，界面需要能同時包容最多和最少的狀態，甚至還要爲最多的狀態下，設計額外的邏輯，這些問題都是可能存在的。
• 最後就是80%和20%，界面在80%的狀態下是什麼樣的，這就決定了界面的默認態是以哪種狀態爲核心來設計，餘下的20%的狀態則只需要涵蓋到即可。比如一個商品列表的數量可能是5到10個的範圍，當再多一個的時候，只需要給出排序規則，而不太需要去擔心只有一個的時候非常難看，因爲80%的情況下一定是像圖中一樣滿屏的狀態。

第三點是，在設計的時候，選擇適合的方式而不一定是“最酷”的方式。舉個例子，上圖是《狐妖小紅娘》的一張微信分享圖，靈器作爲核心養成系統，內容相對複雜，要素也比較多，分享圖中的人物周圍環繞着九個玩家能夠裝備的道具，這些道具的品質和等級，對於老玩家來講是一眼就能分辨出來的炫耀的要素，但同時這張圖又給那些沒有玩過這個遊戲的人一種很酷炫的感覺，因此想要點開來了解這個遊戲。基於這個目的，在第一版設計的時候，我們想用不規則的卡牌墊底，這個方案的預期的最終效果是既美又炫的，但開發週期非常長，需要兩週甚至更多的時間，這個時間成本是難以接受的。

後來我們又換了一種思維方式，將這個系統重做一遍，修改過的方案採取另一個角度，直接採取數學公式加上手寫體的方式，讓老玩家一眼就能看懂上面的數字，同時也讓新玩家能夠感到好奇和有趣。在第二個方案裏面，雖然整體邏輯和素材都非常簡單，但同時又達到了分享的目的，所以在設計的時候，一定要選擇合適的方式，減少不必要的成本，“最酷”的方式不一定是最好的。

第四點是優化交互輸出，保證框架層實現度。對於框架層的輸出稿的可讀性要求是比較高的，上圖就是一個項目早期輸出的交互稿的結構，但其中出現一些問題，比如輸出稿的尺寸是不可控的，另外在視覺和程序的開發過程中，經常漏狀態和漏標註，同時這個輸出稿也不適合用作打印或會議的展示，所以後來進行了一次調整，把所有流程都拆成1到2個界面，使他們能一頁一頁地翻下去，對於開發的同學來說，他能比較清楚地掌握每一頁的內容，不容易漏掉，同時利於將方案打印出來。

5.感知設計-表現層

在交付了可讀性較好的交互稿後，就到了最後一步：表現層。此時就是負責視覺的同學的主場了。在表現層中，交互基本不用再承擔具體的實現工作，而常常是擔任反饋和溝通的角色。表現層的目的是讓框架層變得可以感知，在整個流程中，對於視覺來說，就是實現視覺需求，用自己的方式詮釋交互稿；對於交互設計師來說：則需要保證交互設計被“正確地感知”。因此雙方之間的溝通和雙向修改是不可避免的。

以上是一個交互與設計之間雙向溝通進行修改的案例，圖片是之前做的分享功能中一個很簡單的彈窗，主要目的是告訴玩家進行分享操作及可以免費解籤這件事情。從信息層級來說有三點：第一就是保證信息的傳達，第二是用情感化的形象來增加它的可玩性，第三是如果玩家不想進行分享的操作，需要給他提供一個退出的途徑。

在第一版的設計稿中，基本的信息都已經滿足了，但視覺反饋說這個通用的底板看起來比較呆板，人物也希望換一個更Q更可愛的。

修改後的第二版中，人物變得更可愛了，也沒有了剛剛那個呆板的底板，但在信息層級傳遞上，“分享好友免費解籤”這個信息淹沒在了圖素當中，幾乎難以察覺，而且之前提供的退出途徑也被遺漏了。通過和視覺的商量，最終完成了第三版的視覺稿。

在第三稿中，用氣泡的方式將信息進行了重點強調，同時也恢復了退出的按鈕，人物也換成了系統中本來在使用的人物Q版。此時，交互所需要的三個信息都已經得到了滿足。在基本信息都得到滿足的情況下，視覺的同學還希望繼續朝自己滿意的程度去優化，最終他們又做了一個設計稿。

在最終視覺稿裏，人物採取了比較寫實的形象，但對於交互來說，信息的表達並沒有改變，設計的目的也達成，所以在雙方的同意的情況下，這種設計上的修改大家也是樂於接受的。

三、一份交互稿的煉成實例

瞭解了從實現層到表現層的工作後，下面將整個流程串起來，這是一份交互稿的完整煉成過程。

這個案例選擇的是一個組隊系統，這個系統主要的三個功能點是：玩家申請入隊、隊長管理隊伍、申請列表以及隊員操作隊伍信息。在和策劃覈對策劃案的時候，會有很多需要注意的細節，所以右邊有一個Check List保證策劃案中所需要的內容都涵蓋到。在進行細節逐項覈對後，就可以進行需求分析了。

根據需求分析和策劃案進行流程規劃，首先是主要流程的規劃，在流程的規劃過程中註明幾個核心頁面，例如隊長和隊員兩個規劃維度。

在次要流程中，則主要有四種狀態：隊長解散隊伍、隊長移除隊員、隊長交換隊員位置以及隊長退出隊伍。補充完次要流程後，整個信息架構基本上就搭建起來了，再結合規劃好的流程和需求分析，整理信息構架，明確每個界面需要的元素，以防信息遺漏。

接下來可以進行主要界面的流程規劃了，規劃所有主要界面之間的關係，以及各界面的佈局。複雜的系統到了這個階段，就可以和策劃覈對起來了，主要講清楚每個主要界面之間的關係，以及各個界面的佈局，還有界面之間的跳轉。規劃期間，有問題及時調整而不是放到所有線框圖繪製完成之後。

在和策劃覈對完之後，就可以進行交互稿的繪製。繪製的時候，首先是主要界面的細化，按照信息架構和界面流程將所有的要素都佈局進去。

完成主要界面後，接下來是繪製浮層和彈窗等次要信息。

繪製完這些界面後，就是細化界面上的控件狀態，比如每一個按鈕分爲幾種狀態。

完成所有細節之後，就是做界面的標註，撰寫標註的時候，除了在界面上標清楚可能經歷的流程之外，還需要把各個細節也標註出來，每一個場景下的處理方式，點擊之後的反饋以及極限情況下如何顯示全部寫清楚，最終輸出用於會議review和查閱的文檔。到此爲止就是一個完整的交互設計的流程。

四、實際上，通常沒有這麼理想的煉成流程....

回顧整套交互稿件的輸出流程，時間成本是偏高的。在時間有限，以及一位交互設計師對接多位策劃，接收多種需求的情況下，我們應該如何將需求進行拆解分類，按照類別來進行處理？

實際的交互稿輸出形式，按照緊急性和重要性的程度拆分爲四個區域，對各項需求進行拆分整理。

對交互設計來說，緊急性就是進行交互設計排期的緊急程度，比如有一個系統馬上就要開放了，但沒有辦法複用已有的系統，那麼它的緊急程度是高的。

重要性就是此進行完整交互設計的重要程度，比如遊戲的核心繫統，它的體驗是比較獨特的，因此進行一個完整的流程是非常必要的。

對於既緊急又重要的這部分，必須要預留出獨立的設計時間，輸出物也必須非常詳細有完整的流程圖和線框圖。而對於緊急但不重要的內容，可以配合排期進行快速處理。對於不緊急且不重要的內容，比如完全對標競品的系統/活動，它的交互可以考慮延後，效果圖和程序開發先行。最後是重要但不緊急的內容，通常是不緊急的已有系統迭代，可以利用碎片時間來逐步記錄下優化的想法，儘量在不動原有功能的前提下，進行逐步的優化和推進。

總結：

用戶體驗是其實是用戶在體驗過程中的感官過程，從產品開發之初，到整個研發流程之內，我們始終要從完整的用戶體驗出發。要讓我們的遊戲產品，獲得優質的用戶體驗，交互設計師的工作就是讓用戶更方便快捷高效的完成任務。最終每一件與產品用戶體驗有關的事情都是有意識地、明確地決策的結果，只有這樣才能確保我們的遊戲產品同時滿足項目的戰略目標以及用戶需求。