關(guān)敏娟 鄧瑾蓮 黃顯冰

摘要：隨著因特網(wǎng)的發(fā)展，旅游網(wǎng)站紛紛落戶，促進(jìn)旅游這個(gè)行業(yè)的大力發(fā)展。這類網(wǎng)站多以提供旅游資訊為主，網(wǎng)站信息內(nèi)容呈現(xiàn)方式單一，以圖文相結(jié)合的網(wǎng)頁形式為主。該文以中國優(yōu)秀旅游城市——韶關(guān)為素材收集對(duì)象，設(shè)計(jì)一個(gè)包含資訊、美食、虛擬游覽景區(qū)等內(nèi)容的韶關(guān)旅游網(wǎng)站，避免了信息內(nèi)容呈現(xiàn)的單一。

關(guān)鍵詞：旅游網(wǎng)站;虛擬游覽;韶關(guān)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）13-0082-03

當(dāng)下旅游網(wǎng)站眾多，途牛、同城、攜程等囊括大范圍的網(wǎng)站，還有許多地方性的旅游網(wǎng)站。我國大部分的地方性旅游網(wǎng)站在開發(fā)初期，由于缺少對(duì)旅游行業(yè)和網(wǎng)絡(luò)運(yùn)營的了解，未能找準(zhǔn)切人點(diǎn)，使旅游網(wǎng)站建成之后缺乏特色與“賣點(diǎn)”，往往照搬照抄其他旅游網(wǎng)站的現(xiàn)成模式，內(nèi)容單一，景區(qū)介紹更是簡單枯燥，一律的景點(diǎn)圖片查看，景點(diǎn)歷史介紹，攻略等?？丛俣嗖煌穆糜尉W(wǎng)站皆是一樣的內(nèi)容，索然無味。韶關(guān)擁有國家級(jí)風(fēng)景區(qū)丹霞山、南宗禪法發(fā)祥地南華寺、悠久革命歷史的文化遺址雙峰寨等眾多聞名景點(diǎn)，2018年接待旅游者人數(shù)4790萬人次，旅游總收入453億元。本網(wǎng)站獨(dú)特的虛擬游覽景區(qū)可以使游客猶如身臨其境般的游玩了特色景點(diǎn)，游客可以通過本網(wǎng)站了解韶關(guān)各旅游景點(diǎn)，提前做好旅游準(zhǔn)備工作，讓游客有目的性的游玩。

1旅游網(wǎng)站現(xiàn)狀分析

隨著旅游業(yè)的發(fā)展和繁榮，旅游信息的需求量也隨之增大，旅游網(wǎng)站則是成為人們獲取各種旅游信息的首要窗口。各大旅游網(wǎng)站從景點(diǎn)的選擇到旅行路線，從交通工具到酒店人住，從旅游攻略到當(dāng)?shù)刭Y訊等人陛化的服務(wù)為游客提供了比較全面的旅游信息。但是單從網(wǎng)站內(nèi)容分析各大旅游網(wǎng)站，內(nèi)容體現(xiàn)形式有各自的不足。網(wǎng)站首頁設(shè)計(jì)過于復(fù)雜，內(nèi)容展覽過多，導(dǎo)致欄目增設(shè)過于模糊，版面凌亂;網(wǎng)站信息呈現(xiàn)方式單一，以圖文相結(jié)合的網(wǎng)頁極度缺少動(dòng)畫、音頻等多媒體方面的信息展示。

為了使游客可以詳細(xì)地了解景區(qū)信息，同時(shí)又保持網(wǎng)站內(nèi)容的簡潔明了，本網(wǎng)站設(shè)計(jì)時(shí)注重首頁清晰簡單，欄目的設(shè)置沒有過多冗余。此外，顏色搭配造成的視覺效果也是網(wǎng)站建設(shè)的一個(gè)重要點(diǎn)。最為重要本網(wǎng)站獨(dú)有的虛擬旅游韶關(guān)自然與歷史文化遺產(chǎn)景區(qū)，以貼近真實(shí)的虛擬游覽為一個(gè)多媒體展示形式，避免信息內(nèi)容呈現(xiàn)單一的不足。

2韶關(guān)自然與歷史文化遺產(chǎn)虛擬游覽網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

2.1設(shè)計(jì)思路

