網頁設計中排版與布局小基礎

 　　有些人始終認為，網頁最主要是內容，不需要再搞些門面上的東西，還拿出MUD來比 喻。可是，紅花還需要綠葉陪襯。想想，若MUD不只是單純的文本，還有畫面出來， 那麼，它所吸引的何止現在的這些MUD迷呢? 那麼，我所要說的到底是什麼呢?初學者如果能夠了解一些設計上的東西，那麼， 自己的頁面不會顯得亂，自己看了也開心，別人看了也開心，何樂而不為呢?

　　我們的主頁，說到底，只是一個800*600的畫面，那麼，我們要怎麼對它進行安排 才合理呢? 首先，也是最重要的一點，就是先停下創作，先想好一個主題?quot;設 計，是一種有目的的創造"。若在動手之前並不了解自己將要做什麼及要怎麼做， 而只是一味的靠操作PHOTOSHOP的濾鏡而達到一種特效的話，那麼，最終做出來的 東西最多局部看得覺得挺不錯的，但全局就顯得太復雜了。 頁面上的構成，如果要讓別人一眼望去覺得很BEAUTIFUL，這裡面實際上是有很大的學問的。

　　我們先來說說構成，"構成：是將造型按視覺效應、視覺力學和精神力學等原則組成的，具備美好形態的造型"。 構成形式裡，有空間構成(平面構成和立體構成) 和時間構成(靜和動)。 我們的創作，就是要協調這裡面的種種關系，順應視覺 感受，才能夠打動觀看者的視覺，得到我們想要的效果。在這些形形式式裡，都有 著如下的部件： 點：我們一般認為，點是指圓形的，但這是不正確的。只要在空間裡有非常少量的 面積，無法形成一個視覺上感覺的圖形，都是一個點。無論什麼形狀都可以。 線：點集合在一起就形成線。 面：一個平面。 體：一個物體。一般是指物體占據的空間，有三維形狀。

　　那麼，當點、線、面與體集結在一個頁面上時，它們的關系要怎麼協調呢?它們之間都有什麼作用呢?

　　點有集中視線、緊縮空間、引起注意的功能。 兩個點相距不遠而且形狀不等時，一般由小向大看。 近距離的點引起面的感覺。 靈活運用點，可使你的頁面有一些本質上的變化。 當點占據不同的空間時，它所引起的感覺是不同的。

　　(1) 居中引起視覺集中注意 。

　　(2) 上引起下跌落感。

　　(3) 在上左或上右引起不安定感。

　　(4) 下方中點，產生踏實感。

　　(5) 左下右下，增加了動感。

　　為什麼會這樣呢?因為人的視覺，都是經過對生活的感覺都得來的。 在下方的東西，一般聯想到大地。 在上方的東西，一般聯想到浮雲。線、面、體亦然。

　　線，又分為直線和曲線。直線：給人以速度，明確而銳利的感覺，具男性感。曲線，則優美輕快，富於旋律。曲線的用法各異，需結合自己的需要。 而直線又分為斜線、水平線及垂直線。水平線代表平穩、安定、廣闊，具踏實感。垂直線則有強烈的上升及下落趨勢，可增加動感。斜線，一般我沒有怎麼使用，因為它造成視覺的一種不安定。

　　人們每看到一個東西，都試圖用橫直來分析，斜、歪是人們所不願意見到的，但 適當運用部梢源锏揭恍┨厥庑Ч ?這個要靠個人的感覺。 面，指的是二度空間裡的形。 面又分為幾何形和任意形，我個人比較喜歡任意形，因為它往更具人情味。 幾何形使人有一些機械感，但是，每一個圖形裡都會要用到幾何形，請看它們各代表什麼：

　　(1) 圓形：運動及和諧美

　　(2) 矩形：單純而明確，穩定

　　(3) 平行四邊形：有向一方運動的感覺。

　　(4) 梯形：最穩定，令人聯想到山。

　　(5) 正方形：穩定的擴張。

　　(6) 正三角形：平穩的擴張。

　　(7) 倒三角形：不安定，動態及擴張、幻想。

　　我們在日常生活中所看到的東西，都是由於形與形、圖與底的相互關 系。圖形之間，圖底之間，正由於對比產生差異而被我們所感知所接 受。 圖與底的視差越大，圖形越清晰，對視覺的沖擊力越大。 那麼，平面上 有那麼多的東西，我怎麼才能夠確定它是否是最主要的呢?請看：易於 成為"視覺中心"的條件：

