• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析如何玩轉響應式圖標設計




    詳細解析如何玩轉響應式圖標設計

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    響應式設計主要講的是布局,那麼什麼是響應式圖標?響應式圖標設計是一種根據屏幕尺寸來改變圖標類型、從而達到更好可讀性的設計。


    設計理論教學開始

    什麼是響應式圖標設計?

    響應式設計主要講的是布局,那麼什麼是響應式圖標?響應式圖標設計是一種根據屏幕尺寸來改變圖標類型、從而達到更好可讀性的設計。

    圖標為什麼要響應式?

    怎樣閱讀內容?時至今日,我們用來閱讀內容的平台越來越多。設備、屏幕分辨率、瀏覽器、平台——我可以拿着5S+Safari+iOS7.0瀏覽網頁,也可以拿着1020+Chorome+WP8瀏覽網頁。

    各種選擇,各種搭配實在是太多了,這些都或多或少的影響了內容的可讀性。而圖標作為一種視覺語言,可讀性非常重要。

    圖標設計,首先要滿足易於理解。其次,圖標的可讀性必須高。在小尺寸的情況下,圖標設計為了追求更高的辨識度/可讀性,可以選擇犧牲一點美感。

    那麼能不能美感、可讀性兼得呢?圖標設計的藝術便在於二者的平衡,取與舍。怎樣設計,讓不同尺寸的圖標均能展現美感,同時又具備可讀性?

    我認為,需要根據尺寸範圍進行圖標響應式的優化

    詳細解析如何玩轉響應式圖標設計

    這個理念不是新的。對於柵格化圖標來說,這種設計方法很常見。

    在網頁設計中,很多設計師錯誤的認為,只要簡單的縮放圖標即可達到完美的可讀性。但實際上並非如此。

    每款圖標需要三種不同的尺寸,通過使用代碼,來自動進行可讀性優化。

    關於圖標,優設哥強烈推薦這12個全球最熱門的ICON資源下載網站。詳細請戳【圖標 ICON 下載】欄目→ http://hao.uisdc.com/goods/

    簡單的方法和複雜的方法

    有兩種最基本的優化方式。一種依靠假定,另外一種更精確。一種簡單,一種複雜。

    簡單的方法是使用Media Queries根據屏幕寬度來調整圖標,這種方法奏效的原因是因為,內容的大小通常由屏幕的大小決定——也就意味着,桌面版的圖標應該比手機版的圖標大。(或許是這樣吧?)

    詳細解析如何玩轉響應式圖標設計

    但是這種方法太被動了,不是嗎?應該化被動為主動,正確的做法是,讓圖標元素具備響應式功能——圖標會依據圖標本身的大小來進行選擇(3選1),更具伸縮性,更靈活,適應面也更廣。雖然有點複雜。

    具體細節

    注意:

    下面提出的僅僅是概念,這些代碼還沒有完成,測試版也沒有發布。我們正處於研發階段,我們需要Kickstarter的眾籌。

    但並不妨礙我為大家上述這種響應式圖標設計的思想。

    簡單的media-queries(圖標的外觀根據屏幕尺寸來變)

    這是最簡單的方法。圖標設計的核心是SVG,但其實,我們可以把圖標設置成一種字體,這樣就能起到很好的響應式效果。將圖標的大小看成字重。然後作為字體的圖標會根據屏幕的大小來改變字重。可以看看下面這個Demo,圖標根據屏幕寬度響應式改變。

    詳細解析如何玩轉響應式圖標設計

    demo

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

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

    詳細解析如何玩轉響應式圖標設計

    demo

    SVG 斷點

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

    詳細解析如何玩轉響應式圖標設計

    demo

    結論

    更靈活、可讀性更高的響應式圖標設計需要某種方法,我們正在努力的思考圖標尺寸、圖標外觀、屏幕尺寸的關係,爭取早日找到一種簡單、高效的解決方法。

    — —

    文章永久連結為: 詳細解析如何玩轉響應式圖標設計