此網(wǎng)站是專門提供韶關(guān)信息的一個(gè)網(wǎng)站，涵蓋了韶關(guān)特色美食、住宿、景區(qū)等人文信息。設(shè)計(jì)階段最重要的是用戶需求調(diào)研、網(wǎng)站功能設(shè)計(jì)及網(wǎng)站的整體風(fēng)格與色彩搭配，不同功能的網(wǎng)站整體風(fēng)格和色彩搭配是不同的。鑒于該網(wǎng)站是給用戶提供旅游出行信息的，因此，網(wǎng)站的風(fēng)格和色彩較其他網(wǎng)站而言相對(duì)自由和明朗。具體流程如圖1所示。

2.1.1用戶需求層面分析

此網(wǎng)站是給用戶提供旅游出行信息，讓用戶更加了解韶關(guān)，因此，網(wǎng)站欄目也主要是圍繞著首頁、概況、資訊、美食、住宿、景區(qū)這六個(gè)模塊進(jìn)行展開。其中，首頁模塊融合了其他模塊的部分內(nèi)容，階段性地推薦相應(yīng)的信息給用戶。概況模塊用來介紹韶關(guān)的整體信息，包括韶關(guān)的基本介紹、地理環(huán)境、自然資源以及人口民族等方面的信息，能夠讓用戶在短時(shí)間內(nèi)最大化地了解韶關(guān)。資訊模塊會(huì)更新韶關(guān)最近的新聞事件，用戶可以在此了解韶關(guān)的最新動(dòng)態(tài)。美食和住宿兩個(gè)模塊里面收集了評(píng)價(jià)比較高的特色食物以及住宿信息。景區(qū)這一模塊包含了韶關(guān)各景區(qū)的相關(guān)介紹以及部分景區(qū)的漫游，用戶可以在漫游區(qū)身臨其境地游覽景區(qū)。

2.1.2用戶體驗(yàn)層面分析

用戶體驗(yàn)是用戶在使用產(chǎn)品過程中建立起來的一種純主觀的感受，此網(wǎng)站更加注重色彩和布局這兩方面給用戶帶來的感觀體驗(yàn)?；谏蕩Ыo人們的心理錯(cuò)覺，此網(wǎng)站通過橙色這個(gè)主色和青色、紫色等輔助色之間的對(duì)比調(diào)和來體現(xiàn)明亮的色彩風(fēng)格。明度較高的給人輕感，橙色代表親切和陽光，因此用戶在瀏覽頁面的時(shí)候也能體驗(yàn)到安心與溫暖的感覺。色彩多變的輔助色在一定程度上讓整個(gè)頁面更加年輕化;與此同時(shí)，不同于兩邊的刺眼的白色，安全區(qū)域用了淺灰色來作為背景顏色，能夠在一定程度上減緩用戶的視覺疲勞，增強(qiáng)用戶體驗(yàn)的友好性。在布局方面，遵循“一切從簡”的原則，盡可能減少頁面內(nèi)容過多而引起的雜亂現(xiàn)象。盡量使用圖片和文字相結(jié)合，并且用不同色彩的變化以及文字與線條組合的方式進(jìn)行區(qū)分不同模塊內(nèi)容，同時(shí)設(shè)置鼠標(biāo)事件，通過鼠標(biāo)事件實(shí)現(xiàn)的交互動(dòng)態(tài)效果可增加用戶體驗(yàn)的趣味性。

2.1.3制作步驟

1）網(wǎng)站定位

基于政府“壯大旅游產(chǎn)業(yè)”的方針政策、社會(huì)觀念與旅游市場大環(huán)境的前提，確定網(wǎng)站的核心目標(biāo)、使用場合、使用群體以及整體風(fēng)格。

2）資料收集

根據(jù)網(wǎng)站定位以及用戶需求進(jìn)行相關(guān)內(nèi)容的收集，再把收集到的信息按模塊進(jìn)行分類。

3）草圖

使用Pencil工具進(jìn)行草圖的繪制。繪制過程中需要指明每個(gè)頁面的具體功能，并根據(jù)“用戶體驗(yàn)最優(yōu)化”的原則確定好每個(gè)模塊的具體內(nèi)容，同時(shí)進(jìn)行合理化的編排。初稿完成之后，還要檢查導(dǎo)航的定位是否明確、模塊內(nèi)容是不是用戶所需要的、二級(jí)欄目的分類合不合理以及欄目的內(nèi)容是否與欄目標(biāo)題相關(guān)。如果不符合上述要求，則需要再次進(jìn)行調(diào)整。

