Avatar游戲平臺改版

Avatar游戲平臺改版通過這個案例研究，我將分享本人針對“Avatar”游戲平臺進行改版設(shè)計的詳細過程和背后的理由。一、概覽Avatar

是一個多重合一的社交平臺，支持玩家在各類設(shè)備——

網(wǎng)頁、移動設(shè)備及桌面客戶端使用。Avatar

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

Avatar

上的內(nèi)容短小而且節(jié)奏快，類似于Instagram或TikTok這樣的應用。我是通過Upwork得到這個項目的，我無法抗拒這個機會去做一個和游戲有關(guān)的項目。同時作為一個游戲玩家和設(shè)計師，這簡直是天作之合。玩笑歸玩笑，當前版本應用迫切需要改進用戶界面并解決一些嚴重的可用性問題。二、搞清現(xiàn)有問題1.應用內(nèi)的廣告位置Avatar是一個免費的平臺，提供各種功能，比如自動高光錄制、游戲比賽和社交連接。其唯一的收入來源是通過廣告，通過廣告獲得收入的這種做法，在免費應用內(nèi)是非常常見的。在瀏覽我們最喜歡的應用時，我們都知道有多討厭看到廣告，這會干擾我們的體驗。因為這次我身處設(shè)計師角色，所以我必須找到一個解決方案來適當?shù)卣故旧虡I(yè)廣告，同時還要為用戶提供盡可能好的體驗。2.移動顯示器上的內(nèi)容瀏覽體驗大多數(shù)游戲片段通常是16:9的縱橫比，這不是在手機屏幕上垂直方向觀看的最佳體驗。像Instagram這樣的其他應用程序處理這個問題的方法是，只顯示1:1長寬比的內(nèi)容，而不顯示其他內(nèi)容。這可能是Instagram的一個有效解決方案，但是對于專門用于游戲內(nèi)容的

Avatar

來說，我們需要一個更好的解決方案，這樣用戶可以快速瀏覽游戲片段，而不會跳過其中的一些內(nèi)容。3.快節(jié)奏的內(nèi)容推薦目前版本的應用有一個游戲過濾器，允許用戶發(fā)現(xiàn)與一個獨特的游戲相關(guān)的內(nèi)容。雖然這是一個好主意，但是實現(xiàn)卻是它失敗的地方。過濾器始終存在于頂部導航，但只有在發(fā)現(xiàn)功能期間可用。此外，目前的發(fā)現(xiàn)功能提供了小的3×3游戲剪輯，使用戶不斷點擊和查看的內(nèi)容，這對快節(jié)奏的內(nèi)容的展示不一定是一個好的選擇。4.查看某一用戶的簡介個人簡介模塊是建立在類似“發(fā)現(xiàn)”功能的基礎(chǔ)上。這導致了基本的用戶界面缺乏關(guān)鍵信息，以及內(nèi)容的不可訪問性。5.雜亂的用戶界面撇開所有重要的可用性問題不談，客戶希望我解決的主要問題是視覺設(shè)計?？紤]到平臺提供的功能數(shù)量，Avatar

的用戶界面顯得凌亂不堪?？蛻魧ふ乙粋€視覺改造，可以使它看起來更干凈，同時仍然是迷人的游戲玩家。三、競品分析Avatar

由Overwolf提供動力，Overwolf是一個專門用來開發(fā)游戲應用的框架。它還擁有一個應用商店，里面有很多游戲應用程序，提供與

Avatar

類似的功能。我對這些競爭對手的應用程序進行了深入研究，看看它們是如何解決這一領(lǐng)域中常見的可用性問題的。然而令我驚訝的是，他們中的大多數(shù)在這方面做得相當糟糕。Avatar競品情緒板如上圖所示，像“fuze.tv”，“Outplayed”都是一些受歡迎的app，但在我看來，他們處理廣告的方式相當糟糕。他們把廣告劃分為一個單獨的部分，有時甚至覆蓋了屏幕的40%。我想以這樣一種方式來展示廣告，通過設(shè)計將塔融合在應用中，而不是僅僅把它作為一個不同的組件來接受。但這樣做也會帶來其他問題，比如Overwolf推薦的400×300像素的最佳廣告尺寸。這將禁止我們在

