八个小诀窍帮你玩转网站背景图设计

   几乎所有设计师都知道网页设计中用图的重要性,但在实际项目中,如何做好图片设计?本文将与大家分享如何通过“把握图片的意图”做好设计。

  给设计师的建议:做图前先别急着找素材!

  如果能做好两个准备工作,对设计师们会有帮助:

  1、 梳理网站中所需图片类型

  没经过思考就直接开工是设计效率低下的罪魁祸首。

  在图片设计前,设计师最好能参考目前已有的网页粗略布局和栏目等,重新梳理列出网站中所需的图片类型。

  比如,按照栏目和模块对所需的图片分类:Banner、业务介绍、产品介绍/展示、公司介绍、团队介绍、新闻/资讯、客户案例等。


  当然,设计师也可以根据项目实际情况,或最适合自己的方法采用更好的图片分类。

  梳理图片类型是帮助设计师重新梳理网站内容,让后面工作更有计划和针对性。

  2、 明确图片的意图

  在一个网站中,浏览网页时所看到的图片不应仅做到吸引用户的视线,而更能让用户通过视觉影像,准确感受到网站传递的信息。

  实际上,网页上的图片不只是美丽的像素块,所有的图片都应该是有意图的。

  了解图片意图,对设计师来说就是明确图片的设计目标,这是非常重要的一步工作。

  我们总结了几个常见的图片意图:展现产品特点(优势);与文字相关联,保持元素一致性;帮助人理解某些东西;教导人使用(某产品);以人物视线引导用户;营造氛围;渲染情绪;塑造品牌。

  以下是实际案例分享:

  展现产品特点:


  上面案例是fiftythree网站的Banner图。

  在一个网站中,首屏对用户的第一印象几乎起决定作用,而Banner图在首屏中所在的位置,决定了其重要性。尤其对于营销型网站来说,Banner图是一个最佳产品展示的位置。

  案例中的图片展示了“Pencil”使用在iPad(Apple系列产品)上的画面,即产品的使用场景,也是产品的一个特点。

  该案例的图片意图非常明确,和文字搭配在一起,既有宣传、推广产品的作用,又是一个引导用户点击参与的入口。

  与文字相关联,保持元素一致性:


  上图案例是aiia产品博客的Banner,此处的图片与文字高度相关,既保持了元素的一致性,又通过色调上明与暗的处理,呈现了一种视觉美。

  用户在打开博客后,会同时关注到文字和背景的产品图片,在脑海中留下具象化的印象。

  其实对设计师来说,图文相关是设计中的一个基本原则。但大部分网站忽略了这一点,甚至导致信息不能正确传递、销售机会减少等问题。

  有一个来自Web易用性大师Jakob Nielsen的研究结论:单纯的装饰性图片会潜意识地被我们大脑忽略。

  这项研究表明图文相关性的重要作用,成为设计指导原则。

  “图片与文字相关联”更应该被设计师用于项目实践中。

  帮助人理解


  Zuli网站中为用户展示的是一款新颖的智能家居产品,其中首页Banner以产品使用场景为背景。

  这款产品是怎么用的?上图帮助用户快速理解网站传达的内容。

  此处图片经过专业拍摄和处理,清晰、干净,并且将原本需要一大段文字描述的信息,成功以“看图说话”的方式直接向用户展示,帮助用户更好地理解产品。

  教导人使用


  在Zuli网站的“How it Works”页面中,网页以图文结合方式展示产品的多个使用状态或场景。

  该网页的所有图片风格一致,图片设计都以实体图像为主,通过扁平化的图标建立了产品与手机App之间的虚拟联系,简单易懂。

  此处图片的意图是教导用户使用产品。

  当用户浏览网页时,图片可以吸引人的注意力,并让用户对图片内容高度敏感,进而主动浏览文字深入了解产品如何使用,激发更大兴趣。

  一般情况下,设计目标为“教导人使用”的图片,更适用于新产品或使用复杂的产品,这种方式可以帮助用户快速掌握使用技巧,降低产品使用成本,获得用户青睐。

  以人物视线引导用户


  Ines Maria Gamler网站中展示的女性正侧着脸,双眼注视网站中间的文字。打开网站时,大多数人会首先关注人物的脸部,并进一步受到人物视线的引导。

  随着人物的视线,用户会进一步将注意力放在网页中间的文字和图形上。

  这种设计方式有两个关键:一般先通过美丽的模特(或其他人物形象)吸引用户关注;用户会继续跟着模特视线转移注意点,关注产品、文案或Logo,达到图片设计的目标。

  在著名的You Look Where They Look研究里,通过对婴儿尿布零售商网站的眼动研究,得出了结论:广告中,用户眼球可以被模特(或人物形象)的视线所引导。

  通过人物视线的巧妙引导,可以让网站重要信息得到展示,并改善用户视线只关注模特的问题。

  营造氛围


  打开23snaps网站后,左侧图片瞬间吸引人的注意力,给人一种亲切感。

  对用户来说,生活化的图片浓缩了人们日常生活的一个场景,有熟悉的感觉。图片从整体营造了温馨的氛围,并且人物愉悦的表情能影响人的心情,让用户感受到一种欢乐、温馨的家庭气氛。

  此处同样采用了人物视线引导用户,跟着图片中儿童的视线,用户会进一步关注到图中文案和注册/登录区域。

  该案例还从整体构图展现了App使用场景,向用户传达了“Share Family Photos”的定位。

  渲染情绪


  UDO网站采用的图片展现了大量美丽景色,布局和色彩的整体搭配,从视觉上带给用户一种清新舒适的感觉。

  审美是人人具备的天性,一个网站是否好看,用户在第一眼就会有直观的判断。受到大脑中的“原始人”影响,图片美观程度能真正影响到用户对网站第一印象。

  该案例中的图片给在视觉设计上给用户留下一个好印象,激发用户的想象,并释放出优美、清新、宁静等感受,让用户感到放松,并乐意继续浏览网站。

  塑造品牌


  Katia Bongiorno是一个品牌网站,该案例的产品/服务通过一系列风格统一的高清大图全屏展示,在用户群体中塑造了高端、精美的品牌形象。

  对用户来说,高质量的大图往往更受欢迎,风格统一的图片既有视觉震撼力,又容易给人留下较深刻的印象,长久吸引用户注意力。

  成功品牌可以在很久之后,通过视觉上的独特,唤起人潜意识里的印象,让用户联想到该品牌。

  此处的高清大图以及图片风格统一是塑造品牌的关键因素,无形中加深了人的印象,留下长远影响。

  以上几个案例是最常见的图片意图,同时也是图片设计中需要实现的目标。

  设计师需要做的,就是加深对项目需求和客户公司的业务了解,以便更明确网站中各栏目图片的设计目标。

  准备工作完成后,再综合考虑需求分析阶段的成果(设计构思、网页内容结构、网站风格等),设计师们就可以开始准备拍摄或搜集图片素材了。

