改版案例 | SteamAPP主頁設(shè)計改版

2 評論 4738 瀏覽 17 收藏 10 分鐘

這篇文章里,作者結(jié)合Steam這款產(chǎn)品做了一次APP主頁設(shè)計改版,一起來看看作者的改版設(shè)計思路,或許會給你一些啟發(fā)和幫助。

最近要做個比較系統(tǒng)的改版,包含PC端到移動端,以及體驗、交互、視覺的分析和調(diào)整,讓大家更好的認識體驗和交互的項目流程和思路是什么樣的,最后在落地和輸出時要添加什么內(nèi)容。

重的內(nèi)容和復(fù)雜的分析我會后面再分享,今天先從一個簡單的主題入手——Steam的APP主頁設(shè)計改版。

建議盡量先自己用一用 Steam 的 APP,會對后面的分析點有更好的認識,下面是首頁的部分截圖,先看下目前版本的樣式,自己思考下如何優(yōu)化:

一、改版的說明

本次主題作為小型的改版,重點針對新手作品集應(yīng)該放什么界面,怎么優(yōu)化的難點出發(fā)的。不管是你自己過去做的項目,還是做的練習(xí)改版,在界面的都要滿足最起碼的設(shè)計要求 —— 能看。

而很多原先項目的界面做的非常奇怪、不合理,在放進作品集前,都有必要進行重新優(yōu)化。

雖然部分奇怪的設(shè)計可能由業(yè)務(wù)、領(lǐng)導(dǎo)、歷史引發(fā),但對于看的人來講是不會想去理解背后原因的(尤其是初級設(shè)計市場),只會在意最終表現(xiàn)的效果低于平均值,認為設(shè)計師的水平不行。

回到上面的界面中來,官方的設(shè)計是絕對稱不上合理的(不接受任何反駁),存在的問題很多,下面就做個簡單的分析說明:

問題1:

頂部的欄目非常浪費空間,菜單展開是用于篩選首頁顯示內(nèi)容的,這個名字就沒辦法理解功能的意義,且錢包的放置位置很突兀,以一個 Steam 充值超過 2w 的重度用戶來講,看到移動端展示余額一頭霧水,畢竟這不是一個資產(chǎn)管理應(yīng)用。

問題2:

首屏?xí)兄黝}特賣活動,但是結(jié)合得非常不好,既不能營造活動的氛圍,又不能很好解釋關(guān)聯(lián)游戲商品是什么。且首屏游戲卡片只有一張封面圖片,要點擊后才能看見對應(yīng)信息是非常不合理的,尤其是在國區(qū),看不懂英文標題,而且不熟悉的游戲也不知道是什么類型,根本不會感興趣。

問題3:

下方信息流的展示過于混亂,樣式的應(yīng)用過于死板,沒有展示形式上的變化,是沒有向下瀏覽的動力的,因為感覺看起來都是一樣的。

問題4:

底部導(dǎo)航選項并不是特別符合用戶需要,沒有標題的做法在這個場景里很不合適,尤其首頁用標簽來表示是無法理解的。

有了以上這些問題,就可以進入界面的改動了,更進階的分析和思路我會在之后的分享中提。

二、改版的演示

改版首先是確定頁面的模塊順序和布局,因為是演示案例,做太長不利于展示所以我會去掉下方的一些內(nèi)容,所以整理后的頁面布局如下:

  1. 頂部欄:分頁器(商店、愿望清單、新聞)、錢包、我的、搜索欄
  2. 首屏活動展示:活動背景、主推商品
  3. 次要活動推薦列表
  4. Steam禮品卡
  5. 按類別瀏覽快速入口:角色、動作、戰(zhàn)略……
  6. 精選系列作品
  7. 回顧過去的一年
  8. 基于玩過游戲的推薦:游戲 1、游戲 2、游戲 3
  9. 探索隊列
  10. 商品流:熱銷、超值、DLC、低于 40

整理完內(nèi)容的順序,然后就可以快速搭建原型。下面是原型的方案:

在不以“花里胡哨”的界面視覺為輸出目標的話,視覺就要通過布局和結(jié)構(gòu)的合理性取勝,這里面要花的時間是最多的,思路也要最清晰的,才能為后面建立合理的設(shè)計解釋。

調(diào)整 1:

頂部改動,將菜單改成“商店”,或者推薦也可以,然后和其它兩個選項組成分頁器,可以左右滑動切換頁面。然后錢包作為圖標放右側(cè)去,搜索單獨做成一行。

調(diào)整 2:

頂部活動公告全屏化,增加活動氛圍,并且增加推薦商品的標題,以及推薦商品的相關(guān)解釋露出,引導(dǎo)用戶點擊。

調(diào)整 3:

按類別瀏覽調(diào)整樣式,增加露出選項數(shù)量,減少左右滾動的長度。

調(diào)整 4:

精選系列樣式調(diào)整,增加更多的系列解釋信息,提高專題合集的特性。

調(diào)整 5:

合并下方內(nèi)容成為一個列表,讓感興趣的用戶自己去切換并無限瀏覽,減少到達底部內(nèi)容的高度。

調(diào)整 6:

優(yōu)化底部導(dǎo)航,增加標題,突出打開 APP 最常用的掃碼登錄按鈕。

以上的原型做好,而且邏輯自己想明白以后,就可以進行最后的視覺處理了,可以說最后的處理就是按最基礎(chǔ)的方式添加色彩,圖片,圖標。尤其是內(nèi)容包含豐富的游戲封面、圖片來支撐畫面的色彩豐富性,更不需要去制作一大堆的復(fù)雜樣式,所以要用合理的布局去更好的發(fā)揮這些優(yōu)點。

最終的設(shè)計效果如下:

總結(jié)一遍,很多做的很奇怪的設(shè)計,不是要把它們改的非常突出才叫優(yōu)化,想要做的越用力,結(jié)果就越奇怪。

當(dāng)自己能力不足以駕馭非常復(fù)雜的設(shè)計時,使用常規(guī)、常見的樣式來制作,就能獲得比原先好得多的結(jié)果,這也是優(yōu)化。

結(jié)尾

初級 UI 設(shè)計師學(xué)習(xí)的問題就是總想把步子跨的過大,缺乏對 “有效設(shè)計” 的正確認識。比如有人經(jīng)常會問什么是優(yōu)秀的UI設(shè)計,要如何借鑒。

答案是顯而易見的,在國內(nèi)市場高端的設(shè)計就是各家大廠國民級應(yīng)用的樣子,因為它們都是由年薪幾十萬到上百萬的設(shè)計師們設(shè)計出來的、落地的成果。

雖然很多人會看不上,但大多數(shù)作品集表現(xiàn)出來的成果還是遠遠比不上這些經(jīng)過無數(shù)損耗和內(nèi)耗的線上案例,你得先能達到相同的輸出水平,才能談超越,才能談個性。

下一篇我們就會進一步來分享和體驗、交互有關(guān)的分析和解釋了。

專欄作家

酸梅干超人,微信公眾號:超人的電話亭,人人都是產(chǎn)品經(jīng)理專欄作家。專注于UI交互設(shè)計領(lǐng)域。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash ,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 好看

    來自廣東 回復(fù)
  2. 催更!

    來自廣東 回復(fù)