網頁界面設計中材質的運用

李銀英 藺建旭 王思佳

（河北傳媒學院，河北石家莊 051430）

網頁設計是視覺傳達設計的一個重要的分支。在網絡無處不在的今天，人們打開電腦，映入眼簾的是各式各樣、五花八門的網頁界面。另一方面，材質是許多藝術設計中非常重要的元素，是一種極有力的設計語言，被廣泛應用于不用的藝術形式當中，不同的材質給觀者以豐富的感受和聯想。當設計者把材質肌理運用到網頁界面設計當中，讓材質成為網站整體設計的一個重要組成部分，這樣的設計會非常巧妙地實現網頁界面的風格化，極大增強界面的質感，讓人印象深刻、過目不忘。

一、材質的特性和審美

材質是指材料的質地，材料的視覺激勵和觸覺肌理效果，也是材料與質感的結合。美國現代主義藝術大師萊特曾言：“將你的材料性質顯示出來，讓這種性質完全進入你的設計中”；“每一種材料都有自己的語言，每一種材料都有自己的故事”[1]材質雖然沒有生命，但具有自然天成的特殊美感，有其人格化的個性與情感，可以給受眾帶來情感上的共鳴。

（一）材質不同于紋理

現在網頁設計中，使用紋理的很多。相對于材質，紋理更泛化，什么都可以形成紋理，比如規則排列的點或其他圖形，人工繪制的圖案，當然也可以是某種材質的紋理。材質是指真實存在的材料所體現出來的質地，當取得這些材料的圖片擬用時，可以做適當的處理，以增強其表現力，但不能破壞這種材質的肌理和質地感。所以材質和紋理二者雖然有交集，但還是有很大的不同。

（二）材質的審美

材質的美感來自材料的色彩、光澤、肌理和質地，是一種綜合的審美。

材質所帶有的天然色彩和光澤就具有極強的美感，可以說沒有比天然色彩更符合材料特性的，就是說天然色彩與光澤本身對材料具最合理的表達。

同時材質的美感是視覺與觸覺的結合。材料的觸覺主要是指材料的硬軟、干濕、粗糙細膩、冷暖感等。這些能夠觸摸到的質感是通過視覺傳送至觀者的大腦，借助以往的經驗，經過大腦處理產生對該材質的印象和感覺。“經過人們長時間在觸覺經驗上的積累，大多數的觸覺感受轉化為視覺上間接的感受。比如一塊木板和一張皮子會體現出他們自身所特有的材質感，這種材質感會突出其自然的特性，體現材料自身美感和性格，具有真實性和天然性。”[2]

材質的肌理對設計的作用和色彩一樣重要。它不僅可以豐富視覺感受，更可以豐富觸覺感受。運用恰當的材質肌理可以提升界面設計的品質，給瀏覽者特定的心理感受。不同的肌理表現出不同的質感，會形成不同的性格：粗的質感厚重、平靜、溫和；光的質感具有高貴、華麗、輕快的情調；麻的質感樸實、穩重。材質所展現的肌理、色彩等是相當豐富的。這種多樣性是單純的調色和繪畫難以達到的。

不管是自然界中存在的材質，還是人工合成材料的質地，都有著難以言表的美感。如木材的溫馨自然，金屬的高貴凝重，塑料的柔順平整，玻璃的透徹光滑等。

（三）材質的“喚起”作用

廣泛地說，任何界面上圖形圖像的設計，都具有“喚起”的功能，都要表現某種意象，都是要喚起瀏覽者對相應的情境、文化、內涵及品質的認知。喚起的程度越深，那么主題就會越深刻和鮮明。而材質在界面設計中的運用正好合于“喚起”這樣的作用，喚醒人們的某種情感或者制造出具有某種空間感和時間感的氛圍,表達人們精神的寄托。

當一種材質被恰當運用時，界面所表現出來的真實的質感是別的東西所無法替代的。比如設計師想設計出永恒和懷舊主題的網站，可以使用邊緣破損的舊羊皮紙作為主體背景，這種懷舊的風格也曾在本世紀初廣為流行[3]。

