網(wǎng)頁(yè)排版與布局精編版

1、 網(wǎng)頁(yè)設(shè)計(jì)擁有傳統(tǒng)的媒體的不具有的優(yōu)勢(shì)，例如 是能夠聲音、圖片、文字、動(dòng)畫(huà)相結(jié)合，營(yíng)造一個(gè)富 有生氣的獨(dú)特世界，同時(shí)它擁有極強(qiáng)交互性，使使用 者能夠參與其中，同設(shè)計(jì)者相交流。但是最基本的模 式還是平面設(shè)計(jì)的內(nèi)容，也就要考慮形式美的內(nèi)容。 所以現(xiàn)在強(qiáng)調(diào)網(wǎng)頁(yè)設(shè)計(jì)的創(chuàng)造，表現(xiàn)在對(duì)頁(yè)面的 布局上，具體說(shuō)就是體現(xiàn)在頁(yè)面的形式美方面。就是 通過(guò)頁(yè)面的合理安排，例如文字的條理清楚、流暢、 整體，使形式美得到體現(xiàn)。 1.1.一個(gè)用戶首次進(jìn)入網(wǎng)站首頁(yè)能清楚知道的問(wèn)題：一個(gè)用戶首次進(jìn)入網(wǎng)站首頁(yè)能清楚知道的問(wèn)題： a,這是什么地方； b,這里有什么； c,我在這里可以做些什么 ； d,我為什么要呆在這里 2.2.用

2、戶不做最佳選擇用戶不做最佳選擇, ,只要滿意，只要滿意， 原因：a,太匆忙 b,即使選錯(cuò),代價(jià)也不大 c,權(quán)衡選擇未必能增加勝率 d,猜測(cè)更省勁 3.3.我們會(huì)把注我們會(huì)把注. .意力集中于符合下列條情況之一的詞語(yǔ)或短語(yǔ)意力集中于符合下列條情況之一的詞語(yǔ)或短語(yǔ): : a,與手頭工作有關(guān)的； b,滿足當(dāng)前的個(gè)人興趣的； c,對(duì)神經(jīng)系統(tǒng)有沖擊力的詞語(yǔ),如免費(fèi),甩賣(mài)等,及自己的名字. 設(shè)計(jì)前的一些思考: 網(wǎng)頁(yè)上盡量不出現(xiàn)使人費(fèi)神琢磨的東西 2. 設(shè)計(jì)的網(wǎng)頁(yè)應(yīng)一目了然 3. 設(shè)計(jì)的網(wǎng)頁(yè)應(yīng)便于瀏覽,而非閱讀 4. 利用慣例：利用慣例：慣例是因?yàn)橛行Ф蔀閼T例的,慣例 的廣泛采用可使用戶毫不費(fèi)勁地在網(wǎng)站暢

3、游 制作便于瀏覽頁(yè)面的一個(gè)大敵就是視覺(jué)干擾制作便于瀏覽頁(yè)面的一個(gè)大敵就是視覺(jué)干擾, ,它它 包含兩類(lèi)包含兩類(lèi): a,混亂頁(yè)面主次不清,所有的東西都引人注目 b,背景干擾 一、網(wǎng)站的層次結(jié)構(gòu): 1.1.把頁(yè)面分割成清晰明確的不同區(qū)域很重要，把頁(yè)面分割成清晰明確的不同區(qū)域很重要，因?yàn)?可使用戶迅速判斷出哪些區(qū)域應(yīng)重點(diǎn)看,哪些可以放 心地忽略。 2.創(chuàng)建清晰直觀的頁(yè)面層次結(jié)構(gòu);越重要越要突出;邏 輯相關(guān)的內(nèi)容視覺(jué)上也應(yīng)該相關(guān) 3.用嵌套的方式形象地顯示從屬關(guān)系 二.網(wǎng)頁(yè)的布局形式 整個(gè)頁(yè)面可以分為幾個(gè)部分，每個(gè)部分有不同的功 能，也能體現(xiàn)不同的形式，中間的部分一般是最大的， 因?yàn)樗休d著主要的信息，

4、使用者主要就是看中間這個(gè) 部分的內(nèi)容， 有些網(wǎng)站也為了出新意把整個(gè)頁(yè)面進(jìn)行任意劃分， 特別是個(gè)人網(wǎng)頁(yè)，例如把整個(gè)頁(yè)面平分為左右兩個(gè)部分， 但是這樣會(huì)讓人不著重點(diǎn)，還有的框架用得太多，影響 了頁(yè)面的整體性 1.骨骼型 網(wǎng)頁(yè)版式的骨骼型是一種規(guī)范的、理性的分割方 法，類(lèi)似于報(bào)刊的版式。常見(jiàn)的骨骼有豎向通欄、 雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和 四欄等。一般以豎向分欄為多。這種版式給人以 和諧、理性的美。幾種分欄方式結(jié)合使用，既理 性、條理，又活潑而富有彈性。 題頭加三欄式的設(shè)計(jì)方式：題頭就是在最上行，左邊是網(wǎng)站 標(biāo)題圖案，右邊是正文。 上下水平設(shè)計(jì)方式，它有適合信息量大，維護(hù)方便的特點(diǎn)，