Avatar

依據(jù)不同功能，來使用不同大小的廣告尺寸。四、重新設(shè)計基于所定義的痛點，是時候戴上我產(chǎn)品設(shè)計師的帽子，想出一些可以解決這些問題的功能樣式了。1.信息架構(gòu)我從定義

Avatar

的信息架構(gòu)開始了改版設(shè)計。這使我能夠深入了解應用中提供的每一個功能，以及用戶將如何使用這些功能。我對整體結(jié)構(gòu)做了一些改變，從頂部導航中移除了游戲過濾器，并通過移動一些次要功能，如將【最佳實踐】功能移入【設(shè)置】項內(nèi)，減少了側(cè)導航上的標簽數(shù)量。我還創(chuàng)建了一個當前版本應用的結(jié)構(gòu)化地圖，上面有

Avatarapp

當前已有功能及已有問題的圖例。Avatar移動端與桌面端的信息結(jié)構(gòu)地圖2.線框圖在這一步，我將產(chǎn)品可視化，并構(gòu)想出前面定義的各種問題的解決方案。和往常一樣，線框圖需要大量的嘗試和錯誤，嘗試一個特性的各種可能性，并根據(jù)客戶和潛在用戶的反饋修改每次迭代。Avata的一些主要功能線框圖3.高保真設(shè)計我們終于到達了這里，我知道你們一直在等待這一刻?。ㄏＭ绱耍┪覟閮蓚€分辨率(1280x720和1920x1080)創(chuàng)建了高保真設(shè)計圖。最初，我們決定使用720p，因為客戶希望最好能了解，他們的應用在較小顯示屏上會是什么樣子。而且，在這么小的尺寸里加入一個400x300像素的廣告肯定是很困難的。但我還是設(shè)法做到了。后來，我還設(shè)計了1080p的響應版本，然后是移動應用程序設(shè)計。五、新老對比現(xiàn)在，下面是Avatar一些重要功能的新老對比，我們即將為您呈現(xiàn)一個全新的Avatar。1.內(nèi)容訂閱流內(nèi)容流基本上就在

Avatar

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

Avatar

的平臺帖。請注意，流的開發(fā)只能通過API完成，而API不提供任何可定制的內(nèi)容。我想到的最好的設(shè)計方法是提供一個干凈的容器，用它來托管來自不同平臺的這些帖子。2.發(fā)現(xiàn)功能tab內(nèi)的發(fā)現(xiàn)功能允許用戶查看在

Avatar

發(fā)布的最新游戲高光時刻。3.高光時刻Avatar

的一個主要特點就是它可以自動記錄游戲中的高光時刻。tab內(nèi)的高光時刻功能顯示了用戶游戲中錄制的視頻片段。4.個人簡介個人簡介，顧名思義就是

Avatar

上所有內(nèi)容創(chuàng)作者的家。它展示了所有該玩家的基本信息和頁面功能，幫助他人判斷是否欣賞查看他的高光時刻視頻。六、App的改版設(shè)計Avatar

的手機改版存在一系列設(shè)備特性的挑戰(zhàn)，主要是在小尺寸顯示器上適應游戲內(nèi)容。讓我們來看看重新設(shè)計后

Avatar

手機移動端的主要特點。1.首頁首頁tab欄為用戶提供不同類型的內(nèi)容，如在同個頁面突出顯示剪輯、圖片和新聞。2.搜索功能搜索允許用戶從不同的游戲或內(nèi)容創(chuàng)建者那里發(fā)現(xiàn)內(nèi)容。3.推薦功能這有點類似于“TikTok”內(nèi)容流快速瀏覽快節(jié)奏內(nèi)容的功能。這一部分是專門為觀看高光片段而設(shè)計的，在手機位于橫屏時最有意義。4.個人資料個人資料頁的設(shè)計與桌面應用的非常相似。它顯示了所有必要的信息和功能，幫助用戶快速決策欣賞玩家的高光時刻。其實我為

Avatar

重新設(shè)計的頁面和功能遠遠多于上述這些，深入解