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

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以後，公司其實是我這些經歷的縮影，所以向來很難定義「我」是怎樣的位置。好險最近有多出了一個新的名詞「斜槓」，我是從出社會就開始斜槓，斜槓青年到現在變斜槓中年（笑），斜槓中年還開了一家斜槓公司。

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

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

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

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