網頁設計！網頁設計中的圖標的使用技巧與資源合集(2)

我最喜歡的案例就是GitHub的教學頁面。頁頭使用Github的吉祥物和粉筆黑板營造出教育的氛圍，當你向下滾動的時候，每個板塊都有單獨對應的圖標，為你說明這以塊是干啥的。

值得注意的是，每個圖標都使用的是手繪的效果，雖然色彩不同，但是整體風格高度一致，明顯是統(tǒng)一設計的一整套圖標。更重要的是，每一個圖標都明確直觀地描述了它所在區(qū)塊的內容。文字內容足以描述清楚細節(jié)，但是圖標能高度概括地闡明信息。

你可以在 Glazed & Infused 的首頁看到類似的設計效果。文字小區(qū)塊詳細地描述了他們的服務、咖啡和禮品卡的信息，而頂部的手繪圖標則從視覺上闡明了內容的性質，更重要的是，這三個圖標迅速地抓住了用戶的眼球。

矢量背景

從重復平鋪背景到矢量對象，你可以用矢量圖形做很多事情。對網站背景的處理方式，已經遠不止于平鋪紋理那么單一了。通過矢量圖形來創(chuàng)建覆蓋整個背景的場景已經很容易了。

矢量圖形可以很輕松地縮放，但是很難創(chuàng)造出逼真的效果。想制作出復雜樣式的矢量圖形并不容易，你需要通過大量的練習來熟悉在圖形上構建圖形的技巧，不過一旦學會還是蠻有趣的。在這里我們推薦一個好用的工具：Bota Iusti。

設計教程

跟蹤學習在線的設計教程是提高圖標設計技能的重要方式。想要精通設計技能沒有捷徑，唯有不斷學習，堅持練習。

雖然圖標設計是一個廣泛的領域，但是許多教程是可以舉一反三的，接下來提供的一系列教程非常實用，希望你能通過學習融入日常的設計中去。

16×16 px Icons

Weather Line Icons

Flat Social Icon

Tab Bar Icons

Bat Icon

Gem Icons

Water Pistol

Mail Alert

Notebook

Almost Flat