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+杂志的最新影片及故事
  • 选择你希望收取的内容
  • 随时取消订阅
加载中