養生東台灣

首頁
  • 首頁
  • 九種養生休閒產業
  • 最新消息總覽
  • 最新消息頁面
  • 藝術文創養生
  • 我對計畫有興趣
  • 相關網站連結
東台灣的好山好水,成為養生休閒產業的孕育基地。讓我們背起行囊,移居東台灣吧?

專案背景

營建署城鄉發展分署為配合行政院促進東部永續發展的方案,提出「推動養生休閒產業」及「推動人才東移」兩計畫,目的為整合東部的休閒產業資源、創造東部的核心價值。承接執行的單位禾拓規劃設計顧問公司,則委託我們改版「養生東台灣」網站,除了計畫說明之外,還加入東部觀光資源的介紹、休閒產業商家介紹。

建置過程

因為案主是設計顧問公司,對於「設計」很有想法,本案的視覺設計就由他們提出,我們再把內容套入既定的視覺版型當中。在功能建置部分,並沒有太過複雜的功能,反多花費較多的時間在套版工作上。

比較特別的是,為了呈現重點推廣鄉鎮的休閒資源、商家資訊,需要用不一樣的方式來呈現(如第二張附圖所示);並且為了標示出國家公園、文化園區等區域性範圍的資訊,就需要自行繪製、框選一定的地理範圍,以達成前述需求。

這些聽起來很複雜的工作,好在有 OpenLayers 模組可讓我們(比較)簡單地實作出來。以關山地圖為例(http://www.easthealthpark.com.tw/demo/map/guanshan),我們需要同時呈現觀光區和商家資訊,做法是先建立兩個 Layer,分別是觀光區的地理範圍、及所有商家資料;然後建立 Preset,勾選你想呈現的 Layer。感覺上好像和 Photoshop 圖層的概念雷同。

每個 Layer 都可以設定呈現在地圖上的小圖示,例如火車站與警察局的圖示不同,那麼就需要建立兩個 Layer,再加入到同一個 Perset 裡。以關山地圖來說的話,就是要先建立「火車站」、「警察局」、「觀光區」等三個 Layer,再建立一個「關山地圖」Preset,並設定顯示前述的三個 Layer。

當然,你也可以參考 OpenLayers 的線上說明文件

合作後記

由於視覺設計師是業主推薦的,並沒有合作經驗。當我首次收到設計師交來的設計稿時,當下就意識到,此份設計稿是以「平面設計」的概念在設計。

網站設計與平面設計的差異何在?我想借用老貓曾經發過的一則 tweet 來說明:

編輯面對電子書,至少有一個習慣要改,那就是我要精準控制最後版面如何呈現。這件事,一、在性質上不妥,因為無法預測使用者螢幕大小;二、在現實上不可能,因為閱讀器通常強制接管CSS。編輯需要處理的是流水排的結構合理化,而不是頁面布局。要更重視文本邏輯,而不是視覺表現。

也就是說,網站設計在設計時,會把「內容」考量進去,而平面設計則比較重視「視覺表現」。這對相當重視「內容」,也一直使用內容管理系統在建置網站的我們來說,在這類以平面設計思維出發的設計稿中,看到的是設計過程並沒有考量使用者如何觀看內容、查找內容、甚至是操作內容(或說操作系統)。

更直白的說,就是設計出來的版型,並未考量到內容是會延展的,因而視覺呈現上無法應付網路世界那或長或短的內容,而只能應付固定、制式的內容。

當然,對網站製作而言,還是有解法,只是在這次的事件當中,也讓我試圖思考:雖然我們因為熟知網路文化,所以可以看出這樣的設計稿並不適用於網路環境(但就平面設計而言算是相當優異的作品),這叫做專業;但有沒有可能,我們有時或許正利用「專業」的糖果外衣,來包裝我們那一顆對外物排斥的心態呢?

視覺關鍵字: 
沉穩、穩重
溫暖、柔和
主要色彩: 
內容素材取向: 
以活動為主