這個(gè)理念不是新的。對(duì)于柵格化圖標(biāo)來(lái)說(shuō)，這種設(shè)計(jì)方法很常見(jiàn)。 在網(wǎng)頁(yè)設(shè)計(jì)中，很多設(shè)計(jì)師錯(cuò)誤的認(rèn)為，只要簡(jiǎn)單的縮放圖標(biāo)即可達(dá)到完美的可讀性。但實(shí)際上并非如此。每款圖標(biāo)需要三種不同的尺寸，通過(guò)使用代碼，來(lái)自動(dòng)進(jìn)行可讀性?xún)?yōu)化。
簡(jiǎn)單的方法和復(fù)雜的方法有兩種最基本的優(yōu)化方式。一種依靠假定，另外一種更精確。一種簡(jiǎn)單，一種復(fù)雜。 簡(jiǎn)單的方法是使用Media Queries根據(jù)屏幕寬度來(lái)調(diào)整圖標(biāo)，這種方法奏效的原因是因?yàn)?，?nèi)容的大小通常由屏幕的大小決定——也就意味著，桌面版的圖標(biāo)應(yīng)該比手機(jī)版的圖標(biāo)大。（或許是這樣吧？）
但是這種方法太被動(dòng)了，不是嗎？應(yīng)該化被動(dòng)為主動(dòng)，正確的做法是，讓圖標(biāo)元素具備響應(yīng)式功能——圖標(biāo)會(huì)依據(jù)圖標(biāo)本身的大小來(lái)進(jìn)行選擇（3選1），更具伸縮性，更靈活，適應(yīng)面也更廣。雖然有點(diǎn)復(fù)雜。 具體細(xì)節(jié) 注意： 下面提出的僅僅是概念，這些代碼還沒(méi)有完成，測(cè)試版也沒(méi)有發(fā)布。我們正處于研發(fā)階段，我們需要Kickstarter的眾籌。 但并不妨礙我為大家上述這種響應(yīng)式圖標(biāo)設(shè)計(jì)的思想。 簡(jiǎn)單的media-queries（圖標(biāo)的外觀根據(jù)屏幕尺寸來(lái)變） 這是最簡(jiǎn)單的方法。圖標(biāo)設(shè)計(jì)的核心是SVG，但其實(shí)，我們可以把圖標(biāo)設(shè)置成一種字體，這樣就能起到很好的響應(yīng)式效果。將圖標(biāo)的大小看成字重。然后作為字體的圖標(biāo)會(huì)根據(jù)屏幕的大小來(lái)改變字重?？梢钥纯聪旅孢@個(gè)Demo，圖標(biāo)根據(jù)屏幕寬度響應(yīng)式改變。
demo Web字體和element-query（圖標(biāo)的外觀根據(jù)圖標(biāo)尺寸來(lái)變） 正如前面提到過(guò)的那樣，根據(jù)屏幕大小來(lái)改變圖標(biāo)顯示種類(lèi)，這終歸不是一個(gè)好辦法。圖標(biāo)的顯示種類(lèi)還是要根據(jù)自身的尺寸來(lái)變。下面這個(gè)Demo使用了Element Queries以及Web字體，打造了一種圖標(biāo)動(dòng)態(tài)調(diào)節(jié)的效果。 demo SVG 斷點(diǎn) SVG斷點(diǎn)法，依賴(lài)media queries，以及SVG文件，會(huì)根據(jù)圖像尺寸，進(jìn)行一系列的觸發(fā)，較上者效果更好，可以看看下面的demo demo 結(jié)論 更靈活、可讀性更高的響應(yīng)式圖標(biāo)設(shè)計(jì)需要某種方法，我們正在努力的思考圖標(biāo)尺寸、圖標(biāo)外觀、屏幕尺寸的關(guān)系，爭(zhēng)取早日找到一種簡(jiǎn)單、高效的解決方法。
