如何设计游戏官网？《天神纪》设计思路实战分享

前所未有的东方幻想作品

《天神纪》原名《ASTA》意为"涅盘之路"，既意味着游戏内的最高等级，又意味着通往修行最高境界的路途。《天神纪》追求全新概念的东方幻想主题，融合了中、日、韩等亚洲国家的服装、宗教、历史、文化。《天神纪》世界里随着游戏角色的成长其外貌会发生改变。此外，该作通过大胆的色彩应用、美工技法、天气效果让玩家们身处梦境般的世界。

官网地址：http://tsj.changyou.com/

世界观以东方哲学为基础

《天神纪》采用东方哲学、阴阳五行、轮回、悟道等东方素材和世界观。开发商PolygonGames CEO申国喜称："《天神纪》世界观以东方哲学为基础，剧情以阴阳五行为基础。此外，相生相克的元素适用于游戏技能和道具，轮回影响角色成长和外形自定义。当玩家完成剧情任务时会悟道，培养技能。"

根据游戏风格找出关键词:

以上文字中提到了此款游戏融合了中、日、韩等亚洲国家的宗教、历史、文化，世界观以东方哲学为基础，从而我们找出：

日本：——神道、浮世绘；
中国：——佛教、玄学、水墨、琴棋书画……
韩国：——巫法、晕染；

因包含了整个东方，中日韩为主，但也包括了东南亚的密宗和波若。

根据关键词找出相关资料图：

官网风格初尝试:（组内比稿)

起初方案画面想走生命之神和死亡之神相爱相杀的一个基调，由于主宣形象的素材质量未达预期，准备出的针对性交互难以实现。经过多次交流与沟通后，我们决定重新设计一套注重情感化设计的常规方案，来保证整个网站的品质感。

为了设计好新的方案，我们对网站内容进行了再一次的审视：

风格上我们决定从"异"字出发，不仅要画面"异"而且形式也是"异"。但此版又太过于表现形式而忽视内容的展示。最终决定抛弃人物为主体的思路，着重渲染场景来突出意境。作为一款具有（中、日、韩、东南亚）多国风格的游戏，我们在视觉处理上采用同一个月亮不同国家的形式去展现各国特色，比如中国的月下竹林、日本的屏风屋檐、韩国的书香研台、东南亚的诡异寺庙……等。由于没有合适的场景素材，所有场景都需要我们自己绘制+素材组合。

我们找了一些极具东方特色图片作为参考:

官网设计实践过程：

构思与素材整合：

首页设计的品质直接影响到整站的优良，在本次首页设计中，着重营造画面的故事感和意境的打造。大视角的背景设计让用户视野更宽广，代入感更强，配合宁静的海面、月亮、船上的女子以及红色的树，使整个页面透出一种安静唯美的感觉。配色上也大胆的使用了蓝、红、黄色的搭配突出"异"的感觉。

导航部分的重构设计

对内容进行归类整合之后我们发现，我们无法用单一导航容纳全部内容。即使用容量较大的左导航可以解决内容方面的问题，误导用户意外跳出的几率仍然很高。因此，我们使用了双导航帮助用户整理出浏览的最佳维度。

为了避免两个导航占据较大的页面空间，干扰用户浏览，我们开始将导航设计为自动隐藏，但测试之后发现用户难以理解，因此我们让导航保留固定位置但采用融于背景的色系来避免这个问题。
同时，我们为不起眼的副导航加入一个动画效果，在载入页面后播放，通过这样的方式使两个导航都起到了应有的作用。

在导航的位置确定下来之后，下一步就是确定网站的结构。在旧方案中的单一页面场景内浏览已经不再适用，为了防止分页浏览显得过于单调，我们在切换时加入了动画效果。接下来的问题是，代表游戏的LOGO和SLOGAN放在哪里才算合适呢？

SLOGAN部分的重构设计

经过多次讨论，我们确定了游戏定位的权重远高于游戏LOGO。在不破坏画面视觉效果的基础上，我们决定将SLOGAN放在页面中上方。在眼动测试中，用户浏览到这个位置时，瞳孔直径有较为明显的变化。