二、網頁界面設計中材質的合理運用

（一）材質的運用要符合主題

所有網站的最終目的都是要表達某種主題，吸引瀏覽者。網頁界面的設計都須服務主題、突出主題。材質作為網頁界面設計的重要元素，使用時要從生理心理等多個方面和角度出發，設計出有獨特風格和意趣的網頁界面，能夠傳達出與主題一致的情感和志趣，喚起瀏覽者內心深處的幻想，引起人們感情深處的共鳴，從而進一步凸顯網站主題，讓人過目不忘。比如天然的木質紋理是網頁界面設計經常被使用到的材質。木質材質天然、淳樸，具有鄉村風格，深色的木質紋理比較內斂、莊重，淺色的木質紋理明快、輕松，適用餐飲、農業等主題的網頁界面設計。

下面是一個關于來自非洲的食品的網頁，見圖1。其風格純真，強調食品的純粹和天然綠色。

圖1 采用木紋材質的界面

界面設計采用了深色的木質材質，材質上的木紋清晰自然，色澤不是人工制作出來的整齊劃一，而是有非常真實的美感。布置在上面的食品色彩明亮，錯落有致。

這樣的設計充分體現了材質的優勢，形成了這一界面清新自然、返璞歸真的獨特風格，讓人看到后眼前一亮。

（二）綜合運用多種材質

在網頁界面設計中，有時候用到的不僅是一種材質，而是會用到兩種或多種不同的材質。關鍵在于所用材質都須圍繞一個主題，為一種情感“喚起”服務；不同材質之間的搭配要在整體與局部、風格與布局之間保持一種和諧。

下面的網頁界面 （圖2）設計中運用了多種材質，背景用了粗糲的巖石，前面用了刷了漆的木質材質，上面布局了一些紙張、貼畫、生活用具等。

圖2 不同材質綜合運用的界面

這是一個關于咖啡的網站。這樣的設計非常有特點，原始、自然和拙樸的氣息撲面而來，讓人情緒放松而且印象深刻。在這個網頁設計中，綜合而和諧地運用了兩種以上的材質，能夠引發人感情深處的共鳴。

（三）多種途徑相結合獲得材質素材

不同材質素材（圖片資料）的獲得可以有多種途徑。目前，人們在設計網頁界面時較常見的做法是從網上尋找和下載素材。這當然是一種較為簡便快捷的材質素材獲得途徑，而且，網上圖片資料十分豐富，基本能夠滿足網頁界面設計的需要。但是，如果追求個性化的設計，僅僅依賴網上資料就很難如愿以償了。為此，網頁界面設計者可以自己動手獲得相關素材。可以拿起相機，在自己生活的社會和自然環境中尋找、發現和拍攝各種素材，如水面粼粼的波紋、天空變幻的云彩、城市中多彩的墻面、紋理美麗的樹皮、巖石凹凸的斷面等等，再使用圖像處理軟件，對所拍攝的素材進行適當的處理，就能獲得具有獨一無二風格的材質素材，為設計個性化的網頁界面提供條件。但須注意的，是在使用軟件做圖像處理時不要處理得太過，以免使材料失去原有的真實肌理和質感。

三、結束語

運用材質的網頁界面設計是一種精致的設計。無論是自然界中天然存在的材質，還是人工合成的材質，都有它們獨有的個性和美，可觸、可摸、可視。合理地使用它們設計出來的網頁，往往充滿了靈性，能喚醒人們心中的情感和渴望。

[1]張萍，張娜娜.材質肌理在網頁界面設計中的運用[J].美與時代（城市），2013(7):85-86.

[2]陳雅潔.材料在平面設計中的運用[D].湖南師范大學畢業論文，2012：22.

[3]〔美〕Jason Beaird.完美網頁設計藝術[M].熊平，宓媛姍，譯.北京：人民郵電出版社，2008:90.