學(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.sillybuy.com  )是一家專注而深入的界面設(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)容?時(shí)至今日,我們用來閱讀內(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)美感,同時(shí)又具備可讀性?

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

sizes

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

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

關(guān)于圖標(biāo),優(yōu)設(shè)哥強(qiáng)烈推薦這12個(gè)全球最熱門的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ù)屏幕的大小來改變字重。可以看看下面這個(gè)Demo,圖標(biāo)根據(jù)屏幕寬度響應(yīng)式改變。

icon-demo-1

demo

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

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

demo

demo

SVG 斷點(diǎn)

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

demo

demo

結(jié)論

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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