@陳子木 編者按：本文的作者是設計師Jon Hicks，是原文所在網站HicksDesign的創辦人和設計主導者，網站的The Hickensian欄目記錄了Jon的設計歷程和經驗總結，非常值得閱讀。本文就是Jon參與設計著名音樂軟件Spotify圖標集的過程，其中打磨圖標的思路，和細節處理的手法非常值得學習。閱讀愉快。

去年秋季，著名音樂軟件Spotify主管設計師聯絡的Andreas Holmstrom同我聯系上，問我是否有興趣參與他們的新版圖標集的設計，并與他們正在重新設計整個Spotify軟件的設計團隊協同合作。作為一個狂熱的樂迷，我其實是已經用了6年Spotify的重度用戶了，我必須抓住這個機會！坦率的說，我通過Spotify發現的音樂遠遠多于我通過其他媒體挖掘到的。

關于圖標設計，下面的文章值得一讀：
《漲姿勢！這些LOGO背后的含義你未必知道》
《經驗分享！IUNIOS1.0 ROM設計總結》
《再不知道字體圖標就落伍啦！字體圖標制作詳解》

一個月之前，整個重新設計項目基本完成，我終于有機會將這次難得的設計體驗寫下來，分享給大家。

發現階段（Dsicovery Phase）

通常，我喜歡將這種大型的圖標設計項目開始的階段稱之為“發現階段”，因為在這個環節我會找來許多不同的圖標進行觀察，發掘其中的設計方法，隱喻以及風格。同時，這些現成的案例也會確保我們設計圖標集的時候能保持正確的大小、格式以及命名方式。在設計過程中，我同來自Spotify設計團隊的Andreas、Stanley、Daniel 和 Sebastian一起合作，共同完成了新的圖標集。我們的職責是設計出一套簡約，圓潤，友好，直觀，又不顯得可愛幼稚的圖標。與此同時，這套圖標的設計風格還要兼顧到Spotify現有的品牌元素，圖標風格，以及Spotify重新設計所用的Proxima Nove字體。

動手設計的時候，我們是從專輯、藝術家、合集（用戶自己的音樂合集）、發現、播放列表、個人資料和音樂臺這些主要欄目的圖標設計開始的。

在設計過程中，一大挑戰就是要展現的很多現實中并不存在的元素。當然，諸如音樂播放控制這樣的操作是有現成的隱喻和通用的圖標樣式的，但是實際存在的音樂又該如何呈現呢？Spotify擁有巨大的音樂庫，但是并沒有一個足以代表它的圖標和外觀。

我們有個早期的想法是使用一個標志性的音樂專輯封面來當作音樂瀏覽的圖標——比如 平克?弗洛伊德 的專輯《Dark Side of the Moon》的封面。

不過我們未曾采納這種設計方案。在接下來的設計中，我們參考了黑膠和CD的外觀，它們相似的外觀可以抽象到圖標設計中來——都是一個方塊內兩個圓。比起之前的設計，我們認為這樣的設計更簡約也更有用。尤其是瀏覽圖標（這個我最喜歡了）與這個圖標有著內在的關聯，令人想起唱片在唱機里悠悠旋轉的過去。懷舊？的確，好在用它做隱喻還沒有像代表Email的信封icon一樣廣泛普及。

我們還曾嘗試過其他的有關音樂的隱喻，比如用樂隊的歌單、卡帶式混音器來做播放列表的圖標，或者基于通行證的外觀來設計個人資料的圖標。雖然使用混音器來作為圖標是非常老派而獨特的設計，但是更加簡約通俗的音符的形象更接近大眾的認知和普遍認同的常識。

總的來說，考慮到所有因素，我們制定了一套設計余下圖標的設計規范。

• 首先是尺寸的規范，每個圖標都會有16px、24px、32px和64px四種大小。而隨著尺寸大小的增長，圖標內線條的粗細與整體的比例會變小，視覺上會更細，防止整個圖標看起來“矮胖”。比如當圖標大小是16px的時候，線條粗細是1px，可是當圖標增長到64px的時候，線條的粗細并不是等比的4px（右側），實際尺寸已經接近2px了（左側）。

• 在選擇圖標型態的時候，會盡量選擇最簡單直觀的，這樣用戶就無需通過底部菜單的文字說明就能正確操作了。
• 所有的邊角都會四舍五入，比如藝術家頭像這樣的圖標，多少都會有稍許細節超出邊界，這都可以根據實際情況進行小幅度調整。

類型圖標（Genre icons）

接下來就是要解決分類類型圖標了。不同于出現在主界面上的圖標，在“瀏覽”的界面內，這些分類圖標擁有更大的空間來展現更多的細節。

下面這些胸像icon都是剛開始做類型圖標時，做的一點有意思的探究。最終版里面，這些都已被駁回了。

從左到右分別是：Gene Simmons (KISS), Redfoo (LMFAO), Michael Jackson 以及“Workout lady“。

原本想把Redfoo的胸像圖標用來表示“Party”（搖滾聚會？）的，但是我們都認為這樣過于晦澀難懂。所以，想通過圖標來傳達意境這樣的東西的確是一件非常麻煩的事情。

后來，我們決定這樣來處理類型圖標：對于特定類型的音樂，我們會用這種音樂形式獨有的或者有代表性的樂器來表現它。特別是搖滾和搖滾的子類型，我們會用不同的吉他來表現它們。我們用Gibson Les Paul來代表經典搖滾，用Flying V來代表硬搖滾，Fender Jaguar則代表著另類搖滾，等等。

我希望這些設計能夠足夠統一，具有整體性，但是結果并不一定能那么理想：

另外有一些用來表現意境和氛圍的圖標，并沒有使用與音樂相關的物體來表現，比如下面的蛋型椅子，就是用來表現放松的意境。

目前，這個項目仍在逐漸完善中，不斷有新的圖標添加到這個合集中來。

原文地址：hicksdesign
優設網翻譯：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量72萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：