2013-11-4 藍藍設計的小編
轉載藍藍設計( m.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
響應式設計主要講的是布局，那么什么是響應式圖標？響應式圖標設計是一種根據屏幕尺寸來改變圖標類型、從而達到更好可讀性的設計。
怎樣閱讀內容？時至今日，我們用來閱讀內容的平臺越來越多。設備、屏幕分辨率、瀏覽器、平臺——我可以拿著5S+Safari+iOS7.0瀏覽網頁，也可以拿著1020+Chorome+WP8瀏覽網頁。
各種選擇，各種搭配實在是太多了，這些都或多或少的影響了內容的可讀性。而圖標作為一種視覺語言，可讀性非常重要。
圖標設計，首先要滿足易于理解。其次，圖標的可讀性必須高。在小尺寸的情況下，圖標設計為了追求更高的辨識度/可讀性，可以選擇犧牲一點美感。
那么能不能美感、可讀性兼得呢？圖標設計的藝術便在于二者的平衡，取與舍。怎樣設計，讓不同尺寸的圖標均能展現美感，同時又具備可讀性？
我認為，需要根據尺寸范圍進行圖標響應式的優化
這個理念不是新的。對于柵格化圖標來說，這種設計方法很常見。
在網頁設計中，很多設計師錯誤的認為，只要簡單的縮放圖標即可達到完美的可讀性。但實際上并非如此。
每款圖標需要三種不同的尺寸，通過使用代碼，來自動進行可讀性優化。
有兩種最基本的優化方式。一種依靠假定，另外一種更。一種簡單，一種復雜。
簡單的方法是使用Media Queries根據屏幕寬度來調整圖標，這種方法奏效的原因是因為，內容的大小通常由屏幕的大小決定——也就意味著，桌面版的圖標應該比手機版的圖標大。（或許是這樣吧？）
但是這種方法太被動了，不是嗎？應該化被動為主動，正確的做法是，讓圖標元素具備響應式功能——圖標會依據圖標本身的大小來進行選擇（3選1），更具伸縮性，更靈活，適應面也更廣。雖然有點復雜。
注意：
下面提出的僅僅是概念，這些代碼還沒有完成，測試版也沒有發布。我們正處于研發階段，我們需要Kickstarter的眾籌。
但并不妨礙我為大家上述這種響應式圖標設計的思想。
這是最簡單的方法。圖標設計的核心是SVG，但其實，我們可以把圖標設置成一種字體，這樣就能起到很好的響應式效果。將圖標的大小看成字重。然后作為字體的圖標會根據屏幕的大小來改變字重。可以看看下面這個Demo，圖標根據屏幕寬度響應式改變。
正如前面提到過的那樣，根據屏幕大小來改變圖標顯示種類，這終歸不是一個好辦法。圖標的顯示種類還是要根據自身的尺寸來變。下面這個Demo使用了Element Queries以及Web字體，打造了一種圖標動態調節的效果。
SVG斷點法，依賴media queries，以及SVG文件，會根據圖像尺寸，進行一系列的觸發，較上者效果更好，可以看看下面的demo
更靈活、可讀性更高的響應式圖標設計需要某種方法，我們正在努力的思考圖標尺寸、圖標外觀、屏幕尺寸的關系，爭取早日找到一種簡單、的解決方法。