在過(guò)去傳統(tǒng)的網(wǎng)頁(yè)外觀設(shè)計(jì)中，方形輪廓基本是占主導(dǎo)地位的，但隨著技術(shù)的進(jìn)步，如今出現(xiàn)了不少造型各異的新樣式，帶給我們視覺驚喜的同時(shí)也傳遞了新的設(shè)計(jì)觀念。對(duì)于這種自由造型的網(wǎng)頁(yè)外觀設(shè)計(jì)，文章從幾個(gè)層面分析了它的特點(diǎn)，并介紹了主要的表現(xiàn)形式，希望通過(guò)探索其中的方法和思路，激發(fā)出我們的靈感和新的創(chuàng)造力。

——題記

隨著計(jì)算機(jī)技術(shù)的飛速發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格日趨多樣化和個(gè)性化，新的觀念、新的手法不斷涌現(xiàn)出來(lái)。根據(jù)主題表現(xiàn)的需要，某些追求豐富視覺效果、采用大量圖片文件的版面出現(xiàn)在我們的視野中，這些或動(dòng)或靜的圖片經(jīng)過(guò)靈活剪裁、合理布局創(chuàng)造出各種新穎的形式。其中較引人注目的是網(wǎng)頁(yè)外觀的自由造型設(shè)計(jì)。這種設(shè)計(jì)打破單一方形外框的格局，形態(tài)生動(dòng)，特色鮮明，它的出現(xiàn)，豐富了作品的視覺表現(xiàn)力，為網(wǎng)絡(luò)世界增添了多彩的一筆，值得我們?nèi)ド钊胙芯颗c探討。

需要注意的是，這里講的網(wǎng)頁(yè)外觀，空間上受限于瀏覽器，但造型上并不等同于瀏覽器的方框形，通過(guò)特殊設(shè)計(jì)，它可以擁有個(gè)性化的表現(xiàn)形式，即自由造型。現(xiàn)今，由于寬帶上網(wǎng)的普及，網(wǎng)頁(yè)設(shè)計(jì)師礙于下載速度而嚴(yán)格控制圖片數(shù)量與質(zhì)量的情況有所改善，許多漂亮的視覺元素被解禁出來(lái)，這樣便有效地?cái)U(kuò)充了設(shè)計(jì)的可調(diào)配資源。而另一方面，個(gè)人電腦屏幕的加寬與分辨率的提高，增大了版面的信息容納量，頁(yè)面內(nèi)容不需要頂天立地式地占滿整個(gè)屏的空間，大面積空白自留地的允許存在也為自由造型創(chuàng)造了條件，于是，許多生動(dòng)的視覺形象被創(chuàng)造出來(lái)。

自由造型的外觀設(shè)計(jì)是有其自身特點(diǎn)的，主要體現(xiàn)在意念傳達(dá)、題材適應(yīng)、版面顯示及造型規(guī)律幾個(gè)方面。

第一，網(wǎng)頁(yè)外觀本身不僅僅是裝載內(nèi)容的外殼，它可以一定程度地傳達(dá)信息，表達(dá)意念，而自由造型顯然更利于這種作用的發(fā)揮。在技術(shù)條件允許下，形的多樣化有賴于大量圖片文件的構(gòu)合，文字信息相應(yīng)地減少，圖片作為傳情達(dá)意的重要工具，其優(yōu)點(diǎn)在于表達(dá)上的直截了當(dāng)又生動(dòng)鮮活。而外觀的整體特征通常又是瀏覽者的第一著眼點(diǎn)，不可忽視的重要性迫使設(shè)計(jì)師需要煞費(fèi)苦心地去創(chuàng)造各種別致的造型，區(qū)別于傳統(tǒng)的方面孔，力求從主題宣傳出發(fā)，以個(gè)性化設(shè)計(jì)求得視覺上“開門見山”的傳達(dá)效果。

第二，在題材適應(yīng)方面，自由造型的外觀設(shè)計(jì)多用于氣氛輕松、休閑的網(wǎng)站。一般情況下，商務(wù)資訊或綜合門戶類的網(wǎng)站其設(shè)計(jì)風(fēng)格都要求簡(jiǎn)便實(shí)用，簡(jiǎn)的原則要求去除不必要的裝飾，以方便信息更新，并獲得最高的空間使用率，這使得設(shè)計(jì)容易傾向方形的塊面處理，給人嚴(yán)謹(jǐn)、可靠和專業(yè)的印象。與之不同的是，某些追求創(chuàng)新、時(shí)尚、娛樂(lè)效應(yīng)的網(wǎng)站，其設(shè)計(jì)為了烘托主題，大膽地放開了束縛，不惜使用各種裝飾手法制造視覺亮點(diǎn)，以趣味性和新奇性去吸引瀏覽者的青睞，于是，不拘一格的自由外形設(shè)計(jì)被廣泛應(yīng)用于此。

