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

??有些人始終認為，網頁最主要是內容，不需要再搞些門面上的東西，還拿出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）?透視?