• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析英雄聯盟新官網改版總結




    詳細解析英雄聯盟新官網改版總結

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是jasonshuai,感謝jasonshuai提供設計理論的實作教學。

    教學大綱:

    如果問今年哪款遊戲最火爆,英雄聯盟當之無愧,優設群的不少設計師也都有玩唷,今年是LOL公測二周年,TGideas趁勢進行了一次改版,效果很贊,改版過程的思路與細節,童鞋們可以通過這篇文章來了解一下。


    設計理論教學開始

    如果問今年哪款遊戲最火爆,英雄聯盟當之無愧,優設群的不少設計師也都有玩唷,今年是LOL公測二周年,TGideas趁勢進行了一次改版,效果很贊,改版過程的思路與細節,童鞋們可以通過這篇文章來了解一下。

    01.《英雄聯盟》項目背景

    《英雄聯盟》是目前全球最火的大型moba類網游,從2010年中文官方網站上線至今已有4年左右,在遊戲不同階段,《英雄聯盟》官網也有相對應階段的改版。今年作為已經公測二周年的成熟產品,結合《英雄聯盟》目前的市場時期和定位,我們需要對《英雄聯盟》進行一次較為針對的改版。

    02.《英雄聯盟》新官網設計風格走向

    根據《英雄聯盟》的遊戲畫面和遊戲原畫等素材來看,其定位都屬於黑暗、魔幻、重質感類的遊戲,因此在之前的幾次改版中,為了配合前期的市場推廣和遊戲的風格營造,都是結合遊戲本身的重色系和重UI來設計官網,給早期的《英雄聯盟》進行市場風格定位。

    詳細解析英雄聯盟新官網改版總結

    《英雄聯盟》在經過了幾版重質感的官網后,已經讓玩家對《英雄聯盟》的風格定位有所熟悉。《英雄聯盟》目前是一款公測兩年的成熟產品,所承載的重點內容不再是風格的營造,而是有大量的遊戲信息去推送,遊戲攻略、遊戲視頻、遊戲活動等等,這些都是目前這個階段玩家更為關注的。所以這次改版,我們需要把大量的信息有效的推送給玩家,而不再去對玩家進行風格衝擊。

    因此,我們討論出新版官網改版進行了初步方向:

    詳細解析英雄聯盟新官網改版總結

    那麼此次官網改版,如何給玩家更有效的 傳遞信息 是本次改版的核心。

    在 傳遞信息 的同時,為了降低用戶在閱讀信息的時因其他元素對其造成過多的影響,所以我們在官網設計當中削弱重質感和降低畫面的重色,採用輕重結合的淺色調來完成官網的設計。

    在目前官網的導航處,進行鏈接分類優化,使網站整個導航架構清晰明了,提高用戶瀏覽效率,節省用戶成本。

    03.《英雄聯盟》新官網設計元素提煉

    在《英雄聯盟》第三賽季推出的同時,美國RIOT公司對《英雄聯盟》遊戲整體UI以及遊戲風格進行了一次重新定義,整體的風格設計有較大的改變,主要色彩從原本的藍調變成了綠調,UI質感也變得更為細膩,從設計風格可以看出有高貴、華麗、魔幻、神秘的風格,整體設計更個性,更有辨識度。與其他類型的遊戲形成了鮮明的對比。

    詳細解析英雄聯盟新官網改版總結

    詳細解析英雄聯盟新官網改版總結

    04. 對《英雄聯盟》老官網分析

    經過前期對此次官網改版方向的分析與初步確認,以及對《英雄聯盟》新UI整體風格走向,我們就可以開始準備官網首頁的製作。 這裡我們先分析目前老官網的數據統計,看看玩家關注哪些區塊,總結出一些問題。更有針對性的去進行此次的改版。

    詳細解析英雄聯盟新官網改版總結

    首頁我們通過 點擊流系統 和 http://ta.qq.com 熱區圖 分析老官網的區塊熱門程度,分析出玩家關注的區塊。我們採用了7天的統計數據。

    詳細解析英雄聯盟新官網改版總結

    在官網的常態的情況下(沒有重大活動而引發部分區塊點擊猛增情況),通過上面的 點擊流 和 熱區圖 可以分析得出,目前官網受玩家關注的區塊有下面幾個:

    詳細解析英雄聯盟新官網改版總結

    通過上面數據我們可以看出,

    1.免費英雄,通過熱區圖的觀察,點擊量明顯比周圍的區塊高。這個區塊出現在老官網不起眼的位置,甚至超過了二屏的位置,但點擊量卻異常的高,而且處於一個長期居高的狀態,所以這次改版需要提前並安放在更合理的位置。

    2.網站導航,就像是一張地圖,可以讓玩家快速找到入口。通過熱區圖和點擊流的數據分析,可以看出玩家在遊戲資料,新手引導,下載遊戲,視頻專區以及長期活動和功能頁面的點擊最高,這也符合我們這次改版的意思,信息展示為主。可以看出導航的重要程度非同一般,所以需要對網站的導航進行內容梳理,從而讓網站整體的導航架構清晰明了。

    3.遊戲新聞,通過熱區圖的分析,用戶僅僅針對前面3-4條的新聞感興趣,到了後面幾條就大大降低,那麼出現這個現象是因為新聞條數過多?還是因為顯示了新聞摘要導致區塊過長,造成了閱讀壓力?要解決這個問題需要後期新官網上線后,再進行數據的對比才能有效得出。

    4.輪播廣告是一個點擊量不穩定的區塊,會隨着遊戲活動出現點擊量暴增的現象,(去年的翻卡牌和砸雪球等活動,輪播區塊因展示了這些熱門活動的廣告,出現了點擊量猛增的情況)因此可以看出,玩家對活動的關注可以有效的通過輪播這個區塊傳播出去,因此輪播區塊也需要一個更好且合理的位置。

    5.長期活動、功能入口是目前官網輪播下的3個按鈕,他目前承載着遊戲的功能入口(如聲望系統)和長期活動入口(如入駐校園活動),點擊排行分別是點亮圖標和聲望系統再是高校排行。本次改版也將其位置安排在下載按鈕右側。最終效果待新官網上線后,再進行後續追蹤。

    6.遊戲下載按鈕是獲得一款遊戲客戶端最重要的核心按鈕,但通過數據查看,官網首頁的點擊量卻不是那麼高,不過通過查找原因,可以大致得出:

    原因一:大部分點擊量都通過 引導頁 分流走了,通過查看後台統計數據,可以確定用戶大部分通過引導頁的下載遊戲按鈕下載遊戲。

    原因二:通過官網首頁導航的“遊戲下載”鏈接進行下載,查看後台數據,有大量點擊量。 雖然首頁下載按鈕點擊量偏低,但為了防止用戶不是通過引導頁而進入的官網,所以官網首頁的下載遊戲按鈕還是必須出現在明顯的區域來引導用戶下載。

    7:其他如,賽事專區、戰爭學院,合作媒體,SOSO問題,幫助專區也通過權重大小進行區塊的劃分。

    經過統計數據分析以後,再和項目組進行溝通把區塊進行優化,分清主次。對內容進行了從上往下的重要層級劃分,最終得出新版官網交互稿。

    詳細解析英雄聯盟新官網改版總結

    關於個人登錄中心

    本次改版新增了用戶登錄系統,用戶能夠登錄《英雄聯盟》網站,區別於遊戲人生的是,用戶登錄后可以直接拉取遊戲內的數據在官網的個人信息區塊顯示,如點券、金幣、勝場數等等,還可以在玩家之間進行好友評價、戰績對比, 這無疑增加了用戶對官網的黏性,增強了網站社交性,使得官網和遊戲的聯繫性更大。

    在新官網的交互中,可以發現之前提高的重點的區塊都進行了提升,出現在較高的位置。導航的梳理,活動中心的整合、新聞的簡潔性,本周英雄的位置調整等等。

    在進行完大量前期工作后,接下來就開始視覺設計稿的工作。

    05. 對《英雄聯盟》新官網設計

    之前分析到《英雄聯盟》目前所處的階段更偏向於信息的傳播,所以採用輕重結合的淺色調來設計,使用頭部的質感和重色來延續《英雄聯盟》的風格,在配合內容區塊的淺色內容來傳播信息。

    詳細解析英雄聯盟新官網改版總結

    為什麼輕質感扁平化的東西更適合閱讀信息?

    一款遊戲前期使用貼近遊戲的重質感設計,是為了培養用戶對該遊戲風格認識,而當用戶培養到一定階段后,輕質感扁平化的設計必定將取代重質感設計,為什麼呢?因為一款遊戲運營到一段時間后,積累下來的信息會很多,遊戲攻略、新聞公告、活動推廣等等數不勝數。而輕質感能夠快速高效、不大幅度干擾用戶的情況下推送給用戶進行閱讀,輕質感的設計能夠還原印刷類設計的排版,使用戶閱讀起來更順暢。

    在這個信息化的時代,時間就是金錢,一些輕質感甚至能夠直接用網頁代碼寫出來,而不需要使用圖片,也使得用戶載入網站的速度更加快速,減少服務器壓力。

    設計之前我們在《英雄聯盟》的老官網和《英雄聯盟》新UI中提取出我們需要的色彩,保留了老官網的深藍色調作為重色主基調,再分別提取了新UI內的橙紅色和青綠色進行色彩搭配,配合內容區塊的淺灰色來進行新官網的整體色調鋪展,再提取新UI內的遊戲花紋予以輔助設計。

    詳細解析英雄聯盟新官網改版總結

    經過對UI提煉之後,就正式開始官網的視覺設計。我們嘗試了幾款不同的官網樣式。

    詳細解析英雄聯盟新官網改版總結

    這是新官網的設計初稿,首先輸出了上重下輕的設計思路,以頭部的重質感搭配下面的文字信息來進行排版設計。 頭部採用了厚重的材質對網站導航、下載按鈕、快速按鈕、輪播圖、新聞公告、以及登錄的個人信息進行設計,深色厚重的石材UI和殘破的個人信息布匹UI,搭配《英雄聯盟》的原畫和,很好的體現了《英雄聯盟》的質感、魔幻、黑暗的核心風格。 下部信息部分,為了更好鋪展信息以便閱讀,則採用了淺色調與頭部進行劃分。整體色調以之前提取的灰白為主,搭配綠色、橙色輔助。

    詳細解析英雄聯盟新官網改版總結

    第二稿延續了第一稿的設計結構,但在背景的過渡上採用了煙霧來進行過渡,使網站整體更有魔法元素,也沒有第一版那麼明顯的切割,下載信息那一欄採用了《英雄聯盟》遊戲內的新UI的元素組合,讓網站更貼近了遊戲的新風格又不失信息的明確推送。 刪除了第一版導航的厚重質感,嘗試輕質感導航。輪播圖和新聞區域則取消了質感,但依然採用了重色的底來展示新聞,這是為了從頭部的重質感過渡到下面信息的輕質感。 在文字信息處,第二版也和第一版有較大的改變,首先和項目組溝通,取消了英雄聯盟社區版塊,從而減少了首頁信息的承載,然後進行版塊的設計優化,減少了橫線的使用,讓信息更加清晰化,閱讀起來更順暢。然後優化了版塊的排列順序,也更符合區塊的重要層級。

    詳細解析英雄聯盟新官網改版總結

    確認稿在第二稿的基礎上再進行了優化。頭部的重色區延續了英雄聯盟的藍色,讓用戶更有親切感,再次對頭部的UI進行了削弱,讓網站整體感更輕薄,更突出信息的傳播。 因為頭部的背景會隨着版本或活動進行更換,為了後期的背景更換能夠達到前期設計的效果,最後還是給導航增加了一個輕薄質感,讓導航能夠適應色彩不同的背景。

    06. 新功能介紹

    此次改版中,我們還添加了新功能和豐富了遊戲資料,擺脫之前官網只是花瓶的說法。

    詳細解析英雄聯盟新官網改版總結

    07.後續與總結

    首頁的設計至此完成了,通過前期的分析,再到後面對官網的區塊、設計風格的調整優化,都達到了預期。 在整體內容方面,通過對信息的優先級別的排列,能夠更好的讓用戶閱讀信息。 在視覺設計方面,採用了大面積的輕質感,以達到本次 傳遞信息 的主要目的,在加以部分頭部的重色區塊渲染遊戲氣氛,同時輕質感的設計能夠有效的減少頁面的圖片體積,對網站的整體性能有所提高。

    詳細解析英雄聯盟新官網改版總結

    — —

    文章永久連結為: 詳細解析英雄聯盟新官網改版總結