如何使用网页设计中的图片叙事

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