时间: 2024-08-04 02:40:10

八个小诀窍帮你玩转网站背景图设计的相关文章

干货!小技巧帮你完成创意十足的网页设计

干货!小技巧帮你完成创意十足的网页设计 时间:2014-10-09 14:42 来源:优设网 作者:小峰向前跑 小白叨一叨:依靠独特的设计手法,搭配上创意优秀的图片,可以让网页突破空间界限,给人留下深刻的印象.而如果有一些小技巧的话,则会有事半功倍的效果.(注:图片下为来源网站名) 作为一名设计师,每年都会沉浸在一些新的设计趋势中兴奋不已.接下来,我们将探寻2013年的最新设计趋势,这绝对是意义非凡的事情.Web设计师必须洞悉所有相关领域的新趋势,紧跟时尚潮流. 这些新趋势让设计变得妙趣横生.

10大创意教你玩转网站背景设计

  1. 素描设计 这种设计在几年前就变得比较流行,而且一直持续到现在.这灵感来源于在笔记本上的涂鸦乱画,就像你十几岁时在英文课上所作的那样.每一部分都是些粗糙的素描表现,页面看似是非常随意的创意集合,而它们都以不同的旋转方式散布在页面各处.NotchStudio就是很好地应用了这种创意,并且以非常柔缓的方式表现出来. 即使你本人不善长绘画,这种创意也是相当容易实现的,是因为这些涂鸦通常都是些非常基本的设计.如果拥有一部Wacom或iPad平板电脑,你就可以相当容易地描绘出你自己的图片或者某种意

