Sorry

M+ no longer supports this web browser.

M+ 不再支持此網頁瀏覽器。

M+ 不再支持此网页浏览器。

2021年8月11日 / 施維麟

網站設計是視覺文化

照片中兩人身穿多色全身緊身衣,安靜地站在紫、藍雙色的背景前。

Anton & Irene詼諧登場,圖片由Anton & Irene提供

這個設計項目的要求聽起來雄心勃勃,就是要為一座二十一世紀的視覺文化博物館構思及設計網站。這個含有三種語言的網站須吸引香港本地觀眾,同時把博物館的使命與價值觀向全世界傳遞。大部分設計工作還須在疫症大流行期間完成,這場疫症令跨國旅行受限,而這代表文化機構的網上形象變得前所未有地重要。

紐約布魯克林設計工作室Anton & Irene主理人Irene Pereyra 和 Anton Repponen接受了為M+設計網站的挑戰。他們多月來與M+密切溝通,他們的設計手法除了反映設計師本人對香港視覺文化的親身體驗,還體現了他們對於M+在品牌形象、節目內容、未來需要等的了解。他們之前曾為其他博物館設計網站,包括著名的紐約大都會藝術博物館,但在創作自由度如此大的情況下,建立這樣鮮明獨特的網上空間,對兩人來說還是頭一次。

網站的設計延續由阿姆斯特丹平面設計工作室Thonik為M+建立的一套視覺形象。M+將來在印刷品、網站、海報、巴士車身廣告等媒介上,都會呈現這系列繽紛而獨特的色彩組合。而Anton & Irene則將這套視覺形象化為互動體驗,設計出一個俐落流暢的網站,並運用模組式元素,方便日後因應博物館項目増添新的環節。此創作過程跨越地域,身處紐約的Anton & Irene與香港的M+合作,並與阿姆斯特丹的Thonik和英國網站後台工程專家Torchbox協調。順理成章地,他們在互聯網上透過視像會議商談設計細節,討論M+獨特的網上面貌能如何融合不斷蛻變的數碼生態環境。

照片中可見一男一女坐在開放式工作空間。室內的牆壁是白色的,樑柱和地板都是木造的。女人身穿顏色鮮艷的粉紅色毛衣和灰色圖案緊身褲,兩手拿着面具遮着臉孔,面具上的五官是扭曲的。男人則身穿深色衣服,單手拿着一盆植物遮臉。

Anton Repponen與Irene Pereyra身處他們的設計工作室 ,圖片由Anton & Irene提供

你希望到訪這個網站的人會有怎樣的第一印象?

Irene:我希望他們看到網站,第一個反應會是:「哇!這一點都不像博物館網站!」我們想要創造一個與全球其他博物館完全不同的網站。如果你把那些網站放在一起看,會發現它們全都大同小異,看起來都很類似。M+讓身為網站設計師的我們能真正施展設計才能,而不是依樣畫葫蘆地做與其他博物館和藝術機構相同的事。

Anton:我希望訪客會覺得:「這真的很香港!」當中設計不是瑞士風格的那種白底黑字,我希望人們能感受到這個城市色彩繽紛、活力充沛的特質。那些顏色的碰撞,就像是自然地貌與高樓大廈的衝突感。

你們如何將由Thonik為M+建立的品牌形象,即常被稱為「品牌書」(brand book)的參考框架化為網上體驗?

Anton:設計師在構思和製作品牌書時,焦點總是放在印刷方面,而較少考慮到數碼方面。說到品牌在屏幕上的模樣,品牌書往往只包括一些動態短片或其他基本例子。然而,我們的工作是在網站上保留甚至凸顯品牌的視覺形象。訪客與網站的互動會不斷變化發展,皆因頁面會有所增添,不同部分的位置亦會轉換。屏幕就是個活潑生動的平面。當我們看到Thonik的指引,說明一系列顏色並解說其背後理念時,就馬上得到靈感。

插圖中可見一個三層的色環,最外層有橙色、粉紅色、紫色、藍色、深綠色和土黃色;內層是外層顏色的低對比度版本,中央是灰色的。

由阿姆斯特丹平面設計工作室Thonik建立的M+視覺形象,當中可見一系列中間色調的顏色,以達到「視覺撩撥」的效果

Irene:我們深明不可能一成不變地使用顏色,否則訪客會覺得來來去去都是那三種顏色。於是,我們嘗試令主頁的顏色變得鮮活起來。

M+網站的截圖,當中可見巨大的M+標誌。

M+網站主頁

網站的設計如何反映你們在香港的經歷?

