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

周盼盼

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

?

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

周盼盼

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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

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

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

中圖分類號:TP31

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

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

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