- 创意VC：畅游VC网页设计观点与实例教程
- 畅游VC
- 1930字
- 2020-06-26 07:25:01
2 用故事感做打动人心的设计
讲个故事吧
从前有座山，山里有座庙，庙里有个老和尚在给小和尚讲故事，讲的什么故事呢？
孩提时代，这个哄我们玩的故事曾经给我们无限的遐想，那是什么样的山，什么样的庙，老和尚到底讲的是什么故事？每个孩子都曾在脑中绘出不同的画面，并印象深刻。
对于故事和设计，是人类与生俱来的一种能力。远古的祖先用燧石在岩壁上刻画，可以算是最早的设计师。当夜幕降临，某位祖先和伙伴们围坐在篝火旁，讲述他一天里发生的故事，从猛兽口中逃生，翻新了居住的洞穴……他用“故事文法”把经历的事情归纳总结并且描述，听者理解、想象，并记忆了这些信息，然后在恰当的时间，把这些故事用符号和画面的形式表现在岩壁上，永久的流传下来。后人阅览壁画，脑中重现了远古那位祖先的一天，信息以故事的形式传承下来，并被人深刻记忆。
所以故事是一种非常直接有效的信息表达方式。而在我们的设计中，尤其是游戏网站设计，赋予画面故事感也是一种直观有效的设计手段。游戏产品本身就具有很强的故事性，贴合游戏的故事背景，在页面上设定好时间、地点和人物等信息，打造一个开放性的画面，引导用户展开想象，脑补起因、经过、结果，完成整个故事。用户的目光在画面上驻留的时间越长，页面信息越易于被记住。
我们来拆解分析一下。
1．打造场景
“有这样一个地方……”很多故事都会这样开头，然后用不小的篇幅来形容这个地方的样子，是什么时代，什么背景，会在这里做什么，美丽或者残破，宏大或者浪漫，打造一个恰当的场景是一个可以容纳尽可能多信息的好办法。
2．利用道具
“传说，这是女娲补天时留下的石头……”普通的一块石头可以承载一个千古神话，恰当出现的物件，成为用户在“补完故事”过程中的关键依据。
各种木制机关元素是《轩辕剑》系列游戏中的一大特色，《轩辕剑7》的页面上特意设计了木制齿轮的切换方式，在页面转换间齿轮像机关一样互相咬合转动，紧密贴合游戏设定，给用户非常大的代入感，从而增强对整站的信服和专注，对于页面的文字信息，会给予更多的耐心阅读。
3．传染情绪
情绪是一种很容易产生共鸣的东西，在页面设计中表现出情绪，可以快速感染用户，结合文案，使用户产生立体的印象，加深记忆。
人物的表情动作是非常直观地表达情绪的方式，利用人物的表情，传达故事感，适用于素材比较丰富的情况。这是一个扑克游戏网站，牌桌上各个角色的性格特征鲜明，表情各有不同，似乎每个人都心怀鬼胎。赋予整个网站极大的悬念和故事感。
在这个页面中，人物眼睛看向斜下方，并遮挡面部，有躲藏的感觉，这区别于一般的“人设陈列”型页面，使人展开联想，看到了什么？在躲避什么？有很强的故事感。
在人物素材清晰度不是很高的情况下，也可以通过肢体动作和光影氛围来传达情绪。例如这个页面中，人物面部隐藏在阴影下，低对比度的暗色调，顶部弱光源，三个蓄势待发的不同动作，辅以雾气和肌理，使画面有一种静止的张力，传达着紧张的气氛。观者几乎和角色一样屏住呼吸，感受作战时紧张危险的瞬间。
实在没有素材的情况下，仍然可以利用场景和氛围表达情绪。雷雨交加的夜色中，在铁轨的尽头有一个模糊的身影，这是恐怖片中常见的画面，用户会迅速被紧张又恐惧的情绪感染，在第一时间被吸引，仔细探究页面内容。
4．互动和情节感
利用画面元素间的互动，展现一种情节感，也是非常有效的表现故事感的方式。
主形象在右侧，动势十足，左侧远方是腾空的背向人物。似乎就在一瞬间，这个狂暴的斗者已经完成冲刺和斩杀。假如换一种方式，画面只有这个主形象，按照一般的思路，放在左上角，即便冲击力仍很强，但缺少了故事，也会给人物的丰满度大打折扣。就好像“这是一个斗士”与“这是一个在竞技场里一击斩杀对手的狂暴斗士”的区别。
用形象和物件以及视频框共同打造互动情节，内容信息和画面紧密结合，融入情节中的信息，会更易记忆。
除了主形象间的互动，也有形象和信息元素间的互动方式。死亡骑士伸出手，吸收着世间所有能量，包括Slogan（标语）和文章内容的配图。这会给人以整体画面的情节感。
5．动静结合打造电影截图
如何让画面“活”起来，而不是死气沉沉的呢？为静态的画面制造动态感，是非常好的解决方法。
静止的远景、动势的云和鸟，造成强烈反差，散落的鸟羽尤其增加了速度感和动势，好像瞬间按下的快门。并且画面统一了向心的运动方向，更使视觉焦点集中在中心的信息上，冲击力、故事感、信息传达都表现完美。
奔跑的人物有强烈的动势，背景用静止的画面增加反差，信息框与人物运动方向具有相同的透视关系，增加了运动感。整个页面感觉和不断奔跑的刺客信条游戏十分贴合，使用户产生强烈的代入感。
这个页面截取了奔跑的战士的腿，造成强烈的动势，而页面信息正是在表达向上增长的点数，动势方向和数据曲线方向一致。信息和画面表达高度统一，更易理解和阅读。