



免费预览已结束,剩余1页可下载查看
VIP免费下载
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
如何使用网页设计中的图片叙事如何使用网页设计中的图片叙事 网页的信息主要分为两类 一类是文字等需要人类大脑的语言系统 去处理的语言信息 另一类就是以图片为主的视觉信息 那么本文 将为大家介绍运用图片进行叙事的要义 欢迎阅读 自人类历史起源之初 故事就在我们的沟通中扮演着极大的角色 仅仅因为我们对着屏幕讲述故事而非几千年前围坐篝火 但其故事 的感染力都始终未变 最有意思的是 故事的听众不再一字一句尽 收耳中 因为这些 听众 从某种意义上 他们也是用户 能通过 导航按钮等动作掌控整个讲述的流程和节奏 网页的信息主要分为两类 一类是文字等需要人类大脑的语言系统 去处理的语言信息 另一类就是以图片为主的视觉信息 如今的网 页已经被认定为一个承载各种视觉信息的媒体 尽管网页也展示大 量的文字信息 但随着网速提升 视觉的媒介例如图片 视频等慢 慢占据了我们的屏幕 一个没有图片的网站看上去毫无生命力可言 也一定会被忽略 相反 配图美观 丰富的动画交互的网页就成 为视觉焦点 视觉叙事为网页设计创建了目标 它将各种复杂的设计方案进行提 纯成一个简单的戏剧性的冲突演进的故事 这个故事极易被用户所 接受 没有好的视觉叙事的表达能力 你的网页将没有潜力可挖掘 一图胜千言 我们听过一句古语叫做 一图胜千言 但是你是否知道这背后潜 藏的科学依据 有一个理论叫做 图优效应 Picture superiority effect 它的意思是图片是比文字载体更易被记忆的 同样内容用 图片传达的信息是文字的6倍 由于图片可以同时从两个维度 即语 言和图像方面传递信息 因此它使得人脑更易于编码和记忆 既然知道图片的重要性 那么 在使用图片的过程中有几点不得不 引起我们的注意 1 在一个网站中使用风格协调统一的图片 但是它们的内容展示要 有所区别 才能表达出网页中不同的层次 在我们设计轻网站PANNEY 点击演示 的时候 木工艺术的素材材质 看上去接近自然木色 因此整体都以自然原木色作为统一的色调 与此同时 每张全屏大图表现不同的内容层次 搭配不同的文字内 容 每个屏幕展示一张大图的同时也展示一小部分下一张图片 作 为提醒下一步的操作极为重要 2 不要在你的图片里重复同一个概念 试着将概念联系起来串成线 成为一种叙事 轻网站HATHOR 点击演示 在设计时 我们就考虑用一个引导页作为 故事起点 有点像一本书的封面 一个小小的箭头ICON在左下角提 醒读者进入 正文 我们拿出了四个概念 四个概念分别用不同的配图 就像叙事一样 对网站的 性格特征 进行描述 这里我放2张配图在这里 大家可 以点击进入演示观赏 3 如果要在图片中使用到模特 这些模特也需要在你贯穿故事始终 的同时保持一致 这里所谓的一致并非是指需要他们都是同一个对 象 而是指不要让他们好像从不同的世界走来一样 轻网站THOTH 点击演示 的设计思路就是如此 出现的模特出现在同 一个页面 装扮是统一风格的造型 采用竖型排列才会显得不冲突 来到这个网站的首页是品牌的大型标志 占据首屏 点击进入后才 来到一排好像橱窗一样的当鼠标滑过某一张图片 这张图片的色调 变亮 就像橱窗的玻璃滑开 文字消失 引导用户进一步点击进入 这个故事并非横向 而是纵向深入的 最后直达深入到图片背后 的产品理念 4 虽然是以图片来进行叙事 但是这也并不意味着你就不能使用文 字 文字作为辅助可以加强叙事的表达和理解 轻网站ATHENA 点击演示 的图文比例刚好是屏幕的一半 除了展示 图片 更突出文字 文字采用的不同色彩的纯色背景 而图片则是 较为淡雅的灰白色系和简洁的表达 此时 图片变成了配角 每一页之间都采用两两相衬的色彩 让每一页都相互联系而不至于 孤立起来 轻网站MEROPE 点击演示 的图文展示则是图片为主要焦点 但同时 出现文字这个次要的焦点 有点像一张照片旁边贴出的一张便签的 说明 图文相互配合 共同营造出 舒适 温暖 这类氛围 加 强整个木质家私带来的居家的温馨感 5 尽量运用简洁而具有冲击力的图片 这里所谓简洁和冲击力其实 就是在整个屏幕只保留唯一一个视觉焦点 轻网站NIREUS 点击演示 这里所用的就是这样一个技巧 每张图片 只展示人物的面部表情 通过这种清晰地透彻的表达 让你和模特 的距离拉得更近 再在黑白人物之上叠上一层透明色彩 略微遮住 人物 又让你和模特之间永远隔着一种距离 似远似近 给这份距 离带来张力 影像之速 用户的注意力总是有限的 通常在10秒以内 一个人就能判断这个 网站是否值得继续浏览 如果这时过多的文字信息就会让用户望而 却步 懒于阅读而离开 当有人来到你的网站看到的是图片并能立 即判断网页的大致内容时 这不仅为用户节省了精力和时间 也为 他们继续浏览创造了机会 比如轻网站SEAWEE 点击演示 在设计之初 我们就想要做一个让用 户一来到这个网站就能饱览全局的页面 同时又不离开单一的视觉 焦点 这不仅要保持简洁 同时又要展示足够多的信息 听上去是 个两难困境 于是 我们采用了动画的方式来解决 左右各设置一 个箭头 一个指向前 一个指向后 分别在鼠标滑过时展示出前后 三张图片 让你能通过移动鼠标就能大致了解所有图片的大致样式 根据这个理念 我们又设计了另一个网站 轻网站
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 新解读《CB-T 3895-1999船用柴油机清洁度测量方法》新解读
- 新解读《CB-T 3850 - 1999船用分流式离心润滑油滤器》新解读
- 第18课 科技文化成就 课件 人教版部编八年级下册历史
- 汽车传感器与检测技术电子教案:组合式加速度传感器
- Brand KPIs for neobanking N26 in the United States-英文培训课件2025.4
- 汽车传感器与检测技术电子教案:开关式节气门位置传感器
- 单位管理量化管理制度
- 地面危险作业管理制度
- 介绍校园活动方案
- 仓库包装比赛活动方案
- 2024年贵州省中考化学试卷真题(含答案及解析)
- QCT 29017-2023汽车模制塑料零件未注公差尺寸的极限偏差
- 消化道穿孔患者的护理课件
- 2024春期国开电大本科《城市管理学》在线形考(形考任务1至4)试题及答案
- 司法鉴定的奥秘智慧树知到期末考试答案2024年
- 讲述“活着”的中国法制史智慧树知到期末考试答案2024年
- 广东开放大学《集装箱班轮运输业务与法律》终结性考试复习题库(附答案)
- 仓储部作业指导手册
- 健康生活方式指导员培训
- 2024届北京市海淀清华附中物理高二下期末达标检测模拟试题含解析
- 社会工作学习资料
评论
0/150
提交评论