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

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

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

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

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

文章編號：1009-3044（2020）13-0082-03

當(dāng)下旅游網(wǎng)站眾多，途牛、同城、攜程等囊括大范圍的網(wǎng)站，還有許多地方性的旅游網(wǎng)站。我國大部分的地方性旅游網(wǎng)站在開發(fā)初期，由于缺少對旅游行業(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ǎng)站皆是一樣的內(nèi)容，索然無味。韶關(guān)擁有國家級風(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)頁極度缺少動畫、音頻等多媒體方面的信息展示。

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

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

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

此網(wǎng)站是專門提供韶關(guān)信息的一個網(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)站而言相對自由和明朗。具體流程如圖1所示。

2.1.1用戶需求層面分析

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

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

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

2.1.3制作步驟

1）網(wǎng)站定位

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

2）資料收集

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

3）草圖

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

4）效果圖

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

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)頁的動態(tài)功能，為用戶提供更好的瀏覽效果。

6）測試與檢查

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

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

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

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

uI設(shè)計(jì)階段一直在克服的問題是界面的整體風(fēng)格。整體風(fēng)格是用戶瀏覽界面的第一印象，會直接影響到用戶的視覺體驗(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ì)審美的同時還要能夠最大化遵循用戶習(xí)慣并優(yōu)化信息架構(gòu)，讓用戶能夠以最優(yōu)的路徑到達(dá)目的地，從而降低網(wǎng)站的迷失度。效果圖設(shè)計(jì)過程最難的地方是色彩搭配的問題，色彩搭配也是影響整體風(fēng)格的一個非常重要的因素。用什么顏色、怎樣搭配使用色彩才能使界面效果最大化，這個又要基于人對于色彩的感知，所以在這個過程的設(shè)計(jì)中要密切注意人與色彩心理學(xué)。

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

前者可以通過結(jié)構(gòu)簡單的代碼實(shí)現(xiàn)頁面跳轉(zhuǎn)，但是對于多個頁面同樣框架的頁面來說，會造成代碼冗余。而后者可以彌補(bǔ)前者的不足，通過JavaScript的顯示隱藏事件來實(shí)現(xiàn)同頁面不同內(nèi)容之間的轉(zhuǎn)換，但是與前者相比，后者在引入樣式的過程中有時候會出現(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)站從功能、兼容性以及易用性這三個方面進(jìn)行了一系列相關(guān)測試。在功能測試階段，頁面內(nèi)容測試和鏈接測試是網(wǎng)站測試的基礎(chǔ)。該網(wǎng)站內(nèi)容表達(dá)恰當(dāng)，用戶不會引起歧義。同時，網(wǎng)站提供的信息是經(jīng)過大量的資料收集對比，信息準(zhǔn)確。鏈接測試的環(huán)節(jié)，整體內(nèi)容鏈接跳轉(zhuǎn)正常，但在美食模塊中點(diǎn)擊部分美食的圖片，會出現(xiàn)跳轉(zhuǎn)到錯誤頁面的情況;概況模塊中點(diǎn)擊二級標(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)。同時，簡潔的界面降低了網(wǎng)站的操作難度，增強(qiáng)了用戶體驗(yàn)的友好性。

3總結(jié)

本研究利用目前最流行的Windows平臺應(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)容，讓用戶在短時間內(nèi)更加全面的了解韶關(guān)。