理论教育 图像设计与应用:界面视觉传达设计

图像设计与应用:界面视觉传达设计

时间:2023-07-22 理论教育 版权反馈
【摘要】:图3-501.图像的位置图像放置的位置直接关系到版面中的布局。如图3-51所示为关于一个企业介绍的图册,翻看时,读者的视线很快会被书中采用的大幅图片无缝衔接的排版﹑出血印刷方式以及页面不经裁切分割的特殊装订版面而吸引。图3-51连接画面四个角的斜线成为对角线,对角线的交叉点为画面的中心点。3张以上的图像能在版面中营造出热闹的氛围。

图像设计与应用:界面视觉传达设计

3.4.1 图像的特征性

与上一节图形设计的内容相似也是相对应的便是图像的设计与应用。

图像是由扫描仪摄像机等输入设备捕捉实际的画面产生的数字图像,是由像素点阵构成的位图

图像用数字任意描述像素点﹑强度和颜色。描述信息文件存储量较大,所描述对象在缩放过程中会损失细节或产生锯齿。在显示方面,它是将对象以一定的分辨率分辨以后将每个点的色彩信息以数字化方式呈现,可直接快速在屏幕上显示。分辨率和灰度是影响显示的主要参数。图像适用于表现含有大量细节(如明暗变化﹑场景复杂﹑轮廓色彩丰富)的对象,如照片﹑绘图等,通过图像软件可进行复杂图像的处理以得到更清晰的图像或产生特殊效果。

通常我们可以说图像就是指位图,而说图形便是指矢量图

3.4.2 图像的版式构成

图像在版面构成中占有很重要的比例,据统计,图像的视觉冲击力比文字要强85%,这说明图像在视觉传达上比文字更易于理解,使得听起来平淡乏味的事物变成强有力的诉求性画面,充满创造性和趣味感,从而使版面产生更为真实﹑立体的效果。但这并非是说文字或语言的表现力减弱了,图像在版面上能够帮助文字﹑帮助人们理解。图片在版面构成要素中,形成了独特的风格以及吸引视觉的重要素材

作为图片的摄影作品给人的感觉真实可信﹑鲜明动人,具有强烈的感染力和说服力,因此能打动人心,引起共鸣。另外,一些具有超现实风格的绘画作品,其逼真的画面效果也同样有着感人的魅力。因此,被广泛应用于现代广告﹑图书杂志﹑网页界面等版面设计中。

如图3-50所示为《娱乐天使》的版面设计,读者可以从任何一个页面上获得想要的信息,而无须从头到尾地把整本书阅读完,照片戏剧性地主导着整个页面,每一幅照片都没细致地设计到版面中,以求创造出最大的视觉冲击力。

图3-50

1.图像的位置

图像放置的位置直接关系到版面中的布局。在版面结构布局上,四角与对角线具有潜在的重要性。四角是表示版心边界的四个位置点,无形中蕴涵着一种稳定的力量。因此,在画面上的四角配置一些图文,会使画面很自然地产生安全稳定感,使原来不太均衡的构图,转变成具有稳定性的画面。编排中有效地控制这些点,能使版面变得清晰﹑简洁而富有条理性。

如图3-51所示为关于一个企业介绍的图册,翻看时,读者的视线很快会被书中采用的大幅图片无缝衔接的排版﹑出血印刷方式以及页面不经裁切分割的特殊装订版面而吸引。满版图片的编排形式使读者顺着沿图片编排的反白文字深入到企业的文化生活中去。

图3-51

连接画面四个角的斜线成为对角线,对角线的交叉点为画面的中心点。如果把内容配置在对角线上,并可以支配画面产生安定感。构图时,通过四角和对角线的结构可以求得版面多样变化的结构形式,如图3-52所示。

图3-52

用好版面的四边,对创造出一个和谐的内部结构是至关重要的。如果没有任何构成要素靠近顶端边线或底端边线,空白空间就会挤压构成要素,整个结构就显得漂浮无根。当构成要素靠近版面的顶端边线和底端边线,空白空间就会得到最好的利用。空白空间变大,这个构成会因这种视觉扩展而显得更为大气。

版面中的构成要素会形成一些轴列。当一根轴出现在结构内部时,就形成了鲜明的视觉关系,结构就有了视觉秩序感。左边线和右边线的轴虽然也能给结构带来秩序感,但在视觉上显得很弱。单独一个构成要素不能创造出一根轴,两个或者更多的要素才能建立起轴来。一般而言,成现行排列的要素越多,轴就越显得牢固。

中轴四点是指经过版心的垂直的线和水平线的端点。中轴四点可以产生横﹑竖居中的版面结构。若将四角与中轴四点结构结合应用,版面结构会更为丰富完美。

由此可见,四角与四角线以及中轴四点所形成的版面结构,其原理虽简单,变化却很丰富。在版面编排过程中紧紧抓住这八个点,布局将会变得更加容易。在分析版面结构时,可以运用四角和中轴四点以及对角线的关系,这样版式设计的构成关系﹑视觉流程关系﹑形式法则等内容便一目了然,如图3-53所示。

图3-53所示为一本介绍中国古钱币的书籍排版,画面充分利用了四角﹑中心点﹑中轴四点的结构关系,形成的画面给人以安全﹑稳定﹑古朴﹑踏实之感。

