每款圖標需要三種不同的尺寸,通過使用代碼,來自動進行可讀性優(yōu)化。
簡單的方法和復雜的方法有兩種最基本的優(yōu)化方式。一種依靠假定,另外一種更精確。一種簡單,一種復雜。 簡單的方法是使用Media Queries根據(jù)屏幕寬度來調(diào)整圖標,這種方法奏效的原因是因為,內(nèi)容的大小通常由屏幕的大小決定——也就意味著,桌面版的圖標應該比手機版的圖標大。(或許是這樣吧?) 但是這種方法太被動了,不是嗎?應該化被動為主動,正確的做法是,讓圖標元素具備響應式功能——圖標會依據(jù)圖標本身的大小來進行選擇(3選1),更具伸縮性,更靈活,適應面也更廣。雖然有點復雜。
具體細節(jié) 注意: 下面提出的僅僅是概念,這些代碼還沒有完成,測試版也沒有發(fā)布。我們正處于研發(fā)階段,我們需要Kickstarter的眾籌。 但并不妨礙我為大家上述這種響應式圖標設(shè)計的思想。 簡單的media-queries(圖標的外觀根據(jù)屏幕尺寸來變) 這是最簡單的方法。圖標設(shè)計的核心是SVG,但其實,我們可以把圖標設(shè)置成一種字體,這樣就能起到很好的響應式效果。將圖標的大小看成字重。然后作為字體的圖標會根據(jù)屏幕的大小來改變字重。可以看看下面這個Demo,圖標根據(jù)屏幕寬度響應式改變。 demo Web字體和element-query(圖標的外觀根據(jù)圖標尺寸來變) 正如前面提到過的那樣,根據(jù)屏幕大小來改變圖標顯示種類,這終歸不是一個好辦法。圖標的顯示種類還是要根據(jù)自身的尺寸來變。下面這個Demo使用了Element Queries以及Web字體,打造了一種圖標動態(tài)調(diào)節(jié)的效果。
demo SVG 斷點 SVG斷點法,依賴media queries,以及SVG文件,會根據(jù)圖像尺寸,進行一系列的觸發(fā),較上者效果更好,可以看看下面的demo
demo 結(jié)論 更靈活、可讀性更高的響應式圖標設(shè)計需要某種方法,我們正在努力的思考圖標尺寸、圖標外觀、屏幕尺寸的關(guān)系,爭取早日找到一種簡單、高效的解決方法。