北鸥：领过舞、算过命，非科班设计师为艺术界编写的网页让人重新爱上冲浪 | 圆周一度 38°

极简风格在生活、文化等各领域都被广泛应用过，也曾经影响了不少网页设计的风格。但近年来，有一群艺术家、艺术机构的网站采用了一些更丰富好玩的网页设计，这些网站具有更强个性化的视觉特征与创造性的互动模式。你能想象打开一个网站，会有弹珠不断弹出来，用鼠标点击弹珠则能击倒网页里的积木吗？而当打开网站就是一个经典的黑底荧光绿浏览器界面时，会不会让你产生穿越到上个世纪的错觉？这些网页均出自设计师北鸥，他所设计的每个网页都似乎在和冲浪者嬉戏玩耍，或者是提供一种充满意外可能性的互动，使网页设计也成为一种艺术。

abC艺术书展2019官网

在北鸥看来，近年来大众打开电脑端网站的几率在变少，对好的网站的认知更多停留在简洁干净的常规样式，但他更怀念许多年前浏览网站的体验。那时人们打开一个网页就像一场探险，充满新鲜与惊喜。因此，他决定从早期互联网美学中汲取灵感，进行网页设计。相比起以功能服务为主的常规网页设计，他更希望在网页中讲故事，将不同风格与主题的叙事埋入其中，并在视觉上融合图形、字体、声音等等元素，为用户带来多维度多层次的体验感。

GOGOJ艺术家官网

与北鸥不寻常的作品相似的是，他还是一个没有完整义务教育经历、也没坐过一天班的自由职业者，并一直以多重身份活跃于不同领域。作为前端工程师、网页设计师，他和异视异色、abC艺术书展等机构合作过；在设计和编程外，他作为艺术家从事剧场表演以及剧本创作，还在夜店领过舞，在巴黎东京宫、维也纳戏剧节表演过。

对他来说，个人职业生涯转变的契机是2012年到北京的剧场做艺术创作之时，那时他为了更好地展示自己开始学习制作个人网站，并从中找到乐趣，开始为身边的艺术家、音乐人设计网站，逐渐积攒起自己作为设计师的口碑和业务。

北鸥个人官网

对于网页设计的探索与实践，北鸥觉得和艺术表演的性质相似，两者都是需要创作者与受众共同完成。常规的网页设计是为内容服务，用户浏览为获取需要的信息。而他设想的是让“浏览”这一动作是出于对“网站”本身的兴趣，即网站本身的叙事体验、美学视觉设计都会成为用户按下鼠标点击进入网页的理由。让用户能点击鼠标观看网页，如同观看演出般，沉浸在网页的完整叙事中，享受真实的情感体验。

ZigZag艺术家官网

初学者如何入门网页设计？网页的具体构思和设计过程是怎么样的？如何在满足网站基本功能需求的同时，在设计上寻求美学、互动的突破设计？本期圆周一度对话北鸥，听他分享在数字媒体时代打造兼具个性与美学网页的设计经验。

Design360°：

可以请你先自我介绍一下吗？你在何时基于什么契机成立了OooO Studio？你的学习背景及工作经历是怎样的？

北鸥：

我是北鸥，是一个艺术家，设计师和前端工程师，现居住在北京。我野路子出身，几乎没有任何的学习背景和工作经历，没有上过高中和大学，没有坐过班。在2015年成立一个人的工作室OooO Studio之前，我画过画，算过命，在小城镇的夜店里领过舞，干过视频剪辑，接过平面设计的散活，一窍不通地硬着头皮做过影视后期等等。2012年来到北京，在各种live house和剧场做即兴、肢体和行为的表演。为了展示自己的艺术创作（表演都是即时性的），脑子一热自学了网站设计和搭建，做了自己的个人网站， 同时也为身边的音乐人和艺术家朋友搭建网站，大家觉得效果不错。口耳相传，陆陆续续有活进来，然后就莫名其妙一直干了下去。 

WE=LINK线上展览

Design360°：

网上看到关于你的介绍同时是艺术家、前端工程师及网页设计师。可以分享下你多重身份下的工作状态吗？平时是固定在某处工作还是游牧式自由办公呢？

北鸥：

我基本是分章节式的工作状态。在一个阶段里，我要么专注于艺术创作，把所有的时间都投入在剧本创作、排练和表演上；要么每天趴在我家书房的电脑前敲代码，脑子想的也都是如何让这个粒子特效更加流畅等诸如此类的问题。我没有办法同一个时间段干这两种事情，因为它们都需要人非常高的专注，而且这两种创作的底层逻辑以及具体实践方式都特别不一样，没有办法混在一起进行。所以我一直都是处于这种角色的转换之中，也有互相调剂的感觉。

Antenna Space 天线空间在线展览

Design360°：

你作为设计师身份希望探索或进行什么类型的实践？为何会一直专注于基于网页的设计实践和美学探索呢？可以分享一下你的历程与感想吗？前端开发的背景和艺术方面的实践对你的设计理念和工作方法带来了什么影响吗？

