网页界面设计中材质的运用

2018-01-15李银英蔺建旭王思佳

河北传媒研究 2017年5期

李银英蔺建旭王思佳

（河北传媒学院，河北石家庄 051430）

网页设计是视觉传达设计的一个重要的分支。在网络无处不在的今天，人们打开电脑，映入眼帘的是各式各样、五花八门的网页界面。另一方面，材质是许多艺术设计中非常重要的元素，是一种极有力的设计语言，被广泛应用于不用的艺术形式当中，不同的材质给观者以丰富的感受和联想。当设计者把材质肌理运用到网页界面设计当中，让材质成为网站整体设计的一个重要组成部分，这样的设计会非常巧妙地实现网页界面的风格化，极大增强界面的质感，让人印象深刻、过目不忘。

一、材质的特性和审美

材质是指材料的质地，材料的视觉激励和触觉肌理效果，也是材料与质感的结合。美国现代主义艺术大师莱特曾言：“将你的材料性质显示出来，让这种性质完全进入你的设计中”；“每一种材料都有自己的语言，每一种材料都有自己的故事”[1]材质虽然没有生命，但具有自然天成的特殊美感，有其人格化的个性与情感，可以给受众带来情感上的共鸣。

（一）材质不同于纹理

现在网页设计中，使用纹理的很多。相对于材质，纹理更泛化，什么都可以形成纹理，比如规则排列的点或其他图形，人工绘制的图案，当然也可以是某种材质的纹理。材质是指真实存在的材料所体现出来的质地，当取得这些材料的图片拟用时，可以做适当的处理，以增强其表现力，但不能破坏这种材质的肌理和质地感。所以材质和纹理二者虽然有交集，但还是有很大的不同。

（二）材质的审美

材质的美感来自材料的色彩、光泽、肌理和质地，是一种综合的审美。

材质所带有的天然色彩和光泽就具有极强的美感，可以说没有比天然色彩更符合材料特性的，就是说天然色彩与光泽本身对材料具最合理的表达。

同时材质的美感是视觉与触觉的结合。材料的触觉主要是指材料的硬软、干湿、粗糙细腻、冷暖感等。这些能够触摸到的质感是通过视觉传送至观者的大脑，借助以往的经验，经过大脑处理产生对该材质的印象和感觉。“经过人们长时间在触觉经验上的积累，大多数的触觉感受转化为视觉上间接的感受。比如一块木板和一张皮子会体现出他们自身所特有的材质感，这种材质感会突出其自然的特性，体现材料自身美感和性格，具有真实性和天然性。”[2]

材质的肌理对设计的作用和色彩一样重要。它不仅可以丰富视觉感受，更可以丰富触觉感受。运用恰当的材质肌理可以提升界面设计的品质，给浏览者特定的心理感受。不同的肌理表现出不同的质感，会形成不同的性格：粗的质感厚重、平静、温和；光的质感具有高贵、华丽、轻快的情调；麻的质感朴实、稳重。材质所展现的肌理、色彩等是相当丰富的。这种多样性是单纯的调色和绘画难以达到的。

不管是自然界中存在的材质，还是人工合成材料的质地，都有着难以言表的美感。如木材的温馨自然，金属的高贵凝重，塑料的柔顺平整，玻璃的透彻光滑等。

（三）材质的“唤起”作用

广泛地说，任何界面上图形图像的设计，都具有“唤起”的功能，都要表现某种意象，都是要唤起浏览者对相应的情境、文化、内涵及品质的认知。唤起的程度越深，那么主题就会越深刻和鲜明。而材质在界面设计中的运用正好合于“唤起”这样的作用，唤醒人们的某种情感或者制造出具有某种空间感和时间感的氛围,表达人们精神的寄托。

当一种材质被恰当运用时，界面所表现出来的真实的质感是别的东西所无法替代的。比如设计师想设计出永恒和怀旧主题的网站，可以使用边缘破损的旧羊皮纸作为主体背景，这种怀旧的风格也曾在本世纪初广为流行[3]。

二、网页界面设计中材质的合理运用

（一）材质的运用要符合主题

所有网站的最终目的都是要表达某种主题，吸引浏览者。网页界面的设计都须服务主题、突出主题。材质作为网页界面设计的重要元素，使用时要从生理心理等多个方面和角度出发，设计出有独特风格和意趣的网页界面，能够传达出与主题一致的情感和志趣，唤起浏览者内心深处的幻想，引起人们感情深处的共鸣，从而进一步凸显网站主题，让人过目不忘。比如天然的木质纹理是网页界面设计经常被使用到的材质。木质材质天然、淳朴，具有乡村风格，深色的木质纹理比较内敛、庄重，浅色的木质纹理明快、轻松，适用餐饮、农业等主题的网页界面设计。

下面是一个关于来自非洲的食品的网页，见图1。其风格纯真，强调食品的纯粹和天然绿色。

图1 采用木纹材质的界面

界面设计采用了深色的木质材质，材质上的木纹清晰自然，色泽不是人工制作出来的整齐划一，而是有非常真实的美感。布置在上面的食品色彩明亮，错落有致。

这样的设计充分体现了材质的优势，形成了这一界面清新自然、返璞归真的独特风格，让人看到后眼前一亮。

（二）综合运用多种材质

在网页界面设计中，有时候用到的不仅是一种材质，而是会用到两种或多种不同的材质。关键在于所用材质都须围绕一个主题，为一种情感“唤起”服务；不同材质之间的搭配要在整体与局部、风格与布局之间保持一种和谐。

下面的网页界面（图2）设计中运用了多种材质，背景用了粗粝的岩石，前面用了刷了漆的木质材质，上面布局了一些纸张、贴画、生活用具等。

图2 不同材质综合运用的界面

这是一个关于咖啡的网站。这样的设计非常有特点，原始、自然和拙朴的气息扑面而来，让人情绪放松而且印象深刻。在这个网页设计中，综合而和谐地运用了两种以上的材质，能够引发人感情深处的共鸣。

（三）多种途径相结合获得材质素材

不同材质素材（图片资料）的获得可以有多种途径。目前，人们在设计网页界面时较常见的做法是从网上寻找和下载素材。这当然是一种较为简便快捷的材质素材获得途径，而且，网上图片资料十分丰富，基本能够满足网页界面设计的需要。但是，如果追求个性化的设计，仅仅依赖网上资料就很难如愿以偿了。为此，网页界面设计者可以自己动手获得相关素材。可以拿起相机，在自己生活的社会和自然环境中寻找、发现和拍摄各种素材，如水面粼粼的波纹、天空变幻的云彩、城市中多彩的墙面、纹理美丽的树皮、岩石凹凸的断面等等，再使用图像处理软件，对所拍摄的素材进行适当的处理，就能获得具有独一无二风格的材质素材，为设计个性化的网页界面提供条件。但须注意的，是在使用软件做图像处理时不要处理得太过，以免使材料失去原有的真实肌理和质感。