图像处理技术在网页设计中的运用

图像处理技术在网页设计中的运用

摘要:互联网技术与图像处理技术不断升级,用户在众多页面浏览中逐渐加强了审美品味。雷同性过高的网页设计理念已经无法吸引用户,如何运用计算机图像处理技术,优化网页设计方案成为全新课题。文中针对计算机图像处理技术在网页设计中的应用方法加以探讨,通过分析当代网页设计理念和适用性需求的转化,以及计算机图像处理软件在网页设计中的应用维度,进一步明确了图像处理技术的应用方向和方法,以便为优化网页设计方案提供理论参考。

关键词:图像处理;网页设计;应用路径

图像处理技术的发展为网页设计带来诸多便捷性,且随着计算机技术类型的更新迭代,及现代网络终端消费群体的体验需求转化,日新月异的设计理念与构思充斥着网页设计。为了进一步解析计算机图像处理软件在网页设计中的应用维度,文中分析了当代网页设计理念和适用性需求的转化方向及应用策略,以便优化设计效果,支持网页设计方法的凝练与创新。

1当代网页设计理念和适用性需求的转化

1.1动态化与虚拟化

动态化的页面设计已经尤为普遍,多数主流网站页面以滚屏形式输出子页面浏览信息。动态化页面相对有限的页面空间利用率更高,同时部分网站引入AdobeFlashPlayer插件,其动态效果的浏览模式加强了用户体验度与文本信息的识别度,能够通过静态与动态信息的交互加强视觉效果。虚拟化的页面信息并非完全无链接插件,而是在设计角度上更加趋向于自由浏览的设计维度。当用户浏览页面时并未设置导向性的标识,而仅以产品图像作为主控区域。如星巴克官网(www.starbucks.com.cn)的主页面在设计上首先虚拟化了产品信息,通过借助自然场景的虚拟再现引导用户浏览商品推荐内容。这样的虚拟化感知体验效果更强,在高频次的页面浏览状态下,更加契合用户的体验需求,因此高斯分布、模糊线条、透明光感、蒙板运用等虚拟化操作并未完全剔除页面元素的实体化效果,反而在虚拟场景的设计中达到了更高的视觉冲击力,是加强网页设计效果的全新方式。

1.2流畅度与体验度

目前计算机图像处理软件输出的图像信息主要为矢量图和位图。以AdobeDreamweaver为代表的网页编辑器HTML,CSS,XML,JSP,PHP,ASP,JS等页面制作工具,对于位图信息的识别度更高,因此bmp,gif,png,jpg,jpeg等图像格式的应用频次高于矢量图。但是其像素存储量也在很大程度上限制了图像打开速度,当流量较低时,用户也不倾向于位图视觉需求。尤其在AutoCAD和CorelDRAW以及Illustrator等软件类型逐步补充了多种矢量图设计方案后,其图像信息的完整度更加适合制作LOGO或VI,企业形象在页面表达上更加清晰,且文件储存量低于位图,因此,基于页面流量的流畅度需求而言,矢量图的占比反而更高。但是从设计需求上分析,矢量图主要为平面图形结构的设计,虽然文字、标志、线条等流畅度更高,但是无法以像素单位描述真实感更强的图像信息。诸如以商品销售信息为主的网站页面、以新闻素材为主导的页面信息,更加倾向于位图像素的表现形式,因此,基于用户体验度的需求,矢量图无法真实反射出更为全面的视觉信息,因此,仍然无法取缔位图设计的体验功能。由此可见,当前网页设计的需求不仅趋向于流畅度的实用性,更加需要以体验度更强的内容吸引用户。

1.3感官性与适应性

虽然感官体验需求尤为重要,但是网页浏览状态的整体适应性也必须充分考量。尤其在智能终端用户比例逐年递增的情况下,手机网页模板、WAP站模板HTML5页面模板源码的使用频次更高。从PC终端和移动终端的页面设计效果分析,其中的像素质量、文字大小、插图元素等一系列设计重点,都需要重新调整之后才能达到预期的设计效果。以GIF所代表的连续动画效果为例,虽然AdobePhotoshopCC2017作为最新版本,在GIF输出效果上提供了放大、缩小、倾斜、镜像、旋转、透视等多种功能,但在使用过程中仍然仅能维持在256种颜色,并无法深度开发润色效果。不过,毕竟GIF格式较flash格式的内存占比更低,因此更加适应智能终端的页面设计。而反观PC终端的网页视觉效果需求,则仍然需要以flash的清晰度作为设计标准,提供相应的感官体验效果。因此,感官性的需求与适应性存在必然联系,也需要充分考量具体应用界面的输出形式,从而加强网页设计的普遍应用效果。