第三，自由造型的外觀設(shè)計(jì)更多地使用瀏覽器第一屏顯示的設(shè)置。網(wǎng)頁(yè)外觀的造型有時(shí)本身就是特定的場(chǎng)景或有個(gè)體意義的形，如果主體形象過(guò)寬或過(guò)長(zhǎng)，需要滑動(dòng)滾動(dòng)條才能看到全部的內(nèi)容，整體性將被大打折扣，影響了視觀感受。其實(shí)，這里提到的自由造型第一屏顯示，除了頁(yè)面所有內(nèi)容僅限于單屏，不出現(xiàn)滾動(dòng)條的情況外，還有另一種特殊形式，即長(zhǎng)條形多屏顯示的頁(yè)面中，形體變化豐富的部分被集中在第一屏中展示出來(lái)。好的設(shè)計(jì)總是講究節(jié)奏排布的，內(nèi)容比較多的長(zhǎng)頁(yè)面不管可滾屏的空間有多大，也不可能在外輪廓上出現(xiàn)同等幅度且連續(xù)不斷的造型變化，輕重緩急、疏密松緊總需要有度地安排。因此，這種頁(yè)面的設(shè)計(jì)常常在開頭部分，即在第一屏內(nèi)進(jìn)行大力度的外形加工，以下的部分則邊緣上相對(duì)地平整，變化減少。開頭的重點(diǎn)突出有利于網(wǎng)站標(biāo)題、企業(yè)形象等主要信息的渲染和強(qiáng)調(diào)，而后的簡(jiǎn)潔處理又為視覺提供了休息的機(jī)會(huì)，讓讀者瀏覽起來(lái)既享受圖形樂(lè)趣又不失感官舒適度。

第四，自由造型加強(qiáng)了對(duì)曲線與斜線的運(yùn)用，而區(qū)塊的錯(cuò)落疊加也是外形變化的常用手法。毫無(wú)疑問(wèn)，曲線和斜線具有極強(qiáng)的表現(xiàn)力，曲線能給畫面營(yíng)造出活潑、輕松與飄逸的視覺效果，而適度的斜線則帶來(lái)速度、果斷與敏銳的感覺。但應(yīng)用的時(shí)候，它們消耗的空間都比較多，在過(guò)去惜土如金的傳統(tǒng)設(shè)計(jì)中總是限制性地使用，不過(guò)在新的技術(shù)條件支持下，自由造型的設(shè)計(jì)給予了它們前所未有的施展空間，最終得以大顯身手嶄露頭角。此外，不同的功能區(qū)塊做成上下層疊的效果也是自由造型的一種有效的創(chuàng)作手法，這些區(qū)塊在邊緣處并不完全對(duì)齊而形成的錯(cuò)落，讓原本單一的長(zhǎng)直線邊緣變成折線的組合，同時(shí)，從中增加的邊角位也正好可以放置飾線、圖標(biāo)、光影等小元素，于是，豐富效果就出來(lái)了。

自由造型的外觀設(shè)計(jì)在手法上是善于突破傳統(tǒng)的，但這種突破并不天馬行空，技術(shù)要素與題材適應(yīng)的約束總貫穿于整個(gè)創(chuàng)作過(guò)程，在一定的限制條件下如何發(fā)揮美感與創(chuàng)意的強(qiáng)大感召力，這就需要我們?nèi)フJ(rèn)真思考了。以下，筆者將介紹幾種網(wǎng)頁(yè)外觀中自由造型的常見形式，分析它們整合與變化的手法，綜合其中的構(gòu)造規(guī)律，或許從中能給我們的創(chuàng)作帶來(lái)某些靈感與啟發(fā)。

一、仿物風(fēng)格

