網頁設計中的圖標

 

　　現代圖標已經成為每一個數字界面的主題。它們有助於識別內容，直至MP3時代都不被重視舉足輕重。直等到ipods······至於ipod有圖標的使用,因為他們是一個快速的視覺傳遞信息的方法。

　　在我記憶中網頁設計領域裡一直都有使用圖標。這些形象化的圖標通過廣泛的使用已經形成了自己的語言了(例如文件夾、打印機、鼠標、箭頭等)在本指南,我想分享一些關於現代標志設計的想法。我同樣提供一個小的可免費下載的高質量圖標設計資源庫和相關教程。

　　設計風格

　　“圖標設計”一詞包含廣泛的想法。一邊是非常簡單又小的圖標,通常稱為扁平設計風格。另一邊是通過像用Photoshop和Illustrator軟件處理過的完整寫實主義風格。每個項目都有不同的圖形需要而圖標風格通常介於這些需要的范圍內。

　　流行的簡約設計風格創造了許多世界各地的設計師。線性圖標已成為“iOS7”和“iOS8”的主要設計風格其他智能手機操作系統也緊隨其後。當提到圖標設計設計時沒有對與錯——只是多種選擇而已。

　　我認為網站無論是扁平還是寫實都是很好的工作。圖標設計包含了許多藝術原理例如深度、比例、光線等等。當你更傾向於寫實的風格時你則需要學習如何創建紋理和陰影,以便看起來很真實。這需要大量的工作,卻非常有益。

　　企業品牌設計

　　品牌設計可能是顯而易見的,但值得一提的是,由於大部分優秀的網站常常有令人難忘的品牌設計。圖標設計是與每個浏覽者交流思想的方式。當公司品牌化產生的附屬品如吉祥物、標志、圖形都應該讓每個浏覽者深深難忘。

　　你也可以做一系列的不同圖標用於單個品牌效應。自從圖標設計有如此廣泛的程度樣式,你可以考慮做大量相同風格的圖標。只要每個圖標是相對獨特的風格肯定會提高網站並幫助它在其他類似的布局中脫穎而出。

　　MailBakery就是這樣一個例子,使用一個大的圖形放在主頁上體現他們的服務。當你點擊每個圖標時下方就有個滑塊框,新內容將以動畫形式呈現。每個圖標與圖形的設計完全在相同一致的水平。

　　這意味著所有這些圖形都是專門為這個網站定制的。使用一套免費的預制圖標當然沒有錯——但這些免費圖標可以已經在其他20個網站中使用了。所以品牌獨特性和潛在的機會被移去了。

　　因此,我一直建議有抱負的圖標設計師學會制作工藝性的用戶界面圖標。這個項目將會跟隨自己和客戶很長一段時間。

　　導航鏈接

　　在過去，圖標通常用於顯示導航的內容。也就是說,圖標幫助定義鏈接或按鈕相關的網站或GUI。現代Facebook導航遵循同樣的原則,方便浏覽類似的鏈接列表。

　　盡管你可能不會使用這種技術。但也值得理解其優點。下拉鏈接通常使用良好,因為用戶是看每個下拉菜單。但當你有一個大量的水平或垂直顯示與十幾個鏈接在一起，那麼圖標幫助描繪每個鏈接。

　　定義內容視覺

　　在網站設計中使用頁內圖標的最大的原因是幫助定義現有內容。圖標是一個視覺線索,正確組織並傳遞的非常明確的信號。它們能平衡文字布局。學習圖標設計最重要的一課是如何根據單個的圖形傳達明確的信息。

　　我最喜歡這種效果的例子,可以在GitHub Education頁上找到。頂部使用GitHub Octocat的吉祥物與塗鴉背景創建了一中科學/教育感覺。當你向下滾動頁面時每頁的主要板塊都使用一系列的圖標來幫助說明這一點。

　　請注意,所有的圖標都有手繪效果,它們看起來相互匹配。每個圖標連接到更大的整體,從某種意義上提供創建了這一系列圖標(確實如此)。但更重要的是,圖標使內容更加形象化。文本提供足夠的信息,——圖標只是有助於闡明該消息。

　　在Glazed & Infused的主頁上可以看到同樣的效果。少的文本描述與合適的圖片說明他們的餐飲、咖啡和禮物卡。這些奇妙的圖標當然不是必需的,但他們確實迅速地吸引我的注意力,提供更深層次的內容含義。

　　矢量背景

　　從重復平鋪的背景到矢量對象,有很多你可以用幾個簡單的矢量形狀。網站背景也變得更加廣泛不僅僅是簡單的紋理。現在可以在背景中創建整個場景僅僅通過矢量的插圖。

　　矢量圖形往往更容易伸縮但很難創造寫實的效果。矢量圖形並不總是支持復雜的圖層樣式，你需要玩弄一段時間才能熟悉掌握這些形狀。但是一旦你學習了這個過程就會變得很有趣,很充實。

　　Bota Iusti為了突出辦公室設置的特點組合布局創建矢量圖形。頁面本身是純粹的響應式並且背景隨著頁面調整尺寸。創建矢量藝術的好處是在任何分辨率下看起來的效果都很好。在Photoshop中可以創建矢量對象但是圖層樣式和過濾鏡並不總是可調整的。

　　設計教程

　　提高圖標設計技術的最好方法是跟隨網上教程練習。任何事情都沒有快速達到高水准的捷徑。你所能做的就是研究那些更好的作品,盡你最大的努力繼續前進並勤奮練習。

　　雖然圖標設計是一個廣泛的術語，當我已經准備了少量的教程以便你開始復習。看一看這些例子,看他們是否可以融入你的日常工作。我們總是被安排處理時間緊急的事務,但提高自己也一樣迫切,即使爭分奪秒。我說最好是本周開始,以免下周我們已經改變。

　　16×16 px Icons

　　Weather Line Icons

　　Flat Social Icon

　　Tab Bar Icons

　　Bat Icon

　　Gem Icons

　　Water Pistol

　　Mail Alert

　　Notebook

　　Almost Flat

　　免費圖標

　　隨著在線免費教程你可以學到很多東西。設計師們花時間在線發布他們的成果,因為它可以促進他們的工作,並幫助設計界。學習使用類似Photoshop的軟件是第一步。然後一旦你掌握了基本知識，你可以分析學習他們是如何設置的並結合適應自己的方法。

　　下面我載入了15組免費圖標為網頁設計。每個免費贈品都有PSD和AI文件，同樣也有類似的EPS或PNG格式文件。歡迎你來瘋狂的下載這些免費(或全部)。我相信這些圖標能充分證明這些設計師的水准並是方便有用的學習工具。

　　40 Flat Icons