《網(wǎng)頁美工》課件-第5章 網(wǎng)頁設計中的排版與布局

網(wǎng)站的整體風格及其創(chuàng)意設計是站長們最希望掌握，也是最難以學習的。難就難在沒有一個固定的程式可以參照和模仿。當給出一個主題，任何兩人都不可能設計出完全一樣的網(wǎng)站。當人們說：“這個站點很cool，很有個性！”那么，是什么讓讀者覺得很cool呢？它到底和一般的網(wǎng)站有什么區(qū)別呢？可以從以下幾個方面討論：第5章網(wǎng)頁設計中的排版與布局5.1網(wǎng)頁設計風格與創(chuàng)意5.1.1網(wǎng)站風格概述風格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。風格是獨特的，是彼此之間的區(qū)別之一?；蛘呱剩蛘呒夹g，或者是交互方式，能讓瀏覽者明確分辨出網(wǎng)站的獨有性。風格是有人性的。通過網(wǎng)站的外表、內(nèi)容、文字、交流可以概括出一個站點的個性，情緒。5.1.2樹立網(wǎng)站風格風格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。1.如何樹立網(wǎng)站風格⑴確信風格是建立在有價值內(nèi)容之上的。一個網(wǎng)站有風格而沒有內(nèi)容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。首先必須保證內(nèi)容的質量和價值性。⑵需要徹底搞清楚希望站點給人的印象是什么。⑶在明確網(wǎng)站印象后，開始努力建立和加強這種印象。2.運用創(chuàng)意創(chuàng)意(idea)是網(wǎng)站生存的關鍵。這一點相信大家都已經(jīng)認同。然而作為網(wǎng)頁設計師，最苦惱的就是沒有好的創(chuàng)意來源。

logo是徽標或者商標的英文說法，起到對徽標擁有公司的識別和推廣的作用。網(wǎng)絡中的徽標主要是各個網(wǎng)站用來與其它網(wǎng)站鏈接的圖形標志，代表一個網(wǎng)站或網(wǎng)站的一個板塊。5.2.1作用

1.LOGO是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標志和門戶。

2.LOGO是網(wǎng)站形象的重要體現(xiàn)。

3.LOGO能使大眾便于選擇。5.2網(wǎng)頁Logo設計5.2.2國際規(guī)范為了便于INTERNET上信息的傳播，一個統(tǒng)一的LOGO國際標準是需要的。實際上已經(jīng)有了這樣的一整套標準。其中關于網(wǎng)站的LOGO，目前有三種規(guī)格：

1.88*31這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格.

2.120*60這種規(guī)格用于一般大小的LOGO。

3.120*90這種規(guī)格用于大型LOGO。5.2.3設計流程1.調(diào)研分析標志不僅僅是一個圖形或文字的組合，它是依據(jù)企業(yè)的構成結構、行業(yè)類別、經(jīng)營理念，并充分考慮標志接觸的對象和應用環(huán)境，為企業(yè)制定的標準視覺符號。

2.要素挖掘要素挖掘是為設計開發(fā)工作做進一步的準備。3.設計開發(fā)有了對企業(yè)的全面了解和對設計要素的充分掌握，可以從不同的角度和方向進行設計開發(fā)工作。4.標志修正提案階段確定的標志，可能在細節(jié)上還不太完善，人們經(jīng)過對標志的標準制圖、大小修正、黑白應用、線條應用等不同表現(xiàn)形式的修正，使標志使用使更加規(guī)范，同時標志的特點、結構在不同環(huán)境下使用時，也不會喪失，達到統(tǒng)一、有序、規(guī)范的傳播。5.2.4制作工具和方法目前并沒有專門制作LOGO的軟件，其實也并不需要這樣的一種軟件。平時所使用的圖像處理軟件或者加上動畫制作軟件（如果要做一個動畫的LOGO的話）都可以很好地勝任這份工作，如FIREWORKS、PHOTOSHOP、EasyGIFAnimator等。5.2.5良好的條件一個好的LOGO應具備以下的幾個條件，或者具備其中的幾個條件：

1.符合國際標準

2.精美、獨特

3.與網(wǎng)站的整體風格相融

4.能夠體現(xiàn)網(wǎng)站的類型、內(nèi)容和風格

5.在最小的空間盡可能的表達出整個網(wǎng)站、公司的創(chuàng)意，精神等

LOGO的應用一直是CIS導入的基礎和最直接的表現(xiàn)形式，其重要性是不言而喻的，

