网页设计中图片的使用基本原则

   设计师都知道,行业的核心追求便是打造优秀的视觉效果。实际上,之所以能够成为设计师,是因为我们具备一种技艺,能够满足用户的视觉感受和视觉需求。

  我们可以听、读、想,我们可以想象出概念、物体以及人;但是这些感受都很抽象,只有实实在在地看到,印象才能定型。


  你遇到过从来没见过雪的人吗?可能你也从来没见过雪花飘洒在天空的景象。所以这些人无法理解,到底什么是雪?他们可能会知道原理是因为寒冷而凝结了空气中的水分,落下便形成了雪,可是他们无法真正明白,到底何为雪。我也遇到过一些第一次见到下雪的人;我见证了他们的异常惊奇的表情,他们对这种第一次看到的、从天空中飘落下来的白色物体着了迷。可能会有见过雪的人对未曾见过雪的人进行描述,可没有见过雪的人不相信前者的描述。他们会觉得前者在耍他们。所见即所得。

  视觉元素,诸如照片和视频,会让我们感到最亲切,因为它们和我们的生活最为接近,我们感同身受。当你为网站配图的时候,你添加的并不是一堆美丽的像素块。实际上,每一幅图片,都可以看做现实生活的缩影,而用户喜欢这种熟悉感,所以能够营造良好的用户体验。

  需要我为你们指点一下其中的技巧吗?开始吧

  巧妙用图也算是一种设计

  即便是内容主导的网站,也需要图像作为润色,每次设计这种网站,我都需要寻觅一些优秀的照片或者插画。这种图像搜寻对我来说至关重要,因为我不会画画,如果你会画画,或者你的团队中有有天赋的绘画能手,那你真的太幸运了!我都有点嫉妒你的好运。

  良好的照片运用能够成就优秀的设计。人都是视觉动物,在浏览网页时,对于图像有一种渴望,因此添加图片非常重要。而且,一定要是合适的、相关的图片。

  对比

  可用性至上!因此你的图像必须与整体相协调,并且与文字产生对比。干读文字非常让人厌烦。想象一下,一面小黑板,密密麻麻几千个字,白板黑字,读吧!这里有你要的全部。

  要想产生鲜明的上下对比,就要学会观察;图片比较亮,那么文字可以使用较深的颜色,反之亦然。如果想要使用白色字体和亮色背景,那么最好使用一些黑色元素作为过渡。比如,精美的投影技法就很不错。


  质量

  比方说你要为一家餐馆设计网页。在设计中想要用什么样的图?好吧,现在你决定开始抓起想起,去这家餐馆摄影了。你拍第一张照片的时候,站在餐馆门口,离桌子上的美食非常遥远,照片根本无法体现美食的细节;你拍第二张的时候,手突然抖了起来,导致拍摄的照片十分模糊。你觉得这种照片能放在网站上吗?

  如果你的客户不提供专业的摄影作品,那么赶快去劝劝他们,赶紧拍摄点高清无码大图吧。

  如果客户很顽固,说”就不!”,那赶紧换个思路,建议采用字体设计、布局新颖、极简主义等风格,打造处一种极简风,然后不带图像。宁缺毋滥。宁肯一张图也不配!也不能配上一堆20k的图!

  关联性

  一图胜千言,但是有时候文字为主,那么配上的图就一定要与文字相关。这是常识,保持元素一致性。还是上面那个例子,人家让你设计个餐馆网页,你给配上了股票走势图,可以随便感受一下甲方收到作品后的脸色。

  如果网页中的内容比较灵活,比如说卖保险的,那么配图可以符号化一点,但是还是要和产品/服务相关。而且符号象征意义一定要强,这样就很便于辨认。而且要注意的是,不同国家、不同文化的符号象征不同。

  大图受欢迎

  这条原则再明显不过了,图像越大,视觉冲击也越大。

  有人不相信,比如Econsultancy的人,他们就非要来个数据调查,他们做了三份研究,有兴趣的可以看一下 here.


  图像也是内容的一种

  图像不但利于设计,还是非常棒的内容,当图像和文字、音频相结合时,能够产生下列作用:

  攫取注意力

  当文章和页面中有吸引眼球的图像时,爱屋及乌,用户会对内容高度敏感。当用户在网上面临大段大段的文本时,人类的大脑便倾向于”略过这片内容”吧,很少有人会保持注意力,继续阅读细节。

  图像能够打破视觉的单调性,帮助用户聚集注意于文章、链接、故事。简而言之,图像让用户集中注意力。


  更好的理解上下文

  好的图像,相当于一种”过渡句”,能够很好的引导下文。

  而且选图一定要谨慎,图像能够激发用户的一种情绪,一定要确保这种情绪和内容属于同一个”点”,要做到到位。

  其他注意事项

  许可问题

  如果图像不属于你也不属于用户,那么一定要获得许可。最好是书面的许可,而且一定要注明摄像者。

  因此在设计前,一定要预先要到许可。不过还有一种办法,那就是图库搜刮一些素材

  图库:免费好还是付费的好?

  无论是收费还是免费,图库的好处在于,你不用关心这图是谁的,不用关心许可问题。不过在为网页配图时,一般都会使用一些付费的图片。

  免费图库的好处:

  不花钱

  可选择的非常多

  免费图库的弊端:

  垃圾图片也多

  某些专门的图片不好找

  有些图片中有水印和链接

  推荐几个吧: stock.xchng, StockVault,DeviantArt.

  付费图库的优点:

  许可问题白纸黑字,没有版权纠纷

  分门别类,种类齐全。

  付费图库的弊端:

  没钱还是别想了。而且容易上瘾,买完一堆,发现超支了

  推荐几个: Shutterstock, iStockphoto , Dreamstime.

  人物摄影

  好处是有一种真实感。

  如果在产品或服务中采用真人图片,展示他们工作时的场景。会让人有一种真实可信感。

  可如果你选的模特作态扭捏,露出假惺惺的白牙,会让用户感到这是个牙医广告,太假了。因此,一定要贴近产品。

  结论:

  选图要谨慎!

  图片要合理!

  一图胜千言!

