雲門舞集文教基金會

雲門歷史悠久,名聲響亮,優質的演出締造了許多光榮的時刻。能夠有機會跟這樣的組織合作相當榮幸!這次的工作分工與我們以往的經驗也有些不同,雲門分別委託洋蔥進行設計、規劃,而建置則是委託我們。

同個網站裝設三種版型

原本雲門網站裡含有:基金會、舞團、劇場三種內容,這三種內容其實分屬三個團隊,做的事情不同,在網站結構與設計風格也有不同需求。因此在新網站中,客戶希望三個團隊能有清楚的區分。因為前期的溝通工作是由洋蔥進行,整合這些資訊與需求意見其實頗有難度,而洋蔥完美的完成了!為三個團隊量身訂做的三個版型因此誕生,接下來就是我們的工作了。

 

三個版型各自有兩個語系

本站除了在一個 Drupal 核心裝設三個不同的版型之外,雲門這類國際型的單位,有英文版呈現是不可或缺的。因此,三個版型各自再加上了翻譯功能,每一篇文章都能夠從中文翻譯成英文。這時遇到了一些使用情境與原本鏡像雙語功能有些不同,例如:

  • 某篇文章有英文版/沒有中文
  • 某篇文章在中文版是A分類,在英文版是B分類
  • 某個頁面在中文版排列方式與英文版不同
  • 某篇文章翻譯成英文之後,改為不需要英文版,需要將英文單獨下架、保留中文

上述這些狀況在實際上稿的途中都碰上了,看著是覺得很合理的使用情境,這些情境在功能製作時要先預想到是有難度的,因此做好的功能要編修,在實作上碰到許多難關需要克服,敝司工程師都完成了!(鼓掌~~)

 

三種版型x兩個語系x行動版

三個版型各自有些設定上的不同,洋蔥在設計時,為了達成最好的展示效果,在樣式設定上區分的相當仔細,除了三版型樣式不同外,中英文也不同,行動版頁更有專屬的樣式設定。因此,當本網站提交後,在測試、上稿的階段中,若有一頁的某處需要調整,前端工程師在調整時,必須同時確認另一個語系或行動版的狀況。可說是份量加倍,挑戰工程師的細心、耐心,樣式表的各種區分、定義。另外,還有一些變更調整在後期一一被提出來,主要可歸納幾個原因:

  • 靜態的設計稿切換到網頁上時,樣式雖然按照設計稿設定好,因為瀏覽器的解讀狀況不同,顯示出來和設計稿有所不同,需要調整。
  • 設計稿無法完整模擬上稿情境。根據我個人觀察,雲門在準備資料給洋蔥時,提供相當完整的資訊。預先給設計的文案經過設計師處理後呈現在設計稿上,配置起來相當完美。但上稿時因為自由的編輯後台(與自由之心?),或者實務上就是需要填入這麼多字數,導致畫面跟設計稿有差;例如,原本字級設定 36px 畫面會超美是因為該段落字數只有 100 字,若該段落上稿到 1,000 字,呈現出來的感覺就會差很多了。
  • 靜態畫面與可互動的網頁不同,因此後期安排加入一些特效,例如滑鼠從圓圈變手型以利辨識連結、部分需要置頂的功能選單、特定情境下出現的 to top 按鈕、hover 漸變調整等等。

 

網站整合 netiCRM

本站整合 netiCRM 系統,使劇團可以利用到活動功能,開立活動、讓參加者來往站上報名;基金會可以使用捐款相關功能,盡量將聯絡人集中在同一個後台中,以利行政效率。而CRM彈性的後台也是雲門欣賞的地方,增減欄位的自由程度較高,只要能夠理解自訂欄位與資料表單的特性,運用上可說是無往不利阿。

 

小結

經過這次合作,在整個專案進行尚有許多需要反思、檢討的地方,相當感謝雲門與洋蔥的合作和各方面的協助,讓網站上線時趨近於完美。我想這次網站上線是一個里程碑,但不會就停在這邊等待5年或10年後的改版。後續應還有各種因應資訊快速變遷需要相應處理的項目,或者其他在這次改版尚未實現的想法。以後也請多多指教了~~!!