仿物風(fēng)格的外觀設(shè)計(jì)是將頁(yè)面的視覺元素，包括內(nèi)文、圖片、視頻等都安置在物件模型或模型組合中，常見的模型有包裝盒、電唱機(jī)、顯示器、臺(tái)歷等。這些設(shè)計(jì)巧妙地處理了外包裝與信息承載之間的關(guān)系，特別是在一些仿電器外觀的頁(yè)面中，設(shè)計(jì)師總喜歡巧妙地將網(wǎng)頁(yè)功能按鈕與模型結(jié)構(gòu)性按鈕結(jié)合起來(lái)，如調(diào)音臺(tái)刻度盤、手機(jī)按鍵等往往就是嵌藏網(wǎng)頁(yè)導(dǎo)航區(qū)域的玄機(jī)處，既人性化又富趣味性。仿物式外觀的模型大部分是帶立體效果的（如圖1）。這立體的表現(xiàn)，一靠結(jié)構(gòu)的縱深度描繪，二靠光的合成，兩者的共同作用模擬出真實(shí)空間中的形體，從觀感上來(lái)講，一開始就能給瀏覽者貼近生活的可親印象，極具吸引性。立體物造型的外觀在制圖時(shí)是非常注重細(xì)節(jié)描繪的，形的刻畫、色彩的變化及質(zhì)感的處理時(shí)常都要照顧周全，可見，寫實(shí)能力從中起到非常重要的作用。另一方面，我們看到的立體模型是置身于一定虛擬環(huán)境的，背景的處理必然與非三維的效果有所不同，它不是簡(jiǎn)單的襯底，而是一個(gè)有空間關(guān)系的場(chǎng)景，光的作用下，場(chǎng)景本身可以顯現(xiàn)明暗變化，物體在其中也會(huì)投射影的效果，因此在設(shè)計(jì)中，我們要提高對(duì)它的重視程度，不可簡(jiǎn)單概念化地對(duì)待。此外，在接近平面的仿物模型中，較具代表性的是包裝盒風(fēng)格（如圖2），它在結(jié)構(gòu)上完全仿造平攤的紙盒印刷稿，雖然布局特殊，但根據(jù)信息量大小能靈活調(diào)整盒子的塊面比例，而且有區(qū)域自然劃分的優(yōu)勢(shì)，所以總體上一般都能保持大方整齊的特點(diǎn)。某些包裝盒式的設(shè)計(jì)在邊沿處還添加了輕微的光影，實(shí)實(shí)在在地增加了一些空間的感覺，這也是用以豐富畫面的一種簡(jiǎn)捷的手法，對(duì)此類造型偏平的物件表現(xiàn)顯得特別有效。

二、方框破形

方框破形的手法，以四方外形為基礎(chǔ)，加上一定的形體剪切或配以圖片進(jìn)行調(diào)整與修飾，使得外輪廓克服單一的四直線加四直角的組合局限，在細(xì)節(jié)上作形的突破，但整體上仍保留方塊的影響。事實(shí)上，它屬于整體歸一而局部變化的處理，作為變化的部分既要發(fā)揮破形的作用，在平淡中尋得新奇意趣，也要注意整體效果的維護(hù)，切忌零碎散亂。方框破形的方法很多，其中用得比較多的有：圖的穿插、按鈕的特殊設(shè)計(jì)、邊緣機(jī)理。圖的穿插（如圖3）是以圖片作為突破點(diǎn)，沖出方形框造出特異的外形，作破形的圖片在處理的時(shí)候，經(jīng)常是摳去背景來(lái)使用，以局部外形的不規(guī)則對(duì)比原直線直角營(yíng)造的整齊與嚴(yán)謹(jǐn)。在這里，被突出的圖片是視覺的焦點(diǎn)部位，所以對(duì)其所占比例、呼應(yīng)關(guān)系等要求都比較高，否則容易有粗糙牽強(qiáng)的感覺。按鈕的特殊設(shè)計(jì)（如圖4），是將處于布局邊緣的按鈕作為變化的對(duì)象，單個(gè)按鈕的形狀可方可圓，又可不規(guī)則地成形，至于成組的按鈕根據(jù)不同的需要，排列上既可呈散點(diǎn)式，也可呈規(guī)律式，它們?cè)诜叫慰蜻吘壣系扔谑且粋€(gè)天窗，面積不大但十分生動(dòng)靈氣，自身精致化的同時(shí)又豐富了大外形。邊緣機(jī)理（如圖5），是在方框邊緣添加機(jī)理效果的手法，將堅(jiān)挺鋒利的直線以非規(guī)則的紋理或筆觸進(jìn)行改造，原本平滑的外形變得或凸或凹，凹凸幅度相對(duì)大的部分也可以起到一定程度的變形作用。我們常見的邊緣機(jī)理有水濺、碎紙、火烤、干筆觸等，它們各有特色，用法靈活，有方便調(diào)整的優(yōu)點(diǎn)。

三、邊框虛化

