Avatar 是一個多重合一的社交遊戲平臺，支援玩家在各類裝置端使用。本篇文章將分享針對 “Avatar” 遊戲平臺進行改版設計的過程，包括從發現問題到競品分析再到最後的改版設計，以及背後的思考，感興趣的朋友，一起來看看吧。

透過這個案例研究，我將分享本人針對“Avatar”遊戲平臺進行改版設計的詳細過程和背後的理由。

一、概覽

Avatar

是一個多重合一的社交平臺，支援玩家在各類裝置 ——

網頁、移動裝置及桌面客戶端使用

。

Avatar

提供了自動高光時刻錄製等功能，讓玩家可以與世界各地玩家分享他們令人驚歎的遊戲。這使得

Avatar

上的內容短小而且節奏快，類似於 Instagram 或 Tik Tok 這樣的應用。

我是透過 Upwork 得到這個專案的，我無法抗拒這個機會去做一個和遊戲有關的專案。

同時作為一個遊戲玩家和設計師，這簡直是天作之合。玩笑歸玩笑，當前版本應用迫切需要改進使用者介面並解決一些嚴重的可用性問題。

二、搞清現有問題

1. 應用內的廣告位置

Avatar 是一個免費的平臺，提供各種功能，比如自動高光錄製、遊戲比賽和社交連線。其唯一的收入來源是透過廣告，透過廣告獲得收入的這種做法，在免費應用內是非常常見的。

在瀏覽我們最喜歡的應用時，我們都知道有多討厭看到廣告，這會干擾我們的體驗。因為這次我身處設計師角色，所以我必須找到一個解決方案來適當地展示商業廣告，同時還要為使用者提供儘可能好的體驗。

2. 移動顯示器上的內容瀏覽體驗

大多數遊戲片段通常是 16：9 的縱橫比，這不是在手機螢幕上垂直方向觀看的最佳體驗。像 Instagram 這樣的其他應用程式處理這個問題的方法是，只顯示 1：1 長寬比的內容，而不顯示其他內容。這可能是 Instagram 的一個有效解決方案，但是對於專門用於遊戲內容的

Avatar

來說，我們需要一個更好的解決方案，

這樣使用者可以快速瀏覽遊戲片段，而不會跳過其中的一些內容

。

3. 快節奏的內容推薦

目前版本的應用有一個遊戲過濾器，

允許使用者發現與一個獨特的遊戲相關的內容

。雖然這是一個好主意，但是實現卻是它失敗的地方。過濾器始終存在於頂部導航，但只有在發現功能期間可用。此外，目前的發現功能提供了小的3×3遊戲剪輯，使使用者不斷點選和檢視的內容，這對快節奏的內容的展示不一定是一個好的選擇。

4. 檢視某一使用者的簡介

個人簡介模組是建立在類似“發現”功能的基礎上。

這導致了基本的使用者介面缺乏關鍵資訊，以及內容的不可訪問性

。

5. 雜亂的使用者介面

撇開所有重要的可用性問題不談，客戶希望我解決的主要問題是視覺設計

。考慮到平臺提供的功能數量，

Avatar

的使用者介面顯得凌亂不堪。客戶尋找一個視覺改造，可以使它看起來更乾淨，同時仍然是迷人的遊戲玩家。

三、競品分析

Avatar

由 Overwolf 提供動力，Overwolf 是一個專門用來開發遊戲應用的框架。它還擁有一個應用商店，裡面有很多遊戲應用程式，提供與

Avatar

類似的功能。

我對這些競爭對手的應用程式進行了深入研究，看看它們是如何解決這一領域中常見的可用性問題的

。然而令我驚訝的是，他們中的大多數在這方面做得相當糟糕。

Avatar競品情緒板

如上圖所示，像 “fuze。tv”，“Outplayed”都是一些受歡迎的 app，但在我看來，他們處理廣告的方式相當糟糕。他們把廣告劃分為一個單獨的部分，有時甚至覆蓋了螢幕的 40% 。

我想以這樣一種方式來展示廣告，

透過設計將塔融合在應用中，而不是僅僅把它作為一個不同的元件來接受

。但這樣做也會帶來其他問題，比如 Overwolf 推薦的 400×300 畫素的最佳廣告尺寸。這將禁止我們在

Avatar

依據不同功能，來使用不同大小的廣告尺寸。

四、重新設計

