PHOTOSHOP圖形圖像主講人：徐紅霞——網(wǎng)頁(yè)界面設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)處理T網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)界面設(shè)計(jì)是整個(gè)網(wǎng)站的“臉”，網(wǎng)站能否吸引瀏覽者的興趣，能否吸引其再次光臨，其界面設(shè)計(jì)是至關(guān)重要的。網(wǎng)站頁(yè)面的視覺風(fēng)格設(shè)計(jì)是否新穎，是否獨(dú)特，決定了大多數(shù)瀏覽者對(duì)該網(wǎng)站內(nèi)容和信息的關(guān)注，在該基礎(chǔ)上網(wǎng)站才能夠更好地為企業(yè)服務(wù)，將產(chǎn)品、服務(wù)等推銷給瀏覽者。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)一、網(wǎng)頁(yè)視覺設(shè)計(jì)

1．鮮明的主題

2．明確的目標(biāo)

3．精彩的網(wǎng)頁(yè)版式

4．合理的色彩應(yīng)用

5．內(nèi)容與形式的完美統(tǒng)一1．鮮明的主題為了做到網(wǎng)站主題的鮮明突出、要點(diǎn)明確，設(shè)計(jì)者需要按照客戶的要求，以簡(jiǎn)單明確的畫面來(lái)體現(xiàn)出網(wǎng)站的主題，使用一切方法和技巧充分表現(xiàn)出網(wǎng)站的個(gè)性和主題，使網(wǎng)站主題鮮明、特點(diǎn)突出。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)2．明確的目標(biāo)在設(shè)計(jì)規(guī)劃時(shí)需要考慮：網(wǎng)站建設(shè)的目的是什么？受眾群體是哪些？提供什么樣的服務(wù)和產(chǎn)品？網(wǎng)站用記有哪些特點(diǎn)？產(chǎn)品和服務(wù)適合什么樣的風(fēng)格等，從而做出符合網(wǎng)站整體形象的視覺規(guī)劃。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)3．精彩的網(wǎng)頁(yè)版式網(wǎng)頁(yè)版式設(shè)計(jì)要把網(wǎng)站中頁(yè)面之間有機(jī)聯(lián)系反映出來(lái)，特別是處理好頁(yè)面之間和頁(yè)面內(nèi)和秩序與內(nèi)容的關(guān)系。為了達(dá)到最佳的視覺表現(xiàn)效果，設(shè)計(jì)者需要反復(fù)嘗試各種不同的頁(yè)面排版布局，找到最佳的方案，給瀏覽者一個(gè)流暢、輕松的視覺體驗(yàn)。4．合理的色彩應(yīng)用色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師根據(jù)和諧、均衡和突出重點(diǎn)的原則，將不同的色彩進(jìn)行組合、搭配來(lái)構(gòu)成美麗的頁(yè)面。根據(jù)色彩對(duì)人們心理的影響，合理地加以運(yùn)用，或者也可以根據(jù)企業(yè)VI（企業(yè)視覺識(shí)別系統(tǒng)）來(lái)選用標(biāo)準(zhǔn)色，使企業(yè)整體形象統(tǒng)一。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)5．內(nèi)容與形式的完美統(tǒng)一為了將豐富的內(nèi)容和多樣化的形式統(tǒng)一在頁(yè)面結(jié)構(gòu)中，形式語(yǔ)言必須符合頁(yè)面的內(nèi)容，體現(xiàn)出內(nèi)容的豐富含義。靈活運(yùn)用對(duì)比、對(duì)稱平衡以及留白等方法，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。二、網(wǎng)頁(yè)欄目布局1.網(wǎng)頁(yè)布局的結(jié)構(gòu)標(biāo)準(zhǔn)2.網(wǎng)頁(yè)布局的類型“國(guó)”字型布局“匡”字型布局“三”字形布局“川”字形布局海報(bào)型布局Flash布局標(biāo)題文本型布局網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)1.網(wǎng)頁(yè)布局的結(jié)構(gòu)標(biāo)準(zhǔn)要合理進(jìn)行網(wǎng)頁(yè)布局，具體工作內(nèi)容主要有：整理消費(fèi)者和瀏覽者的觀點(diǎn)、意見；分析瀏覽者的特性，劃分并確定目標(biāo)瀏覽人群；確定網(wǎng)站創(chuàng)建的目的、規(guī)劃及發(fā)展方向；整理網(wǎng)站內(nèi)容并使其系統(tǒng)化；搜集內(nèi)容并進(jìn)行分類整理確定適合內(nèi)容類型的有效標(biāo)記體系；不同頁(yè)面放置不同的頁(yè)面元素，構(gòu)建不同的內(nèi)容。2.網(wǎng)頁(yè)布局的類型（1）“國(guó)”字型布局也稱為同字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是標(biāo)題及banner，接下來(lái)是網(wǎng)站的主要內(nèi)容，左右分列兩小條內(nèi)容，中間是主要部分，最下面是網(wǎng)站的版權(quán)，聯(lián)系方式等信息。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)（2）“匡”字型布局也稱為拐角型，這種結(jié)構(gòu)與上一種其實(shí)只是形式上的區(qū)別，它去掉了“國(guó)”字形布局的最右邊的部分，給主內(nèi)容區(qū)釋放了更多空間。這種布局上面是標(biāo)題及廣告橫幅，接下來(lái)的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。（3）“三”字形布局這是一種簡(jiǎn)潔明快的網(wǎng)頁(yè)布局，在國(guó)外用的比較多，國(guó)內(nèi)比較少見。這種布局的特點(diǎn)是在頁(yè)面上由橫向兩條色塊將網(wǎng)頁(yè)整體分割為3部分，色塊中大多放置廣告條與更新和版權(quán)提示。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)（4）“川”字形布局整個(gè)頁(yè)面在垂直方向分為三列，網(wǎng)站的內(nèi)容按欄目分布在這三列中，最大限度地突出主頁(yè)的索引功能。（5）海報(bào)型布局這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁(yè)，大部分為一些精美的平面設(shè)計(jì)結(jié)合一些小的動(dòng)畫，放上幾個(gè)簡(jiǎn)單的鏈接。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個(gè)人主頁(yè)，如果說(shuō)處理的好，會(huì)給人帶來(lái)賞心悅目的感覺。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)（6）Flash布局這種布局是指整個(gè)網(wǎng)頁(yè)就是一個(gè)Flash動(dòng)畫，它本身就是動(dòng)態(tài)的，畫面一般比較絢麗、有趣，是一種比較新潮的布局方式。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)（7）標(biāo)題文本型布局標(biāo)題文本型布局是指頁(yè)面內(nèi)容以文本為主，這種類型頁(yè)面最上面往往是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁(yè)面或注冊(cè)頁(yè)面等。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)三、網(wǎng)頁(yè)導(dǎo)航結(jié)構(gòu)設(shè)計(jì)1．網(wǎng)頁(yè)導(dǎo)航形式標(biāo)簽式導(dǎo)航按鈕式導(dǎo)航彈出菜單式導(dǎo)航無(wú)框圖標(biāo)式導(dǎo)航

