真是難以置信嬌小、可愛的Icon圖標可以給我們的設計工作增加亮點。Icon設計已經發展成為一個巨大的產業，因為它們能給設計帶來很多優勢。它們為標題添加視覺引導、用作按鈕、用來分隔頁面、做整體修飾、使網站更顯專業、增強網站交互性。

圖01

　　ICON強化內容

　　Icon作為網站設計中決定性的元素，因為在內容區使用圖標可以為頁面增加“空隙”。Icon圖標用來分隔內容，并且給讀者視覺引導。研究表明，大多數訪客第一次瀏覽內容立馬就會決定哪些內容要去閱讀。訪客點擊鏈接，然后離開它們不喜歡的頁面，進入感興趣的版塊。icon圖標可以把訪客的注意力吸引到你設定的內容。死角內容需要被引導閱讀。你能想象沒有換行和分隔的“lliad”這篇文章閱讀起來有多痛苦嗎？

圖02

　　注意到差別了嗎？

　　Icon讓你的布局不再生硬，把整體分割成容易閱讀和理解的眾多塊，每一塊都內容豐富而充滿魅力，吸引著訪客來點擊閱讀。

　　記住Icon是增強內容的工具，不要讓它吸引了訪客所有的注意力而忽略了內容。所以要精心挑選一些樣式和寓意都與內容緊密相連的Icon圖標。如果你使用過于炫目的Icon圖標或許會分散訪客的注意力。這里僅僅提出來討論，或許這種情況并不會發生。

　　Icon圖標潤色我們的列表

　　錯誤設計的列表看起來很糟糕，它打亂了整個頁面布局，分散了內容的吸引力，就像網站被摳了一個白色的洞出來。Icon是一如既往的布局助手。從圖標庫中選取一個合適的來加強列表。

圖03

　　漂亮的菜譜，使用了128*128 Icon圖標（來自Real Vista food 素材包）

　　Icon 凸顯應用的新特性

　　通過Icon圖標串接各個小版塊是一個展現亮點的好辦法。你的潛在客戶會在這種視覺標識的引導下來閱讀新特性。一個漂亮的Icon圖標可以把訪客的注意力緊緊吸引到這個版塊上。

圖04

　　Icon 輔助主鏈接

　　醒目的頭部會給第一次進入的訪客很棒的視覺體驗。令人瞠目結舌的視覺體驗配以精致的標記行會穩固您網站的點擊量。512*512 Icon圖標能給主導航欄帶來強烈的視覺沖擊。

圖05

　　Icon 協助構建產品列表

　　設計精美的Icon圖標總會給你的產品展示版塊增添亮點。在你的產品鏈接旁邊加一個Icon圖標會給訪客一個很好的暗示，即使不看內容也清楚您所提供產品的一些特性。這種辦法可以讓您的產品和與眾不同的Icon有機結合成一個整體。

圖06

[Page: ]

　　Icon 協助展示您的服務

　　Icon圖標讓您的網站界面友好、引人入勝、更有效照顧到網站角角落落的內容，即使是最小的細節也不會讓訪客錯過。更甚之你作為一名設計師要提供類似的專業化服務。使用奇特富于創意的Icon圖標展示您的服務能使你在同行中脫穎而出、顯得與眾不同，給客戶留下專業化、友好的初印象。

圖07 

　　哪個容易記住

　　Favicons

　　Favicons是那些用在地址欄的16*16px圖標來標識網站。它也會出現在網站標題側面的書簽欄或者瀏覽器的標簽選項中。盡管并非不可缺少，有了它您的網站更顯完整、和專業化。

圖08

　　Favicons并非不可缺少，但是如果缺了它您的潛在客戶會覺得您是一個不夠可靠的服務提供商。或者在客戶下訂單之際，因缺乏對客戶有效的視覺暗示，而錯過訂單。所以我們要借助Favicons來標識我們的網站。

　　Icon服務于社交網絡

　　社交網絡是你網站最有效的曝光途徑。Icon圖標能給訪客提供一個生動的、可視化的通往您網站的鏈接。

圖09

　　風格統一的一組Icon圖標的確給您的網站增色不少、使它變得與眾不同。

　　Icon服務于網站頭部設計

　　時至今日網站設計趨向于大頭部。那些設計精良的大圖標的確讓您的網站神采奕奕。

圖10

　　Icon標識板塊

　　最好的讓訪客區分網站布局各部分的辦法就是為每個版塊的頭部添加Icon圖標標識。這樣網站更加連貫、富于整體感、交互性更強。

　　Icon 在菜單中的應用

　　通常情況下在子菜單中使用小圖標取代文字鏈接或者協助文字鏈接是個不錯的辦法。這樣界面友好、干凈整潔，為您的網站加分。

圖11

　　Icon 為您的設計增添動感

　　完美的網站設計總是在交互性上下很多的功夫。你可以在鏈接上、鼠標劃過時、或者其他的什么地方使用Icon圖標豐富您的網站。

　　瘋狂起來！我們來變換Icon尺寸、應用旋轉和替換圖標特效

　　你可能把大尺寸的Icon圖標用在頭部，小尺寸的Icon圖標分隔文字內容。你也可以使用兩個相同的圖標僅僅是在顏色或是尺寸上有略微的差別，來制作旋轉或是替換特效。我們要做的就是大膽創意、大膽去嘗試。

圖12

 

[Page: ]

　　好的，不要太瘋狂，要保持風格的連貫統一。

　　使用Icon圖標唯一的風險就是偏離你原網站的風格。混合風格有時候會變得雜亂無章、糟糕的很。我們有大量的風格供您挑選，它們都是嚴格按照美學要求精心設計的。如果你不確定，可以使用我們的普通服務。如果想要您的設計標新立異，那么原始圖標就足夠了。記住，Icon圖標僅僅是加強您的內容和設計，最重要的一點就是它要跟網站的其他部分協調且風格一致。不要把所有炫目的Icon圖標都一股腦的放到您的網站設計中，要多關注網站整體風格的一致性。

圖13

　　更多的案例

　　Icon輔助設計的網站實例

圖14

圖15

圖16

圖17

　　原教程來自：iconlibrary.iconshock.com

　　譯文地址：如何使用Icon圖標輔助網站設計