九九色综合_性69交片免费看_亚洲一区二区三区久久精品_精品一久久_欧美一级黄视频_污免费网站

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

2013-11-4 藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.gyxygd.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點(diǎn)這里

什么是響應(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)化

sizes

這個理念不是新的。對于柵格化圖標(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)大。（或許是這樣吧？）

responsive

但是這種方法太被動了，不是嗎？應(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)式改變。