Irene:品牌形象所涵蓋的非常廣泛,卻未有完全顧及互動元素。我們需要發展出按鈕和鏈結,並建立一套系統,以分辨可點擊與不可點擊的元素。我們構思出像貼紙一樣的簡單橢圓形按鈕,用來表示可點擊的元素。我們想像將所有霓虹招牌和視覺符號約化精簡,製作出代表香港的線框圖。我們從香港得到一些抽象的啟發,去建立一個充滿趣味、使人眼花撩亂,但又有其結構條理的網站。

那些顏色的碰撞,就像是自然地貌與高樓大廈的衝突感。

Anton Repponen

Anton:設計師喜歡整理事物並將它們分門別類。當我們得知用於設計的顏色時,我們做的第一件就是整理。不過我們刻意避免用顏色標籤任何事物。

例如,我在九龍拍攝香港島,相中會出現很多顏色,但它們不是這一片是綠的、那一帶是橙色的。有些招牌和廣告有時互相衝突,幾乎令人感覺不舒服;但同時,因着精美的字體編排,整體效果也就變得合理。M+網站的首頁是整個網站最為色彩豐富的地方,它就像一本書的封面,讓你看到香港閃爍跳脫的一面。在另一些地方我們會把顏色調淡,例如填寫學校到訪申請這類須集中精神的頁面。網站的顏色組合可能看來有點混亂,不過背後都有其理念和邏輯。

照片從鳥瞰角度拍攝城市的幾個街區。一條由六線行車道組成的街道橫跨照片中央,街道兩旁是六個長方形街區,各建有密密麻麻的高樓大廈,北面和南面均有其他街區延伸。

九龍鳥瞰圖。攝影:Abstract Aerial Art經由Getty Images提供

M+是一座全新的博物館,隨着它在2021年底向公眾開放,其網站內容將會急增。你們如何為內容增長做準備?

Irene:我們想創造一個方便日後管理的網站,不會每次更新都像經歷一場惡夢。我們亦想確保能有效率地於限期前及時完成。我們在網站上使用了一些可以不同方式組合的模組式元素,我們稱之為「樂高磚」。它們包括按鈕、版面,以及可重複的互動功能。有些頁面或許只需一塊「樂高磚」,有些則可能要用上三到五塊。

這種模組形式能令網站更容易更新,方便M+的使用。這有助開發員趕及在限期前完成工作,亦有利於用家。當用家熟悉某種瀏覽形式後,很自然就會預計這種形式再次出現。若果某個功能在這個頁面是這樣運作,換到另一個頁面後又有不同,可能就會令人很傷腦筋。用家期望一邊瀏覽,一邊理解網站設計系統;而網站中每項設計特色最少重複一次,以此為應用的例子,讓訪客理解和熟習網站的瀏覽方式。

照片中可見一座建築物的部分外牆。平台樓層和縱向大樓之下,有一個三角形玻璃結構。外牆上被垂直排列的墨綠色陶瓦覆蓋。

M+大樓外牆,攝影:© Virgile Simon Bertrand;圖片由Herzog & de Meuron提供

M+製作不同內容時,都以無障礙的暢通易達為原則。你們在設計過程中,尤其是在用家體驗這一層面,是如何思考這方面的要求?

Irene:如果你想一想會有哪些人到訪M+網站,就會發現這些人的年齡範圍甚廣,由十二歲到九十歲都可能有。當中包括說普通話的人、說粵語的人、以英語為母語或第二、第三,甚至第五語言的人。他們可能來自香港本地,也可能來自世界各地。我們十分清楚設計網站時要考慮背景、年齡、能力、對數碼科技的熟習程度各有不同的一群廣大受眾。

我們努力確保設計能達到甚至超越香港的通達指引要求。舉例而言,要符合品牌形象,彩色背景必定搭配白色文字。可是,相比黑底白字,這樣會更難閱讀。為了保證文字清晰易讀,我們決定使用較大的字體。家母七十四歲,她常常覺得在流動裝置上瀏覽網站十分困難,因為一切看來都很細小。我們刻意設計一個加大版網站,網站的一切元素都是大的,無論是在桌面版還是流動版瀏覽都是。我們曾與M+多次討論如何濃縮內容,務求令這通達設計框架發揮最大效能。我們會問:描述這件事真的需要用八個段落嗎?因為要是這樣,在字體如此大的情況下,你將要在接下來一小時不停掃呀掃,才能看完一篇文章。

博物館大樓本身亦根據通達共融的要求興建……顯然,我們在網站方面的工作,必須能媲美他們令建築空間暢通易達所付出的努力。

