網頁藝術設計點線面的版式設計

梁日升

網站藝術設計中，需要解決的主要問題之一就是網頁的版式設計。可以說，版式設計處理得當與否是網頁界面設計視覺展示的關鍵。所謂網頁版式設計，即是在有限的屏幕空間里將網頁設計的元素進行組合構成，將頁面設計構成要素：文字、圖形、線條和色彩諸因素，根據特定內容的需要進行組合排列，并運用造型要素及網頁版式設計原理，把構思與計劃通過視覺形式的語言表達出來。網頁版式設計，是制造和建立有序版面的理想方式。版式設計是網頁藝術設計中不可缺少的設計內容之一，它不僅在二維的一面上發揮其功用，而且在三維的立體和四維的空間中也能感覺到它的藝術效果。網頁的版式設計應該從整體出發把握網站的全局，確保設計出來的網站能具有風格統一、形式統一、色彩統一的整體高度統一性。

整站的頁面版式編排設計，要求各個頁面之間緊湊的聯系起來，特別是要處理好頁面之間和頁面內的布局與形式的關系。為了讓網站達到最佳的瀏覽和視覺表現效果，應反復推敲其整體版式設計結構的合理性，讓瀏覽者有最佳的瀏覽體驗。

網站頁面的版式設計雖然說是由傳統的平面設計延伸出來的，但是又不完全等同于一般的平面設計，版式設計是通過文字與圖形的空間組合，表達出具有美感的視覺效果與藝術氣息。網頁藝術設計過程中，為了將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面版式設計的內容，體現內容的豐富意義。靈活運用對比與調和、對稱與平衡、節奏與韻律及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感。如對稱原則在頁面設計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現內容往往會達到比較好的效果。點、線、面作為視覺語言中的基本元素，巧妙的互相穿插、互相襯托、互相補充構成最佳的頁面效果，充分表達出完美的設計意境。這些巧妙的組合搭配都是網頁版式設計中的形式和基本原理，同時網頁的版式設計更加注重界面的交互設計，而傳統的平面設計主要是視覺傳達加信息傳遞為主，他們之間最本質的區分是，傳統平面設計沒有深刻的交互意識，而網頁藝術設計注重界面人與界面的對話，信息互動和注重交互設計以及交互意識，在設計思維設計執行上有一定的差別。

1.網頁版式設計的點、線、面

網頁藝術設計是以視覺傳達為基礎的，主要是傳達網站的各種信息，使網站的頁面設計更加符合人機交互設計學和頁面變得更加符合人的視覺瀏覽習慣，感官上給人一種直接、美觀、合理的視覺感受也是網站要表現的內容之一。在人們長期的實踐和認識中我們發現，任何形式的組合都離不開點、線、面的構成，同樣，網頁的版式設計也是由點、線、面、構成的視覺空間要素。點、線、面、在網頁版式設計中扮演者致關重要的作用，不同的點、線、面組合會帶來不一樣的心理感受，也可以體現不同的情感訴求，點、線、面組合關系，影響著頁面版式的風格以及網站的主題，它是頁面造型設計的基礎，也是構成網頁版式設計的基本形態元素。

2.版式設計的點

點表示位置，沒有長度沒有寬度，是最小的單位，在網頁版式設計中，點是在對比中存在的一個相對的概念。例如：整個頁面版式設計中，一個標志、一張圖片、一個文字、一個連接按鈕等都可以稱之為點。點的形狀也是改變的，不一定是圓形的，現實中的點是各式各樣的，我們可以劃分為規則和不規則兩類，嚴謹有序的點一般是圓點、方點、三角點；不規則的點形狀沒有規則，一般多是異形。自然界中的任何形態，只要縮小到一定程度，都可以產生不同形態的點。

網頁藝術設計中，點在頁面版式組合的時候，形狀、大小、位置、聚集、發散等不同的排列方式會給瀏覽者帶來不同的心理感受和視覺沖擊力，當頁面上只有一個點的時候，瀏覽者的視線往往就只專注一個點上，這個時候，這個點就變成了整個頁面中的視覺焦點，也是力的中心。如果頁面空間中有兩個大小和形狀一樣的點，并處在兩個不同的位置時，頁面中的張力作用就連接這兩個點的連線上，在視覺上也會產生連續的效果。當兩個點的大小不同時，即使形狀不一樣，大的點首先能引起我們的注意，但是我們的視覺流程會隨之馬上轉移到小的點。當頁面空間中有三個點的時候，不管點所處在畫面的任何地方，點的視覺表現力就出現一個三角形的形狀，給人一種穩固的視覺感受。在網頁藝術設計頁面中，點的運用的是最常見的組合形式。

3.版式設計的線

線是點移動的軌跡，沒有寬度和厚度，具有長度和位置，這個是在幾何學當中對線的定義，在網頁版式設計中，線是有寬度和厚度的，只有這樣才可以表現出線的形象。

線的類型比較多，我們常見的有直線、曲線、斜線等。在網頁版式設計中，隨著線自身的變化，給瀏覽者帶來心理感受是不同的。一般來說，直線往往象征著快速、速度、力度、穩定等，直線中的水平線則顯得比較平和、安靜、會讓讓人聯想到平靜的湖面或者消失在我們視線的海平面；垂直的直線可以讓人聯想到電線桿、高聳的建筑物、樹立起來的柱子，給人一種直立、挺拔的感覺。網頁版式設計中可以運用直線傳達出飛速、傳遞的心理感受。曲線在頁面版式設計中，有時候宛如一條小溪，緩緩流淌在整個畫面當中，自然而富有彈性，它可以象征著女性的柔美、優雅、也可以給人一種很溫和、豐滿的感覺。斜線一般都可以給人一種不穩定的感覺，有起飛、起跑的架勢，通常都傳達出一種速度感。

線的大小粗細不同、位置方向不同、曲直形態不同、所表達的情感訴求和視覺感受也不一樣。掌握和了解線在頁面中產生的各種情感聯想，對網頁的版式設計有很大的意義。

4.版式設計的面

面是線的連續移動到最后而形成的，面具有長度、寬度，但沒有厚度、面在頁面版式設計常常出現，可以說，版式設計的構成離開了不面的組合。面也有規則的面和不規則的面，一般認為，方形的面和圓形的面是典型的規則面， 這兩種面相加或者相見可以產生無數個多樣的面；沒有規則的面，沒有規律可以遵循，一般很難去判定是屬于哪一張面。不同面的形態的面在視覺上具有不同的心理作用和情感表達，在網頁版式設計當中，規則的面它具有簡潔明了、規則有序、平穩牢固的感覺；不規則的面則是具有輕松、活躍、柔軟、自由的感覺。有效合理的處理頁面版式設計面構成的關系，可以給整個頁面充滿美感、富有藝術氣息的網頁設計頁面。不同塊面大小和色調不一的面，使畫面產生動感、活躍的視覺感受。水平、垂直和等距離的面，使畫面產生了穩定、單一的視覺感受。平整有序等距離擺放的面，在畫面中顯得規整、單調，盯著畫面中的塊面也會產生流動的錯覺。