专访松菸口网站幕后推手王宗欣:「像阅读杂誌一样地浏览松菸口吧

2020-06-15 W猫生活 76713次阅读 

▲ 松菸口「最新消息」的瀑布流形式。图片来源:松菸口网站。

前言

「松菸口」网站的迷人之处,在于特殊的浏览路径、细緻的互动视觉效果,以及别具设计感的网页布局(layout),其幕后推手就是王宗欣率领的dosomething studio团队。

为了体现松菸口的品牌精神,网站设计团队从风格、字体到版式布局皆经过缜密思考,让艺术性与可用性达到和谐的共存。 从初期名称定调,到网站平台的开发,「松菸口」品牌诞生的每一个阶段,王宗欣皆参与其中。

本篇专访除了邀请他聊聊品牌的发展过程、网站设计思维,也请教其多种创作身份的心路历程。

专访松菸口网站幕后推手王宗欣:「像阅读杂誌一样地浏览松菸口吧王宗欣 Wang Tsung Hsin (Cowper)

2000毕业于台北华梵大学美术系,主修中国水墨画
2008成立多媒体艺术团队dosomething studio

个人网站
dosomething studio工作室作品集

 

Q:在网站规划过程中,用什幺角度来延伸品牌精神、Logo色系/结构?

王宗欣(以下简称王):一开始是受到方序中的邀请,一起建构品牌印象。从金钟奖到金马奖,跟方序中合作了好几年,他知道我对于数位多媒体比较熟悉,也懂得从品牌的角度导入,因此就找我一起到台湾创意设计中心(后简称台创)了解现有场域的规划与问题点。在了解过后,我们都认为需要再创立一个新的名字来定义这个场域,不是就现有的方式继续操作。

「松菸口」名称的由来

王:台创在松菸做了很多很棒的事情,例如台湾设计馆是台湾唯一的设计博物馆,但提到松菸一般都是想到五连栋仓库或是松菸诚品。所以跟台创讨论的过程中,确定应该要给它(台创服务场域)一个新的名字,以品牌思维来操作,整合台创所管理的这些区域。

发想过程中,出现了「口」这个字,发现不管在口语还是视觉都非常有趣,进行社群调查时也发现「松菸口」有辨识度且尚未被使用过,可以成为网路关键字,在多方验证后就确认品牌名称为「松菸口」。

Q:松菸口网站的浏览路径相当特别,请谈谈整体规划设计的概念。

王:网站规划的概念为动线、汇聚以及探索空间,将这三个线索转译成网站。 

首页口字型浏览路径,大胆挑战使用者习惯

原本松菸口场域的动线就是一个口字型的移动路径,所以设计、文字上面才用「口」这个字,网站首页也以「口」来转动它;当我们在首页点选下一页或是滑鼠滚轮往下捲动,它是走一个口字型的浏览路径,打破网站习惯的上下浏览动作,是一个大胆的挑战。

圆点溶解特效,象徵人们与松菸口的汇聚

在互动视觉的回馈部分,是运用「溶解」(Dissolve)和「Meta ball」的特效作为视觉上互动的呈现;具体来说,使用者在浏览首页时,滑鼠游标指到之处,会产生一个亮橘色圆球(Meta ball),当游标移动到同色系的色块时,Meta ball的球体会像液体般溶解到色块里,呈现「汇聚」在一起的意象,这个意涵是期望所有来到松菸口的人,都能聚集起来讨论设计。

细緻互动设计,网站探索的创新体验

进入网站内页,指标触碰到一般文字时,是产生亮橘色的小圆点,圆点触碰到有超连结的锚点文字时,会产生半透明的亮橘色光晕。使用者就像利用这个小圆点去探索网站,藉由滑鼠移过文字、色块,或是点击网页零件,在使用过程中出现细緻的小惊喜;透过这些互动效果,我们期待让使用者感受到这个网站充满了想像空间,用探索的体验去记忆松菸口这个品牌。

专访松菸口网站幕后推手王宗欣:「像阅读杂誌一样地浏览松菸口吧

▲ 立即动手玩!前往松菸口首页动动滑鼠,试试口字型浏览路径和Meta ball溶解这两个功能吧!

美丽瀑布流形式,突破资讯整合限制

