网页设计如何配图？

　　地址：摹客（公众号）

　　作者：摹客

　　Lee Odden曾说过“Content isn't King, it's the Kingdom”，信息内容为王已然是毋庸置疑的真理。在页面结构网页设计中也一样，信息内容本身一定是占据最多版面的部分，所以它的价值质量很大程度上决定网页页面最终的结果效果和成败。

　　那么，一个网页页面呈现给用户使用者的信息内容有哪些呢？

　　一般来讲，只要是用户使用者感官可辨的部分都可以看做网页页面信息内容。用户使用者可以通过阅读、观看、聆听以及交互等方式，和网页页面产生互动，因此，网页页面信息内容也成为影响用户体验用户评价的一个重要部分。

　　一个完整的网页页面，主要包含有以下信息内容：

文案 - 网页页面上的文本信息信息，用户使用者通过阅读获得信息； image图片 - 网页页面上的图像信息，用户使用者通过视觉进行查看或查看浏览； 多媒体视频 - 可播放的多媒体视频信息内容，具备声音和画面； 动画 - 可以和用户使用者互动，提高提升用户体验用户评价； 声音 - 例如背景音乐，当你打开一个网页页面，会自动播放。

　　今天，我们要谈论的主旨主题是网页页面image图片。

　　为什么页面结构网页设计中一定会用到image图片？

　　image图片的作用绝不仅仅在于提高提升界面美观度，在用户体验用户评价设计规划中，image图片对提高提升设计规划可用性也起着重要作用。人都是视觉动物，天生对图像有偏爱，对图像的感知相应速度也远远超过纯文本文字，在Wayback Machine的研究中，人类感知图像的相应速度比感知文本信息要快60,000倍。因此，当我们看到一个网页页面时，图像也就成了我们最先感知的元素。

　　image图片之所以如此重要，还有更多原因：

图像本身还具备丰富的信息传达力和情感吸引力，心理学家通过研究发现，人类只需要大约1/10秒的时间就能大致了解视觉场景或视觉元素； 人类大脑喜欢将重要信息记忆为视觉图像，即使这些信息是通过文本信息感知获得的； 图像和网站页面背景以及周围元素更易结合，而文本信息在很大程度上取决于可读性； 图像更容易在人脑中形成长期的记忆点，用户使用者不需要记忆大量数值数据，就可以通过图像和界面进行交互； image图片对网站站点的搜索引擎优化SEO优化排名排序也会产生影响。

　　网页页面中常用的image图片分类类型有哪些？

　　现今，页面结构网页设计中最常见的image图片一共有5种分类类型，分别是logo、照片、插图、卡通人物（吉祥物）以及3D渲染image图片，每种分类类型都有自己的特色，我们将逐一分析。

　　徽标（logo）

　　Logo代表着公司品牌，是一种象征性的视觉元素，它向用户使用者传达公司企业理念、公司品牌、服务等信息。Logo在如今的页面结构网页设计中几乎是不可或缺的，甚至一些个人博客和作品集网站站点也会使用logo。

　　在页面结构网页设计中，使用logo时有哪些小技巧？

在顶部导航栏处放置logo： 通常，顶部导航栏是用户使用者最先看到的区域。 不要改变logo的交互逻辑： 当用户使用者单击logo时，一般都是跳转回首页； 如果是单页网站站点，则回到网站页面顶部。 提升增加hover交互结果效果： 当用户使用者鼠标悬停在logo上时，提升增加hover结果效果，不仅可以提示用户使用者可访问点击，还可以提高提升用户体验用户评价。

　　这是一个虚拟货币服务网站站点的着陆页面设计及制作，在logo元素上增加添加了强烈的交互结果效果，可以带来丰富的视觉感和趣味性。

　　照片（Photos）

　　在页面结构网页设计中，照片是非常重要的视觉元素。照片不仅可以在很大程度上提高提升界面的美观度，也是页面结构网页设计中运用场景最多的元素之一。

　　页面结构网页设计中，照片的使用主要有以下几种分类类型：

网页页面主旨主题image图片 展现展示网站页面各个版块 展现展示实体商品（例如电子商务电商网站） 博客信息文章的封面图 用作横幅的heroimage图片

　　照片的最大优点是可以确立建立联系，帮助用户使用者将其在网页页面上看到的信息内容与现实世界联系起来。其实早在互联网出现很久之前，照片就已经成为人类现实生活的一部分，因此，用户使用者对于照片的感知是一种更原生、更亲密、更清晰的感知。

　　↑ 舞蹈学院着陆网站页面，使用了舞者跳舞时的照片

　　↑ 博物馆网站站点的登陆网站页面，陈列了大量的艺术品照片

　　此外，摄影也是一种艺术，在网页页面中使用摄影照片，可以让网页页面看上去更真实、更具美感，从而达到一种艺术和现实的平衡。当然，使用优质照片做设计规划，也有助于设计规划师形成自己的样式风格。

　　↑ 新闻资讯媒体网站站点，使用真实image图片作为配图，让用户使用者感觉更加可信

　　↑ 工艺品网站站点，使用照片展现展示商品原貌，所谓“所见即所得”

　　设计规划师如何获得优质照片元素？

自己拍摄。 这也许会比较耗时，但绝对可以得到独一无二的视觉元素； 素材网站站点。 可以从素材网站站点付费购买或使用他们的免费素材。 推荐几个比较好的素材网站站点：

　　Unsplash：这是一个摄影师社区，来自世界各地的摄影师都在这里分享他们的照片，照片的价值质量都比较高。