北鸥：

作为设计师，我之前只做过平面设计，对我来说平面设计还是太“严肃”了，当然也可能因为我没有长期、专注地做这份工作。而网页因为有鼠标、键盘来产生互动，感觉引入了另一种维度，增加了更多可能性，有更多撒野的空隙。说到这里，我突然觉得我上一个问题说的不太正确，网站设计和表演在呈现出来或呈现过程中还是有其相似性，因为它们都需要观众，它们的完整性是需要创作者和观众一起去完成的。它们都是一种运动的过程，而这样的运动、表演需要观众来见证，网页则需要观看者通过鼠标来实现，它们都是身体性的。 

Dr Corona艺术项目

Design360°：

你为当下中国很多艺术家、艺术文化组织、艺术空间、博览会、品牌等打造过在线空间、在线展览或在线杂志。可以分享下这些量身定制的网站项目背后的合作契机吗？和这类策展性质和展示性质很强或是内容较为个性化的客户合作，在设计上建立起的共识和方向是怎样的？

北鸥：

我做网站设计，开始于服务艺术家，再延伸到服务艺术空间和其他。和艺术家合作，我会先去观看他们的代表性作品，思考这些作品带给我的感受，并整理出一些感受的关键词，通过这些关键词建立一个基础的共识，接下来就是使用网页设计语言去具象化这个共识和这些关键词。有些时候，我会对他们的作品进行简单的二次创作，比如将静态的架上作品动态化。

而与艺术机构合作，到目前为止我很幸运，需要的沟通成本很低，这当然源于他们对我能力的信任，同时也因为他们自身的开放性。很多艺术空间或者艺术文化组织会以尊重一个艺术家创作自由的态度，来尊重我的创作。同时我对这个行业有一定的了解，我非常知道在某个范围内，这个东西是绝对不会出错的。但是，不会出错是不够的，其实需要的是某种意义上的出错，或者说是超越。所以很多时候，我会做两个版本的草稿，一个是安慰式的、保守的、不出错的版本；一个是有点出错的、个性化的、超越的版本。结果往往是第二个方案获得认同。

世外桃源线上展览

Design360°：

可以通过一、两案例具体分享下你在网页设计方面的实践嘛？具体的构思和设计过程是怎样的？在这些量身定制的项目中你为其网站在满足需求的同时，在设计上有哪些美学考虑与主动突破？（如 “We=Link：边”、BIE别的网站、abC艺术书展网站、史莱姆引擎网站等）

北鸥：

一般来说，我都不怎么构思，只要脑子里蹦出一些词语、一些场景，就开始在软件上用代码来打草稿了。我的构思是在不停打草稿的过程中产生，所以很多时候代码写的很乱，等定稿后，我会重新将代码梳理一遍。但有时候，如果网站体量特别大，需要权衡的因素很多，我就会在纸上写一些字，画一些简单的图，也不是网络构架图，可能是类似一些饼型图，有各种感觉的比例调配等等。

以BIE别的网站为例，可能那张草稿纸的A面是诸如放肆、戏谑、垃圾场、肉、粗糙、山寨、下流未来等等比较重口味的关键词，而B面却是轻柔、呼吸、幻象、糖果等等比较可爱浪漫的词语。我要做的就是将这些关键词在每个区块进行按比例调配，然后再根据这样的调配，选择用什么方式呈现。比如，网站首页开篇的头条区域，上下左右悬浮着四个条目，它们在缓慢的飘动着，而当鼠标停放在条目上时，一张不停进行着类似绿幕抠像的粗糙特效图片就会占据整个屏幕，如果鼠标在各个条目中迅速滑动，网页就会产生一种很迷幻的效果。

而在最重要的文章列表区块，我戏仿了Instagram的经典设计，让字体尽量大且粗，并且增加了阴影，山寨感十足，同时拉大彼此的距离，让一切又变得轻柔起来。而如果是推荐文章的话，就是随机的彩色光芒。在网站的具体功能上，我除了实现各个板块的基础功能外，添加了很多无用的功能。比如“别的音乐”频道，当用户点击页面上的格子，就会随机产生一个emoji标志，同时每个emoji会发出一个声音，当用户连续点击这些emoji时，网页就会按照点击顺序演奏出一段音乐等等。

BIE别的在线杂志

Design360°：

可以就具体的案例聊聊你这设计过程中做出了哪些决定来增强你想要讲述的叙事？又会如何确保用户在浏览您的网站时获得一致的叙事体验，从而获得情感上的联系，而不是让互动体验成为纯粹表面的现象？

北鸥：

讲故事确实是我的设计过程中一个重点。在为艺术家商亮做个人网站设计的初期，商亮给我看了很多她的作品，我感觉到她的作品是纯的、克制的，但里面有种破坏力，甚至是暴力，但这个暴力是儿童式的，类似推翻积木的感觉。我希望将我对她作品的理解融入网站设计中，所以在网站首页，我设计了一个纯白的立体空间，像她的作品最常呆的场所——一个展览空间。

