周盼盼
(山東女子學(xué)院,山東 濟(jì)南 250000)
?
“薩蘭威”酒莊網(wǎng)站界面設(shè)計(jì)
周盼盼
(山東女子學(xué)院,山東 濟(jì)南250000)
摘要:簡(jiǎn)要概括網(wǎng)頁設(shè)計(jì)所要呈現(xiàn)給我們什么樣的視覺效果,概括網(wǎng)頁設(shè)計(jì)的種類以及網(wǎng)頁設(shè)計(jì)的實(shí)用性軟件。表述“薩蘭威”酒莊設(shè)計(jì)理念。
“薩蘭威”酒莊的網(wǎng)頁設(shè)計(jì),將“薩蘭威”酒莊完美的展現(xiàn)給世人,詮釋了網(wǎng)頁設(shè)計(jì)對(duì)企業(yè)的重要性。
關(guān)鍵詞:網(wǎng)頁設(shè)計(jì);種類;Photoshop;Dreamweaver;“薩蘭威”酒莊
當(dāng)你在瀏覽互聯(lián)網(wǎng)時(shí),有沒有一種沖動(dòng)想要自己做一個(gè)精美的互聯(lián)網(wǎng)頁面?當(dāng)你在看到淘寶、京東等著名網(wǎng)絡(luò)銷售商每年近似瘋狂的交易額時(shí),會(huì)不會(huì)也想要做網(wǎng)上商店?當(dāng)你在看到互聯(lián)網(wǎng)上日益增多的職位需求時(shí),是不是也想要將自己的個(gè)人信息發(fā)布到網(wǎng)上來讓更多的人看到你的才能?這就是網(wǎng)頁設(shè)計(jì)給我們帶來的視覺沖擊。那什么是網(wǎng)頁設(shè)計(jì)呢?如下:
網(wǎng)頁設(shè)計(jì)是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化),進(jìn)行網(wǎng)站功能策劃,然后進(jìn)行的頁面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種,精美的網(wǎng)頁設(shè)計(jì),對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。
網(wǎng)頁設(shè)計(jì)一般分為三種大類:功能型網(wǎng)頁設(shè)計(jì)(服務(wù)網(wǎng)站&B/S軟件用戶端)、形象型網(wǎng)頁設(shè)計(jì)(品牌形象站)、信息型網(wǎng)頁設(shè)計(jì)(門戶站)。設(shè)計(jì)網(wǎng)頁的目的不同,應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計(jì)方案。
網(wǎng)頁設(shè)計(jì)的工作目標(biāo),是通過使用更合理的顏色、字體、圖片、樣式進(jìn)行頁面設(shè)計(jì)美化,在功能限定的情況下,盡可能給予用戶完美的視覺體驗(yàn)。高級(jí)的網(wǎng)頁設(shè)計(jì)甚至?xí)紤]到通過聲光、交互等來實(shí)現(xiàn)更好的試聽感受。當(dāng)然網(wǎng)頁設(shè)計(jì)不僅僅是顏色、字體、圖片的堆砌,也不是套用現(xiàn)有的網(wǎng)頁模板。網(wǎng)頁設(shè)計(jì)是設(shè)計(jì)師靈魂的創(chuàng)作,把現(xiàn)有的資源整合到一起,使其有藝術(shù)的氣息,給客戶和參觀者以感官上的享受,達(dá)到心靈上的共鳴。
為了給用戶良好的視覺效果,設(shè)計(jì)師要確定網(wǎng)頁內(nèi)容的主題,了解產(chǎn)品的時(shí)代內(nèi)容,給予放飛的夢(mèng)想,讓所設(shè)計(jì)的網(wǎng)頁、產(chǎn)品形象時(shí)刻保持靈動(dòng)性。只有這樣才能做到網(wǎng)頁時(shí)時(shí)更新,每時(shí)每刻地注入新鮮血液。
網(wǎng)頁設(shè)計(jì)當(dāng)然也離不開網(wǎng)頁設(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)作,圖像處理的好壞直接影響了頁面和產(chǎn)品形象之間的整體效果,當(dāng)然圖像的處理要基于圖像本質(zhì),若改動(dòng)過大,勢(shì)必會(huì)造成實(shí)際產(chǎn)品與網(wǎng)絡(luò)產(chǎn)品相差甚遠(yuǎn),這就違背了網(wǎng)頁設(shè)計(jì)的初衷。
Dreamweaver是Macromedia公司的產(chǎn)品,是一款“所見即所得”的網(wǎng)頁編輯軟件。Dreamweaver能夠?qū)tml提供很好的支持,然后再通過JavaScript的配合,就可以輕而易舉地做出很多炫酷的頁面效果。正因?yàn)槿绱耸笵reamweaver能夠得到廣泛的運(yùn)用,也成為高級(jí)網(wǎng)頁設(shè)計(jì)的寵兒。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)頁的動(dòng)態(tài)效果實(shí)現(xiàn)。
基于以上的網(wǎng)頁設(shè)計(jì)要求和網(wǎng)頁設(shè)計(jì)軟件的功能,我以Photoshop和Dreamweaver為設(shè)計(jì)工具,運(yùn)用div+css技術(shù)、html5+css3技術(shù)與JavaScript腳本語言來實(shí)現(xiàn)整套網(wǎng)站的設(shè)計(jì)與布局。設(shè)計(jì)一套基于用戶體驗(yàn)的酒莊網(wǎng)站,該網(wǎng)站實(shí)現(xiàn)了首頁、美酒佳釀、酒莊文化、酒莊動(dòng)態(tài)和釀造工藝等網(wǎng)頁的設(shè)計(jì)與布局,建立完整的薩蘭威酒莊網(wǎng)站并進(jìn)行分析與測(cè)試,來保證網(wǎng)站能夠正常運(yùn)行。
在“薩蘭威”酒莊網(wǎng)站界面設(shè)計(jì)上采用了灰色和黃色,黃色代表紅酒酒瓶瓶塞的顏色,讓它和紅酒主題更能交相呼應(yīng),具有極大的浪漫氣息,而灰色配合著黃色給網(wǎng)頁在視覺上以一種柔和淡雅方式出現(xiàn)在顧客面前,這就是“薩蘭威”體現(xiàn)的情懷,不拘泥世俗,對(duì)品質(zhì)卓越的追求。
版式上采用了簡(jiǎn)潔而不簡(jiǎn)單的設(shè)計(jì)風(fēng)格,同時(shí)采用了留白的設(shè)計(jì)方式,這樣能夠使網(wǎng)頁在瞬息萬變的時(shí)代隨時(shí)添加酒莊的動(dòng)態(tài)和紅酒新時(shí)代主題。
功能上采用了響應(yīng)式網(wǎng)站,可以完美兼容任何設(shè)備,讓客戶和觀賞者隨時(shí)能夠在任何設(shè)備上了解酒莊的方方面面;采用了較多的js交互特效,這樣調(diào)動(dòng)了觀賞性,達(dá)到視覺沖擊。
為了達(dá)到我心中的設(shè)計(jì)理念,滿足“薩蘭威“酒莊需求,同時(shí)提供給“薩蘭威“酒莊客戶一個(gè)美好的,極具“薩蘭威”酒莊特色的網(wǎng)頁,我準(zhǔn)備了以下的工作:
1.完成基于“薩蘭威”酒莊網(wǎng)站制作過程中所采用的技術(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)頁的設(shè)計(jì)完成,僅僅是設(shè)計(jì)師的第一步工作,接下來還要測(cè)試設(shè)計(jì)網(wǎng)頁的運(yùn)行狀況。經(jīng)過以上的闡述,“薩蘭威”酒莊網(wǎng)頁設(shè)計(jì)的課題基本解決。經(jīng)過努力,“薩蘭威”酒莊網(wǎng)站終于完成,并且能夠搜索點(diǎn)擊,基本滿足人們通過網(wǎng)頁來了解“薩蘭威”酒莊。
由于自身技術(shù)水平,網(wǎng)頁還存在許多漏洞,還有很多功能沒有完善。比如,設(shè)計(jì)風(fēng)格還未完全統(tǒng)一,前期效果圖設(shè)計(jì)還不夠美觀,需要不斷完善,布局及編碼過程中的有些知識(shí)還未完全掌握。以后要通過學(xué)習(xí),去完善其現(xiàn)未有的功能和頁面。
在此次畢業(yè)論文:”薩蘭威“酒莊網(wǎng)站設(shè)計(jì)過程中,清楚地知道自己的不足,學(xué)到了很多沒有學(xué)到的網(wǎng)頁設(shè)計(jì)知識(shí),溫習(xí)了以前課程,使我的思維得到了嚴(yán)謹(jǐn)?shù)呐囵B(yǎng),讓我能夠樂觀的面對(duì)挑戰(zhàn)。還要感謝導(dǎo)師給我的指導(dǎo),讓我能夠快速的解決所遇到問題,同時(shí)感謝同學(xué)給我的幫助以及對(duì)我的啟迪。希望同學(xué)們以及我本人,把網(wǎng)頁設(shè)計(jì)做的更好。我也相信網(wǎng)頁設(shè)計(jì)這門學(xué)科在未來將大放異彩。
參考文獻(xiàn):
[1]劉西杰.《網(wǎng)頁制作從入門到精通》,人民郵電出版社,2013
[2]蘭倩.《版式設(shè)計(jì)在動(dòng)態(tài)媒介中的研究與應(yīng)用[D]》,北方工業(yè)大學(xué),2015.
[3]王建民.《網(wǎng)頁設(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)頁設(shè)計(jì)。