《英雄聯盟》新官網改版總結

 　　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提煉之後，就正式開始官網的視覺設計。我們嘗試了幾款不同的官網樣式。

　　這是新官網的設計初稿，首先輸出了上重下輕的設計思路，以頭部的重質感搭配下面的文字信息來進行排版設計。 頭部采用了厚重的材質對網站導航、下載按鈕、快速按鈕、輪播圖、