网站设计是视觉文化
这个设计项目的要求听起来雄心勃勃,就是要为一座二十一世纪的视觉文化博物馆构思及设计网站。这个含有三种语言的网站须吸引香港本地观众,同时把博物馆的使命与价值观向全世界传递。大部分设计工作还须在疫症大流行期间完成,这场疫症令跨国旅行受限,而这代表文化机构的网上形象变得前所未有地重要。
纽约布鲁克林设计工作室Anton & Irene主理人Irene Pereyra 和Anton Repponen接受了为M+设计网站的挑战。他们多月来与M+密切沟通,他们的设计手法除了反映设计师本人对香港视觉文化的亲身体验,还体现了他们对于M+在品牌形象、节目内容、未来需要等的了解。他们之前曾为其他博物馆设计网站,包括著名的纽约大都会艺术博物馆,但在创作自由度如此大的情况下,建立这样鲜明独特的网上空间,对两人来说还是头一次。
网站的设计延续由阿姆斯特丹平面设计工作室Thonik为M+建立的一套视觉形象。 M+将来在印刷品、网站、海报、巴士车身广告等媒介上,都会呈现这系列缤纷而独特的色彩组合。而Anton & Irene则将这套视觉形象化为互动体验,设计出一个俐落流畅的网站,并运用模组式元素,方便日后因应博物馆项目増添新的环节。此创作过程跨越地域,身处纽约的Anton & Irene与香港的M+合作,并与阿姆斯特丹的Thonik和英国网站后台工程专家Torchbox协调。顺理成章地,他们在互联网上透过视像会议商谈设计细节,讨论M+独特的网上面貌能如何融合不断蜕变的数码生态环境。
你希望到访这个网站的人会有怎样的第一印象?
Irene:我希望他们看到网站,第一个反应会是:「哇!这一点都不像博物馆网站!」我们想要创造一个与全球其他博物馆完全不同的网站。如果你把那些网站放在一起看,会发现它们全都大同小异,看起来都很类似。M+让身为网站设计师的我们能真正施展设计才能,而不是依样画葫芦地做与其他博物馆和艺术机构相同的事。
Anton:我希望访客会觉得:「这真的很香港!」当中设计不是瑞士风格的那种白底黑字,我希望人们能感受到这个城市色彩缤纷、活力充沛的特质。那些颜色的碰撞,就像是自然地貌与高楼大厦的冲突感。
你们如何将由Thonik为M+建立的品牌形象,即常被称为「品牌书」(brand book)的参考框架化为网上体验?
Anton:设计师在构思和制作品牌书时,焦点总是放在印刷方面,而较少考虑到数码方面。说到品牌在屏幕上的模样,品牌书往往只包括一些动态短片或其他基本例子。然而,我们的工作是在网站上保留甚至凸显品牌的视觉形象。访客与网站的互动会不断变化发展,皆因页面会有所增添,不同部分的位置亦会转换。屏幕就是个活泼生动的平面。当我们看到Thonik的指引,说明一系列颜色并解说其背后理念时,就马上得到灵感。
Irene:我们深明不可能一成不变地使用颜色,否则访客会觉得来来去去都是那三种颜色。于是,我们尝试令主页的颜色变得鲜活起来。
网站的设计如何反映你们在香港的经历?
Irene:品牌形象所涵盖的非常广泛,却未有完全顾及互动元素。我们需要发展出按钮和链结,并建立一套系统,以分辨可点击与不可点击的元素。我们构思出像贴纸一样的简单椭圆形按钮,用来表示可点击的元素。我们想像将所有霓虹招牌和视觉符号约化精简,制作出代表香港的线框图。我们从香港得到一些抽象的启发,去建立一个充满趣味、使人眼花撩乱,但又有其结构条理的网站。
Anton:设计师喜欢整理事物并将它们分门别类。当我们得知用于设计的颜色时,我们做的第一件就是整理。不过我们刻意避免用颜色标签任何事物。
例如,我在九龙拍摄香港岛,相中会出现很多颜色,但它们不是这一片是绿的、那一带是橙色的。有些招牌和广告有时互相冲突,几乎令人感觉不舒服;但同时,因着精美的字体编排,整体效果也就变得合理。 M+网站的首页是整个网站最为色彩丰富的地方,它就像一本书的封面,让你看到香港闪烁跳脱的一面。在另一些地方我们会把颜色调淡,例如填写学校到访申请这类须集中精神的页面。网站的颜色组合可能看来有点混乱,不过背后都有其理念和逻辑。
M+是一座全新的博物馆,随着它在2021年底向公众开放,其网站内容将会急增。你们如何为内容增长做准备?
Irene:我们想创造一个方便日后管理的网站,不会每次更新都像经历一场恶梦。我们亦想确保能有效率地于限期前及时完成。我们在网站上使用了一些可以不同方式组合的模组式元素,我们称之为「乐高砖」。它们包括按钮、版面,以及可重复的互动功能。有些页面或许只需一块「乐高砖」,有些则可能要用上三到五块。
这种模组形式能令网站更容易更新,方便M+的使用。这有助开发员赶及在限期前完成工作,亦有利于用家。当用家熟悉某种浏览形式后,很自然就会预计这种形式再次出现。若果某个功能在这个页面是这样运作,换到另一个页面后又有不同,可能就会令人很伤脑筋。用家期望一边浏览,一边理解网站设计系统;而网站中每项设计特色最少重复一次,以此为应用的例子,让访客理解和熟习网站的浏览方式。
M+制作不同内容时,都以无障碍的畅通易达为原则。你们在设计过程中,尤其是在用家体验这一层面,是如何思考这方面的要求?
Irene:如果你想一想会有哪些人到访M+网站,就会发现这些人的年龄范围甚广,由十二岁到九十岁都可能有。当中包括说普通话的人、说粤语的人、以英语为母语或第二、第三,甚至第五语言的人。他们可能来自香港本地,也可能来自世界各地。我们十分清楚设计网站时要考虑背景、年龄、能力、对数码科技的熟习程度各有不同的一群广大受众。
我们努力确保设计能达到甚至超越香港的通达指引要求。举例而言,要符合品牌形象,彩色背景必定搭配白色文字。可是,相比黑底白字,这样会更难阅读。为了保证文字清晰易读,我们决定使用较大的字体。家母七十四岁,她常常觉得在流动装置上浏览网站十分困难,因为一切看来都很细小。我们刻意设计一个加大版网站,网站的一切元素都是大的,无论是在桌面版还是流动版浏览都是。我们曾与M+多次讨论如何浓缩内容,务求令这通达设计框架发挥最大效能。我们会问:描述这件事真的需要用八个段落吗?因为要是这样,在字体如此大的情况下,你将要在接下来一小时不停扫呀扫,才能看完一篇文章。
通达固然是用家体验设计的主要目的,不过网站的开发方式同样至关重要。始终,透过特定的程式编写方式和结构,萤幕报读器就能读出文字,方便任何有视力障碍或偏好收听内容的人使用网站。要做到这点,开发员的角色至关重要。
博物馆大楼本身亦根据通达共融的要求兴建。我们与M+的访客服务团队谈过,了解他们如何认真地看待自己的责任,尽力欢迎不同能力人士来参观博物馆。显然,我们在网站方面的工作,必须能媲美他们令建筑空间畅通易达所付出的努力。若果M+对网站的通达水平不满意的话,肯定不会推出网站。
网站能怎样融入文化机构的整体网上活动与内容?
Irene:以往,网站是访客从网上获得资讯的唯一来源,或至少是最基本的地方。但现在的情况明显不同了,我们思考的不只是网站能怎样配合博物馆的社交媒体和其他数码平台,还有是它能怎样融入用家的数码生态系统。用家到访网站时,不一定以主页为起点。他们或许正在搜寻关于某位艺术家的资料、或透过Google搜索到M+展览活动的相关页面。重要的是,我们须确保这些「侧门」也能贯彻M+给人的观感。
Anton:我们常用的网上社交平台都有着一式一样的主页面。我的Instagram介面与Irene那个一样,亦与M+的相同。当然,不同帐户的内容各有不同,但用家与介面互动的方式是一样的。网站则不同,它是博物馆独一无二的网上园地,你可定下指引,令用家知道该如何与你互动。这是你想要与众不同、脱颖而出的地方。 M+所建造的博物馆大楼,并非一个普普通通的四方盒子空间,而是委托Herzog & de Meuron来建造博物馆,因为它的建筑必须独树一帜。同样,网站是这座博物馆的延伸,同样须要有其特色。
很多人或许永远不能亲身到访M+,他们可能会从孟买、阿姆斯特丹、纽约等地浏览博物馆网站。我们想给他们一个起点,让他们在网上探索M+的馆藏、进一步发掘博物馆活动。我们想他们到「M+杂志」阅读有关香港视觉文化的一切。所有内容集中在同一网站上,而非四散于Facebook或Medium等地,或出现在一个一打开就弹出二十三个广告的不明网志上。这个网站由M+主理,亦是表达其定位与特点的方式。
你们最喜欢网站的哪项特色?
Anton:很多时候,网站的首页都设计得令人印象深刻;但当你继续浏览下去,就会觉得愈来愈沉闷。我们希望在你一路浏览网站,探索愈来愈深入时,仍然有从首页得到的那种惊艳之感。
Irene:我们觉得,一开始在网站主页卷动页面是很好玩的事情,希望访客也会有同感。巨型的M+标志会缩小,然后悄悄地移到左上角;当你卷动页面时,颜色会跟着变化,带来不同的气氛。即使我们对网站的设计已了如指掌,第一次目睹那个卷动的效果时,心情还是非常兴奋雀跃。它让人培养出最合适的心情去体验这座博物馆。
内容由数码内容及编务主管施维麟转述。为确保行文清晰,以上访谈经过编辑。 此简体版本由机器转换自繁体版本。
Anton & Irene是纽约布鲁克林的设计工作室,由Irene Pereyra 和 Anton Repponen主理。