视觉设计实例:亚运官网的改版

亚运官网改版背景
　　2008奥运结束之际，2010亚运官方网站随即上线。网易作为广州亚运会互联网网站以及内容独家赞助商，理所当然地，在公司内部为2010亚运会专门成立了亚运内容频道以及亚运设计小组。
　　至今官网上线已有一年多的时间，随着亚运会的VI愈加完善，需要展示给观众的内容愈加增多，原有网站的功能已经无法满足当前网友的需求。因此亚运会组委会以及网易亚运频道决定在亚运倒计时一周年之际对亚运官网进行一次全新改版。本次的改版致力于在设计风格、亚运VI系统、交互功能及用户体验方面做出优化。

1、 前期调研
　　作为一个网络产品，离不开的话题永远是网友、用户，因此注定了“用户体验”这个词的热门程度。亚运官网在改版设计之初就用户对亚运官网的定位以及风格偏好进行了一次调研。结合亚运会组委会、亚运频道以及调研分析，我们制定了此次改版的大致方向：

• 简洁、大气、结构清晰明了
• 时尚、活力、国际化
• 突出重点功能，如倒计时、资源检索
• 彰显中国及南粤特色

　　从以上所述的风格定位到最终版本的确定，不仅要得到亚运频道的肯定，还需要通过广州亚运组委会层层审核。这样的合作过程决定了设计师必须要有三头六臂，左右逢源，从多重角度与身份去考虑并解决问题。
　　一个漫长并且艰难的改版设计就这样拉开了序幕。

2、 设计历程概述

　　2.1　改版布局的确定
　　确定了本次改版的大致方向之后，首先就需要参照这些要求构建页面的骨架，也就是制作出新官网的布局结构图。
　　为了顾及用户的浏览、阅读习惯，新版的结构布局基本延续了旧版的布局，只是在交互以及体验上进行了一些调整。
　　将倒计时以及搜索放置在功能区的上方，进行突出和强调的处；新闻头条区域依照内容分为不同的类别，以鼠标经过切换选项卡的形式实现。（回顾旧版页面，请点击http://www.gz2010.cn页面底部“历史页面查询”） 

　　2.2页面风格的确定
　　布局框架确定之后就是对它进行大刀阔斧的改版了，设计中心抽调了几位设计师同时进行这次官网首页的设计，以示重视。艰难的设计历程持续了有一个多月，其间经历了无数次大大小小的反复修改，加班、通宵制作和更近也是家常便饭。回想起这一切，让现在正写着这篇文章的我庆幸那已经成为了过去。
　　以下展示本次改版过程中提供的所有风格方案。

　　亚运组委会与亚运频道研究与讨论之后，决定采用方案7的风格，在此基础上对一些细节进行优化改进。

　　2.3最终效果的确定
　　确定了风格之后，亚组委对各个细节都不断提出大大小小的改进意见，我们需要做的是把这些多如牛毛的意见一件件处理好，直至对方满意通过。
　　其中尤为需要考虑的是，如何处理好亚组委各层领导提出的各项需求。亚运组委会是一个较为庞大的机构，有着大大小小不同的部门分支，而各个部门都想把自己的版块自己的产品推上最重要的位置，这就需要设计师勤加思索，发挥想象力，对有限的空间进行充分利用，创造最优效果，让人人满意。
　　最终上线的效果图。

3、 最终版本之设计思想简述

　　最终版所采取的简洁风格，主要是围绕2010亚运会的整套VI进行的，如banner背景及主图、页面的水墨背景、栏目条都是运用亚运VI元素进行组合设计的。

　　3.1 banner设计

　　以上是顶部banner的设计思维图；作为一个网站最显眼也是最能体现整个网站形象的一个区域，我们采用了具有中国特色的泼墨形式，并将亚运会VI图案、运动人物标识、连绵的山脉等元素组合在一起。右侧运动人物标识还有一个特别之处，我们设计了多套不同的运动图案，每次访问页面会随机打开其中一张，力求让用户每次访问都有些不同的感受，以增加官网的层次及趣味性。运动人物下方的抽象连绵山脉，则是使用亚运核心图形重复排列构成，以突出广州特色——白云山。

　　3.2 特色的设计

　　头图运用不规则图形，打破一直以来较为常见的方方正正的死板形式，让整个页面活泼、有个性。
　　导航制作成了半透明，透出底部水墨花纹，突出时尚感的同时，不突兀地与背景融为一体。

　　3.3 功能区——倒计时、搜索栏

　　倒计时区：前面提到，倒计时区域的设计相比旧版需要做的更加的突出。因此我们摒弃了一般的倒计时功能所特有纯数字、呆板无聊的特性，结合真实的划龙舟图片和亚运体育图标中的龙舟，设计出了这个倒计时的形式，并且用FLASH制作出龙舟划动的动画效果，更加能够成为用户目光的焦点。

　　搜索功能区：搜索按钮使用醒目的红色。为了提升用户体验，加入搜索类型的切换功能，让用户可以更容易地找到自己想要的内容。为了增加切换点击的手感，我们使用的不仅仅是激活与未激活切换时单纯的文字变化，而是设计了与搜索框融为一体的按钮效果。

　　3.4 背景设计：水墨纹样的采用

　　新版设计中的一个核心就是页面的特色，不仅仅是中国的特色，还有亚运的特色。而中国的水墨在奥运中的成功运用，也让这一元素更加的具有了国际化特性。设计之初，底部背景是运用了具有运动特色的大面积水墨效果，之后才修改成了经过水墨化处理的亚运LOGO，这样可以更加的契合亚运的主题，将背景也与亚运VI进行了关联。

后记：

　　本次亚运官网的改版，保留了旧版中的一些经典设计，更多的是加入亚运VI中的一些视觉元素，在风格、特色以及用户体验上面进行了一次提升；只是一次改版的成功与否，关键还是在于用户使用后的反馈，而这些还有待后期数据的论证。