案例研究|Avatar游戲平臺(tái)改版
Avatar 是一個(gè)多重合一的社交游戲平臺(tái),支持玩家在各類(lèi)設(shè)備端使用。本篇文章將分享針對(duì) “Avatar” 游戲平臺(tái)進(jìn)行改版設(shè)計(jì)的過(guò)程,包括從發(fā)現(xiàn)問(wèn)題到競(jìng)品分析再到最后的改版設(shè)計(jì),以及背后的思考,感興趣的朋友,一起來(lái)看看吧。
通過(guò)這個(gè)案例研究,我將分享本人針對(duì)“Avatar”游戲平臺(tái)進(jìn)行改版設(shè)計(jì)的詳細(xì)過(guò)程和背后的理由。
一、概覽
Avatar 是一個(gè)多重合一的社交平臺(tái),支持玩家在各類(lèi)設(shè)備 —— 網(wǎng)頁(yè)、移動(dòng)設(shè)備及桌面客戶(hù)端使用。Avatar 提供了自動(dòng)高光時(shí)刻錄制等功能,讓玩家可以與世界各地玩家分享他們令人驚嘆的游戲。這使得 Avatar 上的內(nèi)容短小而且節(jié)奏快,類(lèi)似于 Instagram 或 Tik Tok 這樣的應(yīng)用。
我是通過(guò) Upwork 得到這個(gè)項(xiàng)目的,我無(wú)法抗拒這個(gè)機(jī)會(huì)去做一個(gè)和游戲有關(guān)的項(xiàng)目。
同時(shí)作為一個(gè)游戲玩家和設(shè)計(jì)師,這簡(jiǎn)直是天作之合。玩笑歸玩笑,當(dāng)前版本應(yīng)用迫切需要改進(jìn)用戶(hù)界面并解決一些嚴(yán)重的可用性問(wèn)題。
二、搞清現(xiàn)有問(wèn)題
1. 應(yīng)用內(nèi)的廣告位置
Avatar 是一個(gè)免費(fèi)的平臺(tái),提供各種功能,比如自動(dòng)高光錄制、游戲比賽和社交連接。其唯一的收入來(lái)源是通過(guò)廣告,通過(guò)廣告獲得收入的這種做法,在免費(fèi)應(yīng)用內(nèi)是非常常見(jiàn)的。
在瀏覽我們最喜歡的應(yīng)用時(shí),我們都知道有多討厭看到廣告,這會(huì)干擾我們的體驗(yàn)。因?yàn)檫@次我身處設(shè)計(jì)師角色,所以我必須找到一個(gè)解決方案來(lái)適當(dāng)?shù)卣故旧虡I(yè)廣告,同時(shí)還要為用戶(hù)提供盡可能好的體驗(yàn)。
2. 移動(dòng)顯示器上的內(nèi)容瀏覽體驗(yàn)
大多數(shù)游戲片段通常是 16:9 的縱橫比,這不是在手機(jī)屏幕上垂直方向觀看的最佳體驗(yàn)。像 Instagram 這樣的其他應(yīng)用程序處理這個(gè)問(wèn)題的方法是,只顯示 1:1 長(zhǎng)寬比的內(nèi)容,而不顯示其他內(nèi)容。這可能是 Instagram 的一個(gè)有效解決方案,但是對(duì)于專(zhuān)門(mén)用于游戲內(nèi)容的 Avatar 來(lái)說(shuō),我們需要一個(gè)更好的解決方案,這樣用戶(hù)可以快速瀏覽游戲片段,而不會(huì)跳過(guò)其中的一些內(nèi)容。
3. 快節(jié)奏的內(nèi)容推薦
目前版本的應(yīng)用有一個(gè)游戲過(guò)濾器,允許用戶(hù)發(fā)現(xiàn)與一個(gè)獨(dú)特的游戲相關(guān)的內(nèi)容。雖然這是一個(gè)好主意,但是實(shí)現(xiàn)卻是它失敗的地方。過(guò)濾器始終存在于頂部導(dǎo)航,但只有在發(fā)現(xiàn)功能期間可用。此外,目前的發(fā)現(xiàn)功能提供了小的3×3游戲剪輯,使用戶(hù)不斷點(diǎn)擊和查看的內(nèi)容,這對(duì)快節(jié)奏的內(nèi)容的展示不一定是一個(gè)好的選擇。
4. 查看某一用戶(hù)的簡(jiǎn)介
個(gè)人簡(jiǎn)介模塊是建立在類(lèi)似“發(fā)現(xiàn)”功能的基礎(chǔ)上。這導(dǎo)致了基本的用戶(hù)界面缺乏關(guān)鍵信息,以及內(nèi)容的不可訪問(wèn)性。
5. 雜亂的用戶(hù)界面
撇開(kāi)所有重要的可用性問(wèn)題不談,客戶(hù)希望我解決的主要問(wèn)題是視覺(jué)設(shè)計(jì)??紤]到平臺(tái)提供的功能數(shù)量,Avatar 的用戶(hù)界面顯得凌亂不堪??蛻?hù)尋找一個(gè)視覺(jué)改造,可以使它看起來(lái)更干凈,同時(shí)仍然是迷人的游戲玩家。
三、競(jìng)品分析
Avatar 由 Overwolf 提供動(dòng)力,Overwolf 是一個(gè)專(zhuān)門(mén)用來(lái)開(kāi)發(fā)游戲應(yīng)用的框架。它還擁有一個(gè)應(yīng)用商店,里面有很多游戲應(yīng)用程序,提供與 Avatar 類(lèi)似的功能。我對(duì)這些競(jìng)爭(zhēng)對(duì)手的應(yīng)用程序進(jìn)行了深入研究,看看它們是如何解決這一領(lǐng)域中常見(jiàn)的可用性問(wèn)題的。然而令我驚訝的是,他們中的大多數(shù)在這方面做得相當(dāng)糟糕。
Avatar競(jìng)品情緒板
如上圖所示,像 “fuze.tv”,“Outplayed”都是一些受歡迎的 app,但在我看來(lái),他們處理廣告的方式相當(dāng)糟糕。他們把廣告劃分為一個(gè)單獨(dú)的部分,有時(shí)甚至覆蓋了屏幕的 40% 。
我想以這樣一種方式來(lái)展示廣告,通過(guò)設(shè)計(jì)將塔融合在應(yīng)用中,而不是僅僅把它作為一個(gè)不同的組件來(lái)接受。但這樣做也會(huì)帶來(lái)其他問(wèn)題,比如 Overwolf 推薦的 400×300 像素的最佳廣告尺寸。這將禁止我們?cè)?Avatar 依據(jù)不同功能,來(lái)使用不同大小的廣告尺寸。
四、重新設(shè)計(jì)
基于所定義的痛點(diǎn),是時(shí)候戴上我產(chǎn)品設(shè)計(jì)師的帽子,想出一些可以解決這些問(wèn)題的功能樣式了。
1. 信息架構(gòu)
我從定義 Avatar 的信息架構(gòu)開(kāi)始了改版設(shè)計(jì)。這使我能夠深入了解應(yīng)用中提供的每一個(gè)功能,以及用戶(hù)將如何使用這些功能。我對(duì)整體結(jié)構(gòu)做了一些改變,從頂部導(dǎo)航中移除了游戲過(guò)濾器,并通過(guò)移動(dòng)一些次要功能,如將【最佳實(shí)踐】功能移入【設(shè)置】項(xiàng)內(nèi),減少了側(cè)導(dǎo)航上的標(biāo)簽數(shù)量。
我還創(chuàng)建了一個(gè)當(dāng)前版本應(yīng)用的結(jié)構(gòu)化地圖,上面有 Avatar app 當(dāng)前已有功能及已有問(wèn)題的圖例。
Avatar移動(dòng)端與桌面端的信息結(jié)構(gòu)地圖
2. 線框圖
在這一步,我將產(chǎn)品可視化,并構(gòu)想出前面定義的各種問(wèn)題的解決方案。和往常一樣,線框圖需要大量的嘗試和錯(cuò)誤,嘗試一個(gè)特性的各種可能性,并根據(jù)客戶(hù)和潛在用戶(hù)的反饋修改每次迭代。
Avata的一些主要功能線框圖
3. 高保真設(shè)計(jì)
我們終于到達(dá)了這里,我知道你們一直在等待這一刻?。ㄏM绱耍?/p>
我為兩個(gè)分辨率 (1280 x 720 和 1920 x 1080 ) 創(chuàng)建了高保真設(shè)計(jì)圖。最初,我們決定使用 720p,因?yàn)榭蛻?hù)希望最好能了解,他們的應(yīng)用在較小顯示屏上會(huì)是什么樣子。而且,在這么小的尺寸里加入一個(gè) 400 x 300 像素的廣告肯定是很困難的。但我還是設(shè)法做到了。后來(lái),我還設(shè)計(jì)了 1080p 的響應(yīng)版本,然后是移動(dòng)應(yīng)用程序設(shè)計(jì)。
五、新老對(duì)比
現(xiàn)在,下面是 Avatar 一些重要功能的新老對(duì)比,我們即將為您呈現(xiàn)一個(gè)全新的 Avatar。
1. 內(nèi)容訂閱流
內(nèi)容流基本上就在 Avatar 的首屏。它提供最新的游戲內(nèi)容,像是來(lái)自 Twitter、Reddit 和 Instagram 等主流平臺(tái)的內(nèi)容,或者來(lái)自 Avatar 的平臺(tái)帖。
請(qǐng)注意,流的開(kāi)發(fā)只能通過(guò) API 完成,而 API 不提供任何可定制的內(nèi)容。我想到的最好的設(shè)計(jì)方法是提供一個(gè)干凈的容器,用它來(lái)托管來(lái)自不同平臺(tái)的這些帖子。
2. 發(fā)現(xiàn)功能
tab內(nèi)的發(fā)現(xiàn)功能允許用戶(hù)查看在 Avatar 發(fā)布的最新游戲高光時(shí)刻。
3. 高光時(shí)刻
Avatar 的一個(gè)主要特點(diǎn)就是它可以自動(dòng)記錄游戲中的高光時(shí)刻。tab內(nèi)的高光時(shí)刻功能顯示了用戶(hù)游戲中錄制的視頻片段。
4. 個(gè)人簡(jiǎn)介
個(gè)人簡(jiǎn)介,顧名思義就是 Avatar 上所有內(nèi)容創(chuàng)作者的家。它展示了所有該玩家的基本信息和頁(yè)面功能,幫助他人判斷是否欣賞查看他的高光時(shí)刻視頻。
六、App的改版設(shè)計(jì)
Avatar 的手機(jī)改版存在一系列設(shè)備特性的挑戰(zhàn),主要是在小尺寸顯示器上適應(yīng)游戲內(nèi)容。讓我們來(lái)看看重新設(shè)計(jì)后 Avatar 手機(jī)移動(dòng)端的主要特點(diǎn)。
1. 首頁(yè)
首頁(yè) tab 欄為用戶(hù)提供不同類(lèi)型的內(nèi)容,如在同個(gè)頁(yè)面突出顯示剪輯、圖片和新聞。
2. 搜索功能
搜索允許用戶(hù)從不同的游戲或內(nèi)容創(chuàng)建者那里發(fā)現(xiàn)內(nèi)容。
3. 推薦功能
這有點(diǎn)類(lèi)似于“Tik Tok”內(nèi)容流快速瀏覽快節(jié)奏內(nèi)容的功能。這一部分是專(zhuān)門(mén)為觀看高光片段而設(shè)計(jì)的,在手機(jī)位于橫屏?xí)r最有意義。
4. 個(gè)人資料
個(gè)人資料頁(yè)的設(shè)計(jì)與桌面應(yīng)用的非常相似。它顯示了所有必要的信息和功能,幫助用戶(hù)快速?zèng)Q策欣賞玩家的高光時(shí)刻。
其實(shí)我為 Avatar 重新設(shè)計(jì)的頁(yè)面和功能遠(yuǎn)遠(yuǎn)多于上述這些,深入解釋所有頁(yè)面,可能需要我寫(xiě)一本小書(shū)。
所以,下面是 Avatar 平臺(tái)所有改版頁(yè)面的預(yù)覽圖。
七、然后……收工!
這就是大概的情況。這是我做 Avatar 手機(jī)移動(dòng)端和客戶(hù)端改版的全部過(guò)程。希望這些設(shè)計(jì)能夠很快進(jìn)行到開(kāi)發(fā)步驟,這樣我們所有人都可以享受在 Avatar app上分享精彩的游戲瞬間!
原文作者:Himanshu Aneja(本文翻譯已獲得作者的正式授權(quán))
原文:Gaming Platform Redesign- A UX Case Study | by Himanshu Aneja | UX Planet
譯者:李玥琪;審核:徐曼鷺;編輯:孫淑雅、李莉好;微信公眾號(hào):TCC翻譯情報(bào)局(ID:TCC-design);連接知識(shí),了解全球精選設(shè)計(jì)干貨
本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!