第四章 網頁架構與設計
第二節 網頁內容資訊說明
地區興建城堡,初名為「奧倫治」(Orang),後改名「熱蘭遮城」。鄭成功收復台 灣後註居於此,故又稱為「王城」。到1930 年日本殖民時,為慶祝台灣文化 300 年,將其改裝為洋樓,作為展覽和招待遊客的地方,成為今日的模樣,通稱為
「安平古堡」)。
「旅遊資訊提供」主要以實用資訊為主,如線上訂房及查詢住宿情況、線 上查詢班機、機位及訂購機票、天氣、疫情、匯率、時刻、自行辦理赴台旅遊 文件的流程資訊等項目,將以超連結的方式提供。其中景點介紹的方式,將會 以「配套」的方式作為介紹方式,主要乃是因為現今的旅遊趨勢已有所改變,
喜歡深度、個人專屬行程設計的顧客,對於一個地點希望是以更活潑、更深入 的方式進行了解,對於一個地方是希望不是單點的旅遊方式,而是一種較全面 性的旅遊方式,因此,在景點的介紹將是由一個主軸,進行線及面的延展,如 在介紹安平古堡的同時,將會一併介紹當地的旅遊方式和特色小店等。
「互動討論」則是以留言板和論壇的方式建構而成的,包括玩家經驗交流、
照片張貼、自助旅遊者結伴同遊管道、客戶抱怨、申訴管道、最新旅遊發燒話 題等。這邊主要是進行管理與維護的工作,百分之九十的內容仰賴顧客們提供,
為了有一個良好的環境、增加顧客的互定意願,將會搭配各種獎勵措施和優惠,
促使大家出面發表文章和心得。
圖8 首頁應提供之功能要素
而研究者綜合其所得並根據本blog 設立經營方向的特性,將分為文字、版 面、圖像、色彩、超連結五項說明之。
(一)文字
文字的敘述是網頁設計的重要核心,也可表現一個網站的精髓與內涵。因 此在網頁設計的專業領域裡,文字的排版是非常重要的。研究者利用行距和間 距及 ccs 替 blog 的文字界定大小和排列的方式,所採取的原則就是大標題Æ次 標題Æ小標題的方式,用不同的字大小分出階層,如文章內文和標題的字體大 小便會有所不同。
(二)版面
本部落格的板面如下圖9 所示,上方黃色的部份將放置部落格的名稱-台灣 旅遊誌,其下方灰色的部份就是頁面功能的聯結按鈕,包括首頁、標籤、留言 主題名稱和logo
(形象識別)
網站訊息和說明 背景
網站架構的目錄(導覽)
圖像
部落格名稱
文章類別 頁面功能聯結按鈕
台灣各地風景美照輪播
文章本文內容
綠色的部分和右上方綠色的部份,則是以台灣各地的風景美照作為主體,讓進 來的人可以一開始就被圖像和文字吸引,不採用抽象的藝術圖片,將主題及本 部落格的意識特別顯出。
而在下方的部份則是文章的本文內容,會隨著讀者點選的文章類別而變 動。用戶流覽網頁時,首先觀察網頁的左上部和上層部分,之後再往下閱讀,
流覽右邊的內容使用者普遍的流覽方式呈現出「F」的形狀(轉引自鍾國文,2004)。
因此,研究者將網站內容的重要要素集中於這些關鍵區域,以此確保讀者 的參與。在此放置頭條,副題,熱點以及重要文章,期許這樣可以吸引到讀者 進行閱讀。而本研究中實作的blog 首頁的版面編排如圖 9。
圖9 blog 首頁版面
(三)圖像
至於圖像的應用上,利用認知的角度將具象徵意義之符號所建構成識別符
號(標誌、標準字及標準色),可進一步發展成為具代表性意向的象徵圖案。
此圖像在網頁設計之介面設計上最能形成共同特徵,讓使用者在網站介面 瀏覽時,可獲得一致性風格的引導,避免「不知身在何處」的使用挫折感,讓 圖像在以使用者為中心的介面能發揮其適當地、貼切地、正確地傳遞它所期望 表示的意含;同時可以藉由此圖像元素對於使用者的認知度與熟悉度高的原 故,應用於選單按鍵上,讓介面的操作功能隱喻在按鍵中並做適當的引導提示。
象徵圖案是網頁設計的元素中,在介面設計上最能形成共同特徵、且塑造風格 一致的網站視覺(鍾國文,2004)。
因此,在象徵圖案的選擇上,擬以台灣的形狀為主,但彩色的模樣在視覺 上和版面設計上有不夠乾淨之感,故直接以一個剪影的台灣作為本部落格的象 徵圖案。
本研究對於象徵圖案的發想過程,如圖10 所示:
圖10 象徵圖案發想過程
(四)色彩
色彩是人的視覺最敏感的東西,色彩也具有象徵性,例如:嫩綠色、翠綠 色、黃色、灰褐色就可以分別象徵著春、夏、秋、冬。其次還有職業的標誌色,
剪影
達到事半功倍的效果。
而本部落格主頁的整體色彩效果是和諧的,只有局部的、小範圍的地方有 一些強烈色彩的對比。在色彩的運用上,根據主頁內容的需要,分別採用不同 的主色調,以藍和灰為主。因為色彩還具有明顯的心理感覺,例如冷、暖的感 覺,進、退的效果等。因此我們採用藍、白和綠可以讓人放鬆並聯想到旅遊的 顏色作為主要的色彩選擇。
網頁設計中常用的配色方式有以下幾種(鍾國文,2004):
1.暖色調:即紅色、橙色、黃色、赭色等色彩的搭配。這種色調的運用,可使主 頁呈現溫馨、和煦、熱情的氛圍。
2.冷色調:即青色、綠色、紫色等色彩的搭配。這種色調的運用,可使主頁呈現 寧靜、清涼、高雅的氛圍。
3.對比色調:即把色性完全相反的色彩搭配在同一個空間裏。例如:紅與綠、黃 與紫、橙與藍等。這種色彩的搭配,可以產生強烈的視覺效果,給人亮麗、鮮 豔、喜慶的感覺。當然,對比色調如果用得不好,會適得其反,產生俗氣、刺 眼的不良效果。
而研究者在設計網頁時,便以第二種方式-冷色調,作為主要的配色運用方 式,讓讀者看到草綠、藍綠、天藍、深藍等色後,很容易聯想到草地、太空、
冰雪、海洋等物像,產生廣闊、寒冷、理智、平靜等感覺,就像是出去旅遊一 樣。
(五)超連結
因本部落格的設立主旨及特性,除本研究的創意部分外,其餘以超連結方 式連結至提供該服務或資訊之網站,以避免疊床架屋。
如線上訂房及查詢住宿情況、線上查詢班機、機位及訂購機票、天氣、疫 情、匯率、時刻、自行辦理赴台旅遊文件的流程資訊等項目,將以超連結的方 式提供,主要的原因是為了讓網站的內容資訊能維持一定的整齊程度,且這方
面的資訊若要自行建立,會有多餘的成本花費且不符合本部落格的創新服務精 神,舉例而言,對於天氣資訊的提供,就以提供中央氣象局的聯結為主要方式 (http://www.cwb.gov.tw/V6/index.htm),使其另開新視窗獲得關於天氣的資訊。
其運作過程如下圖11 所示。
圖11 部落格超連結示意圖(一)
(六)整體營造
一件產品的印象塑造,是具備各種層面的,為了將台灣旅遊網塑造成來自 台灣的獨一無二的旅遊服務部落格,不同的層面(時間感、空間感等)研究者都有 詳細的考量並使用。
由圖12 可以得知,在部落格設計的時候,於時間感上,研究者考慮到以往 都是隨團的大拜拜行程的旅遊方式,勢必會走向完全客製化的旅遊方式,而這 樣的旅遊方式,就是一種精緻的且高品質的旅遊。
點選天氣資訊
另開新視窗 超連結
圖12 部落格超連結示意圖(二)
二、網頁內容資訊
在網頁內容資訊方面,主要分為文章內容、行程安排、服務資訊等三種,
茲一一說明如下。
(一)文章內容
圖13 本研究自行架設之台灣旅遊誌─「台灣史介紹」
時間(與過去/未來/現在的關係)
過去=隨團大拜拜
現在=假性客製化行程興起 未來=真正的客製化
空間(高級/健康 本土性強)
科技(運用網路/品質第一)
真實性(實地/實景/實例介紹)
產品複雜性(精緻的/高品質)
規模(小而質精/產品線多且廣)
整體印象
台灣旅遊網是客制
化行程的首選
在文章內容方面,除了前述超連結提供的資訊以外,主要以認識台灣的分 類為主,裡頭包括歷史與文化、旅遊景點、地方美食、交通、民間故事等。其 中民
間故事的分類更是本站獨有的巧思,在民間傳說中,有許多有趣、也很有 意思的稗官野史,這樣的內容除了可以讓網站呈現特殊性外,還可以讓旅遊者 有尋奇、有趣的新鮮感受,加強使用者和服務間的聯結。(如圖 13 及圖 14)
圖14 本研究自行架設之台灣旅遊誌─「台灣民間故事」
(二)行程安排
這部份主要是依靠免費的旅遊規劃,將使用者導入獲利模式中,因此行程 安排為本研究中最主要的創新獲利模式,而這邊的行程安排所訴求的是完全的 個 人 化 , 非 套 裝 行 程 也 不 是 自 由 行 , 而 是 顧 客 式 個 人 化(customized personalization),能夠真正提供給顧客屬於他個人的服務,使得顧客獲得獨特且 單一的需求(unique needs),而服務提供者(本部落格)以消費者的立場來看整個服
務過程,將顧客的滿意度提升至最高。
而這樣的方式是現行所有旅行社或旅行社網站無法達成的服務境界,而我 們率先這樣做,除了有市場需求,更看重於在現行市場上尚無他者進行。故圖 15 的旅遊規劃申請書就是為了滿足客戶高度客製化需求而設計的互動式表單。
圖15 本研究自行架設之台灣旅遊誌─「旅遊規劃需求互動表單」
在旅遊規劃申請書方面,主要的設計項目有三點:
1.旅遊需求、
2.需本站代購項目、
3.聯絡人資料。
在代購項目中,則有關食衣住行育樂類的票卷皆可代購,免去委託者購買 所需付出的精力和時間成本,其中「代覓導遊」的項目更是一般旅行網站所較 少承辦的業務,由於部落格的經營方向就是完全的客製化為出發點,因此可以 代尋調性相同的導遊帶領,免得發生在跟團旅行中,遇到不好的導遊讓自己權 益、心情受損的情況出現。而在導遊的資料庫方面,研究者則是依照個別的專