4）效果圖

使用Adobe Photoshop來實(shí)現(xiàn)效果圖。這個(gè)過程需要依據(jù)草圖的大致排版，并且根據(jù)設(shè)計(jì)規(guī)范來進(jìn)行設(shè)計(jì)。對(duì)于頁面圖片的處理，需要根據(jù)排版來進(jìn)行大小以及比例的調(diào)整，同時(shí)還要處理在這個(gè)過程中帶來的圖片失真的問題。

5）編程

用Visual studio來進(jìn)行編程，首先進(jìn)行頁面基本結(jié)構(gòu)的編碼。完成之后，用Adobe Dreamweaver來進(jìn)行CSS樣式以及Ja-vaScript腳本的編寫，然后引入到Visual studio中，實(shí)現(xiàn)修飾網(wǎng)頁以及網(wǎng)頁的動(dòng)態(tài)功能，為用戶提供更好的瀏覽效果。

6）測試與檢查

將編輯好的程序進(jìn)行預(yù)覽測試，檢查是否會(huì)出現(xiàn)編譯錯(cuò)誤、頁面跳轉(zhuǎn)錯(cuò)誤、點(diǎn)擊按鈕有沒有反應(yīng)、顯示頁面結(jié)構(gòu)明顯與效果圖不同等情況，同時(shí)還需要將預(yù)覽的網(wǎng)頁保存成圖片，然后與效果圖進(jìn)行測量對(duì)比，如果有出現(xiàn)不同的情況，則需要回到源程序找到錯(cuò)誤源并進(jìn)行修改。瀏覽器的兼容性也是需要檢查的一項(xiàng)內(nèi)容，有些瀏覽器可能無法顯示部分圖片，需要在源程序設(shè)置當(dāng)圖片無法顯示的時(shí)候出現(xiàn)文字提醒，告知用戶這是相關(guān)圖片。

2.2欄目結(jié)構(gòu)

欄目設(shè)計(jì)首先要明確設(shè)計(jì)網(wǎng)站的目的性和受眾需求，其次欄目名稱須高度概括欄目內(nèi)容。此網(wǎng)站為游客提供韶關(guān)旅游信息，當(dāng)?shù)芈糜涡畔⒏爬橐率匙⌒?。首頁、概況、資訊、美食、住宿和景區(qū)這六個(gè)一級(jí)欄目簡潔明了地介紹了韶關(guān)衣食住行，可以快速滿足游客了解韶關(guān)的基本需求。一級(jí)欄目之下設(shè)計(jì)韶關(guān)風(fēng)采、人口民族、特色美食、民宿、交通、漫游區(qū)等次級(jí)欄目，讓游客從不同方面了解了韶關(guān)。而漫游區(qū)中的虛擬游覽景點(diǎn)是本網(wǎng)站個(gè)性化的一個(gè)欄目，不僅有傳統(tǒng)的景點(diǎn)歷史介紹，還增加了一個(gè)漫游，豐富了網(wǎng)站多樣性。

2.3技術(shù)難點(diǎn)

uI設(shè)計(jì)階段一直在克服的問題是界面的整體風(fēng)格。整體風(fēng)格是用戶瀏覽界面的第一印象，會(huì)直接影響到用戶的視覺體驗(yàn)，因此在草圖階段確定好內(nèi)容模塊的排版。設(shè)計(jì)草圖過程中需要解決的主要矛盾是美觀與用戶習(xí)慣之間的矛盾。全程按照藝術(shù)設(shè)計(jì)來進(jìn)行模塊內(nèi)容的排版往往出現(xiàn)違反用戶習(xí)慣的現(xiàn)象，從而導(dǎo)致用戶體驗(yàn)感下降。好的排版在體現(xiàn)視覺設(shè)計(jì)審美的同時(shí)還要能夠最大化遵循用戶習(xí)慣并優(yōu)化信息架構(gòu)，讓用戶能夠以最優(yōu)的路徑到達(dá)目的地，從而降低網(wǎng)站的迷失度。效果圖設(shè)計(jì)過程最難的地方是色彩搭配的問題，色彩搭配也是影響整體風(fēng)格的一個(gè)非常重要的因素。用什么顏色、怎樣搭配使用色彩才能使界面效果最大化，這個(gè)又要基于人對(duì)于色彩的感知，所以在這個(gè)過程的設(shè)計(jì)中要密切注意人與色彩心理學(xué)。