邊框的虛化，并不等于沒(méi)有邊框，有時(shí)只是潛藏起來(lái)而已。如（圖6）中的頁(yè)面，內(nèi)容只占據(jù)了瀏覽器3/5的份額，沒(méi)有占滿所有的空間。從內(nèi)容的擺放位置看，人的視覺習(xí)慣帶領(lǐng)著我們從菜單的右側(cè)末端垂直往下形成邊線，而主形象下端因?yàn)闆](méi)有具體內(nèi)容，所以也可認(rèn)為是到了頁(yè)面的邊緣了。因此，我們判斷有效的頁(yè)面編排是緊貼左上方對(duì)齊，往下往右2/3處以外的空余部分則屬于背景。由于瀏覽器背景是白色，具體畫面的底也沒(méi)有作色彩的區(qū)別處理，因此視覺上連成一片，網(wǎng)頁(yè)的邊呈虛化的狀態(tài)，它并不出現(xiàn)在畫面，但可以讓觀眾感覺到它的存在。這種隱藏了外邊緣的頁(yè)面設(shè)計(jì)在實(shí)際應(yīng)用中并不少見，其特點(diǎn)是頁(yè)面有效范圍不充滿瀏覽器，內(nèi)容大多居中或往上往左對(duì)齊，與背景間沒(méi)有明確的界線，根據(jù)位置處于邊緣處的各種元素其位置的視覺引導(dǎo)，可聯(lián)結(jié)成虛擬的外輪廓。這種虛化邊框的處理與滿屏的編排在表面效果上似有雷同，但本質(zhì)區(qū)別在于考慮構(gòu)圖時(shí)的版面范圍不同，一個(gè)只占瀏覽器的局部面積，一個(gè)則布滿整個(gè)圖面，它們的空白區(qū)域擔(dān)任著不同的版面職能，頁(yè)面各元素的呼應(yīng)關(guān)系也不一樣，因此，我們不能簡(jiǎn)單地把這兩種布局方法等同起來(lái)。其實(shí)，邊框虛化的處理手法是網(wǎng)頁(yè)特殊技術(shù)條件下的產(chǎn)物，讓屏幕在不同分辨率設(shè)置下瀏覽起來(lái)不會(huì)產(chǎn)生太大差異，但若使用不當(dāng)容易造成排版不完整的感覺，因此，我們?cè)谠O(shè)計(jì)的時(shí)候，應(yīng)該看實(shí)際采取靈活的資源配置手法，不可牽強(qiáng)附會(huì)過(guò)于僵化。

在自由造型網(wǎng)頁(yè)外觀中，除了以上三種常見形式外，其實(shí)還有很多有特點(diǎn)的類型，如半開放式、外形傾斜式等，它們?cè)谠O(shè)計(jì)上沒(méi)有固定的模式，但新意往往隱藏在不經(jīng)意的細(xì)節(jié)變化中。這就需要我們仔細(xì)觀察、善于發(fā)現(xiàn)與學(xué)習(xí)，才能領(lǐng)悟其中的奧妙，掌握其中的技巧。

結(jié)語(yǔ)

網(wǎng)頁(yè)外觀相當(dāng)于網(wǎng)絡(luò)的一張面孔，前衛(wèi)、浪漫還是方正、嚴(yán)謹(jǐn)，都一一體現(xiàn)于此，自由造型生動(dòng)展現(xiàn)了設(shè)計(jì)師的過(guò)人智慧，也淋漓盡致地發(fā)揮了網(wǎng)絡(luò)在信息傳遞中的強(qiáng)大作用。眾所周知，當(dāng)今的網(wǎng)絡(luò)技術(shù)正以高速不斷更新和進(jìn)步，隨之也推動(dòng)了藝術(shù)手法的創(chuàng)新與發(fā)展，可實(shí)現(xiàn)的媒體效果也隨之增多，未來(lái)的網(wǎng)頁(yè)外觀造型必然會(huì)以更豐富多彩的形式展示于眾，開放的心態(tài)、善于學(xué)習(xí)與創(chuàng)新的精神是時(shí)代對(duì)我們的要求，更多更炫目的視覺精彩正翻開著網(wǎng)絡(luò)世界的新篇章。

參考文獻(xiàn)：

[1]梁景紅編著．網(wǎng)頁(yè)設(shè)計(jì)思維．電子工業(yè)出版社，2007年2月．

[2]（韓）姜恩正、黃靜慧著，周欽華譯．設(shè)計(jì)師談成功網(wǎng)頁(yè)設(shè)計(jì)原則．電子工業(yè)出版社，2006年12月．

[3]李樂(lè)山著．人機(jī)界面設(shè)計(jì)．科學(xué)出版社，2004年8月．