如何快速准确找到合适的网页背景大图?

 

  用图像创造场景感,增强用户的真实体验,近些年来,图片作为背景填充整个屏幕的设计越来越广泛,曾经只有时尚潮流网站或者摄影类站点才会特别依赖富有冲击力的图像,但是现在几乎任何类型的网站都有可能采用这种大图片作为背景,特别是企业品牌宣传、产品介绍等等。


  在设计网页过程中,需要用到大量的图片,而且找到的图片大多风格迥异、无品牌感,那么如何找到合适而又能正确地应用图片呢?

  如何正确应用图片

  整理了一些经验总结供大家参考:

  1 .提炼关键词寻找图片

  首先需要提炼产品特性关键词,通过关键词的形式寻找合适的图片。


  上图是google云盘官网banner背景为一张在飞机向外看的图片,不难发现用这种比拟手法来表现云盘的口号“随时随地使用”,在任何时候、任何地点都可以使用文件。换位思考,假如我们来设计google云盘官网,首先提炼出关键词:随时随地、自动同步、超大空间等等,用最能突出特点和有代表性的关键词来寻找合适的图片。


  上图是IBM旗下的MobileFirst产品,其主要为用户移动应用从创建到维护推出的一体化解决方案为广大用户提供更便利服务,那么根据项目提炼出关键词:手机、用户,该网站用了一张人拿着手机进行使用的图片,目的是为了突出项目的业务特点。


  上图分别为苹果官网、研究无线电技术企业——高通的网站中运用的图片同样也是通过产品特点提炼的关键词来完成图片的选用。

  2. 图片品牌化

  什么是图片品牌化?通过关键词寻找到的图片进行深度加工处理,使之在项目中运用到的图片都是一整套的、风格统一的,比如可以在图片的色调、色彩饱和度与特色风格上做调整等等,下面举几个案例。


  Google Drive官网摘取出来的图片,这些图片不难发现无论在色调、色彩饱和度上是一致的,特点是低饱和度、颜色深沉和图片噪点,颜色上新颖有特色、风格上具有明显的品牌统一性。


  上图为SAP公司官网的系列图片,作为全球最大的B2B企业为各行各业、不同规模的其他企业提供解决方案,正如它运用不同行业场景的图片一样:色彩丰富、但色调又不过于鲜艳,它们所有用到的图片都有这些特点。


  美国高通网站的品牌宣传图片让人印象深刻,品牌特点独树一炽,颜色上运用冷暖搭配,加以渐变效果巧妙地叠加于图片上,虽然颜色种类不多,但能在风格、品牌上具有强烈的统一性,让人对品牌辨识度有更加深刻的记忆性。

  项目实践

  去年做了几个腾讯云的项目改版,尝试新的风格探索,排版上采用了大图片为背景。设计过程中考虑到产品的长远发展,通过研究后发现图片统一风格在产品品牌推广上有着非常重要的作用,通过几经打磨快速整理了实现方案。腾讯云线上新版本的页面图片已经实现了统一风格。


  总结

  大图片作为背景的设计风格,这种设计方式虽然非常强有力地抓住用户的注意力,能准确应用图片而达到更大的体验效果是非常重要的,如果去掌握,了解项目背景,利用关键词的方式寻找更合适的图片,此外还需关注用户对产品的印象程度,那么图片的品牌化就显得格外重要,把产品所用的图片设计为一整套统一的风格出来的效果是不可估量的。

时间: 2024-11-02 22:40:32

如何快速准确找到合适的网页背景大图?的相关文章

网页设计中如何让CSS控制网页背景?