編程實(shí)現(xiàn)階段的難點(diǎn)就是靜態(tài)布局和動(dòng)態(tài)布局之間的衡量選擇。靜態(tài)布局使用的是絕對(duì)寬度和高度，能夠根據(jù)設(shè)置的布局來顯示在頁面中，通過使用滾動(dòng)條來瀏覽被遮掩的部分，同時(shí)不會(huì)出現(xiàn)兼容性的問題。而動(dòng)態(tài)布局能夠克服靜態(tài)布局的弊端，實(shí)現(xiàn)網(wǎng)頁的自適應(yīng)調(diào)整，但在瀏覽器的兼容性上有一定的要求，且開發(fā)效率低下。當(dāng)頁面布局改變較大時(shí)，在一定程度上增加了CSS樣式修改的難度。其次是頁面跳轉(zhuǎn)與同頁面不同內(nèi)容的轉(zhuǎn)換之間的衡量選擇。

前者可以通過結(jié)構(gòu)簡單的代碼實(shí)現(xiàn)頁面跳轉(zhuǎn)，但是對(duì)于多個(gè)頁面同樣框架的頁面來說，會(huì)造成代碼冗余。而后者可以彌補(bǔ)前者的不足，通過JavaScript的顯示隱藏事件來實(shí)現(xiàn)同頁面不同內(nèi)容之間的轉(zhuǎn)換，但是與前者相比，后者在引入樣式的過程中有時(shí)候會(huì)出現(xiàn)引入失敗問題。

2.4網(wǎng)站測試結(jié)果

網(wǎng)站漏洞在網(wǎng)站開發(fā)的過程中是無法避免的，只能不斷地通過網(wǎng)站測試來優(yōu)化網(wǎng)站。由此可見，網(wǎng)站測試是保證網(wǎng)站質(zhì)量的必要環(huán)節(jié)。部分測試結(jié)果如圖3、圖4所示。

韶關(guān)自然與歷史文化遺產(chǎn)虛擬游覽網(wǎng)站從功能、兼容性以及易用性這三個(gè)方面進(jìn)行了一系列相關(guān)測試。在功能測試階段，頁面內(nèi)容測試和鏈接測試是網(wǎng)站測試的基礎(chǔ)。該網(wǎng)站內(nèi)容表達(dá)恰當(dāng)，用戶不會(huì)引起歧義。同時(shí)，網(wǎng)站提供的信息是經(jīng)過大量的資料收集對(duì)比，信息準(zhǔn)確。鏈接測試的環(huán)節(jié)，整體內(nèi)容鏈接跳轉(zhuǎn)正常，但在美食模塊中點(diǎn)擊部分美食的圖片，會(huì)出現(xiàn)跳轉(zhuǎn)到錯(cuò)誤頁面的情況;概況模塊中點(diǎn)擊二級(jí)標(biāo)題切換內(nèi)容沒有反應(yīng)，文章內(nèi)容的隱藏與顯示也出現(xiàn)了問題。在兼容性測試階段，采用了目前市場的主流瀏覽器，如IE、Firefox、Chrome等瀏覽器進(jìn)行了兼容性的測試，測試結(jié)果并未顯示異常。在易用性檢測階段，該網(wǎng)站從導(dǎo)航和界面進(jìn)行了具體的研究分析。韶關(guān)自然與歷史文化遺產(chǎn)虛擬游覽網(wǎng)站導(dǎo)航架構(gòu)十分清晰，用戶聚焦度較高，用戶能夠十分快速的通過導(dǎo)航定位到想要了解的信息點(diǎn)。同時(shí)，簡潔的界面降低了網(wǎng)站的操作難度，增強(qiáng)了用戶體驗(yàn)的友好性。

3總結(jié)

本研究利用目前最流行的Windows平臺(tái)應(yīng)用程序的集成開發(fā)環(huán)境Visual Studio、網(wǎng)頁代碼編輯器Adobe Dreamweaver、圖片處理的輔助工具Photoshop和草圖工具Pencil來進(jìn)行韶關(guān)旅游網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)。該網(wǎng)站提供了大部分出行者比較關(guān)注的信息，用戶可以在里面集中瀏覽韶關(guān)相關(guān)信息，不用再分別搜索不同方面的內(nèi)容，讓用戶在短時(shí)間內(nèi)更加全面的了解韶關(guān)。