人人都該懂的UI設計：配色X網格系統X圖標X字體，四主題搞定介面

採訪 ◊維賈伊•馬修斯

維賈伊•馬修斯（Vijay Mathews）畢業於波士頓大學的美術、平面設計與藝術史系。如今是紐約W&CO 設計工作室的主要負責人，專注於數位設計與開發的專案。同時，他是體驗平面設計協會（SEGD）的思想領袖， 也是字體設計指導俱樂部、藝術指導俱樂部和介面設計協會的成員。

Q1 可否為我們做一下自我介紹，您是怎麼進入到介面設計這個行業的？

大學畢業後我在一家古老的活字印刷店「Hatch Show Print」擔任平面設計師，後來還分別在WGBH 電視臺和從事導視系統設計的2-12 設計工作室工作。在此期間，我自己私下嘗試介面設計。兩年後，我發現對我來說，介面設計比我的本職工作更有吸引力。

所以，我找到了如今的合夥人克里斯•歐陽（Chris Auyeung）一起從事網頁設計。最初的兩年，我們在應用程式設計和開發專案裡嘗試各種不同的交互可能性和功能。當時我們唯一的客戶就是自己，所以我們不用擔心產品交付或客戶的要求，可以嘗試所有的可能性。

Q2 請介紹一下您的設計過程，是否有些什麼特別的流程或技術？

每個專案都是不同的， 但是對於已經確定範圍和可交付成果的專案， 我們採取一個稱作4D 的流程： 探索（Discovery）、設計（Design）、開發（Development）、部署（Deployment）。在「探索」階段，我們分析問題，研究潛在用戶並確定項目體量。在「設計」階段，我們會製作一張包含所有資料的網頁索引地圖和一張圖表，將調研的成果進行視覺化設計。在「開發」階段，我們會將設計的內容應用到實際的頁面上。在「部署」階段，我們會將所有內容放上網頁，等其經過測試後就可以啟用了。

Q3 很多網頁看起來很漂亮，但流覽體驗並不好。請問您怎麼整合大量資訊，然後傳遞給用戶？

網頁是為特定目的和特定內容而設計的。其中一個設計過程是構思內容策略，以便使用該媒介傳遞資訊。這個過程需要透徹瞭解所需傳遞的資訊。設計師的作用是使複雜的資訊變得簡單。

Q4 您怎麼確定一個網頁使用的配色方案，怎樣才是一個好的配色方案？

顏色在網頁設計中十分重要，這與在其他設計中的重要性是一樣的。顏色實用、具有識別性並且可以傳遞感情。它是一個工具，可以幫助用戶解析資訊。

Q5 您如何看待網頁設計中顏色的功能性？

顏色可以用來建立層級。我們也可以透過顏色的對比，調動訪客的注意力，調整資訊的優先順序。當我們協調地使用顏色時，可以創造秩序和邏輯，為網頁建立一個視覺形象。

Q6 在網頁設計中，顏色能對用戶發揮怎樣的心理暗示？

顏色可以讓用戶產生情感波動。可以是電子的、動感的，也可以是安靜微妙的。我們可以透過選擇不同的顏色來營造不同的情緒。

Q7 網頁設計的交互性，可以讓訪客與網頁聯繫。這種特性對顏色的運用是否有什麼影響？

在網頁設計中上，人機的互動建立在虛擬體驗上，我們可以透過配色方案建立類似真實的反應。色彩可以用來表現人機交互的不同狀態。舉個例子，當我們設計按鍵的時候，我們可以用色彩表現出「未點選」、「高亮」、「已點選」和「有效狀態」。

Q8 假如我們已經決定使用哪幾種顏色，那應該怎樣運用在一個網頁上，是否有一些規範或通用的指引可以讓設計師參考？

我個人不認為有這樣的規則。它取決於你需要營造怎樣的情感共鳴，並將它傳遞給該網頁的潛在訪客。

Q9 您為美國平面設計協會製作的網頁非常具有視覺衝擊力。請問您選擇這個配色方案的設計思路是什麼？

該配色方案來源於美國平面設計協會的視覺形象，那是由母體設計公司（Mother Design）設計的。這個配色方案不止用於網頁，還用於論壇上其他相關的設計，包括動態設計、環境設計、印刷物設計及社會資產。

Q10 請問美國平面設計協會的網頁針對什麼用戶？潛在使用群體對您的設計有怎樣的影響？

這個網頁的主要使用群體是設計師，因此我們在這個案件中充分拓展並嘗試了網頁設計的界限。由於設計師可以接受比較大膽的設計，因此我們也做了一些大膽的嘗試。我們使用了重疊元素和硬邊筆觸來進行設計，讓這個網頁趨於完美的狀態。

Q11 在這個案件中，您怎麼平衡可讀性和美感？