Flash形式的導(dǎo)航2．導(dǎo)航方向（1）標(biāo)簽式導(dǎo)航在一些圖片比較大，文字信息提供量少，網(wǎng)頁(yè)視覺風(fēng)格比較簡(jiǎn)單的網(wǎng)頁(yè)中，標(biāo)簽式導(dǎo)航比較常用。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)（2）按鈕式導(dǎo)航按鈕式導(dǎo)航是最容易讓瀏覽者理解為單擊含義的傳統(tǒng)導(dǎo)航形式。可以作成規(guī)則或不規(guī)則的，精致美觀的外形，更好的導(dǎo)引用戶使用。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)（7）標(biāo)題文本型布局標(biāo)題文本型布局是指頁(yè)面內(nèi)容以文本為主，這種類型頁(yè)面最上面往往是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁(yè)面或注冊(cè)頁(yè)面等。（4）無(wú)框圖標(biāo)式導(dǎo)航無(wú)框圖標(biāo)式導(dǎo)航是指將圖標(biāo)去掉邊框，使用多種不規(guī)則的圖案或線條作為導(dǎo)航，使用這種導(dǎo)航給人以輕松自由感，增強(qiáng)了網(wǎng)頁(yè)的趣味性，豐富了網(wǎng)頁(yè)的效果。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)（5）Flash形式的導(dǎo)航這種導(dǎo)航形式適用于動(dòng)感時(shí)尚的網(wǎng)頁(yè)。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)2．導(dǎo)航方向在網(wǎng)頁(yè)設(shè)計(jì)中，為了避免網(wǎng)頁(yè)風(fēng)格的呆板，對(duì)其導(dǎo)航方向的合理設(shè)計(jì)是十分必要的，網(wǎng)頁(yè)導(dǎo)航方向會(huì)影響整個(gè)網(wǎng)頁(yè)頁(yè)面的風(fēng)格，占據(jù)一定的頁(yè)面空間。（1）垂直導(dǎo)航（2）橫排導(dǎo)航（3）個(gè)性化的導(dǎo)航方式，比如傾斜導(dǎo)航和亂序?qū)Ш降龋?）垂直導(dǎo)航一級(jí)導(dǎo)航的樣式都很類似，左邊是文字，右邊是簡(jiǎn)潔的小圖標(biāo)，每個(gè)圖標(biāo)雖然不同，但是風(fēng)格都是統(tǒng)一的，這正是多樣性的重復(fù)原則。所以這些父導(dǎo)航按鈕會(huì)讓人感覺是平等而有某種聯(lián)系的。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)而當(dāng)前所在的位置以非常醒目飽和度較高的黃色顯示，明顯區(qū)別于一般狀態(tài)的導(dǎo)航按鈕，讓訪問者清楚的知道自己當(dāng)前所處的位置，提高了用戶體驗(yàn)并且增強(qiáng)了設(shè)計(jì)感。子導(dǎo)航既然和父導(dǎo)航不屬于同一層次，那么必然要在視覺上和父導(dǎo)航有所區(qū)別，所以在背景顏色和文字顏色以及樣式上你就能看到這種差別所在。網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)（2）橫排導(dǎo)航橫排導(dǎo)航所占用的頁(yè)面空間較少，給人以大氣的視覺感受，是最常見的導(dǎo)航形式。兩條水平的白色虛線和一條灰色的垂直線