未來大趨勢——響應(yīng)式圖標(biāo)

2022-06-02    分類: 網(wǎng)站建設(shè)

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

他是什么?

響應(yīng)式圖標(biāo)并不是說圖標(biāo)大小會隨屏幕尺寸的變動而改變,而是意味著圖標(biāo)會根據(jù)自己所處何種設(shè)備來改變自身大小。這就意味著屏幕尺寸對圖標(biāo)來說不是那么重要了,因為它能自動調(diào)節(jié),它可以變大變小——同一時間,同一屏幕。圖標(biāo)的設(shè)計上的差別不會太明顯,一般都是細節(jié)問題。詳細請看下圖:


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

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

Iconic?
如果你沒有聽說過iconic,那它可能就是一個產(chǎn)品,但是我覺得你肯定看到過,因為iconic制作了一系列非常流行的圖標(biāo),幾乎人盡皆知。這個團隊致力于開發(fā)響應(yīng)式圖標(biāo),可以說他們是響應(yīng)式圖標(biāo)背后的男人。

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

Media queries

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


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

1
2
3
footer[min-width~=”250px”]{
    background#fff;
}

元素查詢是一個新興概念,不是所有的瀏覽器都支持,不過若你使用javascript,它就可以正常工作,詳細了解請點擊: here

SVG窗口

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

總結(jié)

師父領(lǐng)進門,修行在個人,今天創(chuàng)新互聯(lián)帶你感受了一下響應(yīng)式圖標(biāo),對此,你心里的想法是…?請在下方的評論里告訴我們吧~

網(wǎng)站題目:未來大趨勢——響應(yīng)式圖標(biāo)
網(wǎng)址分享:http://muchs.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)站營銷

廣告

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

手機網(wǎng)站建設(shè)