對我們來說，這兩者就像硬幣的兩面。網頁設計畢竟是資訊傳達，所以我們必須有效、高效率地傳遞資訊。可讀性是最基本的要求。

採訪 ◊維賈伊•馬修斯

維賈伊•馬修斯（Vijay Mathews）畢業於波士頓大學的美術、平面設計與藝術史系。如今是紐約W&CO 設計工作室的主要負責人，專注於數位設計與開發的專案。同時，他是體驗平面設計協會（SEGD）的思想領袖， 也是字體設計指導俱樂部、藝術指導俱樂部和介面設計協會的成員。

Q1 可否為我們做一下自我介紹，您是怎麼進入到介面設計這個行業的？

大學畢業後我在一家古老的活字印刷店「Hatch Show Print」擔任平面設計師，後來還分別在WGBH 電視臺和從事導視系統設計的2-12 設計工作室工作。在此期間，我自己私下嘗試介面...

科技的力量仍在不斷改變整個地球。過去十年，技術進步改變我們的生活方式，重塑人際關係，讓我們對未來有嶄新的想像。如今，網民數量已達到35 億，這個數字等於1970 年生活在整個地球的總人數。

商業市場裡，各行各業都因技術進步而受到影響。曾經的市場領導者如今要面臨互聯網上新興企業的威脅。成熟的行業則不斷審視自身。電子商務消滅了中間商，讓消費者直接面對企業，同時刺激了購物欲望和實現了用戶比對下單。而對消費者而言，這是前所未有的消費時代，他們無需再局限於本地商戶。正如《紐約時報》最近的報導：「沒有任何一家公司，在這場技術革命中可以獨善其身。」企業深知他們必須適應這股潮流，才能保證自身的生存和發展。而在此之前，他們從來沒有面臨這樣大的壓力，需要保持他們的願景，配合消費者的節奏。

設計無所不在，它充斥我們的生活，讓人無法忽視。毫無疑問，網頁設計是這股潮流中的弄潮兒，幾乎九成的消費者受其影響而選擇某個產品或服務。然而，網頁設計並不是一件商品。假如品牌是企業的靈魂，那麼網頁是它的血肉和聲音，它與消費者互動，表現品牌美學。一個品牌的交互設計給人帶來的體驗無非三種：好的、壞的、醜的。糟糕的網頁設計不僅對商業是毀滅性的，而且是一種污染——污染了消費者的靈魂。改變行業需要有放手一搏的勇氣。對企業而言，如何滿足消費者更為刁鑽的口味，使其在市場中脫穎而出，這是最主要的問題。解決的方案是將互動和情感結合，與消費者產生共鳴，為他們留下持久的印象。

作為設計師，不管案子的大小，我們一直致力創造與眾不同的體驗。跟隨潮流非常容易，也很有誘惑力，尤其是一切事物在互聯網上都觸手可得。然而我們更喜歡不按範本設計，而是全力以赴地進行設計，就像一場押出所有籌碼的賭博。風險與回報總是成正比的。是否有某些特定的設計方案，一定會被人認為是好的設計呢？或許有，或許沒有。

總之，我相信以下兩條設計法則是非常有價值的。第一，內容需要符合一定的邏輯才顯得有價值；第二，要想重塑，先要解構。當我在蒙特婁創立鳳凰創意工作室之前，我已經在設計行業工作了10 多年時間，此前也曾經營過兩間設計工作室，這兩條法則從那時起，就成了我的創作原則。

當我和鳳凰創意工作室的另一位合夥人路易士•帕奎特（Louis Paquet）掌握了這兩條法則，我們馬上有種浴火重生的感覺。在鳳凰設計工作室成立僅僅18 個月後，我們大膽的創意和出色的技術就贏得了15 個重要的設計獎項。我們的成功基於一個靈活的團隊，我們根據每個專案的需求而進行及時的調整。我們的每個案件都充分利用了重塑的力量，並根據「永遠線上」的網路特質，重新詮釋傳統的元素，為品牌創造符合交互時代特點的品牌價值。我們從不畏懼挑戰行業標準，也不會考慮投機取巧，因為我們要發掘的是有創意的解決方案。最終，我們需要重塑的核心目標是，讓品牌和客戶之間建立聯繫，贏得他們的好感，傳遞品牌資訊。

我從這本書中找到了很多靈感，它收錄了很多相似的案例，從中我們看到設計師和設計工作室為網頁設計注入了新鮮的想法和設計理念。創作的靈感就在你我身邊，你永遠不知道何時何地能發現它，也許是在翻閱這本令人耳目一新的圖書時，也許是在流覽網頁時，也許只是簡單地在上班的路上。每個網頁都是一個改變消費者對某個產品或品牌認識的機會，這將引發連鎖反應，可以改變您在市場上的地位，甚至一躍成為領導者。

