網(wǎng)頁(yè)設(shè)計(jì)流程分析與實(shí)例課件

1、網(wǎng)頁(yè)設(shè)計(jì)流程分析與實(shí)例詳解旅游度假篇傳智播客高級(jí)平面網(wǎng)頁(yè)設(shè)計(jì)人才培訓(xùn)專家!主講：李晨郵箱：kiorylee前言網(wǎng)頁(yè)設(shè)計(jì)按照內(nèi)容分類大概有：綜合門戶、游戲/娛樂、卡通/漫畫、企業(yè)/品牌、設(shè)計(jì)/藝術(shù)、風(fēng)景/旅游、生活/時(shí)尚、個(gè)人主頁(yè)、購(gòu)物、學(xué)校/教育、體育、汽車、飲食、房地產(chǎn)、像集/攝影、影視、音樂、通訊、服飾等等。網(wǎng)頁(yè)設(shè)計(jì)要根據(jù)設(shè)計(jì)對(duì)象的內(nèi)容來選擇合適的設(shè)計(jì)思路，這包括主頁(yè)功能體現(xiàn)、整體設(shè)計(jì)風(fēng)格、色調(diào)、版式等等。本節(jié)課，我們將著重講解風(fēng)景/旅游類網(wǎng)頁(yè)設(shè)計(jì)，這類網(wǎng)頁(yè)對(duì)網(wǎng)站整體風(fēng)格的統(tǒng)一、配色、以及版式和交互性都有著相對(duì)更高的設(shè)計(jì)要，所以我們?cè)趯W(xué)習(xí)了此類網(wǎng)站設(shè)計(jì)之后，將對(duì)以上問題會(huì)有所領(lǐng)悟，同時(shí)也應(yīng)

2、該把獲得的知識(shí)靈活的運(yùn)用到其它設(shè)計(jì)中去。第一章 分析與策劃首先，在設(shè)計(jì)網(wǎng)站之前，我們必須要深入了解我們將要服務(wù)的對(duì)象。這包括了對(duì)方所屬的行業(yè)、功能、訪客群體、產(chǎn)品定位以及客戶的硬性要求等等。在深入剖析了以上問題之后，我們將要對(duì)網(wǎng)站的整體進(jìn)行一個(gè)初步的定位。整體規(guī)劃部分首先要進(jìn)行的是客戶信息整合和意見修改，最終確定首頁(yè)所要表達(dá)的全部信息，并且使得信息量和基本功能要求在設(shè)計(jì)師的預(yù)期范圍之內(nèi)。當(dāng)我們完成了以上工作之后，就可以對(duì)網(wǎng)站主頁(yè)的設(shè)計(jì)進(jìn)行初步的構(gòu)想了。這其中包括主色調(diào)的選擇，版式的設(shè)置，輔助色的搭配以及主頁(yè)基本功能的實(shí)現(xiàn)。實(shí)例分析第一步了解服務(wù)對(duì)象 行業(yè)、功能、設(shè)計(jì)成品將要面對(duì)的客戶群體、產(chǎn)品

3、定位以及客戶要求等等。我們可以通過客戶提供資料或者網(wǎng)絡(luò)查詢等手段來盡可能多的尋找資料，然后將這些資料進(jìn)行整合、分析。我們的實(shí)例這次是針對(duì)中國(guó)著名風(fēng)景區(qū)九寨溝，來作一個(gè)風(fēng) 景/旅游類的網(wǎng)站，首先我們要分析行業(yè)特色：由于是風(fēng)景/旅游類網(wǎng)站，那么整體風(fēng)格必須要自然統(tǒng)一，清爽大方，并能展現(xiàn)自然出宏大的自然風(fēng)光與人文景觀的完美結(jié)合。整體色調(diào)和版式都要求自然、清爽和高度協(xié)調(diào)。此類網(wǎng)站對(duì)交互性要求僅次于購(gòu)物類，所以要著重留意此類模塊。網(wǎng)站要面對(duì)所有類別的客戶群體，所以文字和導(dǎo)航要簡(jiǎn)潔明了，不宜繁復(fù)。九寨溝為中國(guó)最富盛名的旅游景點(diǎn)之一，整體布局不宜過于緊湊，適當(dāng)留白可提高檔次。第二步總結(jié)分析結(jié)果首先，對(duì)我們將

4、要在首頁(yè)展示的模塊進(jìn)行列舉一般網(wǎng)站所固有的模塊在此次我們的設(shè)計(jì)中均要體現(xiàn)： A：Logo區(qū)域 B：導(dǎo)航區(qū)域 C：形象區(qū)域 D：導(dǎo)航區(qū)域2 E：內(nèi)容區(qū)域（首頁(yè)主要內(nèi)容） F：版權(quán)信息區(qū)域第三步通過分析結(jié)果來確定主要事項(xiàng)由于是旅游類網(wǎng)站，所以我們加入在線咨詢和訂購(gòu)電子周刊版塊。內(nèi)容區(qū)域我們根據(jù)要求分為五部分 A：歡迎詞 B：圖片新聞 C：行業(yè)新聞 D：資格認(rèn)證 E：特色景區(qū)直通車然后，我們對(duì)LOGO以及資料圖片進(jìn)行分析，來確定整體風(fēng)格，這包括主體色調(diào)和版式。由于LOGO是單色，我們可以通過形象區(qū)域所要展示的大幅面圖片來決定其他色調(diào)，當(dāng)然我們也可以直接選擇最接近自然的綠、藍(lán)色系來進(jìn)行設(shè)計(jì)。那么接下來

