網頁設計布局心得

網頁設計布局心得   設計網頁不僅僅是把相關的內容放到網頁中就行了,它不要求網頁設計者能夠把這些內容合理的安排,給瀏覽者以賞心悅目的感覺,這樣才能達到內容與形式完美的結合,增強網站的吸引力。因此說,設計網頁不但是一項技術性的工作,它還是一項藝術性的工作,要求設計者有較高的藝術修養和審美情趣,這樣才能設計出高水平的網頁來。網頁的排版布局就是決定你的網站美觀與否的一個重要方面,通過合理的有創意的布局,你可以把文字、圖像等內容完美的展現在瀏覽者的面前,而布局的好壞在很大程度上取決於你的藝術修養水平和創新能力。然而這並不是說網頁的布局無章法可循,完全是靈感之作,它也有自己內者的規律和要求,你只要按照這些要求去做,再加上你的奇特創意,一個吸引人的網頁布局是會出現的。 一、網頁排版布局的步驟 1.構思 根據網站的內容整體風格,設計版面布局。你可以參考其他的優秀的網站,調用自己的各種知識儲備,特別是藝術方面的,在大腦中不斷地醞釀、碰撞,往往不經意就有閃光的思想出現。這時你就要抓緊時間把它變成文字的東西,用筆在紙上粗略的勾畫出布局的輪廓,不要講究細節,只要有一個輪廓就行。當然你也可以有多種想法,盡量都把它們畫出來,然後再比較,採用一種比較滿意的方案。 2.初步填充內容 這一步就要把一些主要的內容放到網頁中,例如網站的標誌、廣告條、菜單、導航條、計數器等,要注意重點突出,把網站標誌、廣告條、菜單放在最突出、最醒目的位置,然後再考慮其它的元素的放置。 3.細化 在將各主要元素確定之後,下面就可以考慮文字、圖像、表格等頁面元素的排版布局了。在這一步,你可以用網頁編輯工具把草案做成一個簡略的網頁,當然對每一個元所佔的比例也要有一個詳細的數字,以便以後修改。 經過以上幾步之後,相信你的網頁布局已經初具規模了,讓別人看一下,給你提些建議,再不斷修改,一個很有特色的網頁就要浮出水面了。 二、網頁排版布局的原則 上面我們簡要的介紹了設計網頁布局的步驟,事實上,在構思和設計的過程中,你還必須要掌握以下的幾項原則: 1.平衡性 一個好的網頁布局應該給人一種安定、平穩的感覺,它不僅表現在文字、圖像等要素的空間佔用上分布均勻,而且還有色彩的平衡,要給人一種協調的感覺。 2.對稱性 對稱是一種美,我們生活中有許多事物都是對稱的,但過度的對稱就會給人一種呆板、死氣沉沉的感覺,因此要適當的打破對稱,製造一點變化。 3.對比性 讓不同的形態、色彩等元素相互對比,來形成鮮明的視覺效果。例如黑白對比,圓形和方形對比等,它們往往能夠創造出富有變化的效果。 4.疏密度 網頁要做到疏密有度,即平常所說的「密不透風,疏可跑馬」。不要整個網頁一種樣式,要適當進行留白,過用空格,改變行間距、字間距等製造一些變化的效果。 5.比例 比例適錄,這在布局中非常重要,雖然不一定都要做到黃金分割,但比例一定要協調。 三、常見的布局樣式 1.T字型 這種布局最為常見,就是指頁面最上方是廣告條,頁面下方左邊是菜單,右面顯示頁面內容,整體上類似英文字母「T」,所以我們稱之為T字型布局。這種布局條理清晰、主次分明,非常適合初學者學習,但略有點呆板。 2.口字型 這種布局類似一個方框,上下是廣告條,左面是菜單,右面是友情鏈接,中間是網頁內容,網頁布局緊湊、信息豐富,但四面封閉,給人一種壓抑的感覺。 3.對稱型 整個網頁呈上下或左右對稱布局,非常醒目,如果兩部分搭配協調,網頁的視覺效果非常好,很有衝擊力。 4.海報型 這種布局就像我們平時見到的海報一樣,中間是一幅很醒目、設計非常精美的圖片,周圍點綴著一些圖片和文字鏈接。這種設計常用直一些時尚類和公司的首頁,非常吸引人。但大量的運用圖片導致網頁下載速度很慢,而且擔供的信息量較少。
推薦閱讀:

Reaktor —— 用Core Cell搞定一切
測試 Github 作為設計協作的工具
校園文化建設之張驗兵標識校園道路導視系統解析
突破性思維與色彩的碰撞
【設計欣賞】50款國外新款創意名片設計(轉)

TAG:網頁設計 | 設計 | 布局 | 心得 | 網頁 |