当前位置:网站首页 / 建站知识 / 网站设计知识

从游戏网站看如何打造良好故事感的页面

来源:未知时间:2014-10-16 10:14点击:

讲个故事吧

从前有座山,山里有座庙,庙里有个老和尚在给小和尚讲故事,讲的什么故事呢?

孩提时代,这个哄我们玩的故事曾经给我们无限的遐想,那是什么样的山,什么样的庙,老和尚到底讲的是什么故事?每个孩子都曾在脑中绘出不同的画面,并印象深刻。

对于故事和设计,是人类与生俱来的一种能力。远古的祖先用燧石在岩壁上刻画,可以算是最早的设计师。当夜幕降临,某位祖先和伙伴们围坐在篝火旁,讲述他一天里发生的故事,从猛兽口中逃生,翻新了居住的洞穴……他用“故事文法”把经历的事情归纳总结并且描述,听者理解、想象、并记忆了这些信息,然后在恰当的时间,把这些故事用符号和画面的形式表现在岩壁上,永久的流传下来。后人阅览壁画,脑中重现了远古那位祖先的一天,信息以故事的形式传承下来,并被人深刻记忆。

所以故事是一种非常直接有效的信息表达方式。而在我们的设计中,尤其是游戏网站设计,赋予画面故事感也是一种直观有效的设计手段。游戏产品本身就具有很强的故事性,贴合游戏的故事背景,在页面上设定好时间地点和人物等信息,打造一个开放性的画面,引导用户展开想象,脑补起因经过结果,完成整个故事。用户的目光在画面上驻留的时间越长,页面信息越易于被记住。

我们来拆解分析一下:

一、打造场景

“有这样一个地方……”很多故事都会这样开头,然后用不小的篇幅来形容这个地方的样子,是什么时代,什么背景,会在这里做什么,美丽或者残破,宏大或者浪漫,打造一个恰当的场景是一个可以容纳尽可能多信息的好办法。

打造良好故事感的页面场景1

打造良好故事感的页面场景2

打造良好故事感的页面场景3

打造良好故事感的页面场景4

二、利用道具

“传说,这是女娲补天时留下的石头……”

普通的一块石头可以承载一个千古神话,恰当出现的物件,成为用户在“补完故事”过程中的关键依据。

利用工具打造良好故事感的页面

各种木制机关元素是《轩辕剑》系列游戏中的一大特色,《轩辕剑7》的页面上特意设计了木制齿轮的切换方式,在页面转换间齿轮像机关一样互相咬合转动,紧密贴合游戏设定,给用户非常大的代入感,从而增强对整站的信服和专注,对于页面的文字信息,会给予更多的耐心阅读。

利用工具打造良好故事感的页面1

利用工具打造良好故事感的页面2

利用工具打造良好故事感的页面3

三、传染情绪

情绪是一种很容易产生共鸣的东西,在页面设计中表现出情绪,可以快速感染用户,结合文案,使用户产生立体的印象,加深记忆。

良好故事感的页面传染情绪1

人物的表情动作是非常直观的表达情绪的方式,利用人物表情,传达故事感,适用于素材支持比较好的情况。这是一个扑克游戏网站,牌桌上各个角色性格特征鲜明,表情各有不同,似乎每个人都心怀鬼胎。赋予整站极大的悬念和故事感。

良好故事感的页面传染情绪2

这个页面中,人物眼睛看向斜下方,并遮挡面部,有躲藏的感觉,这区别于一般的“人设陈列”型页面,使人展开联想,看到了什么?在躲什么?有很强的故事感。

良好故事感的页面传染情绪3


在人物素材清晰度不是很够的情况下,也可以通过肢体动作,和光影氛围来传达情绪。例如这个页面中,人物面部隐藏在阴影下,低对比度的暗色调,顶部弱光源,三个蓄势待发的不同动作,辅以雾气和肌理,画面有一种静止的张力,传达着紧张的气氛。观者几乎和角色一样屏住呼吸,感受作战时紧张危险的瞬间。

良好故事感的页面传染情绪4

