學(xué)點(diǎn)新技能！玩轉(zhuǎn)響應(yīng)式圖標(biāo)設(shè)計(jì)

什么是響應(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)容？時至今日，我們用來閱讀內(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)美感，同時又具備可讀性？

我認(rèn)為，需要根據(jù)尺寸范圍進(jìn)行圖標(biāo)響應(yīng)式的優(yōu)化

這個理念不是新的。對于柵格化圖標(biāo)來說，這種設(shè)計(jì)方法很常見。

在網(wǎng)頁設(shè)計(jì)中，很多設(shè)計(jì)師錯誤的認(rèn)為，只要簡單的縮放圖標(biāo)即可達(dá)到完美的可讀性。但實(shí)際上并非如此。
每款圖標(biāo)需要三種不同的尺寸，通過使用代碼，來自動進(jìn)行可讀性優(yōu)化。

關(guān)于圖標(biāo)，優(yōu)設(shè)哥強(qiáng)烈推薦這12個全球最熱門的ICON資源下載網(wǎng)站。詳細(xì)請戳【圖標(biāo) ICON 下載】欄目→ http://hao.uisdc.com/goods/

簡單的方法和復(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ù)屏幕的大小來改變字重。可以看看下面這個Demo，圖標(biāo)根據(jù)屏幕寬度響應(yīng)式改變。

demo

Web字體和element-query（圖標(biāo)的外觀根據(jù)圖標(biāo)尺寸來變）

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

demo

SVG 斷點(diǎn)

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

demo

結(jié)論

更靈活、可讀性更高的響應(yīng)式圖標(biāo)設(shè)計(jì)需要某種方法，我們正在努力的思考圖標(biāo)尺寸、圖標(biāo)外觀、屏幕尺寸的關(guān)系，爭取早日找到一種簡單、高效的解決方法。

可以在這里Iconic 支持我們

原文地址：http://webdesign.tutsplus.com/articles/general/all-about-responsive-iconography/
優(yōu)設(shè)網(wǎng)翻譯:@MartinRGB
轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量56萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：