以“庫司里”西餐廳網(wǎng)頁界面設(shè)計(jì)為例談網(wǎng)站建設(shè)

摘要：在這個(gè)信息化的時(shí)代，網(wǎng)絡(luò)已經(jīng)成為人與人之間交流的一種方式，同時(shí)也是傳遞信息的重要渠道。它可以代替?zhèn)鹘y(tǒng)的傳達(dá)交流方式，擺脫時(shí)間和空間的限制。就網(wǎng)站而言，它為很多人提供了一個(gè)網(wǎng)絡(luò)的生活空間，通過其網(wǎng)頁展示來代替紙張等一系列宣傳手段，把信息更全面更直觀的傳遞給用戶，從而達(dá)到企業(yè)營(yíng)銷和宣傳的目的。因此可以看出現(xiàn)如今網(wǎng)站建設(shè)的重要性，它已成為當(dāng)代信息化建設(shè)中的重要組成部分。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；設(shè)計(jì)與制作；美觀；實(shí)用性

中圖分類號(hào)：O437.2 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1671-864X（2016）02-0249-01

本文比較系統(tǒng)的闡述了有關(guān)網(wǎng)頁界面設(shè)計(jì)與制作的相關(guān)知識(shí)，充分體現(xiàn)了網(wǎng)站建設(shè)服務(wù)于經(jīng)濟(jì)建設(shè)的重要思想。網(wǎng)頁設(shè)計(jì)不僅要從美觀上考慮，更要注重的是實(shí)用性，即我們最初做這套網(wǎng)站想表達(dá)的主題以及想要達(dá)到的目的。

網(wǎng)頁設(shè)計(jì)是一個(gè)連貫的過程，具體制作流程如下：

1.首先，設(shè)計(jì)人員在獲取客戶需求的同時(shí)應(yīng)對(duì)網(wǎng)站進(jìn)行一系列分析。設(shè)計(jì)師應(yīng)該了解客戶為什么要做這個(gè)項(xiàng)目，只有確定建站的目的才能更好地完成客戶的需求。

2.其次，確定網(wǎng)站內(nèi)容的同時(shí)應(yīng)對(duì)同行業(yè)網(wǎng)站進(jìn)行考察，從而取長(zhǎng)補(bǔ)短。設(shè)計(jì)人員選擇適合自己的界面設(shè)計(jì)軟件以及網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁的初步設(shè)計(jì)，設(shè)計(jì)開始的時(shí)候就要為網(wǎng)站定位一個(gè)主題，讓整個(gè)網(wǎng)頁都圍繞這個(gè)主題進(jìn)行設(shè)計(jì)制作，從而保證網(wǎng)站風(fēng)格和諧統(tǒng)一。

3.設(shè)計(jì)制作完成后要運(yùn)用各類瀏覽器進(jìn)行測(cè)試，解決常用瀏覽器的兼容性問題。例如IE、360、火狐、谷歌、Opera、騰訊等瀏覽器。測(cè)試無誤后，網(wǎng)站就可以準(zhǔn)備上線了。

以上講了網(wǎng)站建設(shè)的基本流程，接下來我們就結(jié)合“庫司里”西餐廳網(wǎng)頁界面設(shè)計(jì)具體分析一下網(wǎng)頁設(shè)計(jì)上的那些事。

好的網(wǎng)站設(shè)計(jì)并不是直接套用已有的網(wǎng)站模板，而是要在考慮網(wǎng)頁界面設(shè)計(jì)美觀的同時(shí)，更要注重它的合理性、實(shí)用性。運(yùn)用每個(gè)模塊的合理劃分來展示網(wǎng)站的各個(gè)功能，讓用戶在欣賞美的同時(shí)有效便捷的獲取到網(wǎng)站所傳達(dá)的信息。網(wǎng)頁設(shè)計(jì)離不開軟件的操作使用，要想讓網(wǎng)站美觀合理，在眾多網(wǎng)站中脫穎而出，就必須要在網(wǎng)頁版式設(shè)計(jì)上多花費(fèi)些功夫。

目前市場(chǎng)上的網(wǎng)站雖多，但都大同小異。想突出你的網(wǎng)站就不能局限于現(xiàn)有的網(wǎng)站版式布局，要突破傳統(tǒng)。表現(xiàn)出一種具有創(chuàng)新性的視覺傳送方式。“庫司里”西餐廳主要針對(duì)的是國(guó)內(nèi)消費(fèi)人群。

首先了解西餐廳在國(guó)內(nèi)餐飲行業(yè)的發(fā)展前景，主題西餐廳是實(shí)現(xiàn)餐飲差異化的一種有效途徑，是未來餐廳發(fā)展的重要趨勢(shì)。分析國(guó)內(nèi)已有此類網(wǎng)站的風(fēng)格特色，確定網(wǎng)站的整體風(fēng)格，考慮網(wǎng)站的整體架構(gòu)和配色方案。做好前期準(zhǔn)備工作后，運(yùn)用制圖軟件設(shè)計(jì)網(wǎng)站標(biāo)志，然后進(jìn)行整個(gè)網(wǎng)站的版式設(shè)計(jì)，設(shè)計(jì)過程中要考慮到網(wǎng)站整體的配色、字體的樣式、圖文的搭配、各個(gè)版塊的關(guān)聯(lián)以及順序。

一、網(wǎng)頁配色

