提到圖標設計，似乎每個設計師都有話說，但是要做好圖標設計真的那么容易么?今天這篇文章針對網頁設計領域的圖標設計進行了相對全面的梳理，從設計技巧到設計資源一應俱全，但愿能幫上你! 圖標是每一個現代UI中不可或缺的組成部分，它們不僅能協助UI布局組織內容，而且輕量級的圖標融入界面也不會喧賓奪主
不僅手機和平板的APP UI中會大量用到各種圖標，而且iPod和智能手表的界面中也是如此，這正是因為圖標具備快速直觀傳達信息的能力
在網頁設計剛剛興起的時代，小圖標就已經被早期的網頁設計師和開發者投入使用了
這些圖案和標識通常是常見的、易于接受的、功能型的圖形(文件夾、打印機、鼠標、箭頭等)，在隨后的20多年間，這些圖標逐漸發展成約定俗成的一套圖形語言
在接下來的設計指南中，我想分享一些網頁設計中圖標使用的技巧，以及一些實用的免費圖標素材合集，希望你能喜歡! 圖標設計樣式 我們通常所說的“圖標設計”其實覆蓋了相當大的一個范圍
小到網頁中那些純色扁平小標識，大到PS和AI精雕細琢的擬物風APP圖標，都在圖標設計的范疇內
每個圖標設計項目都有著不同的設計需求和圖標風格，這些不同造就了圖標設計的差異化
目前所流行的極簡風和扁平化設計，已經在全世界設計師中擁有了無數的擁簇
而之前一直不溫不火的線性圖標也已經成為了目前iOS系統的首選圖標，其他的移動操作系統也正在逐步跟進
從風格上來說，圖標并無對錯之分，只能說是各自選擇和偏向不一樣罷了
在我看來，扁平化設計和擬物化設計之間的競爭對比，對于網頁設計而言是一件無比美妙的事情
這也對圖標設計產生了影響，許多藝術領域的概念被引入到圖標設計中來，比如光影變化，深度，等等
作為設計師的你如果更傾向于扁平化設計，那么你需要學習創建紋理，控制陰影，讓你的設計看起來富有真實感
為此你需要進行大量的練習，但是這絕對是值得的
企業品牌設計 雖然品牌設計看起來是顯而易見的事情，但是它依然值得一提，因為那些優秀的網站通常有著優秀得令人難以置信的品牌設計
一個優秀的圖標能向用戶傳達出品牌的理念和情感
當你為一個企業或者網站進行品牌設計的時候，品牌的圖標、吉祥物或者符號應該讓品牌和它的用戶之間形成獨特的情感聯系
當然，你也可以為品牌設計一系列不同的圖標，每個圖標包含不同的效果，傳達不同的理念
圖標設計的可能性是如此之多，你甚至可以設計出以個圖標大合集，讓所有不同的圖標擁有相同的風格
由于每個圖標都是獨特的存在，但是風格又如此一致，當它們運用到網頁中的時候，可以讓整個網頁擁有獨特的氣質，足以從諸多設計中脫穎而出
MailBakery 就是這樣一個典型的案例，它使用了個大圖來宣傳它們的服務
當光標移動到下方每一個圖標上的時候，上方的大圖內容會被替換成相應的圖片內容，這樣的圖標+圖片的組合在設計上保持著高度的一致性
這些圖標所對應的圖片可以說是專門為網站定制的，但是這些圖標卻是某個免費圖標集的一部分
你可以在幾十個不同的網站上看到這些相同的圖標，也就是說，這些圖標作為潛在品牌設計的獨特性，已經被忽略掉了，他們其實可以做的更好
也正是因此，我常常建議有報復的圖標設計師去學習為界面單獨定制成套的圖標集
對培養品牌、客戶以及項目而言，這都是更為長遠更有價值的事情
導航鏈接 在過去，網頁上的圖標常常用作內容導航，也就是說，圖標的內容和含義，同圖標所指向的頁面內容/性質高度相關或者一致
今天，Facebook上的導航也遵循著同樣的原則
雖然你不會一直遵循這樣的設計方式，但是有必要且值得了解它
下拉菜單鏈接通常非常實用，因為用戶會主動去了解每一個菜單的名稱
但是如果在橫向或者縱向上有十幾個導航鏈接的話，通過圖標來識別是比較可靠的方案
視覺內容識別 在網頁設計中使用業內圖標最主要的原因是用來區分內容
圖標可以從視覺上更清晰地傳達信息，能夠平衡包含大量文本的布局，所以，如何通過一個簡單的圖標來準確傳達信息是設計師的必修課
我最喜歡的案例就是GitHub的教學頁面
頁頭使用Github的吉祥物和粉筆黑板營造出教育的氛圍，當你向下滾動的時候，每個板塊都有單獨對應的圖標，為你說明這以塊是干啥的
值得注意的是，每個圖標都使用的是手繪的效果，雖然色彩不同，但是整體風格高度一致，明顯是統一設計的一整套圖標
更重要的是，每一個圖標都明確直觀地描述了它所在區塊的內容
文字內容足以描述清楚細節，但是圖標能高度概括地闡明信息
你可以在 Glazed & Infused 的首頁看到類似的設計效果
文字小區塊詳細地描述了他們的服務、咖啡和禮品卡的信息，而頂部的手繪圖標則從視覺上闡明了內容的性質，更重要的是，這三個圖標迅速地抓住了用戶的眼球
矢量背景 從重復平鋪背景到矢量對象，你可以用矢量圖形做很多事情
對網站背景的處理方式，已經遠不止于平鋪紋理那么單一了
通過矢量圖形來創建覆蓋整個背景的場景已經很容易了
矢量圖形可以很輕松地縮放，但是很難創造出逼真的效果
想制作出復雜樣式的矢量圖形并不容易，你需要通過大量的練習來熟悉在圖形上構建圖形的技巧，不過一旦學會還是蠻有趣的
在這里我們推薦一個好用的工具：Bota Iusti
設計教程 跟蹤學習在線的設計教程是提高圖標設計技能的重要方式
想要精通設計技能沒有捷徑，唯有不斷學習，堅持練習
雖然圖標設計是一個廣泛的領域，但是許多教程是可以舉一反三的，接下來提供的一系列教程非常實用，希望你能通過學習融入日常的設計中去
16×16 px I買粉絲ns Weather Line I買粉絲ns Flat Social I買粉絲n Tab Bar I買粉絲ns Bat I買粉絲n Gem I買粉絲ns Water Pistol Mail Alert Notebook Almost Flat 免費圖標 40 Flat I買粉絲ns Mini I買粉絲ns Colorful I買粉絲nset Simple Flat Sport & Fitness Chat & Email Atitel I買粉絲ns Tab Bar I買粉絲ns Simple Lines Flatified Web Design I買粉絲nset iOS Settings I買粉絲n Colorful Switch Synthesizer Book App I買粉絲n
UI 設計師
UI，指的是用戶界面，也就是人與機器互動的界面。同時又有GUI和WUI之分，不過一般的話統稱是UI設計師。
在PC端從事網頁設計，我們稱呼WUI設計師或者網頁設計師。
在移動端，從事移動設計的稱呼為GUI設計師。
而UI可以理解為UX的一個分支，不同于UX 設計師需要關注產品的整體感覺，UI 設計師更關注產品以怎樣的界面呈現。
其實互聯網領域中，UI 和 UX 設計師的界限相當模糊，在很多創業公司，這兩個設計角色是合二為一的。這個就是為什么很多中小型的公司為什么要求UI設計會交互，或者交互又要懂UI的原因。
國內而言，目前一般把屏幕上顯示的圖形用戶界面（GUI ：Graphic User Interface）都簡單稱為UI。
我們經常聽到的UI設計師，其實指的是GUI設計師，也就是圖形界面視覺設計師，負責產品或網站的圖形、圖標、色彩、視覺風格等，決定營造出什么樣的視覺體驗。
從視覺層面把控產品界面設計，確保UI稿在視覺上清晰的傳達UX設計師的交互設計稿，也就是高保真視覺稿。
舉個栗子，在設計一個數據分析界面時， UI 設計師可以決定使用滑塊還是控制旋鈕，通過這樣的控件來闡述圖表帶來的直觀感受。
此外 UI 設計師還負責制定視覺設計規范，確保產品設計的一致性；在規范中，明確一些UI 控件/組件的使用行為，比如確認誤或取消提示。
熟悉不同分辨率的多端產品，諸如桌面端，Web 端和手機設備；能夠完成高質量的視覺設計稿--從概念設計確定設計風格到詳細設計。
設計內容包括圖標、圖形界面等；執行統一的設計語言，撰寫并完善網站的設計規范，為產品注入美和生活氣息。” 這可能就是UI設計師日常事項啦。
設計產出物 ：視覺設計稿，視覺設計標注規范 ，視覺設計規范文檔，視覺切圖
用的比較多的工具：Photoshop，Sketch，Illustrator，Fireworks，markman（視覺標注軟件），cutterman。
2. UE 設計師
UX ，英文為 User Experience ,指的是用戶體驗。一般而言，國內 UX 設計師，也稱為交互設計師或 UE 設計師（而國外的 UX 設計師指的是用戶體驗設計師，交互設計師指的是動效設計師）。
UX 設計師主要關注用戶對產品的體驗感受，確保產品邏輯的流程可以跑得通，甚至跑得順、跑得精彩。
正如一千個人眼里有一千個哈姆雷特，一個設計問題往往也沒有唯一解。UX 設計師會深入場景，探索多種不同的解決方案，這種深入思考通常能產生創新方案。
UX 設計師們通過頭腦風暴、角色扮演、故事版等設計方法探索設計機會點，向著創造出“最好的”用戶體驗目標而前進，典型案例就是為新用戶設計一套令人愉悅的登錄流程。
總的來講，UX設計師是設計人與信息產品的流程和關系，歸根結底都要研究人、事、物的聯系，它是一個囊括計算機工程、心理學、設計的交叉學科。
進行利益相關者訪談、用戶訪談，挖掘用戶需求，提煉用戶任務流；完整體驗不同產品，挖掘交互設計模式，設計交互模式，撰寫交互設計稿，并最終形成交互設計規范/UIspec；跟進視覺設計和開發，確保產品正常上線” 這可能就是UX設計師日常事項。
設計產出物：流程圖，網站地圖，故事版，交互設計原型圖（線框圖），UIspec ，交互設計規范。
用的比較多的工具：axure，Visio，Sketch，Illustrator，Fireworks，InVision，PPT，Keynote，Photoshop。
是指在Instagram上流行的風格。
最早是從照片開始的，美圖流行之后，大家就開始效仿上面的同款的，漸漸的在穿搭中也自成一派了。
Ins風格給人的感覺是比較歐美風的。不僅是一種照片