周盼盼

(山東女子學(xué)院,山東 濟(jì)南　250000)

?

“薩蘭威”酒莊網(wǎng)站界面設(shè)計(jì)

周盼盼

(山東女子學(xué)院,山東 濟(jì)南250000)

摘要：簡(jiǎn)要概括網(wǎng)頁(yè)設(shè)計(jì)所要呈現(xiàn)給我們什么樣的視覺(jué)效果，概括網(wǎng)頁(yè)設(shè)計(jì)的種類以及網(wǎng)頁(yè)設(shè)計(jì)的實(shí)用性軟件。表述“薩蘭威”酒莊設(shè)計(jì)理念。

“薩蘭威”酒莊的網(wǎng)頁(yè)設(shè)計(jì)，將“薩蘭威”酒莊完美的展現(xiàn)給世人，詮釋了網(wǎng)頁(yè)設(shè)計(jì)對(duì)企業(yè)的重要性。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；種類；Photoshop；Dreamweaver；“薩蘭威”酒莊

當(dāng)你在瀏覽互聯(lián)網(wǎng)時(shí)，有沒(méi)有一種沖動(dòng)想要自己做一個(gè)精美的互聯(lián)網(wǎng)頁(yè)面？當(dāng)你在看到淘寶、京東等著名網(wǎng)絡(luò)銷售商每年近似瘋狂的交易額時(shí)，會(huì)不會(huì)也想要做網(wǎng)上商店？當(dāng)你在看到互聯(lián)網(wǎng)上日益增多的職位需求時(shí)，是不是也想要將自己的個(gè)人信息發(fā)布到網(wǎng)上來(lái)讓更多的人看到你的才能?這就是網(wǎng)頁(yè)設(shè)計(jì)給我們帶來(lái)的視覺(jué)沖擊。那什么是網(wǎng)頁(yè)設(shè)計(jì)呢？如下：

網(wǎng)頁(yè)設(shè)計(jì)是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化)，進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁(yè)面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種，精美的網(wǎng)頁(yè)設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。

網(wǎng)頁(yè)設(shè)計(jì)一般分為三種大類:功能型網(wǎng)頁(yè)設(shè)計(jì)(服務(wù)網(wǎng)站&B/S軟件用戶端)、形象型網(wǎng)頁(yè)設(shè)計(jì)(品牌形象站)、信息型網(wǎng)頁(yè)設(shè)計(jì)(門戶站)。設(shè)計(jì)網(wǎng)頁(yè)的目的不同，應(yīng)選擇不同的網(wǎng)頁(yè)策劃與設(shè)計(jì)方案。

網(wǎng)頁(yè)設(shè)計(jì)的工作目標(biāo)，是通過(guò)使用更合理的顏色、字體、圖片、樣式進(jìn)行頁(yè)面設(shè)計(jì)美化，在功能限定的情況下，盡可能給予用戶完美的視覺(jué)體驗(yàn)。高級(jí)的網(wǎng)頁(yè)設(shè)計(jì)甚至?xí)紤]到通過(guò)聲光、交互等來(lái)實(shí)現(xiàn)更好的試聽(tīng)感受。當(dāng)然網(wǎng)頁(yè)設(shè)計(jì)不僅僅是顏色、字體、圖片的堆砌，也不是套用現(xiàn)有的網(wǎng)頁(yè)模板。網(wǎng)頁(yè)設(shè)計(jì)是設(shè)計(jì)師靈魂的創(chuàng)作，把現(xiàn)有的資源整合到一起，使其有藝術(shù)的氣息，給客戶和參觀者以感官上的享受，達(dá)到心靈上的共鳴。

為了給用戶良好的視覺(jué)效果，設(shè)計(jì)師要確定網(wǎng)頁(yè)內(nèi)容的主題，了解產(chǎn)品的時(shí)代內(nèi)容，給予放飛的夢(mèng)想，讓所設(shè)計(jì)的網(wǎng)頁(yè)、產(chǎn)品形象時(shí)刻保持靈動(dòng)性。只有這樣才能做到網(wǎng)頁(yè)時(shí)時(shí)更新，每時(shí)每刻地注入新鮮血液。

網(wǎng)頁(yè)設(shè)計(jì)當(dāng)然也離不開網(wǎng)頁(yè)設(shè)計(jì)軟件。Photoshop和Dreamweaver是最常用的也是很實(shí)用的設(shè)計(jì)軟件。