在这个空间里有一座座高低错落的几何体，犹如积木，而她的油画作品就被随意放置着，类似作品悬挂之前等待被观看的状态。当用鼠标点击时，就会有一个个弹珠弹出，直接击向艺术家的作品，将它们粗暴撞倒在地。同时弹珠也会将那些几何积木一一击碎，如果用户不停点击鼠标，网页就会不停发射弹珠，几何积木不停被击碎，最终整个网页会变成一片废墟。当然这是比较直拳的形式，有时候我也喜欢把一些故事线隐藏深一些。

比如艺术空间网站Sleep Center，在不同的时间段里呈现不同的色调，从早上温煦的朝阳到夜晚躲在被窝里莹莹发出的微光。如果有人在一天里每个小时都去打开这个网站，就能获得这种连续的有一丝浪漫的叙事体验（虽然应该没有这样的人）。

Shang Liang 商亮个人网站

Design360°：

你通过物理插件、物理引擎、3D、互动、小游戏在网页中设定的一些触发机制，像在和网页游览者对话玩耍。可以谈谈你希望创造的网络浏览体验与现在常规的网站设计有什么不同和特别之处吗？希望进行怎样的创新和尝试呢？

北鸥：

对，玩耍，我希望这一切都是有趣的，引人发笑的，有时候甚至是恶作剧式的。可能常规网站是为了内容而服务，浏览网站的过程也是为了获取内容，但我有点贪心，我希望不只是如此，想让“浏览”在某种程度上只为了网站本身存在。比如当你再次打开这个网站只是为了去玩这个网站的MENU设计，比如在某个网站中我会将代表MENU 的“≡”设计成易经卦象，每次鼠标经过都随机呈现不同的卦象；或者去和一个愚蠢的机器人对话，获得一堆预设好的答案，同时网站的内容就隐藏在这些答案之中等等。我最近一直在学习和实践更高阶的JavaScript、3D插件和着色器等，想让网页互动游戏与各种主题性网站更有机结合起来。

Sleep Center官网

Design360°：

可以谈谈你在网页的功能、用户体验与美学之间的探索是如何平衡及选择的吗？

北鸥：

事实上我经常懒得去考虑平衡，不觉得平衡是每一次创作的重点。这种情况下，我会让用户体验与美学先行，让网页的功能在某种程度上让步。有时候甚至是不管不顾地，恶狠狠地直接破坏网页所需要承担的功能（例如abC艺术书展2020年版）。

abC艺术书展2020官网

Design360°：

可以谈谈你在数字设计领域的想法和经验吗？在新媒体时代复兴网页有什么挑战或是机遇吗？

北鸥：

我经常会通过archive.org去挖掘一些上世纪末和本世纪初的古董网站来获得灵感。那个时候的网站设计师使用着网页三剑客，CSS还没有3.0，用表格来布局，用Ps来切图，还有少量的原生的JavaScript，但却特别酷，有着恶狠狠的想象力。

现在网站技术已经很发达了，CSS3可以做动画，有一些数码艺术家用纯CSS3来绘画、做小游戏。JS就更不用说，几乎无所不能，但大家却都不怎么看网站了，大部分点开的也是手机上已经被适配过的阉割了的网站。大家对网站的想象力也很贫瘠，很多时候大家对一个好的网站设计理解就是干净、扁平、性冷淡。 我还是希望，随着技术的进步，网页设计师可以让网站充满各种可能性和各种意料之外，让我们拥有本世纪初浏览网站的体验，浏览的过程好像一场探险，永远也不知道下一个网站是什么样的。

Nhozagri能尖日大王国官网

Design360°：

对于初学者来说，设计一个显示个性和美学的网站的最重要秘诀是什么？对于想要深入研究和实验的网页设计师，有什么技术或技巧可以培养他们的技能？

北鸥：

对于初学者来说，在稍微了解了一些基础逻辑之后，就可以开始动手。直接敲代码就是最重要的秘诀，事先不要去想什么风格、怎么布局、怎么排版，特别是不要在Ai或Ps上画来画去。如果你是一个平面设计师，放弃平面设计的思维，直接就从代码开始，让代码本身来启发你的思考。对于想要深入研究和实验的网页设计师，掌握了一定技术之后，那就快乐的玩起来吧。

Slime Engine 史莱姆引擎在线展览

随着数字媒介的发展和大众审美的升级，像北鸥这类热衷于探索网页设计可能性的设计师，正在为大众带来新的网页体验方式。他们将用户体验和美学作为网页设计的首要考虑要素，致力于将平面设计与互动、代码相结合构建的新网页呈现方式，让网站在“出错”中超越本身的功能，成为形如艺术一般的存在，同时也带来好玩且充满惊喜的体验。

北鸥

官网：http://oooostudio.com/