看過這本書之後，希望你們也能把網頁範本拋之腦後，用創新的力量、藝術的氣息，並有針對性地設計方案，從而打造你嶄新的數位化戰略！

科技的力量仍在不斷改變整個地球。過去十年，技術進步改變我們的生活方式，重塑人際關係，讓我們對未來有嶄新的想像。如今，網民數量已達到35 億，這個數字等於1970 年生活在整個地球的總人數。

商業市場裡，各行各業都因技術進步而受到影響。曾經的市場領導者如今要面臨互聯網上新興企業的威脅。成熟的行業則不斷審視自身。電子商務消滅了中間商，讓消費者直接面對企業，同時刺激了購物欲望和實現了用戶比對下單。而對消費者而言，這是前所未有的消費時代，他們無需再局限於本地商戶。正如《紐約時報》最近的報導：「沒有任何一家公司，...

遊戲開始　by 福阿德•馬婁克

◊ 配色方案 ◊
採訪維賈伊•馬修斯
採訪吉米•拉赫里亞里索亞
Lifeblood 設計師事務所
254sound 創意音樂製作工作室
Canal 電視臺連續劇
OFFF 義大利站
Tooway 手機應用程式
Behance HK
Stadia 藝術平台
實習招募網頁
45˚ 建築工作室
Crea 5 設計組合官網
納瑪爾手工珠寶
加布麗艾拉•盧比奧官網
壽司時間
卑爾根國際藝術節
馬修•加洛維官網
Programme 作品集
《Today is Bored》電子雜誌
&PROJECT 視覺設計工作室
藝術家線上作品集
加貝特設計工作室
蘇茜•萊奧
範思廣告官網
未來牙醫診所
范妮•阿格尼爾珠寶
Enjoy 公共美術館
維拉•利斯特藝術與政治中心
蒂特根貿易教育學院
感受街頭魅力——豐田汽車
戈維特 - 布魯斯特美術館
BBC 廣播電臺

◊ 網格系統 ◊
採訪伊莉莎白•恩托文
帕帕波利提斯& 帕帕波利提斯法律公司
喬瓦建築公司
布魯士•康紐官網
巴斯建築設計事務所
集裝箱藝術家駐地01
Uniform 設計工作室官網
安妮•德格里夫官網
42 | 54 比利時運動服飾
Sixpence Store Fighter Microsite 官網
W&CO 設計工作室官網
Folio.2
HAY
Brands&People 品牌機構
JH.ZANE 服飾
能源大學
走進博物館
Starlet 化妝學校
愛麗絲•莫柔官網
Le Salón 模特事務所
2014 年北方音樂節

◊ 圖示應用 ◊
採訪Current Haus 設計工作室
採訪Oddds 設計工作室
這是哪裡？導航App
吃出來
行程安排應用
施蒂里亞數位控股公司
彼得歷險記
巴別塔—通用語言展覽
勞倫斯•布恩精選
Sonder 6 跑酷
街頭咖啡館

◊ 字體設計 ◊
採訪Sons & Co. 設計工作室
採訪皮埃爾•阮
邦尼•馬爾克設計工作室
長壽木
音樂響應式即時繪圖設計
House of Borel
Blacknegative 設計工作室
小羅伯特•唐尼官方網站
舍沃容工作室
何塞•莫拉哈官網
克里莫夫設計工作室官網
馬瓦•巴里爾官網
千里之外，發現理想家
弗萊徹家具
inty ++ 設計工作室
ABCo. 咖啡
KÒNIC THTR—KÒNICLAB
ECC 燈具
NuDD x Oddity @ MakerHive
布魯克林海軍造船廠
ACME
佩塔斯器械管理公司
AD 雜誌
Onirim 製片公司
小公主
DNOVA
帕帕贊珠寶
高爾文家具
薩皮耶格斯技術園
TOKYO TOKYO
杜海航個人官網2016
音樂故事學校
Te Oro 音樂藝術中心
「獨立急行」活動

索引
鳴謝

遊戲開始　by 福阿德•馬婁克

◊ 配色方案 ◊
採訪維賈伊•馬修斯
採訪吉米•拉赫里亞里索亞
Lifeblood 設計師事務所
254sound 創意音樂製作工作室
Canal 電視臺連續劇
OFFF 義大利站
Tooway 手機應用程式
Behance HK
Stadia 藝術平台
實習招募網頁
45˚ 建築工作室
Crea 5 設計組合官網
納瑪爾手工珠寶
加布麗艾拉•盧比奧官網
壽司時間
卑爾根國際藝術節
馬修•加洛維官網
Programme 作品集
《Today is Bored》電子雜誌
&PROJECT 視覺設計工作室
藝術家線上作品集
加貝特設計工作室
蘇茜•萊奧
範思廣告官網
未...