Photoshop(圖像工具)由Adobe公司開發(fā)的，專門處理圖像的設(shè)計(jì)軟件。Photoshop開創(chuàng)了“電腦平面設(shè)計(jì)”的時(shí)代。Photoshop軟件特點(diǎn)是專長(zhǎng)于圖像處理而非圖像創(chuàng)作，圖像處理的好壞直接影響了頁(yè)面和產(chǎn)品形象之間的整體效果，當(dāng)然圖像的處理要基于圖像本質(zhì)，若改動(dòng)過(guò)大，勢(shì)必會(huì)造成實(shí)際產(chǎn)品與網(wǎng)絡(luò)產(chǎn)品相差甚遠(yuǎn)，這就違背了網(wǎng)頁(yè)設(shè)計(jì)的初衷。

Dreamweaver是Macromedia公司的產(chǎn)品，是一款“所見(jiàn)即所得”的網(wǎng)頁(yè)編輯軟件。Dreamweaver能夠?qū)tml提供很好的支持，然后再通過(guò)JavaScript的配合，就可以輕而易舉地做出很多炫酷的頁(yè)面效果。正因?yàn)槿绱耸笵reamweaver能夠得到廣泛的運(yùn)用，也成為高級(jí)網(wǎng)頁(yè)設(shè)計(jì)的寵兒。html語(yǔ)言是網(wǎng)絡(luò)應(yīng)用最為廣泛的網(wǎng)頁(yè)語(yǔ)言，即構(gòu)成了網(wǎng)頁(yè)文檔的主要語(yǔ)言，也是超文本鏈接標(biāo)示語(yǔ)言或超文本標(biāo)記語(yǔ)言。html只是一種描述性的文本，只能做到頁(yè)面的靜態(tài)展示和布局。JavaScript是一種腳本語(yǔ)言，用于在Web瀏覽器(客戶端)的執(zhí)行，通過(guò)JavaScript可以做到使者的需求事件而不用任何的網(wǎng)路來(lái)回傳輸資料，可以直接被客戶端的應(yīng)用程式所處理，達(dá)到網(wǎng)頁(yè)的動(dòng)態(tài)效果實(shí)現(xiàn)。

基于以上的網(wǎng)頁(yè)設(shè)計(jì)要求和網(wǎng)頁(yè)設(shè)計(jì)軟件的功能，我以Photoshop和Dreamweaver為設(shè)計(jì)工具，運(yùn)用div+css技術(shù)、html5+css3技術(shù)與JavaScript腳本語(yǔ)言來(lái)實(shí)現(xiàn)整套網(wǎng)站的設(shè)計(jì)與布局。設(shè)計(jì)一套基于用戶體驗(yàn)的酒莊網(wǎng)站，該網(wǎng)站實(shí)現(xiàn)了首頁(yè)、美酒佳釀、酒莊文化、酒莊動(dòng)態(tài)和釀造工藝等網(wǎng)頁(yè)的設(shè)計(jì)與布局，建立完整的薩蘭威酒莊網(wǎng)站并進(jìn)行分析與測(cè)試，來(lái)保證網(wǎng)站能夠正常運(yùn)行。

在“薩蘭威”酒莊網(wǎng)站界面設(shè)計(jì)上采用了灰色和黃色，黃色代表紅酒酒瓶瓶塞的顏色，讓它和紅酒主題更能交相呼應(yīng)，具有極大的浪漫氣息，而灰色配合著黃色給網(wǎng)頁(yè)在視覺(jué)上以一種柔和淡雅方式出現(xiàn)在顧客面前，這就是“薩蘭威”體現(xiàn)的情懷，不拘泥世俗，對(duì)品質(zhì)卓越的追求。

版式上采用了簡(jiǎn)潔而不簡(jiǎn)單的設(shè)計(jì)風(fēng)格，同時(shí)采用了留白的設(shè)計(jì)方式，這樣能夠使網(wǎng)頁(yè)在瞬息萬(wàn)變的時(shí)代隨時(shí)添加酒莊的動(dòng)態(tài)和紅酒新時(shí)代主題。