基於所定義的痛點，是時候戴上我產品設計師的帽子，想出一些可以解決這些問題的功能樣式了。

1. 資訊架構

我從定義

Avatar

的資訊架構開始了改版設計。

這使我能夠深入瞭解應用中提供的每一個功能

，

以及使用者將如何使用這些功能

。我對整體結構做了一些改變，從頂部導航中移除了遊戲過濾器，並透過移動一些次要功能，如將【最佳實踐】功能移入【設定】項內，減少了側導航上的標籤數量。

我還建立了一個當前版本應用的結構化地圖，上面有

Avatar app

當前已有功能及已有問題的圖例。

Avatar移動端與桌面端的資訊結構地圖

2. 線框圖

在這一步，

我將產品視覺化

，

並構想出前面定義的各種問題的解決方案

。和往常一樣，線框圖需要大量的嘗試和錯誤，嘗試一個特性的各種可能性，並根據客戶和潛在使用者的反饋修改每次迭代。

Avata的一些主要功能線框圖

3. 高保真設計

我們終於到達了這裡，我知道你們一直在等待這一刻！（希望如此）

我為兩個解析度 （1280 x 720 和 1920 x 1080 ） 建立了高保真設計圖。最初，我們決定使用 720p，因為客戶希望最好能瞭解，他們的應用在較小顯示屏上會是什麼樣子。而且，在這麼小的尺寸里加入一個 400 x 300 畫素的廣告肯定是很困難的。但我還是設法做到了。後來，我還設計了 1080p 的響應版本，然後是移動應用程式設計。

五、新老對比

現在，下面是 Avatar 一些重要功能的新老對比，我們即將為您呈現一個全新的 Avatar。

1. 內容訂閱流

內容流基本上就在

Avatar

的首屏。它提供最新的遊戲內容，像是來自 Twitter、Reddit 和 Instagram 等主流平臺的內容，或者來自

Avatar

的平臺帖。

請注意，流的開發只能透過 API 完成，而 API 不提供任何可定製的內容。我想到的最好的設計方法是提供一個乾淨的容器，用它來託管來自不同平臺的這些帖子。

2. 發現功能

tab內的發現功能允許使用者檢視在

Avatar

釋出的最新遊戲高光時刻。

3. 高光時刻

Avatar

的一個主要特點就是它可以自動記錄遊戲中的高光時刻。tab內的高光時刻功能顯示了使用者遊戲中錄製的影片片段。

4. 個人簡介

個人簡介，顧名思義就是

Avatar

上所有內容創作者的家。它展示了所有該玩家的基本資訊和頁面功能，幫助他人判斷是否欣賞檢視他的高光時刻影片。

六、App的改版設計

Avatar

的手機改版存在一系列裝置特性的挑戰，

主要是在小尺寸顯示器上適應遊戲內容

。讓我們來看看重新設計後

Avatar

手機移動端的主要特點。

1. 首頁

首頁 tab 欄為使用者提供不同型別的內容，如在同個頁面突出顯示剪輯、圖片和新聞。

2. 搜尋功能

搜尋允許使用者從不同的遊戲或內容建立者那裡發現內容

。

3. 推薦功能

這有點類似於“Tik Tok”

內容流快速瀏覽快節奏內容的功能

。這一部分是專門為觀看高光片段而設計的，在手機位於橫屏時最有意義。

4. 個人資料

個人資料頁的設計與桌面應用的非常相似

。它顯示了所有必要的資訊和功能，幫助使用者快速決策欣賞玩家的高光時刻。

其實我為

Avatar

重新設計的頁面和功能遠遠多於上述這些，

深入解釋所有頁面

，可能需要我寫一本小書。

所以，下面是 Avatar 平臺所有改版頁面的預覽圖。

七、然後……收工！

這就是大概的情況。這是我做

Avatar

手機移動端和客戶端改版的全部過程。希望這些設計能夠很快進行到開發步驟，這樣我們所有人都可以享受在

Avatar app

上分享精彩的遊戲瞬間！

原文作者：Himanshu Aneja（本文翻譯已獲得作者的正式授權）

原文：Gaming Platform Redesign- A UX Case Study | by Himanshu Aneja | UX Planet

譯者：李玥琪；稽核：徐曼鷺；編輯：孫淑雅、李莉好；微信公眾號：TCC翻譯情報局（ID：TCC-design）；連線知識，瞭解全球精選設計乾貨

本文由@TCC翻譯情報局 翻譯釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。