什么是響應(yīng)式圖標(biāo)設(shè)計(jì)?
響應(yīng)式設(shè)計(jì)主要講的是布局，那么什么是響應(yīng)式圖標(biāo)?響應(yīng)式圖標(biāo)設(shè)計(jì)是一種根據(jù)屏幕尺寸來改變圖標(biāo)類型、從而達(dá)到更好可讀性的設(shè)計(jì)。
圖標(biāo)為什么要響應(yīng)式?
怎樣閱讀內(nèi)容?時(shí)至今日，我們用來閱讀內(nèi)容的平臺越來越多。設(shè)備、屏幕分辨率、瀏覽器、平臺——我可以拿著5S+Safari+iOS7.0瀏覽網(wǎng)頁，也可以拿著1020+Chorome+WP8瀏覽網(wǎng)頁。
各種選擇，各種搭配實(shí)在是太多了，這些都或多或少的影響了內(nèi)容的可讀性。而圖標(biāo)作為一種視覺語言，可讀性非常重要。
圖標(biāo)設(shè)計(jì)，首先要滿足易于理解。其次，圖標(biāo)的可讀性必須高。在小尺寸的情況下，圖標(biāo)設(shè)計(jì)為了追求更高的辨識度/可讀性，可以選擇犧牲一點(diǎn)美感。
那么能不能美感、可讀性兼得呢?圖標(biāo)設(shè)計(jì)的藝術(shù)便在于二者的平衡，取與舍。怎樣設(shè)計(jì)，讓不同尺寸的圖標(biāo)均能展現(xiàn)美感，同時(shí)又具備可讀性?
我認(rèn)為，需要根據(jù)尺寸范圍進(jìn)行圖標(biāo)響應(yīng)式的優(yōu)化
這個(gè)理念不是新的。對于柵格化圖標(biāo)來說，這種設(shè)計(jì)方法很常見。
在網(wǎng)頁設(shè)計(jì)中，很多設(shè)計(jì)師錯(cuò)誤的認(rèn)為，只要簡單的縮放圖標(biāo)即可達(dá)到完美的可讀性。但實(shí)際上并非如此。
每款圖標(biāo)需要三種不同的尺寸，通過使用代碼，來自動進(jìn)行可讀性優(yōu)化。
簡單的方法和復(fù)雜的方法
有兩種最基本的優(yōu)化方式。一種依靠假定，另外一種更精確。一種簡單，一種復(fù)雜。
簡單的方法是使用Media Queries根據(jù)屏幕寬度來調(diào)整圖標(biāo)，這種方法奏效的原因是因?yàn)?，?nèi)容的大小通常由屏幕的大小決定——也就意味著，桌面版的圖標(biāo)應(yīng)該比手機(jī)版的圖標(biāo)大。(或許是這樣吧?)
但是這種方法太被動了，不是嗎?應(yīng)該化被動為主動，正確的做法是，讓圖標(biāo)元素具備響應(yīng)式功能——圖標(biāo)會依據(jù)圖標(biāo)本身的大小來進(jìn)行選擇(3選1)，更具伸縮性，更靈活，適應(yīng)面也更廣。雖然有點(diǎn)復(fù)雜。
具體細(xì)節(jié)
注意：
下面提出的僅僅是概念，這些代碼還沒有完成，測試版也沒有發(fā)布。我們正處于研發(fā)階段，我們需要Kickstarter的眾籌。
但并不妨礙我為大家上述這種響應(yīng)式圖標(biāo)設(shè)計(jì)的思想。
簡單的media-queries(圖標(biāo)的外觀根據(jù)屏幕尺寸來變)
這是最簡單的方法。圖標(biāo)設(shè)計(jì)的核心是SVG，但其實(shí)，我們可以把圖標(biāo)設(shè)置成一種字體，這樣就能起到很好的響應(yīng)式效果。將圖標(biāo)的大小看成字重。然后作為字體的圖標(biāo)會根據(jù)屏幕的大小來改變字重?？梢钥纯聪旅孢@個(gè)Demo，圖標(biāo)根據(jù)屏幕寬度響應(yīng)式改變。
Web字體和element-query(圖標(biāo)的外觀根據(jù)圖標(biāo)尺寸來變)
正如前面提到過的那樣，根據(jù)屏幕大小來改變圖標(biāo)顯示種類，這終歸不是一個(gè)好辦法。圖標(biāo)的顯示種類還是要根據(jù)自身的尺寸來變。下面這個(gè)Demo使用了Element Queries以及Web字體，打造了一種圖標(biāo)動態(tài)調(diào)節(jié)的效果。
SVG 斷點(diǎn)
SVG斷點(diǎn)法，依賴media queries，以及SVG文件，會根據(jù)圖像尺寸，進(jìn)行一系列的觸發(fā)，較上者效果更好，可以看看下面的demo
結(jié)論
更靈活、可讀性更高的響應(yīng)式圖標(biāo)設(shè)計(jì)需要某種方法，我們正在努力的思考圖標(biāo)尺寸、圖標(biāo)外觀、屏幕尺寸的關(guān)系，爭取早日找到一種簡單、高效的解決方法。