为了强化这个效果并突出游戏定位，我们做了一个大胆的尝试，让SLOGAN在网站内全页面存在并作为全部页面的视觉重心。同时，为了让用户不至于对相同的元素产生视觉疲劳，我们同样使用了载入页面后播放的动画效果。

尽管LOGO的重要程度低于SLOGAN，但我们考量到作为一个初次与用户见面的游戏，我们不能只让玩家注意到这个站做得好，同时更要让玩家记住游戏的名字。但LOGO与强化设计过的SLOGAN放在一起会产生冲突。我们需要为LOGO找到一个突出且独立的放置位置，要求是足够醒目，又不会因为长期出现而造成用户的视觉疲劳。最终我们决定在页面的过场动画中加入LOGO，利用缓存特性来实现设计目标。当用户初次访问网站时会在LOADING时长期出现，而回访时则会快速跳过，避免用户产生反感。

构思与素材整合：

游戏特色页着重强调内容特色和世界观，颠覆了以往以人物为主体的设计形式，转由带有故事性的场景为主导，整个页面运用比较怀旧的色调来突出沧桑感，突出引导入口的作用。主要表现东南亚文化的神秘特征，东南亚密宗的特色是充满神秘色彩，重视神通、鬼神、及神秘体验。所以在页面设计上我们注重神秘的打造，阴暗的色彩氛围、远景的诡异的庙宇、散落的枯叶以及空中的鬼怪等。

为了让用户更全面的了解游戏，更好的体验游戏的独特魅力，我们在影、音、画三方面的视觉表现上做足了功夫。

构思与素材整合：

游戏中的音乐表现不俗，象征着中国文化博大精深，所以在音乐对应的页面就表现中国，中国文化最讲究境界。竹子和古筝是中国的代表，古筝的音律配合波浪汹涌以竹林为背景，形成天地合一的境界。在表现形式上，没有使用传统播放器的形式，而是把古筝跟水波结合起来，水波随着古筝的音乐频率跃动，让音乐完全融入到场景中。交互方面让用户拨动琴弦播放音乐，提高用户参与度。在FLASH实践方面使用了可视化波谱分析技术，让音符随着音乐的播放，在层叠的波浪中随着音乐的节奏舞动，使得用户在享受音乐的同时，更增添了视觉上的享受。

构思与素材整合：

日本的文化讲究"静"，所以在页面设计中运用了屏风、香炉等元素创造了一个寂静且充满冥想的空间。随着页面打开屏风也随之缓慢的向两边移动，设计素材选取了游戏截图中檀木屏风和框体，配合古代香炉，展示了东方古色古香的奇异世界。为了突出空间感，着重进行了前、中、远景的层次处理。为了让环境光更加柔和，配合屏风叠加粗质布纹协调画面。

构思与素材整合：

截图页代表韩国，韩国文化受中国影响明显，追求意境。页面运用琴、棋、书、画 中的画的部分，运用画卷的形式体现游戏原画。意境贴合东方主题。整个页面营造一种冬日凄美的感觉，打开历史的卷轴一览世间百态。

在场景与场景切换时，全部使用了乌云打开的效果，配合上整站所特有的大月亮背景，给人一种拨云见月，豁然开朗的感觉。

弹窗：每个页面的弹窗在延续当前页面设计风格的基础上进行了再次创新。

写在最后：

官网上线后，得到了公司内部和外部的一致好评，其中官网设计的调查问卷数据也创了新高：

整个网站除了大风格把握到位还有注重细节的把控，像Loading时在LOGO上方飞舞的蝴蝶，进入首页后的点点星光，纷繁飘落的红叶，及波光粼粼的水面，再到精美截图中渐渐打开的画卷，飘落的白雪，及枯树与乌鸦，在配上《天神纪》特有的交响乐，使得整站提升到了一个全新的高度。

关于畅游VC

搜狐畅游视觉设计中心团队。我们是从游戏和生活中汲取创意和灵感的一群设计精灵，用爱去释放奇妙的设计魔法，描绘让你我感动的虚拟人生。

官网博客：vc.changyou.com
新浪微博： @畅游VC
微信公众平台：cyou_vc

您也可以通过扫描下方二维码快速添加：

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量71万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：