　　(1) 居於畫面中心。

　　(2) 垂直或水平的比傾斜更易成為中心。

　　(3) 被包圍。

　　(4) 相對於其它圖形較大的。

　　(5) 色感要素強烈。

　　(6) 熟悉的圖案，如果這件東西我們很熟，則一定會以它為焦點。

　　可以把自己認為最主要的東西做大一點，突出一點，色彩鮮艷一點，其它的東西小 而且色調不要那麼鮮明，以免搶了主題的"風頭"。 注意：圖與底之間的關系是很重要的。 如果我們確定了背景，再確定主題，在做頁面時不注意而將圖與底的關系設置為 1：1，那麼，我們也許發現，底與圖的力場爭奪非常激烈，即有時底被我們認為是圖。它們之間的關系只是相對，而非絕對。一般來說，底要大於圖，而圖要鮮於底。

　　一副圖，我們怎樣才認為它是美的呢?這涉及到形、聲、色的有機結合，打動視知 覺，使觀者產生美的共鳴。一般來說，有如下幾點： (1) 穩定性：我們的視知覺總是試圖找一個平衡點，若找不到則產生混亂。 (2) 對稱性：相應的部位等量，易產於統一的秩序感，但比較單調，可采用增加 局部動勢的方法，以取得鮮明、生動的效果。 (3) 非對稱平衡：可以平衡為基礎，調整尺寸形態結構。或者以形態各異的形， 經視覺判斷，放置在確定的位置，以得到預想的平衡。這個和個人的審美有關系。

　　事實上，通過上述的一些方法，我們主要是為了創造秩序，使相互的東西能夠在 沒有互相干擾的系統中起作用。 混亂與秩序之間的對照喚起了我們的視知覺，我們於是通過平衡、比例、節奏、 協調，在迷亂中建立秩序，形成我們自己的風格。 形成自己作品的獨特氣質。 而如果注意自己作品的律動性，即旋律性，可通過重要一個基調實現，對於整個 頁面應該有畫龍點晴之效。 但要清楚的認識到，並非所有的節奏都產生律動性，有時候，聽到一些音樂時覺 得它是垃圾，原理是一樣的。

　　旋律要有情感因素，富於變化而又統一的節奏和總體的和諧。 流動的旋律，活潑、明快、自由、變化、生機勃勃。 也要注意到，反復、周而 復、單純或漸變重復雖給人以視覺印象，但過於單調會使人疲勞並產生厭煩。必須 在反復中尋找動與靜的完美結合，尋求單純與復雜、細膩與奔放、定向與不定向之 間的對比，在構成方式上多探索，多借鑒，求新求變。 以下介紹這方面的方法：

　　(1) 同質要素的統一，這個比較容易，只要自己多摸索就行了。

　　(2) 類似要素統一，大小類似，色明度類似就可以了。

　　(3) 不一樣的要素的統一，由於形成對比，因此一般會形成對比，造成零散、 不統一的感覺，要令它產生節奏，一般是在要形成強烈焦點時才使用。 總之，我們要記住這一點： 在相同中求變化，在不同中求統一，使大部分相同，使小部分相異，可取得統一 又富有變化的感覺。 但是，也要注意差異的大小問題。差異是對規律進行突破及形成對比，富於變 化。但是，差異過大，易失去總體協調，過小易被規律淹沒，就注意把握尺度， 以不失整體觀感的適度對比為准。

　　我們怎樣才能夠讓別人覺得我們的圖片很協調呢?方法如下：

　　(1) 保留一個相近或近似的因素，自然的過渡

　　(2) 相互滲透

　　(3) 利用過渡形

　　在對比方面，必須有周密的編排，具體如下：

　　(1) 方向對比 在基本有方向的前提下，大部分相同，小部分不同可形成對比

　　(2) 位置對比 在頁面的安排不要太對稱，以避免平板單調。應在不對稱中找到 均衡，由此得到疏密對比。

　　(3) 虛實對比 事實上，虛與實是同等重要的，畫黑則白出，造圖則底成。應注 意雙方平衡。

　　(4) 隱顯對比 圖與底比較，明度差大者顯示，明度差小者隱藏。顯與隱相輔相 成，能造成豐富的層次感。

　　在空間感方面，可以以點、線、面的排列，形成不同的空間感。 如以下方法：

　　(1) 重疊

　　(2) 大小

　　(3) 傾側，旋轉，深度

　　(4) 彎曲

　　(5) 明度

　　(6) 投影

　　(7) 透視