毕业设计（论文）-《风暴英雄》游戏网站的设计与实现.doc

题目 ：风暴英雄游戏网站的设计与实现 院（系） 计算机科学与技术学院 专 业 计算机科学与技术专业 届 别 2011级 学 号 姓 名 指导老师 华侨大学教务处印制 2015年5 月摘 要在漫长的网页技术发展中，界面设计工作一直深受设计师的关注，网站设计作为一种视觉语言和人机交互的重要渠道， 特别讲究排版和布局，界面设计页是网页的重要亮点。一个美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家吸引更多人的眼球；一个好的交互设计对产品的成功起着很关键的作用。年轻用户对于界面视觉效果与排版布局的关心，要远远大于他们对网页内容的关心。如果说网页的内容与功能是人的肌肉和骨骼，那么界面设计与排版布局就是人的外貌和品质，是一个优秀网页必不可少的重要组成部分。检验一个网页的好坏标准是用户使用的感受。所以界面设计要和用户体验紧密结合，是一个不断为目标用户设计满意视觉效果与浏览体验的过程。一个优秀的游戏官网则能为游戏本身吸引大量的玩家。本文以暴雪公司的最新游戏风暴英雄为背景，运用版式设计，色彩心理学， 用户体验设计和网页视觉设计四个方法进行规划和设计， 建立一个整体和谐， 视觉美观， 用户体验良好，内容清晰的的风暴英雄官网界面。关键词：人机交互，板式设计，色彩心理学，用户体验，视觉语言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网页设计的特点 .21.3本课题的主要研究内容 .3第二章 网页设计方法 .42.1版式设计 .42.2色彩心理学 .52.3用户体验 .82.4网页视觉概述 .9第三章风暴英雄现有官网综合分析.103.1游戏背景与网站界面分析.103.2用户需求分析 .133.3同类网站对比. 193.4问题综述. 24第四章风暴英雄新的官网界面设计制作.244.1设计方法.244.2设计思路. 264.3设计过程. 26总结.34 参考文献.35致谢 36第一章 绪 论1.1研究背景和意义随着计算机信息技术的飞速发展，全世界都逐渐步入了现代化信息时代。互联开始在全球范围内普及。网页技术也随之迎来了发展的新型浪潮，网页设计的本身依附于互联网信息的传播，它的发展没有悠久的历史作为依靠，却契合了时代的诉求，将艺术理念，平面设计等美学概念囊括其中，衍生出了一种新型的视觉表现形式。网页设计凭借着高超、迅速、美观的传播特点，成为了一门独立的艺术课目。网页发展地位的提升为互联网信息流通搭建了平台，吸引大批网页设计工作者为之努力奋斗。而在漫长的网页技术发展中，界面设计工作一直深受设计师的关注，网站设计作为一种视觉语言和人机交互的重要渠道， 特别讲究排版和布局，界面设计页是网页的重要亮点。一个美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家吸引更多人的眼球；一个好的交互设计对产品的成功起着很关键的作用。年轻用户对于界面视觉效果与排版布局的关心，要远远大于他们对网页内容的关心。如果说网页的内容与功能是人的肌肉和骨骼，那么界面设计与排版布局就是人的外貌和品质，是一个优秀网页必不可少的重要组成部分。检验一个网页的好坏标准是用户使用的感受。所以界面设计要和用户体验紧密结合，是一个不断为目标用户设计满意视觉效果与浏览体验的过程。一个优秀的游戏官网则能为游戏本身吸引大量的玩家。 风暴英雄（Heroes of the Storm 简称：HOS） 是一个由暴雪公司开发的在线多人竞技游戏。游戏中玩家所扮演的英雄全部来自于暴雪三大经典游戏系列：魔兽世界、暗黑破坏神和星际争霸，是暴雪近年来的心血大作。其官方网站作为游戏最新信息公布与玩家互动的重要平台，对游戏影响力有着关键的作用。 本文以暴雪公司的最新游戏风暴英雄为背景，以原官网的内容为参考基准，运用版式设计，色彩心理学， 用户体验设计和网页视觉设计四个方法进行重新规划和设计，建立一个整体和谐， 视觉美观， 用户体验良好，内容清晰的的风暴英雄官网界面。1.2网页设计特点在互联网飞速发展的今天，各类网站层出不穷，网站的数量也呈现指数型暴增的态势，而网站所具备的功能不再那么单一，内容也变得丰富多样，因此，相对于前端和后端的网站系统的代码编写， 网页设计在整个网站的设计当中就有着举足轻重的地位，它使得艺术设计和心理学这样的相关领域可以融入到整个网站建设当中，网页设计的特点也不言而喻。网页设计将艺术设计融为其中主要表现在网页的界面设计中。网页设计最终服务于互联网信息传播，而互联网又最终服务于大众，这就要求网页的艺术形式必须同时具有艺术美感与实用价值。在网页设计中，以字符组成的界面可以起到传达信息的作用，这种形式达到人机结合的双重统一。网页的版式设计对工作人员的综合能力与文化素养的要求比较高，并不是单纯的文字编辑和图形平面设计。从艺术的角度上来看，网页设计的重要特点是色彩的搭配，搭配漂亮的颜色比纯黑白色的网页要醒目和出众。图片的色彩基本可以归纳为256种，网页的色彩搭配主要由职业、修养、知识、消费水平等各方面因素决定，针对不同的受众人群，所做的设计也要有所针对。在这样一个信息庞杂网络世界里，想要吸引大众的目光，必须依靠强有力的视觉效果打动观看者。正所谓“删繁就简”在艺术的设计表现形式中，要遵守一个首要原则就是纯粹自然，借调一切繁复的表现形式，提取最直观的视觉印象，标下网页设计中主题的部分。在经济飞速发展的今天，人们的文化素质和价值取向有了更高的发展，越来越多的人不喜欢将时间花在一些无所谓的事情上，审美水平更趋向于简洁明了。设计者要充分考虑艺术设计中的设计原则，在网页的艺术设计中，植入“留白”的艺术概念，给人以舒适的享受，引发观看者无限的遐想。网页上的留白部分同文本、图片一样，是给人以美感的部分可以给人心理上的松弛。一个出色的网页设计师要将浏览者的感受融入设计中，并在排版布局中，加入平面艺术设计的韵律感，使整个网页内容张弛有度，创造出最合适的美感。总的来说，网页设计具有如下六个特点： (1) 主题明了：通过对网页的空间层次、主从关系、视觉秩序及彼此间逻辑关系的把握运用来实现主题的突出。不但要求单纯、简练、清晰和准确，而且在强调艺术性的同时， 更注重通过网页独特的风格和强烈的视觉冲击力， 来突出网页的设计主题。 (2) 导览清晰：在网页中，使用导航条以及菜单栏的设计，使人们能够在网页上自由前进，下拉，或者后退并且选择自己需要浏览的版块。 (3) 设计的整体性：构成网页界面形式的各个元素相互依存、彼此联系。网页设 计使得整个网站的页面风格统一、色彩统一、布局统一。(4) 设计的对比性：在设计过程中，通过多与少、主与次、黑与白（对比色） 、 动 与静等对比手法的运用， 使得用户能够对正在浏览的网站留下深刻的印象并使网站具 有一定的可识别度。(5) 设计分的割性：按照内容、主题和信息的展示和分类要求，将页面区分成若 干板块区域与栏目，使用户一目了然，充分通过网页显示出有效的信息传达效果。 (6) 明确网站目标和用户需求：根据网站使用者的需求、定位等进行综合分析，以用户为中心，而不是以美术为中心进行设计规划，使得网站的目标明确，清晰。1.3本课题的主要研究内容网站设计与制作是设计艺术与计算机技术的结合，它需要对平面构图、用户体贴、色调、明暗有深刻的理解，把握客户的视觉感官。本课题的重点就是基于网页制作流程和基本知识，利用Photoshop图像处理软件、和Dreamweaver网页编辑制作软件来完成风暴英雄官方网站的重新设计与制作。整个网页短片制作过程有分三个阶段：前期数据收集与分析，中期设计，后期制作。我们在前期完成原网站模块划分，用户关注热点模块统计，游戏素材提取等工作；在中期，我们在Photoshop软件中完成规划稿设计，精细稿修改与最终完全稿的制作，为网站规划合理的模块分布，挑取合适的配色，进行风格化的界面图标设计等；在后期制作中，运用DW进行框架编写与网页完整的制作。第二章 网页设计方法网页初稿设计是整个课题至关重要的一步，如果在前期初稿设计太过潦草，不够细致，那么后面制作的再用心也没有实际价值了。在前期的设计中，最重要的是做好信息收集与规划设计，尤其是要有充分的设计准备与详细的思考。2.1版式设计 版式设计是现代设计艺术的重要组成部分，是视觉传达的重要手段，是平面设计的重要分支。版式设计主要指运用造型要素及形式原理，对版面内的文字、图形、 色彩、符号等要素，按照一定的要求进行编排，并把所传递的信息以视觉传达方式艺术性的表达出来。版式设计应用广泛涉及广告、书刊、网页、海报、包装等平面及影像的众多领域。 版式设计之于平面的纸质媒体来说，功能性和重要性已经不言而喻，而对于当今的社会化网络新媒体互联网时代的网站来说，版式设计就像网站的表达器，网站中的各个元素通过设计师的版式设计得以信息的表达。 网页中的版式设计是在有限的屏幕空间内，网页设计者用自己独特的想法和创意 将网页中的文字、图像、动画、音频、视频等各个元素按照艺术规律进行编排组合， 形成可以有效传达信息给用户浏览的网页设计。 出色的版式设计在网页的信息传达中起到一个催化剂的作用，使得网页内容具有更好的易读性，更强的信息传达效果。一般来说版式设计有四个基本原则： （1） 主题鲜明突出。 （2） 具有艺术特征和一定的观赏性。（3） 合理的版块分布与突出的重点。（4） 统一性和整体的和谐感。 网页设计当中运用版式设计的原理，必须遵循这四个原则去设计界面。 2.2色彩心理学在人们的各个感官上所涉及到的心理学，色彩对于人们在自然欣赏，社会活动等大大小小的方面都会产生明显的心理活动。 众所周知，光有七种颜色，光色作用于眼的过程，通常是用心理学范围的作用平行而进的， 影响感情更内在。 如果将色彩划分为直接性心理感应和间接性心理感受应， 前者是客观性的直观效果，是色彩的固有情感；后者是通过色彩的联想嗜好为媒介而对人的知觉产生的感受。（1） 色彩的直接性心理感受： 色彩作用于人时产生一种单纯性的心理感受，是由色彩的固有感情导致的。这种 直观性的刺激左右着我们的思想、感情、情绪。色彩的表现力、视觉作用及对人产生 的心理影响，通过对色相环上几个最主要的色彩来说，各个颜色都具有一定的色彩性格。 红色： 红色光波长最长，又处于可见光谱的极限（红光以外称为红外线） ，最容易引起人的注意、兴奋、激动、紧张，同时给视觉以迫近感和扩张感，称为前进色。 红色还给人留下艳丽、芬芳、青春、富有生命力、饱满、成熟、富有营养的印象， 它又是欢乐、喜庆的象征。 橙色：橙色的波长居红与黄之间。伊顿说： “橙色是处于最辉煌的活动性焦点 ” 。它在有形的领域内，具有太阳的发光度，在所有色彩中，橙色是最暖的色，而不是红色。橙色也属于能引起食欲的色，给人香、甜略带酸味的感觉，它又是明亮、华丽、 健康、辉煌又容易动人的颜色。 黄色：黄色的波长适中，它是有彩色中最明亮的色。因此给人留下的是明亮、 辉煌、灿烂、愉快、亲切、柔和的印象，同时黄色又容易引起“味美”的条件反射。 绿色：绿色光的波长恰恰居中，人的视觉对绿色光反应最平静，眼睛最适应绿色光的刺激。绿色是植物王国的色彩，它的表现价值是丰饶、充实、平静与希望。 蓝色：蓝色光的波长短于绿色光，它在视网膜上成像的位置最浅，因此，当红橙 色是前进色时，蓝色就是后退色。红色是暖色，蓝色是冷色，他们是想对比的。蓝色在精神领域有极高的曝光率，让人感到崇高、深远、纯洁、透明、智慧、严谨、浩瀚。 紫色：紫色光波长最短，眼睛对紫色光的细微变化分辨力弱，容易感到疲劳。 紫色给人高贵、优越、奢华、神秘、幽雅、流动、不安的感觉。因此，紫色时而有胁迫性， 时而有鼓舞性，在设计中一般慎重使用。 而在颜色的明度属性中，黑、白、灰有它自身的特点，但又和彩色紧密地连在一起，起着相互加强和削弱的作用。 白色：白是全部可见光均匀混合而成的，称为全色光。白色明亮、干净、卫生、畅快、朴素、雅洁，在人们的感情上，白色比任何颜色都安静、纯洁，但是也会给人以虚无、凄凉之感。 黑色：黑色是无光色，是无色的颜色。在生活中，黑色对人们的心理影响可分为两类。首先是消极类，很容易通过黑色就联想到阴森、恐怖、烦恼、忧伤、消极、 沉睡、悲痛、绝望甚至死亡的印象。其次是积极类，黑色使人得到休息、安静、沉思， 显得严肃、庄重、刚正、坚毅。 在这两类之间，黑色还会有捉摸不定、神秘莫测、阴谋恐怖、耐脏的印象。在设计时，黑色与其他色彩组合，属于极好的衬托和对比色，可以充分显示其他色的光感与色感。 灰色：灰色是黑与白之间的颜色，属于明度的中间值。灰色是无彩度及低彩度的 色彩，它既能给人以高雅、含蓄、耐人寻味的感觉，又容易给人平淡、乏味、枯燥、单调的感觉。但在设计当中，灰色是一个运用极为广泛的颜色，它是完美的过渡色， 也是所有颜色都可以与之搭配的颜色。通过以上对颜色的分析，可以得到相应的网页配色方案：图2-2-1 一些经典的网站配色方案（2） 色彩的间接性心理感受： 色彩的直接性感受会派生出另一种更为强烈的感受， 它是一种由印象导致的心理 上的联想，通过某种心理上的刺激，同时以联想为媒介，从而对人的知觉产生的感受，这就是间接性心理感受。2.3用户体验一个网页布局规划的是否合理，最重要的评判标准就是用户体验。用户体验是指网页使用者在浏览网页时，对于网页内容的浏览反馈。它是基于用户的满意程度的设计方式。因此一般来说，在进行网页设计规划时的很大一部分前期工作，就是进行用户体验的信息采集，来得出用户关注的部分是哪些，并根据这些热点排序来进行规划设计，进而对网页设计做出符合用户体验度的调整。 关于用户体验在网页设计中的运用，最重要的是以下两个内容： (1) 用户需求。(2) 用户习惯。网站的功能是建立在为用户服务上的，用户群的定位也变得至关重要。不同的用户群的需求是不一样的。比如，作为社会化的大众网民群体，他们对于浏览网页的习惯来说较为简单，需求上较为单一；而作为有知识层次，并对网页功能要求较多的高学历群体来说，他们对于浏览网页的习惯并不像社会大众群体那样，他们有着自己的知识面和清晰的需求，对于网页内容的浏览，也会比社会大众提取更多的信息量。 但是作为网页设计者来说，研究相关的用户需求及用户习惯，只能相对于较少范围的用户体验数据来展开，就像统计学的概念，提取一小部分能代表了大多数群体的数据作为参考。网页设计师要试着了解用户，当设计师变身用户，了解用户需要看到的是什么，就能抓住目标用户的特点。通过设计真正地传递价值。2.4网页视觉概述网页设计在视觉设计上的呈现，是最后“添砖加瓦”的一个步骤。 通过相关颜色的搭配，模块的设计，以及富有视觉冲击力的网页动态效果，称为网页设计中的视觉设计。 在网页设计发展的过程当中， 当今的设计趋势已经逐渐向极简的网页设计视觉方向发展，早期拥有复杂元素的网页设计已经成为另类。如果一个页面有太多的元素， 用户将迷惑于要看哪里或者误解每个元素在使用中的优先级。 设计师需要用设计语言 将用户的焦点引导到正确的内容上， 极简的网页视觉能够将最重要的内容带到最前面并为用户避免分散注意力。因此，在本次的学院网页设计当中极简的网页视觉设计将 会是我采用的主要设计方向，这也相当程度上的符合学院网站的需求以及定位。 颜色是网页视觉中最重要的部分，也是最能刺激用户感官的一个元素，举一个很简单的例子，就可以明白：在一个黑白设计上的任何色块，都会引起用户的注意力，色彩本身也将成为焦点。在色彩心理学对于网页设计的作用下，设计师可以游刃有余的将颜色运用于网页设计中各个模块的配色方案当中， 为网站设计出具有独创性和趣 味性的网页。第三章 风暴英雄现有官网综合分析既然是对风暴英雄的官方网页进行重新制作，我们就必然要去参考一下原版官网的内容，分析原版官方中的版块信息、布局划分、色彩搭配以及设计师这样做的用意何在。只有分析的足够透彻，我们在重新设计的时候才能取其精华，去其糟粕，在原官网的基础上做出更好更合适的设计。3.1游戏背景与网站界面分析首先我们从风暴英雄这款游戏的背景开始入手分析：风暴英雄（英文：Heroes of the Storm 简称：HOS） 是一个由暴雪公司开发的一款在线多人竞技游戏。暴雪娱乐公司是一家全球著名的视频游戏制作和发行公司，在全球玩家口中享有极其高的盛誉。暴雪公司也的确名副其实，暴雪公司曾推出过多款经典系列作品：魔兽争霸系列、星际争霸系列、暗黑破坏神系列、魔兽世界等，其中魔兽争霸及星际争霸均被众多著名电子竞技比赛列为主要比赛项目，在电脑游戏界享有极高的评价，被铁杆粉丝玩家称为“暴雪出品，必属精品”。暴雪公司号称“三年磨一剑”，然而无论世界游戏业竞争之激烈已经到了你死我活的程度，还是在游戏业市场大萧条时期，暴雪推出的这把“剑”总能在游戏业砍下一个又一个的销售奇迹。在这样的口碑和成绩中，也成就了暴雪的不断壮大。而暴雪最新推出的这款风暴英雄，则是暴雪公司的又一款心血之作。游戏中玩家所扮演的英雄全部来自于暴雪三大经典游戏系列：魔兽世界、暗黑破坏神和星际争霸，是一个浩大的带有魔幻与神话背景的大型竞技游戏，还未公测就收到了广大玩家的热烈期待。从上述分析我们可以提炼出有关风暴英雄的游戏背景大致关键词：暴雪，源于经典，魔幻与神话背景，大型竞技游戏因此我们的页面设计要有一定的魔幻元素，来体现风暴英雄的游戏背景。接下来我们来看一看风暴英雄现有的官方网站：图3-1-1 风暴英雄现有官方网站截图风暴英雄现有网站界面则以紫色为主色调， 配以深蓝色的模块为辅助要素，猜测设计师是为了突出游戏神秘古老、历史悠久又深邃浩大的魔幻游戏背景。因为古老魔幻的风格也是暴雪一贯的网站风格。图3-1-2 风暴英雄现有官网配色分析风暴英雄logo：图3-1-3 风暴英雄logo风暴英雄logo以蓝色为主色调，猜测设计师是想突出浩瀚，深远，智慧的感觉。图3-1-4 风暴英雄logo配色分析从上述分析我们可以提炼出风暴英雄界面设计色彩的大致关键词：紫色，神秘，魔幻，蓝色，浩瀚，智慧因此我们的界面设计的色彩也要以紫色和蓝色为主，体现出风暴英雄的游戏风格。但是个人感觉现有官网的色块占的面积过大，虽然很好的渲染了魔幻气氛，但使得很多文本内容不醒目，无法突出浏览重点，大面积的渐变色的使用使得用户容易审美疲劳。3.2用户需求分析风暴英雄内测已经有近一年了，官网访问者大都是游戏的玩家，因为官网提供了很多版块的内容，比如各种英雄教学、论坛互动、更新动态、比赛直播等等，这些都可以吸引着玩家来经常访问，来浏览、娱乐、加深对游戏的理解。作为老玩家们，官方网站真正吸引他们的就不再是接触游戏初期的那种新鲜感了，他们会更加关注一些实用的价值，比如英雄教学，攻略技巧，与大家互动交流的部分。因此现有官网色块占的面积过大，虽然很好的渲染了魔幻气氛，但使得很多文本内容不醒目，无法突出浏览重点。我认为新的网站的所承载的重点内容不再应该是风格的营造，而且进行大量的有效游戏信息推送，如游戏攻略、游戏视频、游戏活动等等，这些都是目前这个阶段玩家更为关注的。所以这次改版，我们需要把大量的信息有效的推送给玩家，而不是再去对玩家进行风格冲击。因此，针对用户需求，我构思出了新版官网的大致修改方向：图3-2-1 此次改版的大致修改方向那么此次官网改版，如何给玩家更有效的 传递信息 是本次改版的核心。在 传递信息 的同时，为了降低用户在阅读信息的时因其他元素对其造成过多的影响，所以我们在官网设计当中削弱重质感和降低画面的重色，采用轻重结合、风格简洁的思路来完成官网的设计。当然风格简洁的前提是保留一定的魔幻风格。在目前官网的导航处，将网站地图大类列举出来，进行链接分类优化，使网站整个导航架构清晰明了，提高用户浏览效率，节省用户成本。接下来，我们对现有官网进行模块划分，以及信息的提炼：图3-2-2 风暴英雄现有官方区块划分 从模块划分我们可以看到，现有官网提供了以下这些模块：导航栏，活动轮播通知栏，游戏下载，比赛视频直播，免费英雄，论坛热帖，英雄教学，游戏新闻，玩家作品，常见问题，互动社区。那么我们对新官网的制作要建立在这些信息的基础上，尽量让这些信息移植到新的官网上。接下来就是用户体验度的信息调查了，我运用“百度搜索风云榜功能”的百度指数来大致搜索了一下这些关键词的搜索量，大致得到了板块的搜索热度排序。诸如：图3-2-3 百度搜索指数对部分区块关键字的查询结果但是有一些关键词存在反复、冲突的情况存在，比如“风暴英雄内测码”“风暴英雄激活码”“风暴英雄资格申请”“风暴英雄CDkey”等等词条都有一定搜索量，但它们的意思是完全相同的，因此统计的时候比较困难。于是我又在风暴英雄的论坛上找到了玩家发出的一张风暴英雄官网热区图：图3-2-4 风暴英雄官网热区图（论坛网友发布）通过百度搜索指数和可以分析和上述热区图综合分析可得出，目前官网受玩家关注的区块有下面几个：1 游戏下载2 内测资格申请与新手礼包3 游戏新闻（比如更新补丁内容，改版通知，活动通知等）4 英雄殿堂（英雄教学）5 活动轮播通知6 游戏视频7 免费英雄8 赛事新闻与直播9 论坛热帖10 常见问题图3-2-5 玩家受关注的区域，也是官网的重点区块根据区块热度排名，我们再参照现有官网的布局会发现：现有官网的布局基本都很合理，偶尔有一两个区块的位置与它的热度不相符。比如：游戏新闻通过热区图的分析，用户仅仅针对前面两三条的新闻感兴趣，到了后面几条就大大降低。分析后认为这个应该和百度的搜索词条阅读量是一个道理，玩家对前面几条的关注度比较高，后面由于新闻摘要区块过长，造成了阅读压力，玩家们往往忽视这些新闻，就造成了版面浪费。3.3同类网站对比 风暴英雄作为暴雪公司发布的一款MOBA类游戏，自研发以来就一直收到诸多玩家的期待。其实当今世界热门的几款MOBA类的游戏的玩法很类似，风格也是大同小异，那么他们的视觉包装是如何做的呢？于是我就来研究了一些同列别的网站，进行参照和对比，来为设计工作做足准备。 MOBA英文全称为Multiplayer Online Battle Arena Games，意为多人联机在线竞技游戏。但是与CS等游戏又明显不同，MOBA广泛使用于Dota类游戏，是作为类Dota的派生词。自从2009年Dota火遍全球以后，MOBA类游戏开始渐渐多了起来，目前市场上比较有代表性的有Dota作者Icefrog开发的Dota 2，Riot Games公司开发的LOL（英雄联盟），S2game发行的HON（超神英雄），Neople研发的Cyphers（超能战联），以及腾讯自研的众神争霸。当然，还有暴雪公司发布的Heroes of the Storm（风暴英雄）。：Dota 2图3-3-1 DOTA2官网：精心打磨的艺术品 与众多市面上喊打喊杀鲜血四溅飞沙走石的游戏风格不同，Dota 2给人的氛围是安静的史诗感，它更像是一件精心打磨的艺术品，安静的待在那里等着你欣赏，整个页面笼罩着一股战争爆发前一刻的神秘感。在扁平化大行其道的今天采用的却是相当精细的写实风格，并不花哨的博客形式更突出内容的展现。从某种程度上来说，Dota 2是现有Dota的新引擎版，除了上线一些新的的功能最大的改变是UI和美术的细致优化。精致的UI、神秘的气氛无不在像向玩家传达这是一个精美、华丽与细腻的作品。：英雄联盟（LOL）图3-3-2 英雄联盟官网：设计的多样性和丰富饱满的色彩相信这款游戏大家都很熟悉了，英雄联盟随着内测公测到现在成熟运营官网设计已经经历了几个阶段，风格也越来越简洁和扁平化。游戏的设计明显元素和色彩更加丰富、英雄造型也相当动感。英雄联盟拥有特色的英雄、自动匹配的战网平台，包括天赋树、召唤师系统、符文等更加丰富的功能，在英雄设计上也加入了很多有趣的元素，在操作难度和上手难度上明显小于同类其他游戏，娱乐性很强玩家群也相对更广。所以不难理解英雄联盟网页设计的多样性和丰富饱满的色彩。 页面中各种绚丽的光影，每个专题界面的背景主题都与近期的新闻相关，每一页都如史诗一般壮观。：超神英雄（HON）图3-3-3 超神英雄官网：厚重的色彩与细致的写实超神英雄自2010年北美推出以来，已成为东南亚市场最成功的MOBA网游。超神英雄同样继承了经典的MOBA玩法。优良的操作性与热血的打击感，对战节奏快拥有浓厚的竞技特性，操作难度大且上手难度很高使其成为了DreamHack、GSL等国际大型赛事的指定比赛项目，还孕育了很多知名的电竞选手。所以官网设计运用了厚重的色彩以及联盟与地狱英雄双方激烈的对抗感，细致写实的UI也体现了其高品质。：超能战联（Cyphers）图3-3-4 超能联盟官网：爽快的打击感和震撼的破坏效果超能战联打破了MOBA游戏平面作战思维，创造了空中陆地交战的全新玩法。无锁定攻击、无限制连招及华丽丽的必杀技是超能战联动作系统模式的最大特色，另外有血有肉描写细腻的“超能力者角色”也是与同类其他游戏不同的特色。爽快的打击感和震撼的破坏效果是此款游戏的重点，所以设计中不乏粒子、电力、风、火、冰等元素，色彩饱满丰富，轻薄的界面质感更体现其爽快感，专题页面当中更多是体现英雄角色性格、武器和酷炫技能。V：众神争霸图3-3-5 众神争霸官网：世界经典神话大乱斗众神争霸的世界观以希腊神话、北欧神话、印度神话、埃及神话等著名经典为蓝本，采用奇幻架空的题材，英雄角色的造型设计均来源于各大神话传说。游戏强调10V10模式的简单操作、紧凑节奏及大规模团战的爽快感。所以我在设计中尝试强调英雄角色的背景，能在视觉上第一时间给玩家传达神话印象。另外激烈对抗的氛围对于体现游戏的故事背景必不可少。碎石、火光、雷电无不诠释这是一个大乱斗的世界。上述游戏的网站各有各的特色，各有各的亮点和优势，很大程度上都体现了自己游戏的特点和风格。基本都是根据游戏的特点来进行自己海报风格的设计，并从游戏中进行素材的提炼，加工成网站上的元素。分析结论：一款游戏网站该用什么样的风格去设计我们并不需要去限定，只需要从游戏本身的定位、特色、背景、用户群等方面去分析，那么游戏网站的特色就很容易表现出来了。3.4问题综述经过上述对各种资料的收集与分析，以及和同类网站的比较后，我们大致总结出了一下几个需要改变的问题：(1) 现有官网色块占的面积过大，虽然很好的渲染了魔幻气氛，但使得很多文本内容不醒目，无法突出浏览重点。新的网站的修改方向应在保持主要配色与魔幻风格的基础上，尽量简化风格，进行大量的有效信息推送。(2) 区块的分布还不够合理，应根据用户需求和用户体验，重新调整区块的架构布局。(3) 新闻区域版块太长，容易对玩家造成审美疲劳，导致除了前面两三条新闻，后面的信息没有很多人关注，导致了版面的浪费。(4) 和其他的MOBA类大作的网页相比，网页的界面设计偏复古，蓝色重点在深紫色的背景下有一种被淹没的感觉，大部分界面元素都是圆角框架与渐变色的堆积，有一点落伍的感觉，与现在的大网页设计趋势不相符。第四章 风暴英雄新的官网界面设计制作 经过周全的资料收集、分析，以及各方面的对比、考虑，对新网站的设计方向与大致样式以及成竹在胸了，接下来就开始正式的工作了。我们要根据版式设计，色彩心理学，用户体验和视觉设计相关理论来进行设计与制作。4.1设计方法设计工具：Adobe Photoshop CC 图4-1-1 Photoshop CC启动界面制作工具：DreamWeaver CC 图4-1-2 Dreamweaver CC启动界面4.2设计思路设计思路就按照我们之前详细分析出问题与修改方向来一步一步进行制作，我为自己列出了五个设计步骤：（1） 框架设计 根据分析用户浏览网页的视觉一般是从左到右还是从上至下的一个浏览习惯得 到整个网页的框架划分。 （2） 风格设计 页面设计如果使用过多的装饰元素，就会造成页面庞大并且下载速度缓慢。用户浏览大量网页信息的时候需要的是一个简洁无阻碍的界面， 过多的色彩和装饰反而会分散用户的注意力，甚至影响到用户浏览的效果和减少用户对子栏目以及菜单的点击。因此，学院网站将采用简洁化的设计风格，突出信息量的传达。 （3） 信息编排 繁多的信息量会让用户浏览网页的时候会产生一定的压迫感， 如何能让用户顺畅的浏览成为设计中重要的一环。 将网页中的信息进行有效的排布将利用版式设计的原理。 （4） 视觉顺序 在一个信息版块里， 会有第一视觉区、 第二视觉区、 第三视觉区等多个视觉区域， 当用户看到这一信息版块时第一眼会落到图片的位置，第二眼会落到大标题上，第三眼才会落到板块的其他地方。这样有顺序的用户浏览引导功能，可减少用户的浏览成 本，增加页面的视觉效果。（5） 亮点设计 亮点是用户在浏览网页时是否可以在相当的时间内留住用户的眼睛的一个关键，网页设计的亮点可以从配色效果，图标的放置，和其他网页小元素的设计来凸显网页的新鲜感。比如为信息增加醒目的小图标，或者更加拟人化的小改动等。4.3设计过程在3.2中，我们对现有官网进行了区块的划分与区块信息的提炼，得出了现有官网提供的区块内容。又通过百度搜索风云榜、百度搜索指数以及官网热区图，得出了大致的用户最关注的十大区块热度排序。图4-3-1 用户最关注的十大热门区块排序根据这些结论，我开始了对网页架构布局的设计。首先，对区块内容进行从上往下的重要层级划分，经过几次优化，最终得出新版官网规划稿。图4-3-2 新版官网规划稿在新官网的交互中，可以发现之前提高的重点的区块都进行了提升，出现在较高的位置。导航的梳理，新闻的整合、新闻的简洁性，英雄教学的位置调整等等。接下来，我根据规划稿开始对网站框架样式的设计：图4-3-3 新版官网框架样式设计根据规划稿设计出的网站初现雏形了，接下来，根据设计思路的第二步，进行风格设计。之前分析到风暴英雄新版网站应更偏向于信息的传播，所以我想采用轻重结合的浅色调来设计，使用头部的质感和重色来延续风暴英雄的魔幻风格，在配合内容区块的浅色内容来传播信息。图4-3-4 新版官网色调分布为什么轻质感扁平化的东西更适合阅读信息？一款游戏前期使用贴近游戏的重质感设计，是为了培养用户对该游戏风格认识，而当用户培养到一定阶段后，轻质感扁平化的设计必定将取代重质感设计，为什么呢？因为一款游戏运营到一段时间后，积累下来的信息会很多，游戏攻略、新闻公告、活动推广等等数不胜数。而轻质感能够快速高效、不大幅度干扰用户的情况下推送给用户进行阅读，轻质感的设计能够还原印刷类设计的排版，使用户阅读起来更顺畅。在这个信息化的时代，时间就是金钱，一些轻质感甚至能够直接用网页代码写出来，而不需要使用图片，也使得用户载入网站的速度更加快速，减少服务器压力。设计之前我已经在风暴英雄的现有官网中提取出我们需要的色彩了，保留了现有官网的紫色色调作为重色主基调，再分别提取了UI内的蓝色和一点点青绿色进行色彩搭配，配合内容区块的浅灰色来进行新官网的整体色调铺展，再提取新UI内的游戏花纹予以辅助设计。图4-3-5 新官网的主要色彩分布 图4-3-6 图标按钮设计 图4-3-7 区块样式设计经过一步一步的的设计与细化，以及很多次的修改后，完整的官网样式终于渐渐浮现：图4-3-8 官网设计稿完全版再经过继续的优化修改，增加轻色调区信息量以及对细节优化后，确定了官网的最终稿：图4-3-9 官网设计稿最终版这款设计草稿稿很好的满足了上重下轻的设计预想，达到了传达信息，重点突出，架构清晰的效果。上方重色区域很好的传承了游戏的魔幻风格，下方简洁轻快的风格又使得阅读效果大大提升，内容区域采用了约6:4的黄金分割比，用户阅读时也有很棒的视觉舒适感。基于这款设计稿，我使用Dreamweaver开始了对网页的制作。代码的编写过程比较枯燥平淡，却的遇到问题最多的。为此我上网查阅了很多资料，借阅了很多书籍，也收到了同学和老师的热情帮助。经过重重困难，反复的修改与调试，网站的效果终于基本实现。图4-3-10