时间: 2024-11-12 01:02:14

网页设计中图片的使用基本原则的相关文章

网页设计中图片格式的选择技巧

  网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式.并交由下一位人员网页排版的重要步骤.选择适合的图片格式不但可以将让设计得到合理的显示效果.甚至还可以有效的控制图档的档案大小,节省下载时间.有效的减少服务器的负担. 以设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用-」的功能.与默认的存盘模式不同,在这个模式中,软件提供了仿真图文件输出的质量调整.档案大小控制等针对网页图文件需求的选项: 相信许多人都知道网页设计中最常

网页设计中图片展现形式的思考

图片,是构成网页的基本元素之一.图片不仅能够增加网页的吸引力,传达给用户更加丰富的信息,同时也大大地提升了用户在浏览网页的体验.图片的展示形式丰富多样,不同形式的图片展现也让浏览网页的乐趣变得更加多样化. 跟随我们分别来体验一下目前存在的各种图片展现形式,让我们的眼睛去旅行吧. 一.多图展现 图片限制最大高度或宽度并进行矩阵平铺展现,这是最常见的多张图片展现形式.不同的边距与距离可产生不同的风格,用户一扫而过的快速浏览可以在短时间获得更多的信息.同时,鼠标悬浮时显示更多信息或功能按钮,既避免过多

大图片背景网页设计中文字设计重要性

文章描述:浅析文字在国际范网页中的重要性. 网页设计中最重要的元素是什么?你不知道?思考一下:你是如何将信息传递给用户的?你是如何展示产品的?现在你明白了吧,答案很简单,用文字将信息传递给用户,用图像展示产品.两者结合之后,表达能力呈几何级上升. 图像胜过文字 大多数人认为图像比文字易于理解,这已经不是什么秘密了.通过观看的形式,图像更容易表达情绪,也更容易让用户铭记.用户很可能因为页面中一幅动人的图像而记住你的网站. 在网上,你可能看过很多信息图.信息图的绘制规则很简单--人们更喜欢读图.很多

CSS网页设计中使用背景图片须注意路径问题

css|背景图片|设计|网页|网页设计|问题 网页设计技巧文章,CSS网页设计中使用背景图片须注意路径问题. 在传统的表格布局中,背景图片是直接应用于表格的,一般情况下CSS的background-image属性使用非常少,或者说根本就不使用.应用CSS网页布局,实现内容与表现.行为相分离,作为页面框架.装饰等图片我们就直接剥离到CSS文件中,通过CSS进行定义. 我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中.我们会发现有时候我们的图片无法显示了.此时,请查看

网页设计中保持清晰简洁的图片设计技巧

平面设计,网页设计中使用精美图片插图是经常有的事.我们通过观赏许多大师的设计作品会发现,他们使用图片的时候都能给人一种十分合理的感觉,不仅能突出重点,同时也给人比较好的视觉享受. 你如何展示一张非常不错的照片?非常简单,保持清晰,所有无关的元素都不要出现在页面上. Ambient摄影俱乐部出版了它们自己的月刊杂志来提升俱乐部的影响力.因此,他们希望杂志的视觉效果能够显得更加专业,以迎合范围更广的读者.Ambient是一本内部自己使用大幅激光打印机打印的杂志,这也意味着打印的质量相当高,而且能够使

网页设计中优化图片的6大技巧

  例如,在网页设计中更常使用基于像素或栅格的文件格式,诸如JPG.GIF或PNG.相反,在平面设计领域像logo这样的图形可能会用到不同尺寸,因此使用最多的格式则是EPS和AI这样的矢量格式.然而,用于网页的矢量格式,如SVG或HTML5 Canvas则不能广泛应用,也不会被所有浏览器所支持. 另外,用于web端的图形有基于它们自身的相关处理方式.其中一条便是你要时刻注意文件的大小,因为你需要使你的网页加载越快越好.作为一名网页设计师,你应当尽量减少HTTP对图像的请求次数--无论通过减少图片

在网页设计中对称手法使用技巧

文章描述:在网页设计中,对称/不对称的有效运用可以达到非常与众不同的效果. 在设计中,对称创造了平衡,平衡了创造和谐.秩序和审美.自然界中对称无处不在,也许正是这种无处不在的状态让我们发现对称的美.形态学的基本原则之一就是对称,它是一套人类形为理论,形态学认为人类对看到和遇到的事物本能的产生出秩序和完整性. However, symmetry can get boring. Asymmetry is a break in symmetry, which when used effectively

网页设计中的负空间

  前言 由于屏幕是有限的,因此网页设计也是有限的.可以这么说,在屏幕这个小小的盒子中,每个像素都是一块不动产. 就算是菜鸟,也懂得一个页面不能加载过多的内容,但涉及到究竟应该规划多少留白,包括经验老道的设计师或许也很茫然. 留白,另一说为"负空间",这两个词常常互换使用.它们共同所指的都是屏幕中出现的元素之间的一种关系.所谓留白不一定是要白色,或黑色.就算是图案.色彩或纹理背景都可以被称为留白.负空间是在内容外创造一个空白的环境,好让观者将注意力更加集中于内容. 这篇文章中,我们将讨

网页设计中的图标的使用技巧与资源合集

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主.不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力. 在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使