專訪松菸口網站幕後推手王宗欣:「像閱讀雜誌一樣地瀏覽松菸口吧!」

2018.08.17  | 台灣設計研究院

▲ 松菸口「最新消息」的瀑布流形式。圖片來源:松菸口網站。


前言

「松菸口」網站的迷人之處,在於特殊的瀏覽路徑、細緻的互動視覺效果,以及別具設計感的網頁佈局(layout),其幕後推手就是王宗欣率領的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以後,公司其實是我這些經歷的縮影,所以向來很難定義「我」是怎樣的位置。好險最近有多出了一個新的名詞「斜槓」,我是從出社會就開始斜槓,斜槓青年到現在變斜槓中年(笑),斜槓中年還開了一家斜槓公司。

我們公司就是一個斜槓到底的公司,沒有辦法被定位。我們認為資訊和品牌觀念的傳播,不應該只有單一管道,可以透過不同的手段傳遞價值,管道非常多元,沒有界線,這也是我們公司想要去彰顯的一個價值。

斜槓不是壞事,但要把自己最重要的專長磨好,接下來你的斜槓才有意義

現在的年輕人最想做的事情就是「斜槓」,他們其實不滿足於被認定單一個身分,我覺得很多方向的涉略絕對是好的,但一定要先有第一把刀磨出來,就是一定要有第一個專業,在沒有第一個專業之前,其實沒有辦法帶動其他事情。以我們公司來說,是在網頁設計領域被業界認可了,才開始接到拍片的邀約,第一個專業會讓你在跨第二個斜槓的時候變得輕鬆許多。所以我認為斜槓的開始是先把第一個專業做到最好好,第二個斜槓的能力才可以順勢上去。

一定要把自己最重要並能養活自己的專長磨練好,接下來你的斜槓才有意義,不然你只是有很多興趣的業餘愛好者,而不是專家。