通過對標識的識別、區(qū)別、引發(fā)聯(lián)想、增強記憶，促進被標識體與其對象的溝通與交流，從而樹立并保持對被標識體的認知、認同，達到高效、提高認知度、美譽度的效果。作為時代的前衛(wèi)，網(wǎng)絡LOGO的設計，更應遵循CIS的整體規(guī)律并有所突破。因此網(wǎng)絡標識的設計應具備以下要素：1.識別性關于識別性要求必須容易識別，易記憶。這就要做到無論是從色彩還是構圖上一定要講究簡單。2.特異性所謂特異性就是要與其他的LOGO有區(qū)別，要有自己的特性，以區(qū)別于其它LOGO。5.2.6制作要素3.內(nèi)涵性設計LOGO一定要有它自身的含義，否則就算做的再漂亮，再完美也只是形式上的漂亮，卻沒有一點意義。4.法律意識關于LOGO的法律意識一定要注意敏感的字樣、形狀和語言。5.整體形象規(guī)劃（結構性）

LOGO不同的結構會給人不同的心理意識，就像水平線給人的感覺是平緩、穩(wěn)重、延續(xù)和平靜，豎線給人的感覺是高、直率、輕和浮躁感，點給人的感覺是擴張或收縮，容易引起人的注意等。5.2.7LOGO設計決定品牌命運5.2.8logo設計分類1.具象表現(xiàn)形式：具象表現(xiàn)是忠實于客觀物象的自然形態(tài)，對客觀物象采用經(jīng)過高度概括與提煉的具象圖形進行設計的一種表現(xiàn)形式。⑴人體造型的圖形

⑵動物造型的圖形⑶植物造型的圖形⑷器物造型的圖形⑸自然造型的圖形2.抽象表現(xiàn)形式抽象表現(xiàn)形式是以抽象的圖形符號來表達標志的含義，以理性規(guī)劃的幾何圖形或符號為表現(xiàn)形式。⑴圓形標志圖形⑵四方形標志圖形⑶三角形的標志圖形⑷多邊形標志圖形⑸方向形標志圖形3.文字表現(xiàn)形式：文字表現(xiàn)是以標志形象與字體組合而成一個整體。標志是一種視覺圖形，但文字標志同時具有語言特征和語音形式。⑴漢字標志圖形⑵拉丁字母標志圖形⑶數(shù)字標志圖形5.3導航欄的統(tǒng)一與變化5.3.1導航欄導航系統(tǒng)的作用：告訴在哪里，可以去哪里，這里有什么，附近有什么，指引瀏覽著下一步的行為。1.導航系統(tǒng)的分類全站、區(qū)域、情境式、輔助性導航。2.網(wǎng)站索引：就是將網(wǎng)站的內(nèi)容以關鍵詞、詞匯、標簽按一定順序(字母、筆畫)排列而成。內(nèi)容之間可以沒有等級關系。3.指南:

設計指南主要依據(jù)以下原則：⑴指南要短。⑵無論何時，用戶都能離開指南。⑶允許用戶在指南中前進、后退的自由移動。⑷指南的設計目的是回答問題的。⑸截圖應該明確，具有把重點功能放大的效果。⑺如果指南有好幾頁，要有目錄。4.高級設計導航方法：⑴個性化就是針對個人的行為、需求、喜好提供剪裁后的網(wǎng)頁給用戶。⑵定制化(指用戶告訴人們想要什么，但有時候用戶自己都不知道他們要需要什么)是給用戶直接控制權，可以針對展現(xiàn)格式、導航和內(nèi)容選項的組合做調(diào)整。⑶可視化：讓用戶可能采用可視化的方式瀏覽。(在網(wǎng)上瀏覽博物館網(wǎng)站時就像逛現(xiàn)實生活中的博物館一樣身臨其境的感覺，)。⑷社會化：用戶上網(wǎng)的需求點、興趣點可以從觀察其它用戶行為中推論出來的基礎上。打開網(wǎng)頁后，促使瀏覽者繼續(xù)瀏覽，除了主頁上的內(nèi)容外，按鈕設計起著至關的作用。好的按鈕設計一定會是醒目且能“勾引”用戶眼球的。以下是好的按鈕設計必不可少的5個特征:1.顏色顏色一定要能與平靜的頁面相比更加與眾不同，因此它要更亮而且有高對比度的顏色。2.位置它們應當“座落于”用戶期望更容易找到它們的地方。產(chǎn)品旁邊、頁頭、導航的頂部右側…這些都是醒目且不難找到的地方。5.3.2按鈕設計3.文字表達在按鈕上使用什么文字表達給用戶是非常重要的。它應當簡短并切中要點，并以動詞開始，如：注冊、下載、創(chuàng)建、嘗試等…。4.尺寸問題如果它是你最重要的按鈕并且你希望更多的用戶點擊它，那么讓它更醒目些是沒有壞處的。把這個按鈕設計的比其他按鈕更大些并讓用戶在更多的地方找到并點擊它。5.可“呼吸”的空間按鈕不能和網(wǎng)頁中的其他元素擠在一起。它需要充足的margin(外邊距)才能更加突出，也需要更多的padding(內(nèi)邊距)才能讓文字更容易閱讀。在網(wǎng)頁設計中，簡約并不一定等同于極簡主義者的設計美學。簡約的網(wǎng)站只是從設計、內(nèi)容、以及代碼中移除了所有不必要的元素。而極簡主義的網(wǎng)站普遍符合這一標準，有許多網(wǎng)站，不管你如何想象，都不會被認為是仍適合簡單定義的“極簡主義”。5.4網(wǎng)頁的簡約設計5.4.1簡約設計的特點

