TCC翻譯情報局 - 案例研究｜Avatar遊戲平台改版－鑽石舞台

▲點擊 "TCC翻譯情報局"關注，回復 "社群" 加入我們

本文共 3585 字，預計閱讀 9分鐘

TCC 情報局的第 170篇乾貨分享

2022年的第 68篇

TCC 推薦：大家好，這裡是TCC翻譯情報局，我是張聿彤。Avatar 是一個多重合一的社交遊戲平台，支持玩家在各類設備端使用。作者通過這篇文章的案例研究分析，將分享自己針對「Avatar」遊戲平台進行改版設計從發現問題到分析市場定位再到最後的再設計全套詳細過程和背後的思考。分別在平台網頁端和手機移動端的同樣 4 個功能點進行再設計，並且附上了優秀的前後設計案例對比圖便於讀者直觀感受，乾貨滿滿，讀起來吧！

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

1.概覽1.Overview

Avatar 是一個多重合一的社交平台，支持玩家在各類設備 —— 網頁、移動設備及桌面客戶端使用。Avatar 提供了自動高光時刻錄製等功能，讓玩家可以與世界各地玩家分享他們令人驚嘆的遊戲。這使得 Avatar 上的內容短小而且節奏快，類似於 Instagram 或 Tik Tok 這樣的應用。

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

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

2.搞清現有問題2.Understanding the current problems
1）應用內的廣告位置

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

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

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

大多數遊戲片段通常是 16:9 的縱橫比，這不是在手機屏幕上垂直方向觀看的最佳體驗。像 Instagram 這樣的其他應用程序處理這個問題的方法是，只顯示 1:1 長寬比的內容，而不顯示其他內容。這可能是 Instagram 的一個有效解決方案，但是對於專門用於遊戲內容的 Avatar 來說，我們需要一個更好的解決方案，這樣用戶可以快速瀏覽遊戲片段，而不會跳過其中的一些內容。

3）快節奏的內容推薦

目前版本的應用有一個遊戲過濾器，允許用戶發現與一個獨特的遊戲相關的內容。雖然這是一個好主意，但是實現卻是它失敗的地方。過濾器始終存在於頂部導航，但只有在發現功能期間可用。此外，目前的發現功能提供了小的3x3遊戲剪輯，使用戶不斷點擊和查看的內容，這對快節奏的內容的展示不一定是一個好的選擇。

4）查看某一用戶的簡介

個人簡介模塊是建立在類似「發現」功能的基礎上。這導致了基本的用戶界面缺乏關鍵信息，以及內容的不可訪問性。

5）雜亂的用戶界面

撇開所有重要的可用性問題不談，客戶希望我解決的主要問題是視覺設計。考慮到平台提供的功能數量，Avatar 的用戶界面顯得凌亂不堪。客戶尋找一個視覺改造，可以使它看起來更乾淨，同時仍然是迷人的遊戲玩家。

3.競品分析3.CompetitiveAnalysis

Avatar 由 Overwolf 提供動力，Overwolf 是一個專門用來開發遊戲應用的框架。它還擁有一個應用商店，裡面有很多遊戲應用程序，提供與 Avatar 類似的功能。我對這些競爭對手的應用程序進行了深入研究，看看它們是如何解決這一領域中常見的可用性問題的。然而令我驚訝的是，他們中的大多數在這方面做得相當糟糕。

Avatar競品情緒板

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

我想以這樣一種方式來展示廣告，通過設計將塔融合在應用中，而不是僅僅把它作為一個不同的組件來接受。但這樣做也會帶來其他問題，比如 Overwolf 推薦的 400x300 像素的最佳廣告尺寸。這將禁止我們在 Avatar 依據不同功能，來使用不同大小的廣告尺寸。

4.重新設計4.The Redesign

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

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 不提供任何可定製的內容。我想到的最好的設計方法是提供一個乾淨的容器，用它來託管來自不同平台的這些帖子。）