css|控制|设计|网页|网页背景|网页设计 在符合标准的网页设计中如何用CSS控制网页的背景呢?包括背景的颜色,背景的图片等一些问题,在本教程中一次给你讲清楚. ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow}H1{background-color:#000000} ·背景图片 backgr

用CSS来控制网页背景

css|控制|网页|网页背景 ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成.但是在这里,我所指的并非

自己的产品是目前市场上最好的,只要找到合适的推广方式

这些天接触了几个处于创业阶段的朋友,他们坚信:自己的产品是目前市场上最好的,只要找到合适的推广方式,便能一举成为受消费者追捧的热品.俏品. 愿望是美好的,现实是残忍的.Simon-Kutcher & Partners及独立专业定价协会发布的全球定价研究报告表明,72%的新产品都达不到预期的销售额. 一个新产品上市前,经营者必须能够清楚的回答两个问题:一是,我该如何吸引消费者完成首次购买:二是,我该如何吸引消费者长期的重复购买. 大部分新产品"叫好,不叫座"的原因,源自于经营者将

阿里人工智能实验室王刚:找到合适的应用场景是实现人工智能商业化的关键点

编者按:由中国人工智能学会.阿里巴巴以及蚂蚁金服联合主办,CSDN.中国科学院自动化研究所承办的第三届中国人工智能大会(CCAI 2017)将于7月22-23日正式召开,届时,阿里人工智能实验室杰出科学家王刚博士将分享人工智能应用的前沿趋势.在此之前,阿里云作为独家直播合作伙伴对其作了专访. 在刚刚过去的6月份,阿里人工智能实验室迎来了成立一周年的纪念日.这是一个比阿里iDST还神秘的部门,业界鲜有人知道它的存在,直到日前实验室首款终端产品天猫精灵X1的发布,这支神秘之师才正式成为镁光灯下的焦点

学习网页制作: 用CSS来控制网页背景

css|控制|网页|网页背景 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的.  想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会.不过,我想在网上"成家"的朋友一般分为在网吧里"开业"(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在自己家里用DW或FP之类的专业软件制作好上传的,所以呢,我打算分开两步介

CSS网页制作技巧之控制网页背景

css|技巧|控制|网页|网页背景 [简 介] 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的. 想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会.不过,我想在网上"成家"的朋友一般分为在网吧里"开业"(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在自己家里用DW或FP之类的专业软件制作好上传的,所以呢,

利用CSS准确控制页面和元素背景

css|控制|页面 在CSS出现以前,Web开发者只能对页面和背景元素进行少量的控制.当然,那时候他们能使用background属性将一个图像在整个页面上进行平铺,他们能用bgcolor属性来控制图像的背景颜色.但是他们的控制仅仅这些--例如,他们不能调节页面背景图像的位置,不能控制平铺(tiling),也不能生成页面水印. 现在有了CSS,这些都得到了改变,它可以通过一组background-*指令准确控制页面和元素背景.另外,它还提供了大量优化了的函数.使用CSS指令控制背景元素有很多优势:

入门:Dreamweaver8设计网页背景实例讲解

dreamweaver|dreamweaver8|设计|网页|网页背景 本教程由网页教学网原创.网页教学网-专业的网页教学站点,为您提供最新.最快.最实用的技术. 我们在网页制作过程中,尤其是初学的人们读喜欢给自己的网页制作一个背景,今天我给大家讲解一下在Dreamweaver8中设置网页背景的方法. 首先启动Dreamweaver软件,新建立一个HTMl文档. 然后我们执行"修改"=>"页面属性"(快捷键Ctrl+J)菜单命令,弹出"页面属性&qu

Dreamweaver8设计网页背景实例讲解

我们在网页制作过程中,尤其是初学的人们读喜欢给自己的网页制作一个背景,今天我给大家讲解一下在Dreamweaver8中设置网页背景的方法. 首先启动Dreamweaver软件,新建立一个HTMl文档. 然后我们执行"修改"=>"页面属性"(快捷键Ctrl+J)菜单命令,弹出"页面属性"对话框,在"外观"分类中会发现背景图像的下方多了一个"重复"选项,可以选择不重复(no-repeat).重复(repe