5、適用于商業(yè)網(wǎng)站。 網(wǎng)站導(dǎo)航的設(shè)計(jì)網(wǎng)站導(dǎo)航的設(shè)計(jì)清晰,簡(jiǎn)潔,一致 導(dǎo)航的意義導(dǎo)航的意義a,幫助用戶尋找他要的東西b,告訴用戶他在 哪里c,更好的展現(xiàn)網(wǎng)站的內(nèi)容d,使瀏覽者對(duì)網(wǎng)站有信心 固定導(dǎo)航應(yīng)包括下列最常用的固定導(dǎo)航應(yīng)包括下列最常用的5 5個(gè)元素個(gè)元素:1,網(wǎng)站標(biāo)識(shí)2,欄 目3,公共服務(wù)(幫助,網(wǎng)站地圖,關(guān)于我們,聯(lián)系我們等)4, 返回主頁(yè)5,搜索 2.滿版型 頁(yè)面以圖像充滿整版。主要以圖像為訴求點(diǎn)，也可將部分文字 壓置于圖像之上。四邊出血，向外擴(kuò)張，適合年輕人的口味。 3.分割型 把整個(gè)頁(yè)面分成上下或左右兩部分，分別安排圖片和文案。 分割線上的壓置的圖片既打破了頁(yè)面分割的生硬感，也使自 身得

6、到強(qiáng)調(diào)。左邊框上的小標(biāo)簽?zāi)它c(diǎn)睛之筆。 4.中軸型 沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的 排列。水平排列的頁(yè)面給人穩(wěn)定、平靜、含蓄的感覺(jué)。 垂直排列的頁(yè)面給人以舒暢的感覺(jué)。 5.曲線型 圖片、文字在頁(yè)面上作曲線的分割或編排構(gòu)成，產(chǎn)生 韻律與節(jié)奏。網(wǎng)站的導(dǎo)航標(biāo)題沿圖形弧線排列。 6.傾斜型 頁(yè)面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或 強(qiáng)烈的動(dòng)感，引人注目。 文字水平排列，將畫(huà)框斜置，產(chǎn)生對(duì)比與動(dòng)勢(shì)，印象被加強(qiáng)。 7.對(duì)稱型 對(duì)稱的頁(yè)面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。 以相對(duì)對(duì)稱手法制作的導(dǎo)航頁(yè)面。 8.焦點(diǎn)型 焦點(diǎn)型的網(wǎng)頁(yè)版式通過(guò)對(duì)視線的誘導(dǎo)，使頁(yè)面具有強(qiáng)烈的視覺(jué) 效果。

7、通過(guò)離心的版式，清晰地傳達(dá)出網(wǎng)站提供的服務(wù) 9.三角型 網(wǎng)頁(yè)各視覺(jué)元素整體看為正三角形的構(gòu)圖，主體形象穩(wěn)定而突出 10.自由型 自由型的頁(yè)面具有活潑、輕快的風(fēng)格 引導(dǎo)視線的圖片以散點(diǎn)構(gòu)成，傳達(dá)隨意、輕松的氣氛 但是作為個(gè)人網(wǎng)站，就不一定要采用這些方式，完 全可以更新穎、更藝術(shù)些。什么又算是靈活多樣？ 怎樣做到新穎、藝術(shù)呢？沒(méi)有一個(gè)模式去套，它需 要你去領(lǐng)悟、去創(chuàng)新。 留白 我們應(yīng)該在網(wǎng)頁(yè)中通過(guò)留白的作用，使整個(gè)內(nèi)容排布 得松緊有度，給人以跌宕起伏之感。 把整個(gè)屏幕都塞得滿滿的，讓人感覺(jué)不亂也很擠。網(wǎng) 適當(dāng)?shù)亓舭?，可以提高網(wǎng)頁(yè)的視覺(jué)效果和藝術(shù)感染力。 留白既可以給人帶來(lái)心理上的松弛，也可以給人帶

8、來(lái) 緊張與節(jié)奏。利用留白的體量感來(lái)使頁(yè)面布局平衡， 在一種不平衡中營(yíng)造平衡，這樣就會(huì)使頁(yè)面生動(dòng)起來(lái)。 “破破” 這個(gè)“破”是指打破拘束、打破平衡、增添動(dòng) 感的手法（不是動(dòng)畫(huà)的動(dòng)感）。有如國(guó)畫(huà)中畫(huà)蘭 花“一撇二交三破”，每片葉子都朝上豎著當(dāng) 然不好看了，這一“破”就是其中的道理。 簡(jiǎn)單簡(jiǎn)單 “美就是簡(jiǎn)單”，平淡之中才顯真色。過(guò)于復(fù)雜， 過(guò)于花哨，自然就偏離了美的軌道，比如過(guò)多地使 用特效，過(guò)分眩目的圖案，過(guò)于復(fù)雜的文字版塊排 列等。 精簡(jiǎn)文字生動(dòng)的有活力的作品是簡(jiǎn)潔的 不要用文字去填充空間 減掉那些沒(méi)有用的文字的好處： a,減少了頁(yè)面的干擾； b,使有用的內(nèi)容更突出； c,使頁(yè)面更短,無(wú)需滾屏就可以一眼看到更多的東西 巧妙地運(yùn)用動(dòng)態(tài)元素。以橫貫頁(yè)面的長(zhǎng)條色塊統(tǒng)一畫(huà)面， 圖片安排隨意，疏密有致，使整體風(fēng)格既統(tǒng)一又有變化。 在塊狀組合 結(jié)構(gòu)中，如 圖片太多， 則無(wú)法突出 重點(diǎn)。這個(gè) 頁(yè)面通過(guò)改 變圖片的面 積，有效地 分開(kāi)了 圖片與文字穿插編排，形成散點(diǎn)組合。運(yùn)用線條的分 割、文字的群組化以及單一的背景色形成整體 多幅圖片使水平垂直線規(guī)律地等量分割，獲得了理性與秩序的美。 以水平分割為主的頁(yè)面，右上角與左下