絕大多數(shù)的網(wǎng)站擁有類似的配色，不能感覺到網(wǎng)頁的新穎，從而無法使訪問者與其產(chǎn)生一種積極的聯(lián)系。獨(dú)特的設(shè)計(jì)可以使你的網(wǎng)站很醒目，這樣用戶可能會(huì)花更多時(shí)間瀏覽并且有意識(shí)的記下這個(gè)網(wǎng)址以便下次再來訪問。在設(shè)計(jì)中融入一些不同的色彩元素是很重要的，有明有暗的視覺對(duì)比更能夠使人們的視覺達(dá)到平衡。

二、字體樣式

隨著網(wǎng)頁設(shè)計(jì)潮流的不斷變化，字體的樣式也在發(fā)生著變化。字體的大小粗細(xì)、行間距、顏色對(duì)比等都是影響網(wǎng)站美觀和用戶體驗(yàn)的因素。在“庫司里”西餐廳網(wǎng)站中大部分文本采用網(wǎng)頁基礎(chǔ)字號(hào)12像素，標(biāo)題適當(dāng)?shù)牟捎蒙源笮┑淖痔?hào)。在需要的地方進(jìn)行留白設(shè)計(jì)，同時(shí)注意到字體的行間距、段落對(duì)齊方式、大小粗細(xì)對(duì)比、顏色深淺對(duì)比等。

三、圖文搭配

圖文搭配的布局方式會(huì)緩解用戶瀏覽網(wǎng)頁時(shí)的視覺疲勞，讓網(wǎng)站整體美觀舒適，一般圖文排列方式分為左文右圖或者是左圖右文，這樣會(huì)讓版式看起來規(guī)整有條理，能讓用戶帶著閱讀興趣去瀏覽網(wǎng)站，從而達(dá)到網(wǎng)站運(yùn)營(yíng)的目的?！皫焖纠铩蔽鞑蛷d網(wǎng)站就是合理的運(yùn)用圖文搭配的方式將餐廳菜品、餐廳文化以及餐廳訂購信息等展示的淋漓盡致。

四、板塊關(guān)聯(lián)

網(wǎng)站主頁就像是宣傳欄或者門面，是使用戶瀏覽網(wǎng)站時(shí)產(chǎn)生第一印象的地方。首頁一般是整個(gè)網(wǎng)站的精華之處，起到導(dǎo)航的作用。首頁內(nèi)容應(yīng)精彩豐富，語言干練，簡(jiǎn)潔明快，通俗易懂。首頁制作時(shí)應(yīng)時(shí)刻考慮網(wǎng)站統(tǒng)一、連貫、分割、對(duì)比以及和諧的原則，內(nèi)容統(tǒng)一，都是為了網(wǎng)站主題而服務(wù)，一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的；連貫，頁面之間關(guān)系連貫，統(tǒng)成一體；每版內(nèi)容都自成一體，讓每個(gè)模塊有所區(qū)分，這樣便于瀏覽；整個(gè)網(wǎng)頁有動(dòng)有靜，在靜態(tài)網(wǎng)頁中加入一切動(dòng)態(tài)特效形成對(duì)比，不呆板，富有生氣；讓網(wǎng)站整體在不同之中又相同，渾然一體。

“庫司里”西餐廳網(wǎng)站的創(chuàng)新之處在于網(wǎng)站整體采用扁平化的設(shè)計(jì)，配合必要的交錯(cuò)重疊的排版。打破版面呆板、平淡的格局。構(gòu)圖上則大膽的采用三角形構(gòu)圖和斜角對(duì)稱等方式進(jìn)行制作。個(gè)性化的表現(xiàn)出一種具有個(gè)人風(fēng)格和藝術(shù)特色的視覺傳送方式，從而達(dá)到意新、形美、變化而又統(tǒng)一。使人們的視覺感受產(chǎn)生趣味性。版面的設(shè)計(jì)整齊統(tǒng)一、圖文結(jié)合，既可以突出餐廳主題特色，又可以減少用戶對(duì)瀏覽網(wǎng)頁的認(rèn)知障礙和閱讀疲勞。

網(wǎng)頁設(shè)計(jì)逐步脫離了傳統(tǒng)的平面設(shè)計(jì)和網(wǎng)站建設(shè)的范疇，形成了介于這兩者之間的獨(dú)立特殊體系。這就要求設(shè)計(jì)開發(fā)人員不僅要在界面設(shè)計(jì)上有獨(dú)到的見解，還要有一定的開發(fā)技術(shù)水平?？傊?，要想精通網(wǎng)頁設(shè)計(jì)還需要大家不間斷的學(xué)習(xí)才能更好地掌握其中的奧妙。

參考文獻(xiàn)：

[1]王受之.世界平面設(shè)計(jì)史[M].北京：中國(guó)青年出版社，2002.

[2]胡飛. 藝術(shù)設(shè)計(jì)符號(hào)基礎(chǔ)[M].北京：清華大學(xué)出版社，2008.

[3]（英）赫利. 什么是品牌設(shè)計(jì)[M].北京：中國(guó)青年出版社，2000.

[4]（美）馬特·馬圖斯. 設(shè)計(jì)趨勢(shì)之上[M].山東：山東畫報(bào)出版社，2009.78～86

[5]朱永明. 視覺傳達(dá)設(shè)計(jì)中的圖形、符號(hào)與語言[J].南京藝術(shù)學(xué)院學(xué)報(bào)（美術(shù)與設(shè)計(jì)版），2004

[6] Bojko， Szymon. 1972. New graphic design in revolutionary Russia [M]. LundHumphries.

[7] Thompson， Bradbury. 1988. The art of graphic design： Bradbury Thompson [M]. YaleUniversity Press.

作者簡(jiǎn)介：王丹鳳（1993-），女，漢族，山東濟(jì)南，本科，山東女子學(xué)院信息技術(shù)學(xué)院，研究方向：網(wǎng)頁設(shè)計(jì)。