2网页设计中的应用维度解析

2.1加强网页信息标识度

网页信息在浏览过程中是否能够第一时间吸引用户,并不取决于文字的精细加工,反而更加倾向于图文并茂的视觉感受。其中最为鲜明的代表便是LOGO的标识度特征。网页引擎虽然在很大程度上输出了大量文本信息,引流方式存在多种模式,但用户并无法精准记录页面链接的具体网址,反而对于标识度特征起到了强烈的记忆效果。而计算机图像设计技术的关键也在于加工图像信息时的刻画程度和文化理念的营造力。其中多以矢量图的LOGO设计居多,其线条清晰度更强,可无限缩放或扩充,在网页设计的整体格局中灵活性更强。由于精心设计的LOGO营造了网站品牌形象,对于用户记忆深刻,其文化理念的传输效果更加具备针对性,因此也是增强网页信息标识度的主要方向,更是网页设计中应用计算机图像处理软件的主要路径。

2.2强化网络浏览体验度

除去LOGO设计之外,计算机图像处理软件主要负责页面形象加工,特别是背景设计。其图像信息本身也是衬托文字内容的必要工具,能够起到烘托主题的重要作用。在节日盛典、网站活动、新产品突出等时间节点中,图像背景的主题性特征,是增强用户联想度与体验度的必要环境设计维度。通过场景转化引发用户对于本次活动的关注度,烘托主题氛围,进而达到强化网络浏览体验度的最佳效果。此时,以矢量图为代表的图像处理技术并无法进行渐变色、虚实演化、三维场景设置或者动态图形浏览,因此更多的应用了位图设计方案。尤其多种高像素拍摄自然景物的元素补充,也是网页风格得以突出的重要表现。其渲染效果、感染力、视觉冲击力是主题设计必备的基础要素,因此在强化网络浏览体验度方面更多地应用了AdobePhotoshop,3DMAX等图像处理技术,而很少选择CoreIDRAW等图像处理软件。

2.3补充关键信息辨识度

网页设计由LOGO塑造了点睛之笔,由背景渲染烘托了活动主题。但是此时并未就关键引导图加以优化,并无法引导用户加强针对性产品的关注度。此时需要进一步强化关键信息的识别度,通过色差、明暗、立体效果、文字引导等多种设计方式,加强重点信息的识别度,从而突出网页设计的针对性。这样的针对性关键信息也可以视为个性化发展的最终结果。由于现代用户浏览终端页面的频次日渐增加,可视化信息在诸多设计要素中融入了多元化的风格取材,用户体验度普遍升高,其设计要求也在逐步上升。评价网页设计的主题突出性、风格精炼度、关键信息的识别度,往往成为快速吸引用户关注的必要措施。为此,需要运用诸如PS图像处理软件中的多种渲染功能,或者合并诸多风格元素的像素信息,在最大程度上突出关键图像的引导链接,才能补充关键信息辨识度,达到预期的设计效果,以及浏览引导功能。

3网页设计的盲区与针对性策略

3.1针对视觉反差盲区采取的补充像素模式

视觉反差的盲区问题近似于审美疲劳,在浏览了众多其他网页之后,用户的审美感知已经趋于同化,并无法被网页设计快速吸引。类似的现象是基于视觉记忆的同化规律,此时设计元素是以如何吸引用户关注点为重要的优化方向。在此方面主要有以下3种方式,激发关键图像的视觉设计效果。(1)可以利用钢笔工具勾勒不同的图形结构。由差异化的形状信息区分视觉盲区,可通过加强线条勾勒后的视觉效果对比,从轮廓显示特征中提取突出性的设计方案。形状轮廓的链接矢量蒙版可以尽量选取特征更为突出的不规则图形结构,并采取集中化的对齐分布,从而形成差异性更高的图像分布特征。(2)可以通过填充像素的色彩差异,突出主体风格的新颖性。当主题背景以暖色调为主时,关键图像的视觉信息可以采取冷色调处理,进而通过润色反差强调视觉信息的突出性,并优化突出色彩的引导效果。此时需要明确创建路径的空间结构,在特定区域内建立栅格,并优化后期处理效果,使之颜色分布的冲击性与协调性同时发挥审美特征,补充视觉反差的感知盲区。(3)可借助动态化的信息引导,或者是立体图案的设计模式,在形状结构上增添视觉冲击力,从而达到预期的设计效果。此时应用PS软件的立体成像技术虽然也能够达到三维视觉效果,但是设计空间较为狭隘,仅能通过色泽变化和阴影形成特定的曲线立体映射,并无法针对立体图形的多维感官视角加以延伸,因此,必要时可以借助3DMAX软件的立体成像效果,补充其中的视觉特征。

