网页设计中最常用的5种配图方式

时间:2020-08-29 10:02:52 来源:

【摘要】 考必过小编为大家整理了关于网页设计中最常用的5种配图方式的信息,希望可以帮助到大家,下面我们就一起来看下网页设计中最常用的5种配图方式的具体内容吧!

网页设计中最常用的5种配图方式

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

那么,一个网页呈现给用户的内容有哪些呢?

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

一个完整的网页,主要包含有以下内容:

今天,我们要谈论的主题是网页图片。

为什么网页设计中一定会用到图片?

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

图片之所以如此重要,还有更多原因:

网页中常用的图片类型有哪些?

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

徽标(logo)

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

在网页设计中,使用logo时有哪些小技巧?

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

照片(Photos)

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

网页设计中,照片的使用主要有以下几种类型:

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

舞蹈学院着陆页面,使用了舞者跳舞时的照片

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

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

新闻媒体网站,使用真实图片作为配图,让用户感觉更加可信

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

设计师如何获取优质照片元素?

推荐几个比较好的素材网站:

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

在网页设计中使用照片时,要注意以下问题:

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

城市指南着陆页,使用城市风景照片作为页面背景

插图 (Illustration)

插图是近几年流行的另一大网页设计趋势,设计师可以根据需求自定义制作插图,帮助用户快速感知网页信息。插图为视觉创意奠定了坚实的基础,不仅可以增加页面美感,更可以拓宽艺术家的创作视野。

如今,插图被广泛运用于:

我们来看一些例子。

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

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

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

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

吉祥物(Mascots)

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

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

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

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

3D渲染(3D renders)

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

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

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

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

总结

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

​​

原文地址:Mockplus

以上就是考必过小编为大家整理的关于网页设计中最常用的5种配图方式的相关信息,想了解更多考试最新资讯可以关注考必过。

上一篇      下一篇
平面设计相关推荐 更多>>
平面设计热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net