說(shuō)實(shí)話(huà)，第一次聽(tīng)到“響應(yīng)式圖標(biāo)”我也覺(jué)得怪怪的，正如不久之前，人們?yōu)榱俗寛D標(biāo)字體更適合不同設(shè)備，而更改它們的大小一樣，但是這一想法卻讓響應(yīng)式設(shè)計(jì)以及圖標(biāo)設(shè)計(jì)有了長(zhǎng)足的進(jìn)步。那么今天，我們就來(lái)八一八，這到底什么個(gè)什么玩意兒。

他是什么？

響應(yīng)式圖標(biāo)并不是說(shuō)圖標(biāo)大小會(huì)隨屏幕尺寸的變動(dòng)而改變，而是意味著圖標(biāo)會(huì)根據(jù)自己所處何種設(shè)備來(lái)改變自身大小。這就意味著屏幕尺寸對(duì)圖標(biāo)來(lái)說(shuō)不是那么重要了，因?yàn)樗茏詣?dòng)調(diào)節(jié)，它可以變大變小——同一時(shí)間，同一屏幕。圖標(biāo)的設(shè)計(jì)上的差別不會(huì)太明顯，一般都是細(xì)節(jié)問(wèn)題。詳細(xì)請(qǐng)看下圖：

響應(yīng)式圖標(biāo)很重要嗎？
隨著字體圖標(biāo)、響應(yīng)式網(wǎng)頁(yè)以及微型設(shè)計(jì)的流行，我們的風(fēng)格也隨著改變，設(shè)計(jì)里的扁平化圖標(biāo)越來(lái)越多。我覺(jué)得這個(gè)東西有人接受那肯定就有人不愿意接受，不愿改變的不一定就是做的不好的，但是我相信走在改革前沿的肯定比沒(méi)有動(dòng)作的人一大截。

響應(yīng)式圖標(biāo)推動(dòng)了圖標(biāo)設(shè)計(jì)的發(fā)展，讓用戶(hù)得到了更好的體驗(yàn)，操作性更好，視覺(jué)效果更佳。為了讓網(wǎng)頁(yè)更加優(yōu)秀，我們提出了響應(yīng)式圖標(biāo)，這也是每個(gè)設(shè)計(jì)師以及用戶(hù)心里所想、所愿。

Iconic？
如果你沒(méi)有聽(tīng)說(shuō)過(guò)iconic，那它可能就是一個(gè)產(chǎn)品，但是我覺(jué)得你肯定看到過(guò)，因?yàn)閕conic制作了一系列非常流行的圖標(biāo)，幾乎人盡皆知。這個(gè)團(tuán)隊(duì)致力于開(kāi)發(fā)響應(yīng)式圖標(biāo)，可以說(shuō)他們是響應(yīng)式圖標(biāo)背后的男人。

Iconic近期干過(guò)大的一票是成功發(fā)起并完成 Kickstarted運(yùn)動(dòng)，這讓他們獲得92624美元的利潤(rùn)，是的你沒(méi)看錯(cuò)，我也沒(méi)有忘記小數(shù)點(diǎn)，這超出他們預(yù)期的15000美元的618%。有了這些錢(qián)，他們就可以進(jìn)行深入研究，讓響應(yīng)式圖標(biāo)變得更好。所以說(shuō)，有些事情你做了才知道對(duì)不對(duì)、行不行，就像你不知道他們最初的目的僅僅是對(duì)網(wǎng)頁(yè)圖標(biāo)進(jìn)行改革。
如果我想做響應(yīng)式圖標(biāo)，怎么做？
如果你準(zhǔn)備開(kāi)發(fā)響應(yīng)式圖標(biāo)，這里有幾種方法供你選擇，這些方法是iconic已經(jīng)摸索到的、可能的方法，供你參考。

Media queries

這是迄今為止最簡(jiǎn)單的方式，其允許我們?cè)诓桓淖儍?nèi)容的情況下，改變頁(yè)面的布局以適應(yīng)不同的設(shè)備，以此加強(qiáng)體驗(yàn)。但是這種方法也有弊端，它無(wú)法將細(xì)節(jié)處理好。從表面上看，media queries仍舊是響應(yīng)式圖標(biāo)設(shè)計(jì)的核心方法，試試就知道。

polyfills
很多人都不知道它是什么，所以我跟大家解釋一下：你可以把它想象成media queries，只不過(guò)是由元素組成。比如說(shuō)下面的例子，它的意思是當(dāng)頁(yè)腳大于等于250px時(shí)，背景變?yōu)榘咨?。這種方法比media queries要直接精確一些。

元素查詢(xún)是一個(gè)新興概念，不是所有的瀏覽器都支持，不過(guò)若你使用javascript，它就可以正常工作，詳細(xì)了解請(qǐng)點(diǎn)擊： here

SVG窗口

SVG窗口這個(gè)方法有點(diǎn)兒意思嗬，完完全全意料之外。SVG允許動(dòng)態(tài)控制元素以及圖標(biāo)，這也給圖標(biāo)設(shè)計(jì)帶來(lái)了新的方向。試想一下，如果將SVG與media queries相結(jié)合，那么圖標(biāo)就可以自己感受屏幕的大小隨之改變了~但是這點(diǎn)實(shí)現(xiàn)起來(lái)有一定的難度…就像SVG窗口很難和DOM相結(jié)合一樣。

總結(jié)

師父領(lǐng)進(jìn)門(mén)，修行在個(gè)人，今天創(chuàng)新互聯(lián)帶你感受了一下響應(yīng)式圖標(biāo)，對(duì)此，你心里的想法是…？請(qǐng)?jiān)谙路降脑u(píng)論里告訴我們吧~

網(wǎng)站題目：未來(lái)大趨勢(shì)——響應(yīng)式圖標(biāo)
網(wǎng)址分享：http://www.rwnh.cn/news49/162599.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、靜態(tài)網(wǎng)站、外貿(mào)建站、云服務(wù)器、響應(yīng)式網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)