畢業(yè)設(shè)計(jì)（論文）-《風(fēng)暴英雄》游戲網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn).doc

題目 ：風(fēng)暴英雄游戲網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 院（系） 計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院 專 業(yè) 計(jì)算機(jī)科學(xué)與技術(shù)專業(yè) 屆 別 2011級 學(xué) 號 姓 名 指導(dǎo)老師 華僑大學(xué)教務(wù)處印制 2015年5 月摘 要在漫長的網(wǎng)頁技術(shù)發(fā)展中，界面設(shè)計(jì)工作一直深受設(shè)計(jì)師的關(guān)注，網(wǎng)站設(shè)計(jì)作為一種視覺語言和人機(jī)交互的重要渠道， 特別講究排版和布局，界面設(shè)計(jì)頁是網(wǎng)頁的重要亮點(diǎn)。一個(gè)美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家吸引更多人的眼球；一個(gè)好的交互設(shè)計(jì)對產(chǎn)品的成功起著很關(guān)鍵的作用。年輕用戶對于界面視覺效果與排版布局的關(guān)心，要遠(yuǎn)遠(yuǎn)大于他們對網(wǎng)頁內(nèi)容的關(guān)心。如果說網(wǎng)頁的內(nèi)容與功能是人的肌肉和骨骼，那么界面設(shè)計(jì)與排版布局就是人的外貌和品質(zhì)，是一個(gè)優(yōu)秀網(wǎng)頁必不可少的重要組成部分。檢驗(yàn)一個(gè)網(wǎng)頁的好壞標(biāo)準(zhǔn)是用戶使用的感受。所以界面設(shè)計(jì)要和用戶體驗(yàn)緊密結(jié)合，是一個(gè)不斷為目標(biāo)用戶設(shè)計(jì)滿意視覺效果與瀏覽體驗(yàn)的過程。一個(gè)優(yōu)秀的游戲官網(wǎng)則能為游戲本身吸引大量的玩家。本文以暴雪公司的最新游戲風(fēng)暴英雄為背景，運(yùn)用版式設(shè)計(jì)，色彩心理學(xué)， 用戶體驗(yàn)設(shè)計(jì)和網(wǎng)頁視覺設(shè)計(jì)四個(gè)方法進(jìn)行規(guī)劃和設(shè)計(jì)， 建立一個(gè)整體和諧， 視覺美觀， 用戶體驗(yàn)良好，內(nèi)容清晰的的風(fēng)暴英雄官網(wǎng)界面。關(guān)鍵詞：人機(jī)交互，板式設(shè)計(jì)，色彩心理學(xué)，用戶體驗(yàn)，視覺語言ABSTRACTIn the long web technology development, interface design work has been concerned by the designer, website design as an important channel for a visual language and human-computer interaction, special attention to typography and layout, interface design is an important highlight of the web page. A beautiful interface will bring a comfortable visual enjoyment, to narrow the distance between people and computers for businesses to attract more peoples attention; a good interactive design of successful products play a key role. Young users are concerned about the visual interface layout and typography, is much greater than their interest in web content. If the content and function of the page is the human muscles and bones, so the interface design and layout layout is the appearance and quality of people, it is an excellent indispensable part of the page. The quality standard test a page is the feeling of the user. Therefore, interface design and user experience to be closely integrated design satisfaction is a constant visual effects and browsing experience of the process for the target user. An excellent games official website for the game itself is able to attract a large number of players. In this paper, Blizzards latest game Heroes of the Storm as the background, the use of layout design, color psychology, user experience design and web visual design four methods for planning and design, to create a harmonious overall visual appearance, good user experience, content clear the Heroes of the Storm the official website interface.Keywords： Human-computer interaction; Layout design; Color psychology; Userexperience; Visual language目 錄 第一章 緒論 11.1研究背景和意義 .11.2網(wǎng)頁設(shè)計(jì)的特點(diǎn) .21.3本課題的主要研究內(nèi)容 .3第二章 網(wǎng)頁設(shè)計(jì)方法 .42.1版式設(shè)計(jì) .42.2色彩心理學(xué) .52.3用戶體驗(yàn) .82.4網(wǎng)頁視覺概述 .9第三章風(fēng)暴英雄現(xiàn)有官網(wǎng)綜合分析.103.1游戲背景與網(wǎng)站界面分析.103.2用戶需求分析 .133.3同類網(wǎng)站對比. 193.4問題綜述. 24第四章風(fēng)暴英雄新的官網(wǎng)界面設(shè)計(jì)制作.244.1設(shè)計(jì)方法.244.2設(shè)計(jì)思路. 264.3設(shè)計(jì)過程. 26總結(jié).34 參考文獻(xiàn).35致謝 36第一章 緒 論1.1研究背景和意義隨著計(jì)算機(jī)信息技術(shù)的飛速發(fā)展，全世界都逐漸步入了現(xiàn)代化信息時(shí)代?；ヂ?lián)開始在全球范圍內(nèi)普及。網(wǎng)頁技術(shù)也隨之迎來了發(fā)展的新型浪潮，網(wǎng)頁設(shè)計(jì)的本身依附于互聯(lián)網(wǎng)信息的傳播，它的發(fā)展沒有悠久的歷史作為依靠，卻契合了時(shí)代的訴求，將藝術(shù)理念，平面設(shè)計(jì)等美學(xué)概念囊括其中，衍生出了一種新型的視覺表現(xiàn)形式。網(wǎng)頁設(shè)計(jì)憑借著高超、迅速、美觀的傳播特點(diǎn)，成為了一門獨(dú)立的藝術(shù)課目。網(wǎng)頁發(fā)展地位的提升為互聯(lián)網(wǎng)信息流通搭建了平臺，吸引大批網(wǎng)頁設(shè)計(jì)工作者為之努力奮斗。而在漫長的網(wǎng)頁技術(shù)發(fā)展中，界面設(shè)計(jì)工作一直深受設(shè)計(jì)師的關(guān)注，網(wǎng)站設(shè)計(jì)作為一種視覺語言和人機(jī)交互的重要渠道， 特別講究排版和布局，界面設(shè)計(jì)頁是網(wǎng)頁的重要亮點(diǎn)。一個(gè)美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家吸引更多人的眼球；一個(gè)好的交互設(shè)計(jì)對產(chǎn)品的成功起著很關(guān)鍵的作用。年輕用戶對于界面視覺效果與排版布局的關(guān)心，要遠(yuǎn)遠(yuǎn)大于他們對網(wǎng)頁內(nèi)容的關(guān)心。如果說網(wǎng)頁的內(nèi)容與功能是人的肌肉和骨骼，那么界面設(shè)計(jì)與排版布局就是人的外貌和品質(zhì)，是一個(gè)優(yōu)秀網(wǎng)頁必不可少的重要組成部分。檢驗(yàn)一個(gè)網(wǎng)頁的好壞標(biāo)準(zhǔn)是用戶使用的感受。所以界面設(shè)計(jì)要和用戶體驗(yàn)緊密結(jié)合，是一個(gè)不斷為目標(biāo)用戶設(shè)計(jì)滿意視覺效果與瀏覽體驗(yàn)的過程。一個(gè)優(yōu)秀的游戲官網(wǎng)則能為游戲本身吸引大量的玩家。 風(fēng)暴英雄（Heroes of the Storm 簡稱：HOS） 是一個(gè)由暴雪公司開發(fā)的在線多人競技游戲。游戲中玩家所扮演的英雄全部來自于暴雪三大經(jīng)典游戲系列：魔獸世界、暗黑破壞神和星際爭霸，是暴雪近年來的心血大作。其官方網(wǎng)站作為游戲最新信息公布與玩家互動的重要平臺，對游戲影響力有著關(guān)鍵的作用。 本文以暴雪公司的最新游戲風(fēng)暴英雄為背景，以原官網(wǎng)的內(nèi)容為參考基準(zhǔn)，運(yùn)用版式設(shè)計(jì)，色彩心理學(xué)， 用戶體驗(yàn)設(shè)計(jì)和網(wǎng)頁視覺設(shè)計(jì)四個(gè)方法進(jìn)行重新規(guī)劃和設(shè)計(jì)，建立一個(gè)整體和諧， 視覺美觀， 用戶體驗(yàn)良好，內(nèi)容清晰的的風(fēng)暴英雄官網(wǎng)界面。1.2網(wǎng)頁設(shè)計(jì)特點(diǎn)在互聯(lián)網(wǎng)飛速發(fā)展的今天，各類網(wǎng)站層出不窮，網(wǎng)站的數(shù)量也呈現(xiàn)指數(shù)型暴增的態(tài)勢，而網(wǎng)站所具備的功能不再那么單一，內(nèi)容也變得豐富多樣，因此，相對于前端和后端的網(wǎng)站系統(tǒng)的代碼編寫， 網(wǎng)頁設(shè)計(jì)在整個(gè)網(wǎng)站的設(shè)計(jì)當(dāng)中就有著舉足輕重的地位，它使得藝術(shù)設(shè)計(jì)和心理學(xué)這樣的相關(guān)領(lǐng)域可以融入到整個(gè)網(wǎng)站建設(shè)當(dāng)中，網(wǎng)頁設(shè)計(jì)的特點(diǎn)也不言而喻。網(wǎng)頁設(shè)計(jì)將藝術(shù)設(shè)計(jì)融為其中主要表現(xiàn)在網(wǎng)頁的界面設(shè)計(jì)中。網(wǎng)頁設(shè)計(jì)最終服務(wù)于互聯(lián)網(wǎng)信息傳播，而互聯(lián)網(wǎng)又最終服務(wù)于大眾，這就要求網(wǎng)頁的藝術(shù)形式必須同時(shí)具有藝術(shù)美感與實(shí)用價(jià)值。在網(wǎng)頁設(shè)計(jì)中，以字符組成的界面可以起到傳達(dá)信息的作用，這種形式達(dá)到人機(jī)結(jié)合的雙重統(tǒng)一。網(wǎng)頁的版式設(shè)計(jì)對工作人員的綜合能力與文化素養(yǎng)的要求比較高，并不是單純的文字編輯和圖形平面設(shè)計(jì)。從藝術(shù)的角度上來看，網(wǎng)頁設(shè)計(jì)的重要特點(diǎn)是色彩的搭配，搭配漂亮的顏色比純黑白色的網(wǎng)頁要醒目和出眾。圖片的色彩基本可以歸納為256種，網(wǎng)頁的色彩搭配主要由職業(yè)、修養(yǎng)、知識、消費(fèi)水平等各方面因素決定，針對不同的受眾人群，所做的設(shè)計(jì)也要有所針對。在這樣一個(gè)信息龐雜網(wǎng)絡(luò)世界里，想要吸引大眾的目光，必須依靠強(qiáng)有力的視覺效果打動觀看者。正所謂“刪繁就簡”在藝術(shù)的設(shè)計(jì)表現(xiàn)形式中，要遵守一個(gè)首要原則就是純粹自然，借調(diào)一切繁復(fù)的表現(xiàn)形式，提取最直觀的視覺印象，標(biāo)下網(wǎng)頁設(shè)計(jì)中主題的部分。在經(jīng)濟(jì)飛速發(fā)展的今天，人們的文化素質(zhì)和價(jià)值取向有了更高的發(fā)展，越來越多的人不喜歡將時(shí)間花在一些無所謂的事情上，審美水平更趨向于簡潔明了。設(shè)計(jì)者要充分考慮藝術(shù)設(shè)計(jì)中的設(shè)計(jì)原則，在網(wǎng)頁的藝術(shù)設(shè)計(jì)中，植入“留白”的藝術(shù)概念，給人以舒適的享受，引發(fā)觀看者無限的遐想。網(wǎng)頁上的留白部分同文本、圖片一樣，是給人以美感的部分可以給人心理上的松弛。一個(gè)出色的網(wǎng)頁設(shè)計(jì)師要將瀏覽者的感受融入設(shè)計(jì)中，并在排版布局中，加入平面藝術(shù)設(shè)計(jì)的韻律感，使整個(gè)網(wǎng)頁內(nèi)容張弛有度，創(chuàng)造出最合適的美感?？偟膩碚f，網(wǎng)頁設(shè)計(jì)具有如下六個(gè)特點(diǎn)： (1) 主題明了：通過對網(wǎng)頁的空間層次、主從關(guān)系、視覺秩序及彼此間邏輯關(guān)系的把握運(yùn)用來實(shí)現(xiàn)主題的突出。不但要求單純、簡練、清晰和準(zhǔn)確，而且在強(qiáng)調(diào)藝術(shù)性的同時(shí)， 更注重通過網(wǎng)頁獨(dú)特的風(fēng)格和強(qiáng)烈的視覺沖擊力， 來突出網(wǎng)頁的設(shè)計(jì)主題。 (2) 導(dǎo)覽清晰：在網(wǎng)頁中，使用導(dǎo)航條以及菜單欄的設(shè)計(jì)，使人們能夠在網(wǎng)頁上自由前進(jìn)，下拉，或者后退并且選擇自己需要瀏覽的版塊。 (3) 設(shè)計(jì)的整體性：構(gòu)成網(wǎng)頁界面形式的各個(gè)元素相互依存、彼此聯(lián)系。網(wǎng)頁設(shè) 計(jì)使得整個(gè)網(wǎng)站的頁面風(fēng)格統(tǒng)一、色彩統(tǒng)一、布局統(tǒng)一。(4) 設(shè)計(jì)的對比性：在設(shè)計(jì)過程中，通過多與少、主與次、黑與白（對比色） 、 動 與靜等對比手法的運(yùn)用， 使得用戶能夠?qū)φ跒g覽的網(wǎng)站留下深刻的印象并使網(wǎng)站具 有一定的可識別度。(5) 設(shè)計(jì)分的割性：按照內(nèi)容、主題和信息的展示和分類要求，將頁面區(qū)分成若 干板塊區(qū)域與欄目，使用戶一目了然，充分通過網(wǎng)頁顯示出有效的信息傳達(dá)效果。 (6) 明確網(wǎng)站目標(biāo)和用戶需求：根據(jù)網(wǎng)站使用者的需求、定位等進(jìn)行綜合分析，以用戶為中心，而不是以美術(shù)為中心進(jìn)行設(shè)計(jì)規(guī)劃，使得網(wǎng)站的目標(biāo)明確，清晰。1.3本課題的主要研究內(nèi)容網(wǎng)站設(shè)計(jì)與制作是設(shè)計(jì)藝術(shù)與計(jì)算機(jī)技術(shù)的結(jié)合，它需要對平面構(gòu)圖、用戶體貼、色調(diào)、明暗有深刻的理解，把握客戶的視覺感官。本課題的重點(diǎn)就是基于網(wǎng)頁制作流程和基本知識，利用Photoshop圖像處理軟件、和Dreamweaver網(wǎng)頁編輯制作軟件來完成風(fēng)暴英雄官方網(wǎng)站的重新設(shè)計(jì)與制作。整個(gè)網(wǎng)頁短片制作過程有分三個(gè)階段：前期數(shù)據(jù)收集與分析，中期設(shè)計(jì)，后期制作。我們在前期完成原網(wǎng)站模塊劃分，用戶關(guān)注熱點(diǎn)模塊統(tǒng)計(jì)，游戲素材提取等工作；在中期，我們在Photoshop軟件中完成規(guī)劃稿設(shè)計(jì)，精細(xì)稿修改與最終完全稿的制作，為網(wǎng)站規(guī)劃合理的模塊分布，挑取合適的配色，進(jìn)行風(fēng)格化的界面圖標(biāo)設(shè)計(jì)等；在后期制作中，運(yùn)用DW進(jìn)行框架編寫與網(wǎng)頁完整的制作。第二章 網(wǎng)頁設(shè)計(jì)方法網(wǎng)頁初稿設(shè)計(jì)是整個(gè)課題至關(guān)重要的一步，如果在前期初稿設(shè)計(jì)太過潦草，不夠細(xì)致，那么后面制作的再用心也沒有實(shí)際價(jià)值了。在前期的設(shè)計(jì)中，最重要的是做好信息收集與規(guī)劃設(shè)計(jì)，尤其是要有充分的設(shè)計(jì)準(zhǔn)備與詳細(xì)的思考。2.1版式設(shè)計(jì) 版式設(shè)計(jì)是現(xiàn)代設(shè)計(jì)藝術(shù)的重要組成部分，是視覺傳達(dá)的重要手段，是平面設(shè)計(jì)的重要分支。版式設(shè)計(jì)主要指運(yùn)用造型要素及形式原理，對版面內(nèi)的文字、圖形、 色彩、符號等要素，按照一定的要求進(jìn)行編排，并把所傳遞的信息以視覺傳達(dá)方式藝術(shù)性的表達(dá)出來。版式設(shè)計(jì)應(yīng)用廣泛涉及廣告、書刊、網(wǎng)頁、海報(bào)、包裝等平面及影像的眾多領(lǐng)域。 版式設(shè)計(jì)之于平面的紙質(zhì)媒體來說，功能性和重要性已經(jīng)不言而喻，而對于當(dāng)今的社會化網(wǎng)絡(luò)新媒體互聯(lián)網(wǎng)時(shí)代的網(wǎng)站來說，版式設(shè)計(jì)就像網(wǎng)站的表達(dá)器，網(wǎng)站中的各個(gè)元素通過設(shè)計(jì)師的版式設(shè)計(jì)得以信息的表達(dá)。 網(wǎng)頁中的版式設(shè)計(jì)是在有限的屏幕空間內(nèi)，網(wǎng)頁設(shè)計(jì)者用自己獨(dú)特的想法和創(chuàng)意 將網(wǎng)頁中的文字、圖像、動畫、音頻、視頻等各個(gè)元素按照藝術(shù)規(guī)律進(jìn)行編排組合， 形成可以有效傳達(dá)信息給用戶瀏覽的網(wǎng)頁設(shè)計(jì)。 出色的版式設(shè)計(jì)在網(wǎng)頁的信息傳達(dá)中起到一個(gè)催化劑的作用，使得網(wǎng)頁內(nèi)容具有更好的易讀性，更強(qiáng)的信息傳達(dá)效果。一般來說版式設(shè)計(jì)有四個(gè)基本原則： （1） 主題鮮明突出。 （2） 具有藝術(shù)特征和一定的觀賞性。（3） 合理的版塊分布與突出的重點(diǎn)。（4） 統(tǒng)一性和整體的和諧感。 網(wǎng)頁設(shè)計(jì)當(dāng)中運(yùn)用版式設(shè)計(jì)的原理，必須遵循這四個(gè)原則去設(shè)計(jì)界面。 2.2色彩心理學(xué)在人們的各個(gè)感官上所涉及到的心理學(xué)，色彩對于人們在自然欣賞，社會活動等大大小小的方面都會產(chǎn)生明顯的心理活動。 眾所周知，光有七種顏色，光色作用于眼的過程，通常是用心理學(xué)范圍的作用平行而進(jìn)的， 影響感情更內(nèi)在。 如果將色彩劃分為直接性心理感應(yīng)和間接性心理感受應(yīng)， 前者是客觀性的直觀效果，是色彩的固有情感；后者是通過色彩的聯(lián)想嗜好為媒介而對人的知覺產(chǎn)生的感受。（1） 色彩的直接性心理感受： 色彩作用于人時(shí)產(chǎn)生一種單純性的心理感受，是由色彩的固有感情導(dǎo)致的。這種 直觀性的刺激左右著我們的思想、感情、情緒。色彩的表現(xiàn)力、視覺作用及對人產(chǎn)生 的心理影響，通過對色相環(huán)上幾個(gè)最主要的色彩來說，各個(gè)顏色都具有一定的色彩性格。 紅色： 紅色光波長最長，又處于可見光譜的極限（紅光以外稱為紅外線） ，最容易引起人的注意、興奮、激動、緊張，同時(shí)給視覺以迫近感和擴(kuò)張感，稱為前進(jìn)色。 紅色還給人留下艷麗、芬芳、青春、富有生命力、飽滿、成熟、富有營養(yǎng)的印象， 它又是歡樂、喜慶的象征。 橙色：橙色的波長居紅與黃之間。伊頓說： “橙色是處于最輝煌的活動性焦點(diǎn) ” 。它在有形的領(lǐng)域內(nèi)，具有太陽的發(fā)光度，在所有色彩中，橙色是最暖的色，而不是紅色。橙色也屬于能引起食欲的色，給人香、甜略帶酸味的感覺，它又是明亮、華麗、 健康、輝煌又容易動人的顏色。 黃色：黃色的波長適中，它是有彩色中最明亮的色。因此給人留下的是明亮、 輝煌、燦爛、愉快、親切、柔和的印象，同時(shí)黃色又容易引起“味美”的條件反射。 綠色：綠色光的波長恰恰居中，人的視覺對綠色光反應(yīng)最平靜，眼睛最適應(yīng)綠色光的刺激。綠色是植物王國的色彩，它的表現(xiàn)價(jià)值是豐饒、充實(shí)、平靜與希望。 藍(lán)色：藍(lán)色光的波長短于綠色光，它在視網(wǎng)膜上成像的位置最淺，因此，當(dāng)紅橙 色是前進(jìn)色時(shí)，藍(lán)色就是后退色。紅色是暖色，藍(lán)色是冷色，他們是想對比的。藍(lán)色在精神領(lǐng)域有極高的曝光率，讓人感到崇高、深遠(yuǎn)、純潔、透明、智慧、嚴(yán)謹(jǐn)、浩瀚。 紫色：紫色光波長最短，眼睛對紫色光的細(xì)微變化分辨力弱，容易感到疲勞。 紫色給人高貴、優(yōu)越、奢華、神秘、幽雅、流動、不安的感覺。因此，紫色時(shí)而有脅迫性， 時(shí)而有鼓舞性，在設(shè)計(jì)中一般慎重使用。 而在顏色的明度屬性中，黑、白、灰有它自身的特點(diǎn)，但又和彩色緊密地連在一起，起著相互加強(qiáng)和削弱的作用。 白色：白是全部可見光均勻混合而成的，稱為全色光。白色明亮、干凈、衛(wèi)生、暢快、樸素、雅潔，在人們的感情上，白色比任何顏色都安靜、純潔，但是也會給人以虛無、凄涼之感。 黑色：黑色是無光色，是無色的顏色。在生活中，黑色對人們的心理影響可分為兩類。首先是消極類，很容易通過黑色就聯(lián)想到陰森、恐怖、煩惱、憂傷、消極、 沉睡、悲痛、絕望甚至死亡的印象。其次是積極類，黑色使人得到休息、安靜、沉思， 顯得嚴(yán)肅、莊重、剛正、堅(jiān)毅。 在這兩類之間，黑色還會有捉摸不定、神秘莫測、陰謀恐怖、耐臟的印象。在設(shè)計(jì)時(shí)，黑色與其他色彩組合，屬于極好的襯托和對比色，可以充分顯示其他色的光感與色感。 灰色：灰色是黑與白之間的顏色，屬于明度的中間值?；疑菬o彩度及低彩度的 色彩，它既能給人以高雅、含蓄、耐人尋味的感覺，又容易給人平淡、乏味、枯燥、單調(diào)的感覺。但在設(shè)計(jì)當(dāng)中，灰色是一個(gè)運(yùn)用極為廣泛的顏色，它是完美的過渡色， 也是所有顏色都可以與之搭配的顏色。通過以上對顏色的分析，可以得到相應(yīng)的網(wǎng)頁配色方案：圖2-2-1 一些經(jīng)典的網(wǎng)站配色方案（2） 色彩的間接性心理感受： 色彩的直接性感受會派生出另一種更為強(qiáng)烈的感受， 它是一種由印象導(dǎo)致的心理 上的聯(lián)想，通過某種心理上的刺激，同時(shí)以聯(lián)想為媒介，從而對人的知覺產(chǎn)生的感受，這就是間接性心理感受。2.3用戶體驗(yàn)一個(gè)網(wǎng)頁布局規(guī)劃的是否合理，最重要的評判標(biāo)準(zhǔn)就是用戶體驗(yàn)。用戶體驗(yàn)是指網(wǎng)頁使用者在瀏覽網(wǎng)頁時(shí)，對于網(wǎng)頁內(nèi)容的瀏覽反饋。它是基于用戶的滿意程度的設(shè)計(jì)方式。因此一般來說，在進(jìn)行網(wǎng)頁設(shè)計(jì)規(guī)劃時(shí)的很大一部分前期工作，就是進(jìn)行用戶體驗(yàn)的信息采集，來得出用戶關(guān)注的部分是哪些，并根據(jù)這些熱點(diǎn)排序來進(jìn)行規(guī)劃設(shè)計(jì)，進(jìn)而對網(wǎng)頁設(shè)計(jì)做出符合用戶體驗(yàn)度的調(diào)整。 關(guān)于用戶體驗(yàn)在網(wǎng)頁設(shè)計(jì)中的運(yùn)用，最重要的是以下兩個(gè)內(nèi)容： (1) 用戶需求。(2) 用戶習(xí)慣。網(wǎng)站的功能是建立在為用戶服務(wù)上的，用戶群的定位也變得至關(guān)重要。不同的用戶群的需求是不一樣的。比如，作為社會化的大眾網(wǎng)民群體，他們對于瀏覽網(wǎng)頁的習(xí)慣來說較為簡單，需求上較為單一；而作為有知識層次，并對網(wǎng)頁功能要求較多的高學(xué)歷群體來說，他們對于瀏覽網(wǎng)頁的習(xí)慣并不像社會大眾群體那樣，他們有著自己的知識面和清晰的需求，對于網(wǎng)頁內(nèi)容的瀏覽，也會比社會大眾提取更多的信息量。 但是作為網(wǎng)頁設(shè)計(jì)者來說，研究相關(guān)的用戶需求及用戶習(xí)慣，只能相對于較少范圍的用戶體驗(yàn)數(shù)據(jù)來展開，就像統(tǒng)計(jì)學(xué)的概念，提取一小部分能代表了大多數(shù)群體的數(shù)據(jù)作為參考。網(wǎng)頁設(shè)計(jì)師要試著了解用戶，當(dāng)設(shè)計(jì)師變身用戶，了解用戶需要看到的是什么，就能抓住目標(biāo)用戶的特點(diǎn)。通過設(shè)計(jì)真正地傳遞價(jià)值。2.4網(wǎng)頁視覺概述網(wǎng)頁設(shè)計(jì)在視覺設(shè)計(jì)上的呈現(xiàn)，是最后“添磚加瓦”的一個(gè)步驟。 通過相關(guān)顏色的搭配，模塊的設(shè)計(jì)，以及富有視覺沖擊力的網(wǎng)頁動態(tài)效果，稱為網(wǎng)頁設(shè)計(jì)中的視覺設(shè)計(jì)。 在網(wǎng)頁設(shè)計(jì)發(fā)展的過程當(dāng)中， 當(dāng)今的設(shè)計(jì)趨勢已經(jīng)逐漸向極簡的網(wǎng)頁設(shè)計(jì)視覺方向發(fā)展，早期擁有復(fù)雜元素的網(wǎng)頁設(shè)計(jì)已經(jīng)成為另類。如果一個(gè)頁面有太多的元素， 用戶將迷惑于要看哪里或者誤解每個(gè)元素在使用中的優(yōu)先級。 設(shè)計(jì)師需要用設(shè)計(jì)語言 將用戶的焦點(diǎn)引導(dǎo)到正確的內(nèi)容上， 極簡的網(wǎng)頁視覺能夠?qū)⒆钪匾膬?nèi)容帶到最前面并為用戶避免分散注意力。因此，在本次的學(xué)院網(wǎng)頁設(shè)計(jì)當(dāng)中極簡的網(wǎng)頁視覺設(shè)計(jì)將 會是我采用的主要設(shè)計(jì)方向，這也相當(dāng)程度上的符合學(xué)院網(wǎng)站的需求以及定位。 顏色是網(wǎng)頁視覺中最重要的部分，也是最能刺激用戶感官的一個(gè)元素，舉一個(gè)很簡單的例子，就可以明白：在一個(gè)黑白設(shè)計(jì)上的任何色塊，都會引起用戶的注意力，色彩本身也將成為焦點(diǎn)。在色彩心理學(xué)對于網(wǎng)頁設(shè)計(jì)的作用下，設(shè)計(jì)師可以游刃有余的將顏色運(yùn)用于網(wǎng)頁設(shè)計(jì)中各個(gè)模塊的配色方案當(dāng)中， 為網(wǎng)站設(shè)計(jì)出具有獨(dú)創(chuàng)性和趣 味性的網(wǎng)頁。第三章 風(fēng)暴英雄現(xiàn)有官網(wǎng)綜合分析既然是對風(fēng)暴英雄的官方網(wǎng)頁進(jìn)行重新制作，我們就必然要去參考一下原版官網(wǎng)的內(nèi)容，分析原版官方中的版塊信息、布局劃分、色彩搭配以及設(shè)計(jì)師這樣做的用意何在。只有分析的足夠透徹，我們在重新設(shè)計(jì)的時(shí)候才能取其精華，去其糟粕，在原官網(wǎng)的基礎(chǔ)上做出更好更合適的設(shè)計(jì)。3.1游戲背景與網(wǎng)站界面分析首先我們從風(fēng)暴英雄這款游戲的背景開始入手分析：風(fēng)暴英雄（英文：Heroes of the Storm 簡稱：HOS） 是一個(gè)由暴雪公司開發(fā)的一款在線多人競技游戲。暴雪娛樂公司是一家全球著名的視頻游戲制作和發(fā)行公司，在全球玩家口中享有極其高的盛譽(yù)。暴雪公司也的確名副其實(shí)，暴雪公司曾推出過多款經(jīng)典系列作品：魔獸爭霸系列、星際爭霸系列、暗黑破壞神系列、魔獸世界等，其中魔獸爭霸及星際爭霸均被眾多著名電子競技比賽列為主要比賽項(xiàng)目，在電腦游戲界享有極高的評價(jià)，被鐵桿粉絲玩家稱為“暴雪出品，必屬精品”。暴雪公司號稱“三年磨一劍”，然而無論世界游戲業(yè)競爭之激烈已經(jīng)到了你死我活的程度，還是在游戲業(yè)市場大蕭條時(shí)期，暴雪推出的這把“劍”總能在游戲業(yè)砍下一個(gè)又一個(gè)的銷售奇跡。在這樣的口碑和成績中，也成就了暴雪的不斷壯大。而暴雪最新推出的這款風(fēng)暴英雄，則是暴雪公司的又一款心血之作。游戲中玩家所扮演的英雄全部來自于暴雪三大經(jīng)典游戲系列：魔獸世界、暗黑破壞神和星際爭霸，是一個(gè)浩大的帶有魔幻與神話背景的大型競技游戲，還未公測就收到了廣大玩家的熱烈期待。從上述分析我們可以提煉出有關(guān)風(fēng)暴英雄的游戲背景大致關(guān)鍵詞：暴雪，源于經(jīng)典，魔幻與神話背景，大型競技游戲因此我們的頁面設(shè)計(jì)要有一定的魔幻元素，來體現(xiàn)風(fēng)暴英雄的游戲背景。接下來我們來看一看風(fēng)暴英雄現(xiàn)有的官方網(wǎng)站：圖3-1-1 風(fēng)暴英雄現(xiàn)有官方網(wǎng)站截圖風(fēng)暴英雄現(xiàn)有網(wǎng)站界面則以紫色為主色調(diào)， 配以深藍(lán)色的模塊為輔助要素，猜測設(shè)計(jì)師是為了突出游戲神秘古老、歷史悠久又深邃浩大的魔幻游戲背景。因?yàn)楣爬夏Щ玫娘L(fēng)格也是暴雪一貫的網(wǎng)站風(fēng)格。圖3-1-2 風(fēng)暴英雄現(xiàn)有官網(wǎng)配色分析風(fēng)暴英雄logo：圖3-1-3 風(fēng)暴英雄logo風(fēng)暴英雄logo以藍(lán)色為主色調(diào)，猜測設(shè)計(jì)師是想突出浩瀚，深遠(yuǎn)，智慧的感覺。圖3-1-4 風(fēng)暴英雄logo配色分析從上述分析我們可以提煉出風(fēng)暴英雄界面設(shè)計(jì)色彩的大致關(guān)鍵詞：紫色，神秘，魔幻，藍(lán)色，浩瀚，智慧因此我們的界面設(shè)計(jì)的色彩也要以紫色和藍(lán)色為主，體現(xiàn)出風(fēng)暴英雄的游戲風(fēng)格。但是個(gè)人感覺現(xiàn)有官網(wǎng)的色塊占的面積過大，雖然很好的渲染了魔幻氣氛，但使得很多文本內(nèi)容不醒目，無法突出瀏覽重點(diǎn)，大面積的漸變色的使用使得用戶容易審美疲勞。3.2用戶需求分析風(fēng)暴英雄內(nèi)測已經(jīng)有近一年了，官網(wǎng)訪問者大都是游戲的玩家，因?yàn)楣倬W(wǎng)提供了很多版塊的內(nèi)容，比如各種英雄教學(xué)、論壇互動、更新動態(tài)、比賽直播等等，這些都可以吸引著玩家來經(jīng)常訪問，來瀏覽、娛樂、加深對游戲的理解。作為老玩家們，官方網(wǎng)站真正吸引他們的就不再是接觸游戲初期的那種新鮮感了，他們會更加關(guān)注一些實(shí)用的價(jià)值，比如英雄教學(xué)，攻略技巧，與大家互動交流的部分。因此現(xiàn)有官網(wǎng)色塊占的面積過大，雖然很好的渲染了魔幻氣氛，但使得很多文本內(nèi)容不醒目，無法突出瀏覽重點(diǎn)。我認(rèn)為新的網(wǎng)站的所承載的重點(diǎn)內(nèi)容不再應(yīng)該是風(fēng)格的營造，而且進(jìn)行大量的有效游戲信息推送，如游戲攻略、游戲視頻、游戲活動等等，這些都是目前這個(gè)階段玩家更為關(guān)注的。所以這次改版，我們需要把大量的信息有效的推送給玩家，而不是再去對玩家進(jìn)行風(fēng)格沖擊。因此，針對用戶需求，我構(gòu)思出了新版官網(wǎng)的大致修改方向：圖3-2-1 此次改版的大致修改方向那么此次官網(wǎng)改版，如何給玩家更有效的 傳遞信息 是本次改版的核心。在 傳遞信息 的同時(shí)，為了降低用戶在閱讀信息的時(shí)因其他元素對其造成過多的影響，所以我們在官網(wǎng)設(shè)計(jì)當(dāng)中削弱重質(zhì)感和降低畫面的重色，采用輕重結(jié)合、風(fēng)格簡潔的思路來完成官網(wǎng)的設(shè)計(jì)。當(dāng)然風(fēng)格簡潔的前提是保留一定的魔幻風(fēng)格。在目前官網(wǎng)的導(dǎo)航處，將網(wǎng)站地圖大類列舉出來，進(jìn)行鏈接分類優(yōu)化，使網(wǎng)站整個(gè)導(dǎo)航架構(gòu)清晰明了，提高用戶瀏覽效率，節(jié)省用戶成本。接下來，我們對現(xiàn)有官網(wǎng)進(jìn)行模塊劃分，以及信息的提煉：圖3-2-2 風(fēng)暴英雄現(xiàn)有官方區(qū)塊劃分 從模塊劃分我們可以看到，現(xiàn)有官網(wǎng)提供了以下這些模塊：導(dǎo)航欄，活動輪播通知欄，游戲下載，比賽視頻直播，免費(fèi)英雄，論壇熱帖，英雄教學(xué)，游戲新聞，玩家作品，常見問題，互動社區(qū)。那么我們對新官網(wǎng)的制作要建立在這些信息的基礎(chǔ)上，盡量讓這些信息移植到新的官網(wǎng)上。接下來就是用戶體驗(yàn)度的信息調(diào)查了，我運(yùn)用“百度搜索風(fēng)云榜功能”的百度指數(shù)來大致搜索了一下這些關(guān)鍵詞的搜索量，大致得到了板塊的搜索熱度排序。諸如：圖3-2-3 百度搜索指數(shù)對部分區(qū)塊關(guān)鍵字的查詢結(jié)果但是有一些關(guān)鍵詞存在反復(fù)、沖突的情況存在，比如“風(fēng)暴英雄內(nèi)測碼”“風(fēng)暴英雄激活碼”“風(fēng)暴英雄資格申請”“風(fēng)暴英雄CDkey”等等詞條都有一定搜索量，但它們的意思是完全相同的，因此統(tǒng)計(jì)的時(shí)候比較困難。于是我又在風(fēng)暴英雄的論壇上找到了玩家發(fā)出的一張風(fēng)暴英雄官網(wǎng)熱區(qū)圖：圖3-2-4 風(fēng)暴英雄官網(wǎng)熱區(qū)圖（論壇網(wǎng)友發(fā)布）通過百度搜索指數(shù)和可以分析和上述熱區(qū)圖綜合分析可得出，目前官網(wǎng)受玩家關(guān)注的區(qū)塊有下面幾個(gè)：1 游戲下載2 內(nèi)測資格申請與新手禮包3 游戲新聞（比如更新補(bǔ)丁內(nèi)容，改版通知，活動通知等）4 英雄殿堂（英雄教學(xué)）5 活動輪播通知6 游戲視頻7 免費(fèi)英雄8 賽事新聞與直播9 論壇熱帖10 常見問題圖3-2-5 玩家受關(guān)注的區(qū)域，也是官網(wǎng)的重點(diǎn)區(qū)塊根據(jù)區(qū)塊熱度排名，我們再參照現(xiàn)有官網(wǎng)的布局會發(fā)現(xiàn)：現(xiàn)有官網(wǎng)的布局基本都很合理，偶爾有一兩個(gè)區(qū)塊的位置與它的熱度不相符。比如：游戲新聞通過熱區(qū)圖的分析，用戶僅僅針對前面兩三條的新聞感興趣，到了后面幾條就大大降低。分析后認(rèn)為這個(gè)應(yīng)該和百度的搜索詞條閱讀量是一個(gè)道理，玩家對前面幾條的關(guān)注度比較高，后面由于新聞?wù)獏^(qū)塊過長，造成了閱讀壓力，玩家們往往忽視這些新聞，就造成了版面浪費(fèi)。3.3同類網(wǎng)站對比 風(fēng)暴英雄作為暴雪公司發(fā)布的一款MOBA類游戲，自研發(fā)以來就一直收到諸多玩家的期待。其實(shí)當(dāng)今世界熱門的幾款MOBA類的游戲的玩法很類似，風(fēng)格也是大同小異，那么他們的視覺包裝是如何做的呢？于是我就來研究了一些同列別的網(wǎng)站，進(jìn)行參照和對比，來為設(shè)計(jì)工作做足準(zhǔn)備。 MOBA英文全稱為Multiplayer Online Battle Arena Games，意為多人聯(lián)機(jī)在線競技游戲。但是與CS等游戲又明顯不同，MOBA廣泛使用于Dota類游戲，是作為類Dota的派生詞。自從2009年Dota火遍全球以后，MOBA類游戲開始漸漸多了起來，目前市場上比較有代表性的有Dota作者Icefrog開發(fā)的Dota 2，Riot Games公司開發(fā)的LOL（英雄聯(lián)盟），S2game發(fā)行的HON（超神英雄），Neople研發(fā)的Cyphers（超能戰(zhàn)聯(lián)），以及騰訊自研的眾神爭霸。當(dāng)然，還有暴雪公司發(fā)布的Heroes of the Storm（風(fēng)暴英雄）。：Dota 2圖3-3-1 DOTA2官網(wǎng)：精心打磨的藝術(shù)品 與眾多市面上喊打喊殺鮮血四濺飛沙走石的游戲風(fēng)格不同，Dota 2給人的氛圍是安靜的史詩感，它更像是一件精心打磨的藝術(shù)品，安靜的待在那里等著你欣賞，整個(gè)頁面籠罩著一股戰(zhàn)爭爆發(fā)前一刻的神秘感。在扁平化大行其道的今天采用的卻是相當(dāng)精細(xì)的寫實(shí)風(fēng)格，并不花哨的博客形式更突出內(nèi)容的展現(xiàn)。從某種程度上來說，Dota 2是現(xiàn)有Dota的新引擎版，除了上線一些新的的功能最大的改變是UI和美術(shù)的細(xì)致優(yōu)化。精致的UI、神秘的氣氛無不在像向玩家傳達(dá)這是一個(gè)精美、華麗與細(xì)膩的作品。：英雄聯(lián)盟（LOL）圖3-3-2 英雄聯(lián)盟官網(wǎng)：設(shè)計(jì)的多樣性和豐富飽滿的色彩相信這款游戲大家都很熟悉了，英雄聯(lián)盟隨著內(nèi)測公測到現(xiàn)在成熟運(yùn)營官網(wǎng)設(shè)計(jì)已經(jīng)經(jīng)歷了幾個(gè)階段，風(fēng)格也越來越簡潔和扁平化。游戲的設(shè)計(jì)明顯元素和色彩更加豐富、英雄造型也相當(dāng)動感。英雄聯(lián)盟擁有特色的英雄、自動匹配的戰(zhàn)網(wǎng)平臺，包括天賦樹、召喚師系統(tǒng)、符文等更加豐富的功能，在英雄設(shè)計(jì)上也加入了很多有趣的元素，在操作難度和上手難度上明顯小于同類其他游戲，娛樂性很強(qiáng)玩家群也相對更廣。所以不難理解英雄聯(lián)盟網(wǎng)頁設(shè)計(jì)的多樣性和豐富飽滿的色彩。 頁面中各種絢麗的光影，每個(gè)專題界面的背景主題都與近期的新聞相關(guān)，每一頁都如史詩一般壯觀。：超神英雄（HON）圖3-3-3 超神英雄官網(wǎng)：厚重的色彩與細(xì)致的寫實(shí)超神英雄自2010年北美推出以來，已成為東南亞市場最成功的MOBA網(wǎng)游。超神英雄同樣繼承了經(jīng)典的MOBA玩法。優(yōu)良的操作性與熱血的打擊感，對戰(zhàn)節(jié)奏快擁有濃厚的競技特性，操作難度大且上手難度很高使其成為了DreamHack、GSL等國際大型賽事的指定比賽項(xiàng)目，還孕育了很多知名的電競選手。所以官網(wǎng)設(shè)計(jì)運(yùn)用了厚重的色彩以及聯(lián)盟與地獄英雄雙方激烈的對抗感，細(xì)致寫實(shí)的UI也體現(xiàn)了其高品質(zhì)。：超能戰(zhàn)聯(lián)（Cyphers）圖3-3-4 超能聯(lián)盟官網(wǎng)：爽快的打擊感和震撼的破壞效果超能戰(zhàn)聯(lián)打破了MOBA游戲平面作戰(zhàn)思維，創(chuàng)造了空中陸地交戰(zhàn)的全新玩法。無鎖定攻擊、無限制連招及華麗麗的必殺技是超能戰(zhàn)聯(lián)動作系統(tǒng)模式的最大特色，另外有血有肉描寫細(xì)膩的“超能力者角色”也是與同類其他游戲不同的特色。爽快的打擊感和震撼的破壞效果是此款游戲的重點(diǎn)，所以設(shè)計(jì)中不乏粒子、電力、風(fēng)、火、冰等元素，色彩飽滿豐富，輕薄的界面質(zhì)感更體現(xiàn)其爽快感，專題頁面當(dāng)中更多是體現(xiàn)英雄角色性格、武器和酷炫技能。V：眾神爭霸圖3-3-5 眾神爭霸官網(wǎng)：世界經(jīng)典神話大亂斗眾神爭霸的世界觀以希臘神話、北歐神話、印度神話、埃及神話等著名經(jīng)典為藍(lán)本，采用奇幻架空的題材，英雄角色的造型設(shè)計(jì)均來源于各大神話傳說。游戲強(qiáng)調(diào)10V10模式的簡單操作、緊湊節(jié)奏及大規(guī)模團(tuán)戰(zhàn)的爽快感。所以我在設(shè)計(jì)中嘗試強(qiáng)調(diào)英雄角色的背景，能在視覺上第一時(shí)間給玩家傳達(dá)神話印象。另外激烈對抗的氛圍對于體現(xiàn)游戲的故事背景必不可少。碎石、火光、雷電無不詮釋這是一個(gè)大亂斗的世界。上述游戲的網(wǎng)站各有各的特色，各有各的亮點(diǎn)和優(yōu)勢，很大程度上都體現(xiàn)了自己游戲的特點(diǎn)和風(fēng)格。基本都是根據(jù)游戲的特點(diǎn)來進(jìn)行自己海報(bào)風(fēng)格的設(shè)計(jì)，并從游戲中進(jìn)行素材的提煉，加工成網(wǎng)站上的元素。分析結(jié)論：一款游戲網(wǎng)站該用什么樣的風(fēng)格去設(shè)計(jì)我們并不需要去限定，只需要從游戲本身的定位、特色、背景、用戶群等方面去分析，那么游戲網(wǎng)站的特色就很容易表現(xiàn)出來了。3.4問題綜述經(jīng)過上述對各種資料的收集與分析，以及和同類網(wǎng)站的比較后，我們大致總結(jié)出了一下幾個(gè)需要改變的問題：(1) 現(xiàn)有官網(wǎng)色塊占的面積過大，雖然很好的渲染了魔幻氣氛，但使得很多文本內(nèi)容不醒目，無法突出瀏覽重點(diǎn)。新的網(wǎng)站的修改方向應(yīng)在保持主要配色與魔幻風(fēng)格的基礎(chǔ)上，盡量簡化風(fēng)格，進(jìn)行大量的有效信息推送。(2) 區(qū)塊的分布還不夠合理，應(yīng)根據(jù)用戶需求和用戶體驗(yàn)，重新調(diào)整區(qū)塊的架構(gòu)布局。(3) 新聞區(qū)域版塊太長，容易對玩家造成審美疲勞，導(dǎo)致除了前面兩三條新聞，后面的信息沒有很多人關(guān)注，導(dǎo)致了版面的浪費(fèi)。(4) 和其他的MOBA類大作的網(wǎng)頁相比，網(wǎng)頁的界面設(shè)計(jì)偏復(fù)古，藍(lán)色重點(diǎn)在深紫色的背景下有一種被淹沒的感覺，大部分界面元素都是圓角框架與漸變色的堆積，有一點(diǎn)落伍的感覺，與現(xiàn)在的大網(wǎng)頁設(shè)計(jì)趨勢不相符。第四章 風(fēng)暴英雄新的官網(wǎng)界面設(shè)計(jì)制作 經(jīng)過周全的資料收集、分析，以及各方面的對比、考慮，對新網(wǎng)站的設(shè)計(jì)方向與大致樣式以及成竹在胸了，接下來就開始正式的工作了。我們要根據(jù)版式設(shè)計(jì)，色彩心理學(xué)，用戶體驗(yàn)和視覺設(shè)計(jì)相關(guān)理論來進(jìn)行設(shè)計(jì)與制作。4.1設(shè)計(jì)方法設(shè)計(jì)工具：Adobe Photoshop CC 圖4-1-1 Photoshop CC啟動界面制作工具：DreamWeaver CC 圖4-1-2 Dreamweaver CC啟動界面4.2設(shè)計(jì)思路設(shè)計(jì)思路就按照我們之前詳細(xì)分析出問題與修改方向來一步一步進(jìn)行制作，我為自己列出了五個(gè)設(shè)計(jì)步驟：（1） 框架設(shè)計(jì) 根據(jù)分析用戶瀏覽網(wǎng)頁的視覺一般是從左到右還是從上至下的一個(gè)瀏覽習(xí)慣得 到整個(gè)網(wǎng)頁的框架劃分。 （2） 風(fēng)格設(shè)計(jì) 頁面設(shè)計(jì)如果使用過多的裝飾元素，就會造成頁面龐大并且下載速度緩慢。用戶瀏覽大量網(wǎng)頁信息的時(shí)候需要的是一個(gè)簡潔無阻礙的界面， 過多的色彩和裝飾反而會分散用戶的注意力，甚至影響到用戶瀏覽的效果和減少用戶對子欄目以及菜單的點(diǎn)擊。因此，學(xué)院網(wǎng)站將采用簡潔化的設(shè)計(jì)風(fēng)格，突出信息量的傳達(dá)。 （3） 信息編排 繁多的信息量會讓用戶瀏覽網(wǎng)頁的時(shí)候會產(chǎn)生一定的壓迫感， 如何能讓用戶順暢的瀏覽成為設(shè)計(jì)中重要的一環(huán)。 將網(wǎng)頁中的信息進(jìn)行有效的排布將利用版式設(shè)計(jì)的原理。 （4） 視覺順序 在一個(gè)信息版塊里， 會有第一視覺區(qū)、 第二視覺區(qū)、 第三視覺區(qū)等多個(gè)視覺區(qū)域， 當(dāng)用戶看到這一信息版塊時(shí)第一眼會落到圖片的位置，第二眼會落到大標(biāo)題上，第三眼才會落到板塊的其他地方。這樣有順序的用戶瀏覽引導(dǎo)功能，可減少用戶的瀏覽成 本，增加頁面的視覺效果。（5） 亮點(diǎn)設(shè)計(jì) 亮點(diǎn)是用戶在瀏覽網(wǎng)頁時(shí)是否可以在相當(dāng)?shù)臅r(shí)間內(nèi)留住用戶的眼睛的一個(gè)關(guān)鍵，網(wǎng)頁設(shè)計(jì)的亮點(diǎn)可以從配色效果，圖標(biāo)的放置，和其他網(wǎng)頁小元素的設(shè)計(jì)來凸顯網(wǎng)頁的新鮮感。比如為信息增加醒目的小圖標(biāo)，或者更加擬人化的小改動等。4.3設(shè)計(jì)過程在3.2中，我們對現(xiàn)有官網(wǎng)進(jìn)行了區(qū)塊的劃分與區(qū)塊信息的提煉，得出了現(xiàn)有官網(wǎng)提供的區(qū)塊內(nèi)容。又通過百度搜索風(fēng)云榜、百度搜索指數(shù)以及官網(wǎng)熱區(qū)圖，得出了大致的用戶最關(guān)注的十大區(qū)塊熱度排序。圖4-3-1 用戶最關(guān)注的十大熱門區(qū)塊排序根據(jù)這些結(jié)論，我開始了對網(wǎng)頁架構(gòu)布局的設(shè)計(jì)。首先，對區(qū)塊內(nèi)容進(jìn)行從上往下的重要層級劃分，經(jīng)過幾次優(yōu)化，最終得出新版官網(wǎng)規(guī)劃稿。圖4-3-2 新版官網(wǎng)規(guī)劃稿在新官網(wǎng)的交互中，可以發(fā)現(xiàn)之前提高的重點(diǎn)的區(qū)塊都進(jìn)行了提升，出現(xiàn)在較高的位置。導(dǎo)航的梳理，新聞的整合、新聞的簡潔性，英雄教學(xué)的位置調(diào)整等等。接下來，我根據(jù)規(guī)劃稿開始對網(wǎng)站框架樣式的設(shè)計(jì)：圖4-3-3 新版官網(wǎng)框架樣式設(shè)計(jì)根據(jù)規(guī)劃稿設(shè)計(jì)出的網(wǎng)站初現(xiàn)雛形了，接下來，根據(jù)設(shè)計(jì)思路的第二步，進(jìn)行風(fēng)格設(shè)計(jì)。之前分析到風(fēng)暴英雄新版網(wǎng)站應(yīng)更偏向于信息的傳播，所以我想采用輕重結(jié)合的淺色調(diào)來設(shè)計(jì)，使用頭部的質(zhì)感和重色來延續(xù)風(fēng)暴英雄的魔幻風(fēng)格，在配合內(nèi)容區(qū)塊的淺色內(nèi)容來傳播信息。圖4-3-4 新版官網(wǎng)色調(diào)分布為什么輕質(zhì)感扁平化的東西更適合閱讀信息？一款游戲前期使用貼近游戲的重質(zhì)感設(shè)計(jì)，是為了培養(yǎng)用戶對該游戲風(fēng)格認(rèn)識，而當(dāng)用戶培養(yǎng)到一定階段后，輕質(zhì)感扁平化的設(shè)計(jì)必定將取代重質(zhì)感設(shè)計(jì)，為什么呢？因?yàn)橐豢钣螒蜻\(yùn)營到一段時(shí)間后，積累下來的信息會很多，游戲攻略、新聞公告、活動推廣等等數(shù)不勝數(shù)。而輕質(zhì)感能夠快速高效、不大幅度干擾用戶的情況下推送給用戶進(jìn)行閱讀，輕質(zhì)感的設(shè)計(jì)能夠還原印刷類設(shè)計(jì)的排版，使用戶閱讀起來更順暢。在這個(gè)信息化的時(shí)代，時(shí)間就是金錢，一些輕質(zhì)感甚至能夠直接用網(wǎng)頁代碼寫出來，而不需要使用圖片，也使得用戶載入網(wǎng)站的速度更加快速，減少服務(wù)器壓力。設(shè)計(jì)之前我已經(jīng)在風(fēng)暴英雄的現(xiàn)有官網(wǎng)中提取出我們需要的色彩了，保留了現(xiàn)有官網(wǎng)的紫色色調(diào)作為重色主基調(diào)，再分別提取了UI內(nèi)的藍(lán)色和一點(diǎn)點(diǎn)青綠色進(jìn)行色彩搭配，配合內(nèi)容區(qū)塊的淺灰色來進(jìn)行新官網(wǎng)的整體色調(diào)鋪展，再提取新UI內(nèi)的游戲花紋予以輔助設(shè)計(jì)。圖4-3-5 新官網(wǎng)的主要色彩分布 圖4-3-6 圖標(biāo)按鈕設(shè)計(jì) 圖4-3-7 區(qū)塊樣式設(shè)計(jì)經(jīng)過一步一步的的設(shè)計(jì)與細(xì)化，以及很多次的修改后，完整的官網(wǎng)樣式終于漸漸浮現(xiàn)：圖4-3-8 官網(wǎng)設(shè)計(jì)稿完全版再經(jīng)過繼續(xù)的優(yōu)化修改，增加輕色調(diào)區(qū)信息量以及對細(xì)節(jié)優(yōu)化后，確定了官網(wǎng)的最終稿：圖4-3-9 官網(wǎng)設(shè)計(jì)稿最終版這款設(shè)計(jì)草稿稿很好的滿足了上重下輕的設(shè)計(jì)預(yù)想，達(dá)到了傳達(dá)信息，重點(diǎn)突出，架構(gòu)清晰的效果。上方重色區(qū)域很好的傳承了游戲的魔幻風(fēng)格，下方簡潔輕快的風(fēng)格又使得閱讀效果大大提升，內(nèi)容區(qū)域采用了約6:4的黃金分割比，用戶閱讀時(shí)也有很棒的視覺舒適感。基于這款設(shè)計(jì)稿，我使用Dreamweaver開始了對網(wǎng)頁的制作。代碼的編寫過程比較枯燥平淡，卻的遇到問題最多的。為此我上網(wǎng)查閱了很多資料，借閱了很多書籍，也收到了同學(xué)和老師的熱情幫助。經(jīng)過重重困難，反復(fù)的修改與調(diào)試，網(wǎng)站的效果終于基本實(shí)現(xiàn)。圖4-3-10