小技巧帮你完成创意十足的网页设计

  作为一名设计师,每年都会沉浸在一些新的设计趋势中兴奋不已.接下来,我们将探寻2013年的最新设计趋势,这绝对是意义非凡的事情.Web设计师必须洞悉所有相关领域的新趋势,紧跟时尚潮流. 这些新趋势让设计变得妙趣横生.但是很多专家还会倡导那些并非最时髦.最震撼世界的设计.当然,响应式设计不仅去年是热点,今年依然还会被人们重视.同样,栅格化设计作为最基本的设计,也会被继续延续下去. 这次,我想探索一下那些逐渐发展起来的设计潮流.也许过去我们只是偶尔尝试一下这些设计风格,但是今年我们会真正关注它们.

做SEO一定要说的那件事:小指令帮大忙

在上篇文章做SEO一定要说的那件事:小指令帮大忙(上)中,我们通过从双引号显示完整信息.减号结果更精准.星号适用Google.inurl包含网址.inanchor主要检查锚文本五个方面来和大家分享了搜索引擎的高级指令,今天接着上篇文章继续和大家分享. 这里边有些指令我们可以用过,但有些大家不经常用,其实每个指令如果大家都掌握的话,对于搜索效率的提高很有好处.对于seo人员来说也能更加清晰的获得竞争对手的情况,这些高级指令的使用不仅仅节省时间,更大的作用在于搜索的精准性.好了,开始今天的分享,我会

大众点评和《小时代》一起玩,玩的是用户!

中介交易 SEO诊断 淘宝客 云主机 技术大厅 [ 导读 ] 大众点评和<小时代3>玩,尝试了微博红包,大众点评买单;得到小时代3近一半的年轻新用户;营销是找到能量包转化为自己的热度;找到社交营销玩法,但消费者端的营销并没有做出代表性的动作;激发了用户更多的UGC(用户产生内容). 在7月17日的<小时代3>上映日,除了#我请你看小时代3#成为了微博热门话题排行榜的榜首,#我请你去看小时代#这个子话题也荣登排行榜12名. 这其实是大众点评在操作的一个话题. 造就这个话题的是在微博上

一个修改Oracle用户密码的小诀窍

oracle 一个修改Oracle用户密码的小诀窍 数据库版本:9.2.0.5   有时候我们可能不知道一个用户的密码,但是又需要以这个用户做一些操作,又不能去修改掉这个用户的密码,这个时候,就可以利用一些小窍门,来完成操作. 具体操作过程如下: SQL*Plus: Release 9.2.0.5.0 - Production on 星期日 11月 21 13:32:34 2004 Copyright (c) 1982, 2002, Oracle Corporation.  All rights

做SEO一定要说的那件事:小指令帮大忙(下)

        在上篇文章做SEO一定要说的那件事:小指令帮大忙,我们通过intitle查看标题关键词.allintitle词串.allinurl组结果.filetype特定文件.site查询收录五个方面来和大家分享了搜索引擎的高级指令,文章发表后,在A5论坛和其它很多网站上都有转载,其实这些指令有时只是几个简单的字母,但却是对我们非常实用.今天接着上篇文章继续把剩下的给大家分享完.         第十一.link查询链接:link是SEO中比较常用的一个高级指令,主要搜索某个网站url的内部

新站4天完美收录的小诀窍 有图有真相

本来也是自己发现并总结的小诀窍,也想学着广大高手达人,私藏起来,至于为什么?免得广泛流通,效果实效什么的,大家应该懂的,但想想还是算了,为了发扬A5的分享精神,也为了反馈社会,感谢党的栽培,扯犊子了,最主要的还是 帮助更多的菜鸟,新手朋友们. 百度搜索引擎升级改版之后,新站收录也变的越来越慢了,如何让新站被百度快速收录,网上杂七杂八的也有很多,在此,小周只分享自己的切身经验,百分百正确,不敢轻言,但肯定是有效果的,希望对广大新手朋友们以个帮助和参考借鉴. 首先给大家看看我的新站,怎么练腹肌  

禁止U盘复制的小诀窍

  禁止U盘复制的小诀窍: 1.在开始菜单打开"运行"输入"regedit"打开注册表编辑器.展开[HKEY_LOCAL_MACHINESYSTEMCurrentControLSetControl],在该分支下新建一个名为"StorageDevicePolicies"的子项,在该子项中右侧的新建名为"WriteProtect"的DWORD值,并将此值设置为0. 2.右键"StorageDevicePolicies&q