Irene Pereyra

通達固然是用家體驗設計的主要目的,不過網站的開發方式同樣至關重要。始終,透過特定的程式編寫方式和結構,螢幕報讀器就能讀出文字,方便任何有視力障礙或偏好收聽內容的人使用網站。要做到這點,開發員的角色至關重要。

博物館大樓本身亦根據通達共融的要求興建。我們與M+的訪客服務團隊談過,了解他們如何認真地看待自己的責任,盡力歡迎不同能力人士來參觀博物館。顯然,我們在網站方面的工作,必須能媲美他們令建築空間暢通易達所付出的努力。若果M+對網站的通達水平不滿意的話,肯定不會推出網站。

網站能怎樣融入文化機構的整體網上活動與內容?

Irene:以往,網站是訪客從網上獲得資訊的唯一來源,或至少是最基本的地方。但現在的情況明顯不同了,我們思考的不只是網站能怎樣配合博物館的社交媒體其他數碼平台,還有是它能怎樣融入用家的數碼生態系統。用家到訪網站時,不一定以主頁為起點。他們或許正在搜尋關於某位藝術家的資料、或透過Google搜索到M+展覽活動的相關頁面。重要的是,我們須確保這些「側門」也能貫徹M+給人的觀感。

Anton:我們常用的網上社交平台都有着一式一樣的主頁面。我的Instagram介面與Irene那個一樣,亦與M+的相同。當然,不同帳戶的內容各有不同,但用家與介面互動的方式是一樣的。網站則不同,它是博物館獨一無二的網上園地,你可定下指引,令用家知道該如何與你互動。這是你想要與眾不同、脫穎而出的地方。M+所建造的博物館大樓,並非一個普普通通的四方盒子空間,而是委託Herzog & de Meuron來建造博物館,因為它的建築必須獨樹一幟。同樣,網站是這座博物館的延伸,同樣須要有其特色。

照片中可見黎明時分的城市天際線,海港兩岸都清晰可見。較近鏡頭的岸邊有一個灰色混凝土建築群,當中有一座猶如「凸」字形的建築物。海港的另一邊有一群高樓大廈,後方還有山脈。

M+大樓矗立在西九文化區管理局大樓和修復保管中心旁邊。攝影:© Virgile Simon Bertrand;圖片由Herzog & de Meuron提供

很多人或許永遠不能親身到訪M+,他們可能會從孟買、阿姆斯特丹、紐約等地瀏覽博物館網站。我們想給他們一個起點,讓他們在網上探索M+的館藏、進一步發掘博物館活動。我們想他們到「M+雜誌」閱讀有關香港視覺文化的一切。所有內容集中在同一網站上,而非四散於Facebook或Medium等地,或出現在一個一打開就彈出二十三個廣告的不明網誌上。這個網站由M+主理,亦是表達其定位與特點的方式。

照片中可見一個設計工作室的內部。室內的牆壁是白色的,樑柱和地板都是木造的。一個長長的書架由畫面左方延伸至中間靠左的地方。背景中有白色的書桌,桌上放了大大的電腦螢幕。一個身穿連帽衛衣的女人在其中一台電腦前工作。三個人站在背景中靠近窗戶的地方聊天。

Anton & Irene位於紐約布魯克林的工作室。圖片由Anton & Irene提供

你們最喜歡網站的哪項特色?

Anton:很多時候,網站的首頁都設計得令人印象深刻;但當你繼續瀏覽下去,就會覺得愈來愈沉悶。我們希望在你一路瀏覽網站,探索愈來愈深入時,仍然有從首頁得到的那種驚艷之感。

Irene:我們覺得,一開始在網站主頁捲動頁面是很好玩的事情,希望訪客也會有同感。巨型的M+標誌會縮小,然後悄悄地移到左上角;當你捲動頁面時,顏色會跟着變化,帶來不同的氣氛。即使我們對網站的設計已瞭如指掌,第一次目睹那個捲動的效果時,心情還是非常興奮雀躍。它讓人培養出最合適的心情去體驗這座博物館。

內容由數碼內容及編務主管施維麟轉述。為確保行文清晰,以上訪談經過編輯。

Anton & Irene是紐約布魯克林的設計工作室,由Irene Pereyra 和 Anton Repponen主理。

施維麟
施維麟

施維麟是M+的數碼內容及編務主管。

緊貼最新消息!

  • 緊貼M+與西九文化區的最新情況
  • 探索M+雜誌的最新影片及故事
  • 選擇你希望收取的內容
  • 隨時取消訂閲
載入中