玩轉響應式圖標設計

 　　什麼是響應式圖標設計?

　　響應式設計主要講的是布局，那麼什麼是響應式圖標?響應式圖標設計是一種根據屏幕尺寸來改變圖標類型、從而達到更好可讀性的設計。

　　圖標為什麼要響應式?

　　怎樣閱讀內容?時至今日，我們用來閱讀內容的平台越來越多。設備、屏幕分辨率、浏覽器、平台——我可以拿著5S+Safari+iOS7.0浏覽網頁，也可以拿著1020+Chorome+WP8浏覽網頁。

　　各種選擇，各種搭配實在是太多了，這些都或多或少的影響了內容的可讀性。而圖標作為一種視覺語言，可讀性非常重要。

　　圖標設計，首先要滿足易於理解。其次，圖標的可讀性必須高。在小尺寸的情況下，圖標設計為了追求更高的辨識度/可讀性，可以選擇犧牲一點美感。

　　那麼能不能美感、可讀性兼得呢?圖標設計的藝術便在於二者的平衡，取與捨。怎樣設計，讓不同尺寸的圖標均能展現美感，同時又具備可讀性?

　　我認為，需要根據尺寸范圍進行圖標響應式的優化

　　這個理念不是新的。對於柵格化圖標來說，這種設計方法很常見。

　　在網頁設計中，很多設計師錯誤的認為，只要簡單的縮放圖標即可達到完美的可讀性。但實際上並非如此。

　　每款圖標需要三種不同的尺寸，通過使用代碼，來自動進行可讀性優化。

　　簡單的方法和復雜的方法

　　有兩種最基本的優化方式。一種依靠假定，另外一種更精確。一種簡單，一種復雜。

　　簡單的方法是使用Media Queries根據屏幕寬度來調整圖標，這種方法奏效的原因是因為，內容的大小通常由屏幕的大小決定——也就意味著，桌面版的圖標應該比手機版的圖標大。(或許是這樣吧?)

　　但是這種方法太被動了，不是嗎?應該化被動為主動，正確的做法是，讓圖標元素具備響應式功能——圖標會依據圖標本身的大小來進行選擇(3選1)，更具伸縮性，更靈活，適應面也更廣。雖然有點復雜。

　　具體細節

　　注意：

　　下面提出的僅僅是概念，這些代碼還沒有完成，測試版也沒有發布。我們正處於研發階段，我們需要Kickstarter的眾籌。

　　但並不妨礙我為大家上述這種響應式圖標設計的思想。

　　簡單的media-queries(圖標的外觀根據屏幕尺寸來變)

　　這是最簡單的方法。圖標設計的核心是SVG，但其實，我們可以把圖標設置成一種字體，這樣就能起到很好的響應式效果。將圖標的大小看成字重。然後作為字體的圖標會根據屏幕的大小來改變字重。可以看看下面這個Demo，圖標根據屏幕寬度響應式改變。

　　Web字體和element-query(圖標的外觀根據圖標尺寸來變)

　　正如前面提到過的那樣，根據屏幕大小來改變圖標顯示種類，這終歸不是一個好辦法。圖標的顯示種類還是要根據自身的尺寸來變。下面這個Demo使用了Element Queries以及Web字體，打造了一種圖標動態調節的效果。

　　SVG 斷點

　　SVG斷點法，依賴media queries，以及SVG文件，會根據圖像尺寸，進行一系列的觸發，較上者效果更好，可以看看下面的demo

　　結論

　　更靈活、可讀性更高的響應式圖標設計需要某種方法，我們正在努力的思考圖標尺寸、圖標外觀、屏幕尺寸的關系，爭取早日找到一種簡單、高效的解決方法。