網(wǎng)頁排版與布局.ppt

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

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

3、,5,1.把頁面分割成清晰明確的不同區(qū)域很重要，因?yàn)榭墒褂脩粞杆倥袛喑瞿男﹨^(qū)域應(yīng)重點(diǎn)看,哪些可以放心地忽略。 2.創(chuàng)建清晰直觀的頁面層次結(jié)構(gòu);越重要越要突出;邏輯相關(guān)的內(nèi)容視覺上也應(yīng)該相關(guān) 3.用嵌套的方式形象地顯示從屬關(guān)系,6,7,二.網(wǎng)頁的布局形式 整個頁面可以分為幾個部分，每個部分有不同的功能，也能體現(xiàn)不同的形式，中間的部分一般是最大的，因?yàn)樗休d著主要的信息，使用者主要就是看中間這個部分的內(nèi)容， 有些網(wǎng)站也為了出新意把整個頁面進(jìn)行任意劃分，特別是個人網(wǎng)頁，例如把整個頁面平分為左右兩個部分，但是這樣會讓人不著重點(diǎn)，還有的框架用得太多，影響了頁面的整體性,8,1.骨骼型網(wǎng)頁版式的骨骼型是一

4、種規(guī)范的、理性的分割方法，類似于報(bào)刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。,9,題頭加三欄式的設(shè)計(jì)方式：題頭就是在最上行，左邊是網(wǎng)站標(biāo)題圖案，右邊是正文。,10,11,12,上下水平設(shè)計(jì)方式，它有適合信息量大，維護(hù)方便的特點(diǎn)，適用于商業(yè)網(wǎng)站。,13,14,網(wǎng)站導(dǎo)航的設(shè)計(jì)清晰,簡潔,一致 導(dǎo)航的意義a,幫助用戶尋找他要的東西b,告訴用戶他在哪里c,更好的展現(xiàn)網(wǎng)站的內(nèi)容d,使瀏覽者對網(wǎng)站有信心 固定導(dǎo)航應(yīng)包括下列最常用的5個元素:1,網(wǎng)站標(biāo)識2,欄目3,

5、公共服務(wù)(幫助,網(wǎng)站地圖,關(guān)于我們,聯(lián)系我們等)4,返回主頁5,搜索,15,2.滿版型頁面以圖像充滿整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置于圖像之上。四邊出血，向外擴(kuò)張，適合年輕人的口味。,16,3.分割型把整個頁面分成上下或左右兩部分，分別安排圖片和文案。分割線上的壓置的圖片既打破了頁面分割的生硬感，也使自身得到強(qiáng)調(diào)。左邊框上的小標(biāo)簽?zāi)它c(diǎn)睛之筆。,17,4.中軸型沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。,18,5.曲線型圖片、文字在頁面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。網(wǎng)站的導(dǎo)航標(biāo)題沿圖形弧

6、線排列。,19,6.傾斜型頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動感，引人注目。 文字水平排列，將畫框斜置，產(chǎn)生對比與動勢，印象被加強(qiáng)。,20,7.對稱型對稱的頁面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。 以相對對稱手法制作的導(dǎo)航頁面。,21,8.焦點(diǎn)型焦點(diǎn)型的網(wǎng)頁版式通過對視線的誘導(dǎo)，使頁面具有強(qiáng)烈的視覺效果。通過離心的版式，清晰地傳達(dá)出網(wǎng)站提供的服務(wù),22,9.三角型網(wǎng)頁各視覺元素整體看為正三角形的構(gòu)圖，主體形象穩(wěn)定而突出,23,10.自由型自由型的頁面具有活潑、輕快的風(fēng)格 引導(dǎo)視線的圖片以散點(diǎn)構(gòu)成，傳達(dá)隨意、輕松的氣氛,24,但是作為個人網(wǎng)站，就不一定要采用這些方式，完全

7、可以更新穎、更藝術(shù)些。什么又算是靈活多樣？怎樣做到新穎、藝術(shù)呢？沒有一個模式去套，它需要你去領(lǐng)悟、去創(chuàng)新。,25,26,27,28,29,留白 我們應(yīng)該在網(wǎng)頁中通過留白的作用，使整個內(nèi)容排布得松緊有度，給人以跌宕起伏之感。 把整個屏幕都塞得滿滿的，讓人感覺不亂也很擠。網(wǎng)適當(dāng)?shù)亓舭?，可以提高網(wǎng)頁的視覺效果和藝術(shù)感染力。 留白既可以給人帶來心理上的松弛，也可以給人帶來緊張與節(jié)奏。利用留白的體量感來使頁面布局平衡，在一種不平衡中營造平衡，這樣就會使頁面生動起來。,30,“破” 這個“破”是指打破拘束、打破平衡、增添動感的手法（不是動畫的動感）。有如國畫中畫蘭花“一撇二交三破”，每片葉子都朝上豎著當(dāng)然

8、不好看了，這一“破”就是其中的道理。,31,簡單 “美就是簡單”，平淡之中才顯真色。過于復(fù)雜，過于花哨，自然就偏離了美的軌道，比如過多地使用特效，過分眩目的圖案，過于復(fù)雜的文字版塊排列等。,精簡文字生動的有活力的作品是簡潔的 不要用文字去填充空間 減掉那些沒有用的文字的好處： a,減少了頁面的干擾； b,使有用的內(nèi)容更突出； c,使頁面更短,無需滾屏就可以一眼看到更多的東西,32,巧妙地運(yùn)用動態(tài)元素。以橫貫頁面的長條色塊統(tǒng)一畫面，圖片安排隨意，疏密有致，使整體風(fēng)格既統(tǒng)一又有變化。,33,在塊狀組合結(jié)構(gòu)中，如圖片太多，則無法突出重點(diǎn)。這個頁面通過改變圖片的面積，有效地分開了,34,圖片與文字穿插編排，形成散點(diǎn)組合。運(yùn)用線條的分割、文字的群組化以及單一的背景色形成整體,35,多幅圖片使水平垂直線規(guī)律地等量分割，獲得了理性與秩序的美。,36,以水平分割為主的頁面，右上角與左下角安排了文字，打破