松菸口是四个品牌的集合,一开始做使用者访谈时,了解到原来台创在管理网站的时候,其实是品牌各自经营,并不是透过统一的美编单位去把所有东西彙整起来,每个品牌想展现资讯的形式可能不尽相同。

为了让所有管理者上稿时都很轻鬆,不会有管理网站上的负担,所以我们才提出以「瀑布流」的方式整合网站的方案。不同的banner到网站上,都可以编排成合适的阅读方式。为了瀑布流,我们写出一个演算的规则,可以兼容所有比例尺寸不同的图片,这个逻辑其实是考虑到使用者体验,以及视觉上面的平衡,同时让整个网站资讯的呈现方式可以比较活化一点。

Q:这个网站最令dosomething studio团队骄傲的特色?

像阅读一本杂誌的松菸口网站

王:dosomething studio在规划初期,保留了一部分玩性。不过网站的主要功能还是资讯呈现,因此我们设定比例30%是玩,70%是使用者对于网站上手的操作性,我们希望整体是很灵活,像是在阅读一本杂誌的layout。

超级轻鬆的上稿机制

为了让松菸口网站的管理群能以直觉的方式上稿,工程师特别客製化编辑系统。过往在后台编排图文时是比较僵硬的,一个萝蔔一个坑在做,因此这次在后台针对管理者使用体验也下了很多功夫。

从一开始文章要怎幺呈现,内部就做过很多次砍掉重练的过程,不希望是很传统的编排,因此前台的编排形式是採取不规则、错落的方式,再对应到后台管理者的操作是所见即所得,很直觉化的编辑,那边要塞什幺就把东西拉进去,让前、后台的操作者体验都是可以直接呼应的。

Q:对松菸口的想像?

王:像纽约MOMA美术馆会有展览空间、咖啡厅、设计商店,一个美术馆来说它可以包含这幺多事情,因此想像松菸口应该是这样的一个地方,你一进去可以吃东西、买东西、看展览,包含设计的一切体验,都在松菸口。

期待松菸口变成一个生活圈,而网站就形成很重要的沟通环节,透过一个会员帐号结合线上、线下的所有事情,一切都可以透过这个ID不断的累积,并且这个累积可以转换成优惠,让松菸口成为一个让大家来这边持续运转的地方。

Q:从美术到影像执行,再由影像跨足到网站规划与设计,请跟我们分享不断跨界的经验与所做的準备,与中间遇到的挑战。

从斜槓青年到斜槓中年,还开了一家斜槓公司

我大学唸的是纯艺术,快毕业那一年签约成为动画作家。大学毕业以后第一份工作是网页设计,开始学网页设计介面、程式,约有五年到十年间,一直到2006年Youtube出现了,网路频宽开始变很快,发现动画传播在网路是可行的,于是进入了动态视觉、拍片这一块;慢慢地,从我的工作历程中,我做的事情被不同人认识,增加了非常多的抬头。创立dosomething studio以后,公司其实是我这些经历的缩影,所以向来很难定义「我」是怎样的位置。好险最近有多出了一个新的名词「斜槓」,我是从出社会就开始斜槓,斜槓青年到现在变斜槓中年(笑),斜槓中年还开了一家斜槓公司。

我们公司就是一个斜槓到底的公司,没有办法被定位。我们认为资讯和品牌观念的传播,不应该只有单一管道,可以透过不同的手段传递价值,管道非常多元,没有界线,这也是我们公司想要去彰显的一个价值。

斜槓不是坏事,但要把自己最重要的专长磨好,接下来你的斜槓才有意义

现在的年轻人最想做的事情就是「斜槓」,他们其实不满足于被认定单一个身分,我觉得很多方向的涉略绝对是好的,但一定要先有第一把刀磨出来,就是一定要有第一个专业,在没有第一个专业之前,其实没有办法带动其他事情。以我们公司来说,是在网页设计领域被业界认可了,才开始接到拍片的邀约,第一个专业会让你在跨第二个斜槓的时候变得轻鬆许多。所以我认为斜槓的开始是先把第一个专业做到最好好,第二个斜槓的能力才可以顺势上去。

一定要把自己最重要并能养活自己的专长磨练好,接下来你的斜槓才有意义,不然你只是有很多兴趣的业余爱好者,而不是专家。

延伸阅读:专访松菸口品牌识别设计师方序中:「找到与古蹟相处最舒服的模式」

前往 松菸口

上一篇: 下一篇: