在過去傳統的網頁外觀設計中，方形輪廓基本是占主導地位的，但隨著技術的進步，如今出現了不少造型各異的新樣式，帶給我們視覺驚喜的同時也傳遞了新的設計觀念。對于這種自由造型的網頁外觀設計，文章從幾個層面分析了它的特點，并介紹了主要的表現形式，希望通過探索其中的方法和思路，激發出我們的靈感和新的創造力。

——題記

隨著計算機技術的飛速發展，網頁設計風格日趨多樣化和個性化，新的觀念、新的手法不斷涌現出來。根據主題表現的需要，某些追求豐富視覺效果、采用大量圖片文件的版面出現在我們的視野中，這些或動或靜的圖片經過靈活剪裁、合理布局創造出各種新穎的形式。其中較引人注目的是網頁外觀的自由造型設計。這種設計打破單一方形外框的格局，形態生動，特色鮮明，它的出現，豐富了作品的視覺表現力，為網絡世界增添了多彩的一筆，值得我們去深入研究與探討。

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

自由造型的外觀設計是有其自身特點的，主要體現在意念傳達、題材適應、版面顯示及造型規律幾個方面。

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

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

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

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

自由造型的外觀設計在手法上是善于突破傳統的，但這種突破并不天馬行空，技術要素與題材適應的約束總貫穿于整個創作過程，在一定的限制條件下如何發揮美感與創意的強大感召力，這就需要我們去認真思考了。以下，筆者將介紹幾種網頁外觀中自由造型的常見形式，分析它們整合與變化的手法，綜合其中的構造規律，或許從中能給我們的創作帶來某些靈感與啟發。

一、仿物風格

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

二、方框破形

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

三、邊框虛化

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

在自由造型網頁外觀中，除了以上三種常見形式外，其實還有很多有特點的類型，如半開放式、外形傾斜式等，它們在設計上沒有固定的模式，但新意往往隱藏在不經意的細節變化中。這就需要我們仔細觀察、善于發現與學習，才能領悟其中的奧妙，掌握其中的技巧。

結語

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

參考文獻：

[1]梁景紅編著．網頁設計思維．電子工業出版社，2007年2月．

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

[3]李樂山著．人機界面設計．科學出版社，2004年8月．