人人都該懂的UI設計: 配色X網格系統X圖標X字體, 四主題搞定介面 | 誠品線上

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

內容簡介

內容簡介 跳脫固定僵化的模版打造出獨特的網頁與APP介面PC、平板、手機現代人透過不同的媒介瀏覽網頁、APP設計良好、人性化的介面，才能留住使用者透過配色方案、網格系統、圖標應用、字體選擇打造出吸睛又獨特的介面

作者介紹

作者介紹 ■作者簡介三度出版有限公司

產品目錄

產品目錄 遊戲開始 by 福阿德•馬婁克●配色方案 採訪維賈伊•馬修斯採訪吉米•拉赫里亞里索亞Lifeblood 設計師事務所254sound 創意音樂製作工作室Canal 電視臺連續劇OFFF 義大利站Tooway 手機應用程式Behance HKStadia 藝術平台實習招募網頁45˚ 建築工作室Crea 5 設計組合官網納瑪爾手工珠寶加布麗艾拉•盧比奧官網壽司時間卑爾根國際藝術節馬修•加洛維官網Programme 作品集《Today is Bored》電子雜誌&PROJECT 視覺設計工作室藝術家線上作品集加貝特設計工作室蘇茜•萊奧範思廣告官網未來牙醫診所范妮•阿格尼爾珠寶Enjoy 公共美術館維拉•利斯特藝術與政治中心蒂特根貿易教育學院感受街頭魅力－－豐田汽車戈維特 - 布魯斯特美術館BBC 廣播電臺●網格系統 採訪伊莉莎白•恩托文帕帕波利提斯& 帕帕波利提斯法律公司喬瓦建築公司布魯士•康紐官網巴斯建築設計事務所集裝箱藝術家駐地01Uniform 設計工作室官網安妮•德格里夫官網42 | 54 比利時運動服飾Sixpence Store Fighter Microsite 官網W&CO 設計工作室官網Folio.2HAYBrands&People 品牌機構JH.ZANE 服飾能源大學走進博物館Starlet 化妝學校愛麗絲•莫柔官網Le Salón 模特事務所2014 年北方音樂節●圖示應用 採訪Current Haus 設計工作室採訪Oddds 設計工作室這是哪裡？導航App吃出來行程安排應用施蒂里亞數位控股公司彼得歷險記巴別塔－－通用語言展覽勞倫斯•布恩精選Sonder 6 跑酷街頭咖啡館●字體設計 採訪Sons & Co. 設計工作室採訪皮埃爾•阮邦尼•馬爾克設計工作室長壽木音樂響應式即時繪圖設計House of BorelBlacknegative 設計工作室小羅伯特•唐尼官方網站舍沃容工作室何塞•莫拉哈官網克里莫夫設計工作室官網馬瓦•巴里爾官網千里之外，發現理想家弗萊徹家具inty ++ 設計工作室ABCo. 咖啡KÒNIC THTR－－KÒNICLABECC 燈具NuDD x Oddity @ MakerHive布魯克林海軍造船廠ACME佩塔斯器械管理公司AD 雜誌Onirim 製片公司小公主DNOVA帕帕贊珠寶高爾文家具薩皮耶格斯技術園TOKYO TOKYO杜海航個人官網2016音樂故事學校Te Oro 音樂藝術中心「獨立急行」活動索引鳴謝

商品規格

試閱文字

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

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

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

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

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

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

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

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

內文試閱
採訪 ◊維賈伊•馬修斯

維賈伊•馬修斯（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 在這個案件中，您怎麼平衡可讀性和美感？
對我們來說，這兩者就像硬幣的兩面。網頁設計畢竟是資訊傳達，所以我們必須有效、高效率地傳遞資訊。可讀性是最基本的要求。