5、我們就把主要色調(diào)和理想配色做一個(gè)小樣。既然我們趨向于選擇藍(lán)、綠，那么這在自然風(fēng)景類圖片中并不少見，主要問題是我們要加入人文景觀，所以最終我選擇了帶人物和橋梁的圖片，當(dāng)然，主色調(diào)就是我們需要的藍(lán)配綠。很明顯，這樣一張貌不驚人的圖片是不可能勝任表現(xiàn)網(wǎng)站主題和凸顯宏大又清新的九寨溝風(fēng)光的，所以我們要處理一下。在處理之前我們要考慮它占用的幅面，由于要宏大，所以我決定以此來做背景。那么我們就需要將圖片和后半部分的背景色和諧的銜接。Photoshop的確是無所不能，右邊就是我們需要圖片咯主頁(yè)中將要扮演重要角色的大圖片既然決定了，而且行業(yè)色我們也知道了，那么就出個(gè)配色小樣吧。我們沾取其中幾處飽和度較高，或者

6、幅面較大的顏色，然后搭配一下看看是否和諧由于是基色搭配，所以肯定不會(huì)讓人太過反感，而且由于風(fēng)景/旅游類網(wǎng)站的插圖會(huì)很鮮艷，所以我們只需要選擇兩三種顏色就可以了。首先我們要考慮剛才已經(jīng)分類完畢的首頁(yè)模塊。我們發(fā)現(xiàn)數(shù)量并不龐大，占用的空間不必太大。當(dāng)然，此類非購(gòu)物網(wǎng)站也不宜分屏太多。然后我們分析就版式而言，哪些版式合適，哪些相對(duì)不合適。接下來，我們要進(jìn)行版式的初步制定那么，我們就需要對(duì)各種版式有個(gè)詳細(xì)的了解，最終根據(jù)我們的情況來選擇合適的搭配。網(wǎng)頁(yè)設(shè)計(jì)中的版式骨骼型網(wǎng)頁(yè)版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報(bào)刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等

7、。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。滿版型頁(yè)面以圖像充滿整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置于圖像之上。視覺傳達(dá)效果直觀而強(qiáng)烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用越來越多。分割型把整個(gè)頁(yè)面分成上下或左右兩部分，分別安排圖片和文案。兩個(gè)部分形成對(duì)比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積，來調(diào)節(jié)對(duì)比的強(qiáng)弱。中軸型沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁(yè)面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁(yè)面給人以舒暢的感覺。曲線型

8、圖片、文字在頁(yè)面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏傾斜型頁(yè)面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動(dòng)感，引人注目。對(duì)稱型對(duì)稱的頁(yè)面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。對(duì)稱分為絕對(duì)對(duì)稱和相對(duì)對(duì)稱。一般采用相對(duì)對(duì)稱的手法，以避免呆板。左右對(duì)稱的頁(yè)面版式比較常見。四角型也是對(duì)稱型的一種，是在頁(yè)面四角安排相應(yīng)的視覺元素。四個(gè)角是頁(yè)面的邊界點(diǎn)，重要性不可低估。在四個(gè)角安排的任何內(nèi)容都能產(chǎn)生安定感?？刂坪庙?yè)面的四個(gè)角，也就控制了頁(yè)面的空間。越是凌亂的頁(yè)面，越要注意對(duì)四個(gè)角的控制。焦點(diǎn)型焦點(diǎn)型的網(wǎng)頁(yè)版式通過對(duì)視線的誘導(dǎo)，使頁(yè)面具有強(qiáng)烈的視覺效果。焦點(diǎn)型分三種情況。（1）中心。以對(duì)比強(qiáng)烈

9、的圖片或文字置于頁(yè)面的視覺中心。（2）向心。視覺元素引導(dǎo)瀏覽者視線向頁(yè)面中心聚攏，就形成了一個(gè)向心的版式。向心版式是集中的、穩(wěn)定的，是一種傳統(tǒng)的手法。（3）離心。視覺元素引導(dǎo)瀏覽者視線向外輻射，則形成一個(gè)離心的網(wǎng)頁(yè)版式。離心版式是外向的、活潑的，更具現(xiàn)代感，運(yùn)用時(shí)應(yīng)注意避免凌亂。三角型網(wǎng)頁(yè)各視覺元素呈三角形排列。正三角形（金字塔型）最具穩(wěn)定性，倒三角形則產(chǎn)生動(dòng)感。側(cè)三角形構(gòu)成一種均衡版式，既安定又有動(dòng)感。自由型自由型的頁(yè)面具有活潑、輕快的風(fēng)格。了解了所有的版式特性，我們也分析了他們的適用范圍，那么，決定我們的版式吧。要知道，只選擇其中一種版式來做網(wǎng)頁(yè)并不是個(gè)好主意，大多數(shù)網(wǎng)站都是將幾種版式相結(jié)合，那樣可以產(chǎn)生更棒的效果。我們的網(wǎng)站要做的大方，清新，又有寧?kù)o之感，所以我想選擇骨骼類和中軸類比較合適。而要想突出宏大的美景，那么骨骼類的話我覺得上方通欄比較好。而下方，我們可以自由排列，多嘗試幾種排列方式其實(shí)是個(gè)好習(xí)慣。還有就是我們開始整理出的模塊的主次，大小，要心里有數(shù)。注意：兩個(gè)塊面的交界處應(yīng)該在什么位置呢？如果沒主意了，可以選擇 黃金分割點(diǎn)0.618接下來，就開始畫草圖吧。LOGO和導(dǎo)航區(qū)、搜索區(qū)、語(yǔ)言選擇區(qū)域我循規(guī)蹈矩的分別放在常見的位置上。形象圖片區(qū)域也是。歡迎詞基本相當(dāng)于企業(yè)簡(jiǎn)介，是最重要的東西，所以緊跟其后。副導(dǎo)航的地位僅次于它，所以放在下面。右邊兩欄分別是