2013-11-4 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
響應(yīng)式設(shè)計(jì)主要講的是布局，那么什么是響應(yīng)式圖標(biāo)？響應(yīng)式圖標(biāo)設(shè)計(jì)是一種根據(jù)屏幕尺寸來(lái)改變圖標(biāo)類型、從而達(dá)到更好可讀性的設(shè)計(jì)。
怎樣閱讀內(nèi)容？時(shí)至今日，我們用來(lái)閱讀內(nèi)容的平臺(tái)越來(lái)越多。設(shè)備、屏幕分辨率、瀏覽器、平臺(tái)——我可以拿著5S+Safari+iOS7.0瀏覽網(wǎng)頁(yè)，也可以拿著1020+Chorome+WP8瀏覽網(wǎng)頁(yè)。
各種選擇，各種搭配實(shí)在是太多了，這些都或多或少的影響了內(nèi)容的可讀性。而圖標(biāo)作為一種視覺(jué)語(yǔ)言，可讀性非常重要。
圖標(biāo)設(shè)計(jì)，首先要滿足易于理解。其次，圖標(biāo)的可讀性必須高。在小尺寸的情況下，圖標(biāo)設(shè)計(jì)為了追求更高的辨識(shí)度/可讀性，可以選擇犧牲一點(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è)理念不是新的。對(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)行可讀性優(yōu)化。
有兩種最基本的優(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ù)雜。
注意：
下面提出的僅僅是概念，這些代碼還沒(méi)有完成，測(cè)試版也沒(méi)有發(fā)布。我們正處于研發(fā)階段，我們需要Kickstarter的眾籌。
但并不妨礙我為大家上述這種響應(yīng)式圖標(biāo)設(shè)計(jì)的思想。
這是最簡(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)式改變。
正如前面提到過(guò)的那樣，根據(jù)屏幕大小來(lái)改變圖標(biāo)顯示種類，這終歸不是一個(gè)好辦法。圖標(biāo)的顯示種類還是要根據(jù)自身的尺寸來(lái)變。下面這個(gè)Demo使用了Element Queries以及Web字體，打造了一種圖標(biāo)動(dòng)態(tài)調(diào)節(jié)的效果。
SVG斷點(diǎn)法，依賴media queries，以及SVG文件，會(huì)根據(jù)圖像尺寸，進(jìn)行一系列的觸發(fā)，較上者效果更好，可以看看下面的demo
更靈活、可讀性更高的響應(yīng)式圖標(biāo)設(shè)計(jì)需要某種方法，我們正在努力的思考圖標(biāo)尺寸、圖標(biāo)外觀、屏幕尺寸的關(guān)系，爭(zhēng)取早日找到一種簡(jiǎn)單、的解決方法。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net