实在没有素材的情况下,仍然可以利用场景和氛围表达情绪。雷雨交加的夜色中,在铁轨的尽头有一个模糊的身影,恐怖片中常见的画面出现在页面中,用户会迅速感染到紧张又有些恐惧的情绪,在第一时间被吸引,仔细探究页面内容。

四、互动和情节感

利用画面元素间的互动,展现一种情节感,也是非常有效的表现故事感的方式。

故事感页面的互动和情景感1

主形象在右侧,动势十足,左侧远方是腾空的背向人物。似乎就在一瞬间,这个狂暴的斗者已经完成冲刺和斩杀。假如换一种方式,画面只有这个主形象,按照一般思路,放在左上角,即便冲击力仍很强,但缺少了故事,也会给人物的丰满度大打折扣。就好像“这是一个斗士”与“这是一个在竞技场里一击斩杀对手的狂暴斗士”的区别。

故事感页面的互动和情景感2

除了主形象间的互动,也有形象和信息元素间的互动方式。冥魂大帝伸出手,吸收着世间所有能量,包括slogan和文章内容的配图。这会给人以整体画面的情节感。

故事感页面的互动和情景感3

这也是一个形象与信息元素互动的例子,人物抓住内容框区,好像把内容举到身前,建立了形象和内容之间的联系,引导视觉停留在内容上。

故事感页面的互动和情景感4

用形象和物件以及视频框共同打造互动情节,内容信息和画面紧密结合,融入情节中的信息,会更易记忆。

五、动静结合打造电影截图

如何让画面“活”起来,而不是死气沉沉的呢?为静态的画面制造动态感,是非常好的解决方法。

动静结合打造电影截图1

静止的远景,动势的云和鸟,造成强烈反差,散落的鸟羽尤其增加了速度感和动势,好像瞬间按下的快门。并且画面统一了向心的运动方向,更使视觉焦点集中在中心的信息上,冲击力、故事感、信息传达都表现完美。

动静结合打造电影截图2

奔跑的人物有强烈动势,背景用静止画面增加反差,信息框与人物运动方向相同的透视,增加了运动感。整个页面感觉和不断奔跑的刺客信条游戏十分贴合,使用户产生强烈的代入感。

动静结合打造电影截图3

这个页面截取了奔跑的战士的腿,造成强烈动势,而页面信息正是在表达向上增长的点数,动势方向和数据曲线方向一致。信息和画面表达高度统一,更易理解和阅读。

怎样设计有故事感的页面?

讲故事的方式多种多样,艺术的表达,更可以从电影、摄影、画作、文学中借鉴手法。以上几种方式只是一个归纳,这么多方法列出来,真正做起来的时候可能会觉得难以入手。或许设计师也可以用讲故事的方式进行构思,利用现有元素,相互联系,发散思考,先讲一个开头给自己。

案例

《轩辕剑》系列是著名的中文角色扮演游戏,以独特的内涵和厚重的历史感在中文RPG游戏中自成一格,自1990年至今共发布11款系列作品。《轩辕剑》自问世以来长久不衰,其系列游戏在广大玩家心中已成为最深刻的记忆。

游戏背景:

在故事上以穿越形式贯穿整个轩辕剑历史

网站目的:

展示《轩辕剑7》游戏内容

可利用的素材和元素:

游戏中特色的机关术部分、一些场景截图

把上面每项信息展开、并相互联系思考:

故事感页面场景截图1

继续联系每项元素,脑海中浮现了这样一个故事开头:

在云雾缭绕的神话空间里,神明在云层中俯瞰大地,记载历史的巨大卷轴,在齿轮机关的作用下缓缓展开,一部新的传说娓娓道来……

故事感页面场景截图2

至于传说是什么,用户自会去发现、思考,甚至创造了。

官网上线后,进行了用户问卷调查:

故事感页面场景截图3

数据反馈表现,用故事感的方式进行设计,大大增加了用户的代入感,提高用户对游戏本身的兴趣和关注度,完成宣传产品的最终目的。故事感的设计方式在游戏网站中,更能展现加倍的效果。让我们一起来讲故事吧~!