图3-53

2.图像的大小

版面中,图像所占的面积大小不仅能够影响版面的视觉效果,而且直接影响画面情感的传达。通常我们依照版面的重要性和吸引性来安排图像的大小,在版面中形成主次分明的格局,这是版面构成的基本原则。

图像面积越大,其引人注目的程度越高,感染力越强,能带给人们视觉上的愉悦感。大图像一般用来表现事物的细节,如人物的表情﹑手势,某个事物的局部特写等,能在瞬间传达出内涵,并渲染一种具有亲和力﹑直接的诉求方式。

图3-54所示是一个网站的页面设计,我们发现其中人物的动作﹑姿态和面孔在构成设计的冲击力时能发挥显著效果。毫无疑问,在以上几个画面中起到主导作用的单一元素是剪影形态的人物模拟触摸屏幕的动作与观众所产生的互动。无论人物的大小怎样变换,页面中这位穿着T恤的男主角依靠其深红的暗色调都能牢牢抓住观众的吸引力。

插入文本中的小图像很自然地使人感觉到富有精密性,同时有点缀和呼应版面主题的作用。简洁﹑有力的小图像还能成为读者视觉的焦点。

大小不同的图像在版面中并置时,很自然地显现出大小上的对比,同时使画面具有了深度感和节奏感。

如图3-55所示,图片的面积虽然小,但与文字以及空白处的对比,尤其是图像的色彩与文字和空白的黑白对比,凸显了这幅小图像的重要性,使其成为画面中的视觉中心。

图3-54

3.图像的数量

版面中图像的多少直接决定了整个版面是否具有活力。当版面中只有一张图像存在时,图像自身的质量和视觉冲击力就决定了人们对它的印象,这通常是创造高雅格调的视觉效果的保证。2~3张的图像能活跃版面,同时也使图像处于对比的格局中。3张以上的图像能在版面中营造出热闹的氛围。总之,图像数量的多少最终是要根据版面的内容来进行安排的。(www.daowen.com)

图3-55

如图3-56所示的版面构成中只使用了一张图像,所以该图像很顺理成章地成为该版面的唯一视觉中心,给人以简约﹑高雅的设计风格。而图3-57中,封面上采用了多个图形,看似无序的并置的版面中,形成了一幅非常热闹的景象。当然,这样的构图更多的还是由其是一本百科图典的性质决定的。

图3-56

图3-57

4.图像的形式

1)方形图式

方形图式是图像处理中最基本﹑最简单﹑最常见的表现形式。它能完整地传达诉求主题,富有直接性﹑亲和性。构成后的版面稳重﹑安静﹑庄严﹑大方﹑较容易与客户沟通,如图3-58所示。

图3-58

2)出血图式

出血图式,即图像充满整个画面,具有向外扩展﹑自由﹑舒展的感觉。运用出血图式构成的版面,动感效果非常强劲,能较好地消除用户的距离感。

如图3-59所示,一幅运用出血图式的版面,给人以热情﹑大胆的感觉。

图3-59

3)退底图式

退底图式是设计者根据版面内容所需,将图片中精选部分沿边缘裁切,然后合成在另一个背景中的手法。退底后的图片显得灵活而不凌乱。给人以活泼﹑自由﹑平易近人的亲切感。退底的图像往往以视觉最精彩的部分呈现,是图面情感表达的中心,是设计师常常采用的手法之一,如图3-60所示。

图3-60

4)化网图式

化网图式,在印刷领域中讲的是利用电脑技术减少图像的层次,这也可理解为技术化处理的图像形式。比如在Photoshop中使用滤镜等处理技术,都应算在此类。设计师常常为了特殊的效果,综合运用电脑技术来处理图像,以此来衬托主题,丰富视觉层次,渲染版面气氛。

如图3-61所示就是采用的退底和化网的处理手法。

图3-61

5)图像的组合

图像的组合,就是把图像安排在同一个版面中。它包括块状组合﹑散点组合。

块状组合强调了图像与图像之间的直线﹑水平线﹑垂直线的分割,文字与图像相对独立,使组合后的图像整体大方﹑富于理智的秩序化条理。一般在网页设计中,常用于门户网站的制作。

散点组合则强调图像与图像之间的分散安排,形成相对自由﹑明快的感觉。文字与图像浑然一体,使版面显得轻松愉快,具有亲和感。这样的页面设计适合于个人网站。

图3-62所示就是典型的块状组合的网站的页面,全部采用直线分割页面,水平方向﹑垂直方向划分清晰,页面整体风格大方清新﹑有秩序感。图3-63所示采用的是散点组合的方式来组合图像,给人轻松愉快的感觉,颇具亲和力。

图3-62

图3-63

6)图像的方向

图像方向的强弱,可造成版面行之间有效的视觉攻势。方向感强则动势强,产生的视觉感也就强。反之则平坦许多。图像的方向性可以通过人物的动势﹑视线的方向等方面的变化来获得,也可借助近景﹑中景﹑远景来实现。

如图3-64所示是一个个人网页,作者采用颠倒图像的方式改变了图像的方向感,增强了画面的动感,也加重了对人眼的视觉刺激。

图3-64

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