萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

Jon Hicks 親述:Spotify 圖標家族從發現到落地的完整設計檔案

HicksDesign 創辦人 Jon Hicks 受邀參與 Spotify 圖標家族重設計,與內部設計團隊協作完成。作為資深 Spotify 用戶,他將這次難得的實戰過程完整記錄:從發現階段蒐集參考、確立設計規範,到核心圖標、流派圖標的隱喻探索、尺寸體系、邊角處理、類型圖標的樂器隱喻體系,展示專業圖標設計的全鏈路思維。

發現階段:建立共同視覺語言

Spotify 圖標家族概覽 核心欄目圖標草圖

團隊目標:簡約、圓潤、友好、直觀、不幼稚,同時兼容既有品牌元素、圖標風格與 Proxima Nova 字體。核心欄目:專輯、藝術家、合集、發現、播放列表、個人資料、音樂台。

核心隱喻探索:音樂無形,如何有形?

暗黑破壞神專輯封面方案 黑膠/CD抽象方案 混音器/通行證方案

  • 方案一:標志性專輯封面(如《Dark Side of the Moon》)作瀏覽圖標 → 放棄,版權與辨識度雙重風險。
  • 方案二:黑膠唱片/CD 共同特徵 → 方塊內雙圓。瀏覽圖標喚起「唱片旋轉」懷舊隱喻,未被信封圖標式濫用,極具獨特性。
  • 方案三:歌單/混音器/通行證 → 雖獨特但認知門檻高,最終歸於通用音符隱喻。

設計規範體系化:尺寸、線條、邊角、形態選擇

尺寸與線條規範 邊角圓角處理

  • 四規格:16/24/32/64px。線條粗細隨尺寸增大視覺變細(16px@1px → 64px@~2px),防止大尺寸顯粗。
  • 形態選擇:優先最簡單直觀隱喻,用戶無需依賴文字標籤即可操作。
  • 圓角統一:所有邊角四捨五入,細節微超邊界允許微調。

流派圖標:樂器隱喻體系與意境隱喻並行

流派圖標展示區 流派圖標網格 胸像探索方案 吉他隱喻體系 流派圖標整體視覺 意境隱喻:蛋椅=放鬆

  • 搖滾子流派:Gibson Les Paul(經典)、Flying V(硬核)、Fender Jaguar(另類)……不同吉他型號精準對應子流派氣質。
  • 其他流派:薩克斯=爵士、轉盤=電子、麥克風=嘻哈……代表性樂器即時可讀。
  • 意境類:無具體樂器對應時,用場景物件隱喻(蛋椅=放鬆、營火=民謠)。
  • 胸像方案(Gene Simmons、Redfoo、Michael Jackson)因過於晦澀被駁回。

項目持續演進

圖標家族持續擴展中。Jon 強調:規範是為了創造自由,而非束縛創造。理解底層邏輯,設計師才能在擴展新圖標時保持家族一致性與品牌辨識度。

copyright © 萬盛學電腦網 all rights reserved