Qzone大应用改版案例分析:视觉的优化

Qzone大应用是QQ游戏在Qzone上的一个集合，里面包含了我们团队所研发的各种棋牌休闲游戏的Web版，现在已经发布了19款，包含欢乐斗地主，英雄杀，QQ桌球，QQ跳棋，象棋，对对碰等…，随着游戏的增加，老版本的扩展性，视觉表现，功能模块上都面临着问题，便有了这次的整体改版…

改版的原因

1、视觉的陈旧

背景过于厚重和复杂，不利于用户的注意力放在应用图标上；“在线好友”与“公告”板块的设置也不是很科学，占去了过多的空间。

2、为了带动游戏在线数据

虽然旧版本中的游戏图标有“大图”“小图”两种模式，但无论哪种查看方式都无法将所有游戏图标在首页全部展示完，这种分页展示的情况下，排列在第二页的游戏，在线数据相比首页的游戏下降了几千个点。

改版中遇到的问题

1、受限于Qzone应用的结构要求

所有Qzone里的应用都是局限在固定宽度内，但是需要呈现的板块和功能点并不算少，主次关系需要重新梳理。

2、整个应用页面为Flash开发，局限了设计的发挥

整个QQGAME大应用是由Flash开发完成的，这样一来为了控制整个应用的加载速度，不宜导入过多的位图，所以有些地方需要在Flash中重新绘制，但是Flash作为一款矢量设计软件，细节上不能达到PS那样的细致程度；其次是文件中某些控件是由程序写死在文件之中，因此设计无法作出较大的修改。

改进和优化的点

1、将分页展示改为一页展示

“在线好友”板块下移，为游戏图标空出了更多的展示空间，这样一来，用户就能在第一屏看到所有的游戏图标。

2、将“启动游戏大厅”和“邀请好友“的功能强化

“启动游戏大厅”和“邀请好友”两个功能点在旧版中只是用文字链的形式展现，这样的展示形式很容易让人忽略，对于数据的拉动起不到实质性的作用。因此在新版中，我们将这两个功能点处理为按钮的样式，并且从版面的下方挪到了版面头部，从而加大他们的曝光率。

3、新加入游戏推荐板块，对重点游戏进行推荐，拉高数据

在新版的设计中，我们加入了游戏推荐栏，用以对重点游戏进行推荐，由于尺寸摆放位置的特殊性，希望借此来拉动对应游戏的拉起数据。

4、将“公告栏“的功能弱化

旧版本的“公告栏”以一个板块的形式呈现，占据了整个版面1/6的面积，实际上这一功能点所起到的作用并不是很大，并不需要在一个重要的位置占据这么大的面积，因此在新版的设计中，我们将这个功能点弱化为文字链，但是位置仍然保持在版面头部，以此来保证相关信息发布的同时又不会分散用户对于游戏图标的注意力。

视觉的优化

1、与QQ游戏大厅2012的视觉风格统一（样式的演变）

视觉的更新可以说是这次QQGAME大应用页面改版最直观的改变了。这次的改版，除了在视觉风格上希望与时俱进，更重要的是，我们希望让用户第一眼看到这个应用页面的时候能立刻联想到QQ游戏大厅，因此我们着力于将视觉设计与游戏大厅的视觉风格统一起来，保持大厅轻薄、通透的质感，并且我们加入了“卓明谷”这一QQ游戏大厅2012版的标志性元素。

第一个版本，注重了轻量化设计，线条和色块的设计尽量清淡以便于用户将注意力更多地放在游戏图标上，“公告”也换成了图片的形式放在版面顶部。

第二版，为了和QQ游戏大厅风格更贴合，让用户一眼就能识别，我们将应用的背景修改成和QQ游戏大厅一样的色调，并加入了“卓明谷”的背景。

第三版，顶部的图片广告回到了文字链形式，板块之间的区分变得更加明晰，板块的背景也进行了优化，调整了透明度，让整个界面看起来更加清新。

最后定稿，我们将游戏推荐板块的形式做了小小的调整，因为之前的形式会让用户看起来像是广告。“在线好友”板块的滚动条最后还是去掉了，换成了翻至首页和翻至尾页按钮，最后，还在版面头部加上了“邀请好友”按钮。

2、视觉上更轻量化，让用户的注意力更多地落在游戏icon上

相比旧版本的设计，新版的设计把许多地方弱化，甚至去掉了，例如公告和在线好友板块中的icon。这种做减法的设计方法，一来是和游戏大厅轻薄的风格保持一致，二来，弱化了这些次要的甚至是不必要的元素，反而更能突出应用中的游戏图标，因为这些图标才是整个产品的重点，不应该用多余的元素来干扰它们的呈现。

新功能

游戏图标置顶功能

新版本的设计中，为每个游戏加上了“置顶”这一功能。当用户将鼠标移到某一游戏图标上的时候，会出现“置顶”按钮，点击该按钮，则该游戏会被移动到“游戏库”的首位，从而方便用户下一次查找和进行游戏。因为目前整个QQGAME大应用中包含的游戏只有17款，所以在一个页面中就全部展示出来了，游戏如果排列在中间，用户查找会浪费一定的时间，“置顶”功能的加入可以将用户经常玩的游戏放在显眼的位置便于其查找。

体验地址：

http://rc.qzone.qq.com/myhome/385/?via=QZ.APP.SEARCH