曾幾何時, 計算機中的數字世界是一個獨立于現實之外的虛擬世界, 由于網速帶寬和界面設計師水平等條件的限制, 數字界面設計在發展過程中長期存在設計機械化、枯燥乏味, 缺乏真實情感聯想、藝術美感以及吸引力匱乏等問題。而今, 在人們的生活中, 數字世界已經和真實世界互相交融, 密不可分, 設計師開始嘗試在虛擬世界表達現實主義和人文精神, 其中具有代表意義的現象是肌理設計和應用成為近年來界面設計領域的趨勢和潮流。
肌理, 也稱為質感, 是物質表面的組織結構, 即物質表面呈現出的色彩、光澤、紋理、方向、深淺、粗糙度、透明度等多種外在特性的綜合表現。現實生活中的肌理千變萬化, 不必然依賴于材質而存在, 因此設計師可以通過模擬和虛構肌理從而觸發人們的感受, 使得肌理設計擁有數字化發展的廣闊前景。
根據給人的知覺感受, 肌理可以分為觸覺肌理和視覺肌理。顧名思義, 觸覺肌理是通過皮膚觸摸而感受到的光滑、粗糙等感覺;視覺肌理是無須皮膚接觸, 直接通過眼睛即可識別的肌理。數字肌理的表現雖然以視覺肌理為主, 但設計師可以充分運用視覺肌理來表現相應的觸覺心理體驗, 這種不同感官之間的互通現象也被稱為聯覺或通感。
數字形態的肌理本質上都是計算機程序產生的數字符號, 但它的表現形式大致可以分為兩類:一類是模擬肌理, 即模擬現實世界中已經存在的肌理;另一類是虛構肌理, 即利用數字技術創造只在非現實世界中存在的肌理。
一、數字肌理的生成
如何創造網頁設計中使用的數字肌理?技巧和方法不拘一格, 總體來說主要有攝影、掃描、程序模擬、圖案、筆刷等。這些技巧和方法既可以分別獨立使用, 也可以綜合使用從而創造精致多變的整體肌理效果。
1、攝影
攝影在創造肌理中主要有兩方面的用途, 一是獲取現實世界中已經存在的材質和紋理的原始素材, 如木材、金屬、石頭、磚墻等;二是通過攝影捕捉現實生活中的感受和氛圍, 并將之應用到設計之中。攝影是一種視覺細節極為豐富, 氣氛情感傳達最便捷, 給人真實感極強的肌理表現手法。
2、掃描
掃描主要用于獲取不同質地的紙張表面的紋理, 以及捕捉不同的筆觸和顏料與紙張相互作用而產生的微觀視覺效果。在使用不同類型的紙、筆、顏料, 以及顏料的用量、運筆速度存在差異的情況下, 肌理的形態也有明顯不同。掃描能準確地復制出這些手繪和手寫的痕跡, 因此非常適合用于表現藝術和生命的氣息。
3、程序模擬
程序模擬理論上可以創造出任何的紋理, 無論現實中存在與否, 但是由于成本和技術含量過高, 效果可能不盡如人意, 因此很多時候網頁設計師不得不選擇更加簡便的方法, 比如攝影、掃描等。程序模擬方法主要在三維軟件中使用, 結合攝影和掃描生成的素材貼圖, 再加上光影和凹凸效果, 就可以模擬出逼真的表面材質紋理。Adobe Photoshop和Illustrator的濾鏡應用可以給素材快速地添加Cloud云紋、Noise噪音等具有一定的隨機性的肌理。
4、圖案
制作圖案是在網頁設計中經常使用的一種方法。圖案是通過單體的規律性的重復, 形成無縫銜接的效果, 經常用于頁面中的邊框和背景。圖案的原始素材可以來自現實紋理的模擬, 如布紋紙紋;也可以是來自圖形軟件繪制的矢量圖案, 如幾何、波點以及花紋圖案;還可以是程序隨機生成的圖案。這完全取決于設計師想要通過圖案傳達什么信息。
5、筆刷
筆刷是一種在繪圖軟件中手繪添加肌理的方式, 筆刷的生成方式既可以通過對掃描的紋理進行矢量化疊加處理, 也可以將軟件中直接繪制生成的圖形轉換成筆刷。在網頁的插畫和圖標、Logo和標題的設計中, 都可以看到筆刷的頻繁使用。筆刷效果通常是設計師通過在外接手寫板上手繪的方式添加的, 因此具有一定的靈活度和隨意感。
二、網頁設計中數字肌理的應用
數字肌理之所以成為近年來網頁設計領域的潮流, 是因為設計師體會到了數字肌理在網頁中的重要作用。通過設計與內容相符的獨特肌理, 并和圖形、文字、色彩等元素搭配, 能夠實現快速吸引觀眾目光、引導互動流程、高效傳達信息等設計目的, 還能創造出具有高度識別性和便于人們記憶的網站風格, 給觀眾帶來豐富細膩的情感體驗, 不失為一種全面提升網頁用戶體驗的有效方法。數字肌理在網頁中的應用方式可分為以下幾種:
1、設置視覺焦點, 引導視線流程
視覺焦點, 又稱為興趣中心或視覺中心, 是頁面上最吸引人們注意的地方, 也是視線集中交匯之處。肌理內部細節比較豐富, 在與干凈平滑的純色背景形成對比時, 非常容易成為視覺焦點。利用相關性原則, 可以引導用戶的視線流暢地移動到色彩與肌理部分一致的說明文字上。設計師將數字肌理應用在重點信息和行動召喚按鈕上, 能起到增加點擊量和提高轉化率的作用。
2、傳達真實信息, 構建情感聯結
由于模擬肌理具有很強的寫實性, 觀眾在瀏覽的第一時間就能產生對現實事物的聯想, 這使得內容的可信度和真實感隨之增強, 非常適合應用在講述真人真事的網站上。圖1所示的網站綜合應用了多種肌理創作手法, 將手寫字體、水彩畫、高清晰度的攝影圖片以及模仿報紙印刷效果的字體結合成一個整體, 形成了極強的感染力, 觀眾在閱讀文章的過程中, 很快就將自己代入故事的情境之中, 情感隨著主人公而起伏波動。
3、表達文化內涵和藝術氣息
手繪和手寫的行為與繪畫藝術和書法藝術直接相關, 因此使得手繪和手寫的視覺質感天然具有一種文化和藝術內涵, 對于想要傳達深刻文化底蘊和內涵的網站來說非常適合。手繪的筆觸顏料漸變的肌理與人文主義風格的字體組合在一起, 賦予了頁面強烈的視覺沖擊力, 讓人聯想到歷史給文物留下的滄桑痕跡。
4、增加裝飾性細節, 吸引用戶停駐
在整體幾何形為主的現代主義設計風格中, 設計師也可以通過在局部添加數字肌理, 增加一些裝飾性的細節, 避免用戶感到單調無趣而過早離開。如網頁用色數量少, 呈現極簡風格, 設計師在插畫圖標元素部分用噪點筆刷添加一些局部細節, 利用筆刷疊加的層數多少構成陰影深淺的假象, 這種應用方式給單色圖標營造了一種層次感和立體感。
5、創造獨特風格, 便于識別和記憶
設計師都想設計出具有自己獨特風格的頁面, 使之在同類型網站中更容易被用戶識別和記憶。網站的設計風格是品牌形象體系和表現手法在結構上的統一, 一種數字肌理在網頁同類設計元素中進行穩定一致的使用, 是形成網站統一風格的重要因素之一。
三、使用數字肌理應注意的地方
1、牢記對比, 過猶不及
在網頁設計中合理地應用數字肌理能起到畫龍點睛的作用, 相反, 如果數字肌理過量使用, 不僅會降低用戶獲取信息的效率, 還會給人留下頁面臟亂差的負面印象。肌理的應用是為傳達信息而服務的, 只有在對比中, 信息才能體現出主次之分, 切忌添加過多無用的肌理。
2、綜合運用, 打造整體
數字肌理在設計中不是一個獨立的個體, 設計師需要思考如何將肌理和字體、圖形、照片、色彩、插畫以及互動交互等其他網頁元素結合在一起, 使數字肌理為網站的整體風格服務。設計師需要在數字肌理和頁面其他元素之間掌握一個平衡點。
