網頁設計中排版與佈局小基礎|網頁設計知識,理論,色彩,技巧,網頁設計,webdesign|ArtBei.com

當前位置：設計首頁 >> 網頁 >> 正文 >> 網頁設計中排版與佈局小基礎

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

-- 網頁設計中排版與佈局小基礎
有些人始終認為，網頁最主要是內容，不需要再搞些門面上的東西，還拿出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）透視

相關鏈接：網頁設計知識,理論,色彩,技巧,網頁設計,webdesign

下一篇：網頁中的圖像格式

雜誌封面設計圖片003	雜誌封面設計圖片002	雜誌封面設計圖片001	DAF2005（美國地區）獲獎作品
圖形招貼設計圖片(COPYRIGHT	shirly kasmara 封面設計圖片	Robert Mangrobang 封面設計	Angela Mercado 雜誌設計
Matt Sams 雜誌封面設計圖片	David Tobin 雜誌封面設計圖	Scott Shultz 雜誌封面設計圖

網頁設計中排版與佈局小基礎,網頁設計知識,理論,色彩,技巧