1.簡約的設計讓網(wǎng)站更容易導航。

2.簡約的設計讓頁面加載更快。

3.簡約的設計讓內(nèi)容更容易被“瀏覽”。

4.簡約的網(wǎng)站設計和創(chuàng)建會更快速。

5.簡約的代碼更容易避免漏洞。

6.較小的文件意味著較少的服務器空間5.4.2怎樣使網(wǎng)站變得簡約

1.移除不必要的裝飾元素。

2.經(jīng)常問自己“這些元素真的很重要嗎？”

3.網(wǎng)站上哪些元素是可以被合并的。

4.一些頁面是否可以合并成一個頁面?5.確保網(wǎng)站后端和前端一樣的簡約5.5網(wǎng)頁中的版式設計探討網(wǎng)頁的版式設計的藝術表現(xiàn)方法，把握網(wǎng)頁版式設計的發(fā)展趨勢，把傳統(tǒng)平面設計中美的形式規(guī)律同現(xiàn)代網(wǎng)頁設計的具體問題相結合，將平面設計中美的基本形式和元素運用到網(wǎng)頁中去，對于提高網(wǎng)頁表現(xiàn)力、改善網(wǎng)站的運營效果，無疑具有重要意義。5.5.1版式設計在網(wǎng)頁中的藝術表現(xiàn)

版式設計，就是在版面上，將有限的視覺元素進行有機的排列組合，并通過理性思維，用個性化的方式表現(xiàn)出具有個人風格和藝術特色的視覺效果。它使得版面在傳達信息的同時，也產(chǎn)生感官上的美感。版式設計是現(xiàn)代設計藝術的重要組成部分，它不僅是一種技能，更體現(xiàn)了技術與藝術的高度統(tǒng)一。隨著互聯(lián)網(wǎng)和計算機技術的不斷進步，網(wǎng)絡以其獨特的優(yōu)勢迅速覆蓋了全球。由于它的發(fā)展融合了更多的新技術，使其藝術表現(xiàn)形式比傳統(tǒng)媒體更為多樣，并具有一些獨有特點。1.高互動性、多維性和效果多元性互動性是媒體的基本特征，不同媒體的互動程度和互動形式不同。為保持瀏覽者對網(wǎng)站的新鮮感，很多網(wǎng)站總是定期或不定期的進行改版，內(nèi)容更是需要經(jīng)常改變甚至“時時更新”。這就需要在保持網(wǎng)站視覺形象一貫性的基礎上，不斷創(chuàng)作新的網(wǎng)頁設計作品，高互動媒體特性造成網(wǎng)頁版式設計需要不斷更新并且在設計上更要注意互動性的體現(xiàn)，否則其網(wǎng)頁作品就會淹沒在互聯(lián)網(wǎng)的汪洋之中。2.“不可控制”的效果和“DIY”的網(wǎng)頁版式網(wǎng)絡應用很難制訂出統(tǒng)一的標準，這導致網(wǎng)頁版式設計效果的不可控制性。網(wǎng)頁版式甚至可以根據(jù)瀏覽者的喜好自主選擇和改變，現(xiàn)在有些網(wǎng)站就為瀏覽者提供若干種排版風格方案，以供瀏覽者“DIY”。3.網(wǎng)絡技術與藝術創(chuàng)意的緊密結合毋庸置疑，網(wǎng)頁制作的每一次進步都是技術的革新帶來的，網(wǎng)頁版式設計這種藝術則對技術有著深刻的依賴性，技術的更新不斷改變著它的本質。網(wǎng)絡技術日新月異的發(fā)展給網(wǎng)頁設計帶來了新的表現(xiàn)天地。在網(wǎng)絡世界里，技術始終起著先導作用，設計則隨著它的發(fā)展而發(fā)展，技術更新對網(wǎng)頁版式設計的影響無疑是巨大的。1.技術的更新將使網(wǎng)頁版式設計不斷增加新的設計元素⑴表格布局將被CSS布局取代⑵新型瀏覽器的出現(xiàn)將使網(wǎng)頁設計更趨簡約5.5.2網(wǎng)頁版式設計的發(fā)展趨勢2.設計方式將遵循新的要求網(wǎng)頁像書籍一樣有文字、有圖片，像電視一樣有動態(tài)影畫、聲音，幾乎融合了所有媒體的特性。預計在今后，網(wǎng)絡不僅會作為一個獨立的媒體而成長，而且會成為聯(lián)系各大媒體的重要工具，處處顯示出極強的生命力。同時，經(jīng)驗的積累和新技術的運用也將促進網(wǎng)頁版式設計方式遵循新的要求。⑴