案例研究|Avatar游戲平臺改版
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. 高保真設計
我們終于到達了這里,我知道你們一直在等待這一刻?。ㄏM绱耍?/p>
我為兩個分辨率 (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 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!