01.《英雄聯(lián)盟》項目背景
《英雄聯(lián)盟》是目前全球最火的大型moba類網(wǎng)游，從2010年中文官方網(wǎng)站上線至今已有4年左右，在游戲不同階段，《英雄聯(lián)盟》官網(wǎng)也有相對應(yīng)階段的改版。今年作為已經(jīng)公測二周年的成熟產(chǎn)品，結(jié)合《英雄聯(lián)盟》目前的市場時期和定位，我們需要對《英雄聯(lián)盟》進(jìn)行一次較為針對的改版。
02.《英雄聯(lián)盟》新官網(wǎng)設(shè)計風(fēng)格走向
根據(jù)《英雄聯(lián)盟》的游戲畫面和游戲原畫等素材來看，其定位都屬于黑暗、魔幻、重質(zhì)感類的游戲，因此在之前的幾次改版中，為了配合前期的市場推廣和游戲的風(fēng)格營造，都是結(jié)合游戲本身的重色系和重UI來設(shè)計官網(wǎng)，給早期的《英雄聯(lián)盟》進(jìn)行市場風(fēng)格定位。
《英雄聯(lián)盟》在經(jīng)過了幾版重質(zhì)感的官網(wǎng)后，已經(jīng)讓玩家對《英雄聯(lián)盟》的風(fēng)格定位有所熟悉。《英雄聯(lián)盟》目前是一款公測兩年的成熟產(chǎn)品，所承載的重點內(nèi)容不再是風(fēng)格的營造，而是有大量的游戲信息去推送，游戲攻略、游戲視頻、游戲活動等等，這些都是目前這個階段玩家更為關(guān)注的。所以這次改版，我們需要把大量的信息有效的推送給玩家，而不再去對玩家進(jìn)行風(fēng)格沖擊。
因此，我們討論出新版官網(wǎng)改版進(jìn)行了初步方向：
那么此次官網(wǎng)改版，如何給玩家更有效的 傳遞信息 是本次改版的核心。
在 傳遞信息 的同時，為了降低用戶在閱讀信息的時因其他元素對其造成過多的影響，所以我們在官網(wǎng)設(shè)計當(dāng)中削弱重質(zhì)感和降低畫面的重色，采用輕重結(jié)合的淺色調(diào)來完成官網(wǎng)的設(shè)計。
在目前官網(wǎng)的導(dǎo)航處，進(jìn)行鏈接分類優(yōu)化，使網(wǎng)站整個導(dǎo)航架構(gòu)清晰明了，提高用戶瀏覽效率，節(jié)省用戶成本。
03.《英雄聯(lián)盟》新官網(wǎng)設(shè)計元素提煉
在《英雄聯(lián)盟》第三賽季推出的同時，美國RIOT公司對《英雄聯(lián)盟》游戲整體UI以及游戲風(fēng)格進(jìn)行了一次重新定義，整體的風(fēng)格設(shè)計有較大的改變，主要色彩從原本的藍(lán)調(diào)變成了綠調(diào)，UI質(zhì)感也變得更為細(xì)膩，從設(shè)計風(fēng)格可以看出有高貴、華麗、魔幻、神秘的風(fēng)格，整體設(shè)計更個性，更有辨識度。與其他類型的游戲形成了鮮明的對比。
04. 對《英雄聯(lián)盟》老官網(wǎng)分析
經(jīng)過前期對此次官網(wǎng)改版方向的分析與初步確認(rèn)，以及對《英雄聯(lián)盟》新UI整體風(fēng)格走向，我們就可以開始準(zhǔn)備官網(wǎng)首頁的制作。 這里我們先分析目前老官網(wǎng)的數(shù)據(jù)統(tǒng)計，看看玩家關(guān)注哪些區(qū)塊，總結(jié)出一些問題。更有針對性的去進(jìn)行此次的改版。
首頁我們通過 點擊流系統(tǒng) 和 http://ta.qq.com 熱區(qū)圖 分析老官網(wǎng)的區(qū)塊熱門程度，分析出玩家關(guān)注的區(qū)塊。我們采用了7天的統(tǒng)計數(shù)據(jù)。
在官網(wǎng)的常態(tài)的情況下(沒有重大活動而引發(fā)部分區(qū)塊點擊猛增情況)，通過上面的 點擊流 和 熱區(qū)圖 可以分析得出，目前官網(wǎng)受玩家關(guān)注的區(qū)塊有下面幾個：
通過上面數(shù)據(jù)我們可以看出，
1.免費英雄，通過熱區(qū)圖的觀察，點擊量明顯比周圍的區(qū)塊高。這個區(qū)塊出現(xiàn)在老官網(wǎng)不起眼的位置，甚至超過了二屏的位置，但點擊量卻異常的高，而且處于一個長期居高的狀態(tài)，所以這次改版需要提前并安放在更合理的位置。
2.網(wǎng)站導(dǎo)航，就像是一張地圖，可以讓玩家快速找到入口。通過熱區(qū)圖和點擊流的數(shù)據(jù)分析，可以看出玩家在游戲資料，新手引導(dǎo)，下載游戲，視頻專區(qū)以及長期活動和功能頁面的點擊最高，這也符合我們這次改版的意思，信息展示為主。可以看出導(dǎo)航的重要程度非同一般，所以需要對網(wǎng)站的導(dǎo)航進(jìn)行內(nèi)容梳理，從而讓網(wǎng)站整體的導(dǎo)航架構(gòu)清晰明了。
3.游戲新聞，通過熱區(qū)圖的分析，用戶僅僅針對前面3-4條的新聞感興趣，到了后面幾條就大大降低，那么出現(xiàn)這個現(xiàn)象是因為新聞條數(shù)過多?還是因為顯示了新聞?wù)獙?dǎo)致區(qū)塊過長，造成了閱讀壓力?要解決這個問題需要后期新官網(wǎng)上線后，再進(jìn)行數(shù)據(jù)的對比才能有效得出。
4.輪播廣告是一個點擊量不穩(wěn)定的區(qū)塊，會隨著游戲活動出現(xiàn)點擊量暴增的現(xiàn)象，(去年的翻卡牌和砸雪球等活動，輪播區(qū)塊因展示了這些熱門活動的廣告，出現(xiàn)了點擊量猛增的情況)因此可以看出，玩家對活動的關(guān)注可以有效的通過輪播這個區(qū)塊傳播出去，因此輪播區(qū)塊也需要一個更好且合理的位置。
5.長期活動、功能入口是目前官網(wǎng)輪播下的3個按鈕，他目前承載著游戲的功能入口(如聲望系統(tǒng))和長期活動入口(如入駐校園活動)，點擊排行分別是點亮圖標(biāo)和聲望系統(tǒng)再是高校排行。本次改版也將其位置安排在下載按鈕右側(cè)。最終效果待新官網(wǎng)上線后，再進(jìn)行后續(xù)追蹤。
6.游戲下載按鈕是獲得一款游戲客戶端最重要的核心按鈕，但通過數(shù)據(jù)查看，官網(wǎng)首頁的點擊量卻不是那么高，不過通過查找原因，可以大致得出：
原因一：大部分點擊量都通過 引導(dǎo)頁 分流走了，通過查看后臺統(tǒng)計數(shù)據(jù)，可以確定用戶大部分通過引導(dǎo)頁的下載游戲按鈕下載游戲。
原因二：通過官網(wǎng)首頁導(dǎo)航的“游戲下載”鏈接進(jìn)行下載，查看后臺數(shù)據(jù)，有大量點擊量。 雖然首頁下載按鈕點擊量偏低，但為了防止用戶不是通過引導(dǎo)頁而進(jìn)入的官網(wǎng)，所以官網(wǎng)首頁的下載游戲按鈕還是必須出現(xiàn)在明顯的區(qū)域來引導(dǎo)用戶下載。
7:其他如，賽事專區(qū)、戰(zhàn)爭學(xué)院，合作媒體，SOSO問題，幫助專區(qū)也通過權(quán)重大小進(jìn)行區(qū)塊的劃分。
經(jīng)過統(tǒng)計數(shù)據(jù)分析以后，再和項目組進(jìn)行溝通把區(qū)塊進(jìn)行優(yōu)化，分清主次。對內(nèi)容進(jìn)行了從上往下的重要層級劃分，最終得出新版官網(wǎng)交互稿。
關(guān)于個人登錄中心
本次改版新增了用戶登錄系統(tǒng)，用戶能夠登錄《英雄聯(lián)盟》網(wǎng)站，區(qū)別于游戲人生的是，用戶登錄后可以直接拉取游戲內(nèi)的數(shù)據(jù)在官網(wǎng)的個人信息區(qū)塊顯示，如點券、金幣、勝場數(shù)等等，還可以在玩家之間進(jìn)行好友評價、戰(zhàn)績對比， 這無疑增加了用戶對官網(wǎng)的黏性，增強了網(wǎng)站社交性，使得官網(wǎng)和游戲的聯(lián)系性更大。
在新官網(wǎng)的交互中，可以發(fā)現(xiàn)之前提高的重點的區(qū)塊都進(jìn)行了提升，出現(xiàn)在較高的位置。導(dǎo)航的梳理，活動中心的整合、新聞的簡潔性，本周英雄的位置調(diào)整等等。
在進(jìn)行完大量前期工作后，接下來就開始視覺設(shè)計稿的工作。
05. 對《英雄聯(lián)盟》新官網(wǎng)設(shè)計
之前分析到《英雄聯(lián)盟》目前所處的階段更偏向于信息的傳播，所以采用輕重結(jié)合的淺色調(diào)來設(shè)計，使用頭部的質(zhì)感和重色來延續(xù)《英雄聯(lián)盟》的風(fēng)格，在配合內(nèi)容區(qū)塊的淺色內(nèi)容來傳播信息。
為什么輕質(zhì)感扁平化的東西更適合閱讀信息?
一款游戲前期使用貼近游戲的重質(zhì)感設(shè)計，是為了培養(yǎng)用戶對該游戲風(fēng)格認(rèn)識，而當(dāng)用戶培養(yǎng)到一定階段后，輕質(zhì)感扁平化的設(shè)計必定將取代重質(zhì)感設(shè)計，為什么呢?因為一款游戲運營到一段時間后，積累下來的信息會很多，游戲攻略、新聞公告、活動推廣等等數(shù)不勝數(shù)。而輕質(zhì)感能夠快速高效、不大幅度干擾用戶的情況下推送給用戶進(jìn)行閱讀，輕質(zhì)感的設(shè)計能夠還原印刷類設(shè)計的排版，使用戶閱讀起來更順暢。
在這個信息化的時代，時間就是金錢，一些輕質(zhì)感甚至能夠直接用網(wǎng)頁代碼寫出來，而不需要使用圖片，也使得用戶載入網(wǎng)站的速度更加快速，減少服務(wù)器壓力。
設(shè)計之前我們在《英雄聯(lián)盟》的老官網(wǎng)和《英雄聯(lián)盟》新UI中提取出我們需要的色彩，保留了老官網(wǎng)的深藍(lán)色調(diào)作為重色主基調(diào)，再分別提取了新UI內(nèi)的橙紅色和青綠色進(jìn)行色彩搭配，配合內(nèi)容區(qū)塊的淺灰色來進(jìn)行新官網(wǎng)的整體色調(diào)鋪展，再提取新UI內(nèi)的游戲花紋予以輔助設(shè)計。
經(jīng)過對UI提煉之后，就正式開始官網(wǎng)的視覺設(shè)計。我們嘗試了幾款不同的官網(wǎng)樣式。
這是新官網(wǎng)的設(shè)計初稿，首先輸出了上重下輕的設(shè)計思路，以頭部的重質(zhì)感搭配下面的文字信息來進(jìn)行排版設(shè)計。 頭部采用了厚重的材質(zhì)對網(wǎng)站導(dǎo)航、下載按鈕、快速按鈕、輪播圖、新聞公告、以及登錄的個人信息進(jìn)行設(shè)計，深色厚重的石材UI和殘破的個人信息布匹UI，搭配《英雄聯(lián)盟》的原畫和，很好的體現(xiàn)了《英雄聯(lián)盟》的質(zhì)感、魔幻、黑暗的核心風(fēng)格。 下部信息部分，為了更好鋪展信息以便閱讀，則采用了淺色調(diào)與頭部進(jìn)行劃分。整體色調(diào)以之前提取的灰白為主，搭配綠色、橙色輔助。
第二稿延續(xù)了第一稿的設(shè)計結(jié)構(gòu)，但在背景的過渡上采用了煙霧來進(jìn)行過渡，使網(wǎng)站整體更有魔法元素，也沒有第一版那么明顯的切割，下載信息那一欄采用了《英雄聯(lián)盟》游戲內(nèi)的新UI的元素組合，讓網(wǎng)站更貼近了游戲的新風(fēng)格又不失信息的明確推送。 刪除了第一版導(dǎo)航的厚重質(zhì)感，嘗試輕質(zhì)感導(dǎo)航。輪播圖和新聞區(qū)域則取消了質(zhì)感，但依然采用了重色的底來展示新聞，這是為了從頭部的重質(zhì)感過渡到下面信息的輕質(zhì)感。 在文字信息處，第二版也和第一版有較大的改變，首先和項目組溝通，取消了英雄聯(lián)盟社區(qū)版塊，從而減少了首頁信息的承載，然后進(jìn)行版塊的設(shè)計優(yōu)化，減少了橫線的使用，讓信息更加清晰化，閱讀起來更順暢。然后優(yōu)化了版塊的排列順序，也更符合區(qū)塊的重要層級。
確認(rèn)稿在第二稿的基礎(chǔ)上再進(jìn)行了優(yōu)化。頭部的重色區(qū)延續(xù)了英雄聯(lián)盟的藍(lán)色，讓用戶更有親切感，再次對頭部的UI進(jìn)行了削弱，讓網(wǎng)站整體感更輕薄，更突出信息的傳播。 因為頭部的背景會隨著版本或活動進(jìn)行更換，為了后期的背景更換能夠達(dá)到前期設(shè)計的效果，最后還是給導(dǎo)航增加了一個輕薄質(zhì)感，讓導(dǎo)航能夠適應(yīng)色彩不同的背景。
06. 新功能介紹
此次改版中，我們還添加了新功能和豐富了游戲資料，擺脫之前官網(wǎng)只是花瓶的說法。
07.后續(xù)與總結(jié)
首頁的設(shè)計至此完成了，通過前期的分析，再到后面對官網(wǎng)的區(qū)塊、設(shè)計風(fēng)格的調(diào)整優(yōu)化，都達(dá)到了預(yù)期。 在整體內(nèi)容方面，通過對信息的優(yōu)先級別的排列，能夠更好的讓用戶閱讀信息。 在視覺設(shè)計方面，采用了大面積的輕質(zhì)感，以達(dá)到本次 傳遞信息 的主要目的，在加以部分頭部的重色區(qū)塊渲染游戲氣氛，同時輕質(zhì)感的設(shè)計能夠有效的減少頁面的圖片體積，對網(wǎng)站的整體性能有所提高。
注：更多精彩教程請關(guān)注三聯(lián)網(wǎng)頁設(shè)計教程 欄目，