功能上采用了響應(yīng)式網(wǎng)站，可以完美兼容任何設(shè)備，讓客戶和觀賞者隨時(shí)能夠在任何設(shè)備上了解酒莊的方方面面；采用了較多的js交互特效，這樣調(diào)動(dòng)了觀賞性，達(dá)到視覺(jué)沖擊。

為了達(dá)到我心中的設(shè)計(jì)理念，滿足“薩蘭威“酒莊需求，同時(shí)提供給“薩蘭威“酒莊客戶一個(gè)美好的，極具“薩蘭威”酒莊特色的網(wǎng)頁(yè)，我準(zhǔn)備了以下的工作：

1.完成基于“薩蘭威”酒莊網(wǎng)站制作過(guò)程中所采用的技術(shù)并分析

2.對(duì)紅酒文化、企業(yè)站進(jìn)行分析并研究，了解體驗(yàn)用戶的需求

3.設(shè)計(jì)“薩蘭威”酒莊網(wǎng)站的Logo，構(gòu)造網(wǎng)站風(fēng)格走向和配色，選擇合適字體，搜集圖片素材，制作文案。

4.完成“薩蘭威”酒莊網(wǎng)站的設(shè)計(jì)與布局。

網(wǎng)頁(yè)的設(shè)計(jì)完成，僅僅是設(shè)計(jì)師的第一步工作，接下來(lái)還要測(cè)試設(shè)計(jì)網(wǎng)頁(yè)的運(yùn)行狀況。經(jīng)過(guò)以上的闡述，“薩蘭威”酒莊網(wǎng)頁(yè)設(shè)計(jì)的課題基本解決。經(jīng)過(guò)努力，“薩蘭威”酒莊網(wǎng)站終于完成，并且能夠搜索點(diǎn)擊，基本滿足人們通過(guò)網(wǎng)頁(yè)來(lái)了解“薩蘭威”酒莊。

由于自身技術(shù)水平，網(wǎng)頁(yè)還存在許多漏洞，還有很多功能沒(méi)有完善。比如，設(shè)計(jì)風(fēng)格還未完全統(tǒng)一,前期效果圖設(shè)計(jì)還不夠美觀，需要不斷完善，布局及編碼過(guò)程中的有些知識(shí)還未完全掌握。以后要通過(guò)學(xué)習(xí)，去完善其現(xiàn)未有的功能和頁(yè)面。

在此次畢業(yè)論文：”薩蘭威“酒莊網(wǎng)站設(shè)計(jì)過(guò)程中，清楚地知道自己的不足，學(xué)到了很多沒(méi)有學(xué)到的網(wǎng)頁(yè)設(shè)計(jì)知識(shí)，溫習(xí)了以前課程，使我的思維得到了嚴(yán)謹(jǐn)?shù)呐囵B(yǎng)，讓我能夠樂(lè)觀的面對(duì)挑戰(zhàn)。還要感謝導(dǎo)師給我的指導(dǎo)，讓我能夠快速的解決所遇到問(wèn)題，同時(shí)感謝同學(xué)給我的幫助以及對(duì)我的啟迪。希望同學(xué)們以及我本人，把網(wǎng)頁(yè)設(shè)計(jì)做的更好。我也相信網(wǎng)頁(yè)設(shè)計(jì)這門學(xué)科在未來(lái)將大放異彩。

參考文獻(xiàn)：

[1]劉西杰.《網(wǎng)頁(yè)制作從入門到精通》,人民郵電出版社,2013

[2]蘭倩.《版式設(shè)計(jì)在動(dòng)態(tài)媒介中的研究與應(yīng)用[D]》,北方工業(yè)大學(xué),2015.

[3]王建民.《網(wǎng)頁(yè)設(shè)計(jì)》,湖南大學(xué)出版社,2006.

[4]http://www.docin.com/p-301682879.html.

[5]http://baike.so.com/doc/4458083-4666688.html.

[6]明日科技.《HTML5從入門到精通》,清華大學(xué)出版社,2012.

中圖分類號(hào):TP31

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1671-864X(2016)04-0245-01

作者簡(jiǎn)介：周盼盼(1994—)，女，漢族，山東省濟(jì)南市人，學(xué)生，大學(xué)本科，單位：山東女子學(xué)院，研究方向：web前端設(shè)計(jì)/網(wǎng)頁(yè)設(shè)計(jì)。