　　Pexels：这里有主旨主题丰富的免费照片素材库。

　　Moose Photos：这里有很多专业设计制作的照片。

　　Pixabay：包含大量免费素材，不仅有照片，还有插图和矢量图形。

　　↑ Gourmet是一家销售草药、油和香料的电子商务商店，用照片展现展示商品。

　　在页面结构网页设计中使用照片时，要注意以下问题：

　　使用高分辨率的照片；

一定要进行优化提升，太大的图像会使网站页面超载，加载访问速度对用户体验用户评价非常重要； 注意留白，保持负虚拟空间的平衡； 自适应响应式设计规划，测试照片在不同屏幕和设备上是不是是否可以完整展现展示； 不要忽略可用性，照片不仅仅是为了让网站页面好看，要考虑其是不是是否能传递信息并支持其他部署布局样式。

　　使用整幅照片作为首屏大背景是近年流行的设计规划手法，这种方式方法可以让网页页面在视觉和情感上都更具吸引力，并支持网站页面所有部署布局元素的完整性。此外，相较于单色背景，它还可以提高提升元素间的对比度和易读性。

　　↑ 城市指南着陆页，使用城市风景照片作为网站页面背景

　　插图 （Illustration）

　　插图是近几年流行的另一大页面结构网页设计趋势，设计规划师可以根据需求自定义设计制作插图，帮助用户使用者快速感知网页页面信息。插图为视觉创意奠定了坚实的基础，不仅可以提升增加网站页面美感，更可以拓宽艺术家的创作视野。如今，插图被广泛运用于：

Heroimage图片 主旨主题image图片 充当用户使用者交流的形象角色 博客信息文章配图 用户使用者奖励和其他游戏化的图像 系统消息 贴纸（在聊天类应用程序中尤为流行） 公司品牌故事 信息图表 推广营销信息内容和广告横幅 信息内容的视觉标记

　　我们来看一些例子。

　　这是一个关于宣传设计规划会议的着陆页，使用了插图和设计规划师照片相结合的方式展现展示图像信息，创意十足。

　　这是一个设计规划师的作品集网站站点，该设计规划师专门研究名人，娱乐，音乐和电影设计制作等主旨主题同类相关的项目。暗色背景与定制的hero插图相结合，具有强烈的视觉冲击力，生动活泼，并与音乐会舞台的气氛确立建立了联系。

　　这是一家数字代理商的登录网站页面，该机构想要传达拼搏奋进的公司企业理念，使用了灌篮主旨主题的插图，将球员在球场上努力奋斗的姿态和其不断实现业务目标的愿景确立建立了联系。

　　这是一家为用户使用者供应提供推广营销服务的公司企业，该落地页使用插图来创造用户使用者场景，通过给用户使用者讲故事的方式传达出他们的服务和优势。

　　吉祥物（Mascots）

　　吉祥物是一个人格化的形象，它可以代表公司品牌、公司企业、某种服务等，甚至可以成为公众人物的象征。

　　在网页页面用户使用者界面中，吉祥物可以有效充当沟通和互动的视觉元素。例如，可以通过更改其外观（例如心情、衣服、活动等），快速向用户使用者传递清晰的消息。吉祥物以一个“人”的形象，可以直接通过气泡框与用户使用者交流；也可以供应提供各种面部表情作为视觉提示，以不同的图像变化反映用户使用者心情；还可以在教程中引导用户使用者等等。总之，通过吉祥物这一拟人化的形象，用户使用者和系统的交互会更像人与人之间的交流，从而很好地提高提升了用户体验用户评价。

　　这是一个儿童书籍的电子商务电商网站，该落地网站页面使用了圣诞老公公阅读这一形象，鼓励小朋友和圣诞爷爷一起阅读。

　　这是一个家政服务公司企业网站页面，使用了一个拟物化的保姆形象。

　　3D渲染（3D renders）

　　3D渲染也是近年比较流行的设计规划趋势。通过3D软件建模从而渲染出超高品质的2D图像，甚至可以设计制作出电影级的动画影像，给与用户使用者惊艳的视觉感受，对网页页面的转化率具有非常强烈的推动力。

　　这是一家建筑工作室的网站站点，该公司企业利用太阳能来设计规划和建造可持续发展的房屋。3D渲染的模型让用户使用者能看到房屋的真实场景，还可以切换白天和黑夜模式查看。

　　这是一家设计规划工作室的网站站点，该机构专门从事可视化室外设计规划和室内设计规划。该网站站点的网站页面渲染了高价值质量3D图形，几乎占据了所有背景区域，非常巧妙地突出了他们的服务。

　　这是一家购票网站站点，使用3D图形作为主旨主题图像，该图像占据了网站页面的左侧部分，体现了旅游的主旨主题，定制的元素巧妙融入了公司品牌的黄色，大大提高提升整个网站页面的设计规划感和公司品牌感。

　　总结

　　虽然设计规划不仅仅是做商品产品视觉表象的表达，但人都是视觉动物，这一点无法否认，所以好的设计规划更应该能从表象就深深吸引住用户使用者，因为只有好看的界面，才有更大的机会吸引用户使用者去深入了解更多。图像是提高提升界面价值质量的重要元素，希望以上的信息内容，可以帮助你设计规划出更加出色的网页页面。

转载自：网页设计如何配图？

网站建设服务

悉知科技是一个有着12年经验的网站建设开发公司，品牌建站/外贸网站建设/谷歌营销推广/品牌营销策划，这些我们都能帮您搞定！

在线咨询

网站建设制作方案是什么 ? 报价多少钱 ?

获取建站报价