网页设计中的图片叙事
自人类历史起源之初，故事就在我们的沟通中扮演着极大的角色。仅仅因为我们对着屏幕讲述故事而非几千年前围坐篝火，但其故事的感染力都始终未变。最有意思的是，故事的听众不再一字一句尽收耳中，因为这些“听众”(从某种意义上，他们也是用户)能通过导航按钮等动作掌控整个讲述的流程和节奏。 网页的信息主要分为两类，一类是文字等需要人类大脑的语言系统去处理的语言信息，另一类就是以图片为主的视觉信息。如今的网页已经被认定为一个承载各种视觉信息的媒体，尽管网页也展示大量的文字信息，但随着网速提升，视觉的媒介例如图片、视频等慢慢占据了我们的屏幕。 一个没有图片的网站看上去...全部
自人类历史起源之初，故事就在我们的沟通中扮演着极大的角色。仅仅因为我们对着屏幕讲述故事而非几千年前围坐篝火，但其故事的感染力都始终未变。最有意思的是，故事的听众不再一字一句尽收耳中，因为这些“听众”(从某种意义上，他们也是用户)能通过导航按钮等动作掌控整个讲述的流程和节奏。
网页的信息主要分为两类，一类是文字等需要人类大脑的语言系统去处理的语言信息，另一类就是以图片为主的视觉信息。如今的网页已经被认定为一个承载各种视觉信息的媒体，尽管网页也展示大量的文字信息，但随着网速提升，视觉的媒介例如图片、视频等慢慢占据了我们的屏幕。
一个没有图片的网站看上去毫无生命力可言，也一定会被忽略。相反，配图美观，丰富的动画交互的网页就成为视觉焦点。 视觉叙事为网页设计创建了目标，它将各种复杂的设计方案进行提纯成一个简单的戏剧性的冲突演进的故事，这个故事极易被用户所接受。
没有好的视觉叙事的表达能力，你的网页将没有潜力可挖掘。 一图胜千言 我们听过一句古语叫做“一图胜千言”。但是你是否知道这背后潜藏的科学依据?有一个理论叫做“图优效应”(Picture superiority effect)，它的意思是图片是比文字载体更易被记忆的，同样内容用图片传达的信息是文字的6倍。
由于图片可以同时从两个维度，即语言和图像方面传递信息，因此它使得人脑更易于编码和记忆。 既然知道图片的重要性，那么，在使用图片的过程中有几点不得不引起我们的注意： 1、在一个网站中使用风格协调统一的图片，但是它们的内容展示要有所区别，才能表达出网页中不同的层次。
在我们设计轻网站PANNEY(点击演示)的时候，木工艺术的素材材质看上去接近自然木色，因此整体都以自然原木色作为统一的色调，与此同时，每张全屏大图表现不同的内容层次，搭配不同的文字内容。
每个屏幕展示一张大图的同时也展示一小部分下一张图片，作为提醒下一步的操作极为重要。 2、不要在你的图片里重复同一个概念，试着将概念联系起来串成线，成为一种叙事。 轻网站HATHOR(点击演示)在设计时，我们就考虑用一个引导页作为故事起点，有点像一本书的封面。
一个小小的箭头ICON在左下角提醒读者进入“正文” 我们拿出了四个概念，四个概念分别用不同的配图，就像叙事一样对网站的“性格特征”进行描述。
这里我放2张配图在这里，大家可以点击进入演示观赏。 3、如果要在图片中使用到模特，这些模特也需要在你贯穿故事始终的同时保持一致。这里所谓的一致并非是指需要他们都是同一个对象，而是指不要让他们好像从不同的世界走来一样。
轻网站THOTH(点击演示)的设计思路就是如此，出现的模特出现在同一个页面，装扮是统一风格的造型，采用竖型排列才会显得不冲突。 来到这个网站的首页是品牌的大型标志，占据首屏，点击进入后才来到一排好像橱窗一样的当鼠标滑过某一张图片，这张图片的色调变亮，就像橱窗的玻璃滑开，文字消失，引导用户进一步点击进入。
这个故事并非横向，而是纵向深入的。最后直达深入到图片背后的产品理念。 4、虽然是以图片来进行叙事，但是这也并不意味着你就不能使用文字，文字作为辅助可以加强叙事的表达和理解。 轻网站ATHENA(点击演示)的图文比例刚好是屏幕的一半，除了展示图片，更突出文字，文字采用的不同色彩的纯色背景，而图片则是较为淡雅的灰白色系和简洁的表达，此时，图片变成了配角。
每一页之间都采用两两相衬的色彩，让每一页都相互联系而不至于孤立起来。 轻网站MEROPE(点击演示)的图文展示则是图片为主要焦点，但同时出现文字这个次要的焦点。有点像一张照片旁边贴出的一张便签的说明。
图文相互配合，共同营造出“舒适”“温暖”这类氛围，加强整个木质家私带来的居家的温馨感。 5、尽量运用简洁而具有冲击力的图片，这里所谓简洁和冲击力其实就是在整个屏幕只保留唯一一个视觉焦点。
轻网站NIREUS(点击演示)这里所用的就是这样一个技巧，每张图片只展示人物的面部表情，通过这种清晰地透彻的表达，让你和模特的距离拉得更近，再在黑白人物之上叠上一层透明色彩，略微遮住人物，又让你和模特之间永远隔着一种距离。
似远似近，给这份距离带来张力。 影像之速 用户的注意力总是有限的，通常在10秒以内，一个人就能判断这个网站是否值得继续浏览。如果这时过多的文字信息就会让用户望而却步，懒于阅读而离开。
当有人来到你的网站看到的是图片并能立即判断网页的大致内容时，这不仅为用户节省了精力和时间，也为他们继续浏览创造了机会。 比如轻网站SEAWEE(点击演示)在设计之初，我们就想要做一个让用户一来到这个网站就能饱览全局的页面，同时又不离开单一的视觉焦点。
这不仅要保持简洁，同时又要展示足够多的信息。听上去是个两难困境。于是，我们采用了动画的方式来解决，左右各设置一个箭头，一个指向前，一个指向后，分别在鼠标滑过时展示出前后三张图片，让你能通过移动鼠标就能大致了解所有图片的大致样式。
根据这个理念，我们又设计了另一个网站，轻网站DEMETER(点击演示)是另一种类型的画廊，而它是一个非常典型的画廊，它是按照图片排成一行的集合形式出现，而且点击左右按钮就能让它往横向滑动。
这让用户在第一时间就会浏览到这个画廊里的所有内容，然后进一步选择需要查看的图片。 后记 网页的图片叙事几乎可以运用到任何一种情态里，你可以通过申请使用上面所提到的轻网站来搭建自己的故事，采用自己的叙事手法去表达产品或服务。
收起