3.2针对图像比例盲区采取的结构调整方案

图像比例盲区的产生,主要源于初始图像的空间尺寸规划存在误区。类似设计问题,也使得网页设计元素过于单调,并未形成更为强烈的视觉感应。虽然绝对的黄金比例并不存在,多数网页设计由设计师的经验导向而最终形成,但是其中的空间比例规律仍然较为明显,尤其在移动终端用户逐年递增的情况下,H5页面的视觉效果往往决定了网页流量的真实情况。因此,在设计网页的整体风格、主题、比例的过程中,势必需要充分考量Web页面和H5页面的对比效果,并依据用户浏览规律设定补充元素的结构调整方案。原则上web页面的文本信息可以尽量扩充,而H5页面的设计元素需要相对集中。设计中可以在PS软件中设定网格比例分区,然后选定主要设计元素的空间比例,依据链接引导的重要性排序,对比空间结构的合理性。此时多种图形结构的合并运用更为重要,方形传递于用户的信息是严肃、正规、内容严谨的,适合于理性思考的新闻网站或学术研究网站的页面设计。而圆形图像更加倾向于柔和曲线的审美表达,其圆满的形象特征是激发用户喜悦心情的设计要素,更加适合于购物型网站或娱乐型网站的页面设计。三角形的图像元素中具有突出性、冲击性、个性化的形象特质,是诸多个性化网页趋之若鹜的取值范畴。但本质上三角形、方形、圆形的图像结构比例,均需要以网站主旨内容为依托,消解图像比例的失衡性特征之后,才能让整体设计结构更加人性化,突出原有主题的空间感知,激发自然规律和创意灵活度,丰富网页设计的图像比例信息,增强页面设计效果。

3.3针对体验需求盲区开展的个性化创新维度

视觉创意与设计是设计艺术的一个分支,网页浏览本身具有强烈的商业性目的,设计元素和风格是否契合用户体验需求,已经是评估设计效果的重要方向。如果利用AutoCAD增强矢量位图的结构规划,同时也需要利用PS的渲染功能强化色彩调和度。如果利用PS软件的润色效果仍然无法完成预期的形象特征,也需要利用3DMAX软件的三维信息补充。因此,在用户体验要求越来越高的情况下,网页设计软件Dreamweaver,Mockplus,H5+CSS3,AmazingCarousel等软件类型无法完全满足用户的体验效果,以至于造成用户体验盲区的网页设计失衡。为此,也需要进一步开发并综合运用多种图像处理软件功能,才能真正规避用户体验效果的失衡现象,着力于人性化的设计,丰富设计元素和创意感,加强动态化、流畅度、感官体验效果及页面效果,支持网页设计中对于多种图像处理技术的综合运用,突出网页设计特色与风格的视觉创意。

4结语

综上所述,随网络页面的推陈出新,页面的设计构思与应用维度升级,现代用户的体验度需求逐步上升,因此基于图像处理技术的应用角度,也需要随用户体验方式的感官需求加以演化。从目前主流网络页面和手机页面的应用频次分析,主要的设计方案趋于动态化与虚拟化合并构建的形式,主要的设计指标为流畅度与体验度的视觉效果,侧重于感官性与适应性的发展诉求。为此,需要综合运用计算机图像处理技术的多种功能,使辅助网页设计不断优化与完善,以突出个性主题的吸引度,强化用户感知体验,真正发挥出图像处理技术在网页设计中的应用效果。

参考文献

[1]吴明珠.网页设计中图像处理的最佳化分析[J].电脑知识与技术,2017,13(5):164-165.

[2]李有仕.浅议Photoshop中“抠图”的方法和技巧[J].现代职业教育,2016(17):138.

[3]姜琴.网页设计中计算机图像处理技术应用解析[J].信息与电脑(理论版),2016(03):148+150.

[4]陈智盖.新时期网页设计中计算机图像处理技术应用分析[J].计算机光盘软件与应用,2014,17(15):219-220.

[5]张丽萍.网页设计中Photoshop与Flash的结合应用[J].煤炭技术,2013,32(04):158-159+182.

作者:杨明 单位:安徽电子信息职业技术学院