真是難以置信嬌小、可愛的Icon圖標(biāo)可以給我們的設(shè)計工作增加亮點。Icon設(shè)計已經(jīng)發(fā)展成為一個巨大的產(chǎn)業(yè)，因為它們能給設(shè)計帶來很多優(yōu)勢。它們?yōu)闃?biāo)題添加視覺引導(dǎo)、用作按鈕、用來分隔頁面、做整體修飾、使網(wǎng)站更顯專業(yè)、增強網(wǎng)站交互性。
圖01
ICON強化內(nèi)容
Icon作為網(wǎng)站設(shè)計中決定性的元素，因為在內(nèi)容區(qū)使用圖標(biāo)可以為頁面增加“空隙”。Icon圖標(biāo)用來分隔內(nèi)容，并且給讀者視覺引導(dǎo)。研究表明，大多數(shù)訪客第一次瀏覽內(nèi)容立馬就會決定哪些內(nèi)容要去閱讀。訪客點擊鏈接，然后離開它們不喜歡的頁面，進(jìn)入感興趣的版塊。icon圖標(biāo)可以把訪客的注意力吸引到你設(shè)定的內(nèi)容。死角內(nèi)容需要被引導(dǎo)閱讀。你能想象沒有換行和分隔的“l(fā)liad”這篇文章閱讀起來有多痛苦嗎？
圖02
注意到差別了嗎？
Icon讓你的布局不再生硬，把整體分割成容易閱讀和理解的眾多塊，每一塊都內(nèi)容豐富而充滿魅力，吸引著訪客來點擊閱讀。
記住Icon是增強內(nèi)容的工具，不要讓它吸引了訪客所有的注意力而忽略了內(nèi)容。所以要精心挑選一些樣式和寓意都與內(nèi)容緊密相連的Icon圖標(biāo)。如果你使用過于炫目的Icon圖標(biāo)或許會分散訪客的注意力。這里僅僅提出來討論，或許這種情況并不會發(fā)生。
Icon圖標(biāo)潤色我們的列表
錯誤設(shè)計的列表看起來很糟糕，它打亂了整個頁面布局，分散了內(nèi)容的吸引力，就像網(wǎng)站被摳了一個白色的洞出來。Icon是一如既往的布局助手。從圖標(biāo)庫中選取一個合適的來加強列表。
圖03
漂亮的菜譜，使用了128*128 Icon圖標(biāo)（來自Real Vista food 素材包）
Icon 凸顯應(yīng)用的新特性
通過Icon圖標(biāo)串接各個小版塊是一個展現(xiàn)亮點的好辦法。你的潛在客戶會在這種視覺標(biāo)識的引導(dǎo)下來閱讀新特性。一個漂亮的Icon圖標(biāo)可以把訪客的注意力緊緊吸引到這個版塊上。
圖04
Icon 輔助主鏈接
醒目的頭部會給第一次進(jìn)入的訪客很棒的視覺體驗。令人瞠目結(jié)舌的視覺體驗配以精致的標(biāo)記行會穩(wěn)固您網(wǎng)站的點擊量。512*512 Icon圖標(biāo)能給主導(dǎo)航欄帶來強烈的視覺沖擊。
圖05
Icon 協(xié)助構(gòu)建產(chǎn)品列表
設(shè)計精美的Icon圖標(biāo)總會給你的產(chǎn)品展示版塊增添亮點。在你的產(chǎn)品鏈接旁邊加一個Icon圖標(biāo)會給訪客一個很好的暗示，即使不看內(nèi)容也清楚您所提供產(chǎn)品的一些特性。這種辦法可以讓您的產(chǎn)品和與眾不同的Icon有機結(jié)合成一個整體。
圖06
[Page: ]
Icon 協(xié)助展示您的服務(wù)
Icon圖標(biāo)讓您的網(wǎng)站界面友好、引人入勝、更有效照顧到網(wǎng)站角角落落的內(nèi)容，即使是最小的細(xì)節(jié)也不會讓訪客錯過。更甚之你作為一名設(shè)計師要提供類似的專業(yè)化服務(wù)。使用奇特富于創(chuàng)意的Icon圖標(biāo)展示您的服務(wù)能使你在同行中脫穎而出、顯得與眾不同，給客戶留下專業(yè)化、友好的初印象。
圖07
哪個容易記住
Favicons
Favicons是那些用在地址欄的16*16px圖標(biāo)來標(biāo)識網(wǎng)站。它也會出現(xiàn)在網(wǎng)站標(biāo)題側(cè)面的書簽欄或者瀏覽器的標(biāo)簽選項中。盡管并非不可缺少，有了它您的網(wǎng)站更顯完整、和專業(yè)化。
圖08
Favicons并非不可缺少，但是如果缺了它您的潛在客戶會覺得您是一個不夠可靠的服務(wù)提供商。或者在客戶下訂單之際，因缺乏對客戶有效的視覺暗示，而錯過訂單。所以我們要借助Favicons來標(biāo)識我們的網(wǎng)站。
Icon服務(wù)于社交網(wǎng)絡(luò)
社交網(wǎng)絡(luò)是你網(wǎng)站最有效的曝光途徑。Icon圖標(biāo)能給訪客提供一個生動的、可視化的通往您網(wǎng)站的鏈接。
圖09
風(fēng)格統(tǒng)一的一組Icon圖標(biāo)的確給您的網(wǎng)站增色不少、使它變得與眾不同。
Icon服務(wù)于網(wǎng)站頭部設(shè)計
時至今日網(wǎng)站設(shè)計趨向于大頭部。那些設(shè)計精良的大圖標(biāo)的確讓您的網(wǎng)站神采奕奕。
圖10
Icon標(biāo)識板塊
最好的讓訪客區(qū)分網(wǎng)站布局各部分的辦法就是為每個版塊的頭部添加Icon圖標(biāo)標(biāo)識。這樣網(wǎng)站更加連貫、富于整體感、交互性更強。
Icon 在菜單中的應(yīng)用
通常情況下在子菜單中使用小圖標(biāo)取代文字鏈接或者協(xié)助文字鏈接是個不錯的辦法。這樣界面友好、干凈整潔，為您的網(wǎng)站加分。
圖11
Icon 為您的設(shè)計增添動感
完美的網(wǎng)站設(shè)計總是在交互性上下很多的功夫。你可以在鏈接上、鼠標(biāo)劃過時、或者其他的什么地方使用Icon圖標(biāo)豐富您的網(wǎng)站。
瘋狂起來！我們來變換Icon尺寸、應(yīng)用旋轉(zhuǎn)和替換圖標(biāo)特效
你可能把大尺寸的Icon圖標(biāo)用在頭部，小尺寸的Icon圖標(biāo)分隔文字內(nèi)容。你也可以使用兩個相同的圖標(biāo)僅僅是在顏色或是尺寸上有略微的差別，來制作旋轉(zhuǎn)或是替換特效。我們要做的就是大膽創(chuàng)意、大膽去嘗試。
圖12
[Page: ]
好的，不要太瘋狂，要保持風(fēng)格的連貫統(tǒng)一。
使用Icon圖標(biāo)唯一的風(fēng)險就是偏離你原網(wǎng)站的風(fēng)格?；旌巷L(fēng)格有時候會變得雜亂無章、糟糕的很。我們有大量的風(fēng)格供您挑選，它們都是嚴(yán)格按照美學(xué)要求精心設(shè)計的。如果你不確定，可以使用我們的普通服務(wù)。如果想要您的設(shè)計標(biāo)新立異，那么原始圖標(biāo)就足夠了。記住，Icon圖標(biāo)僅僅是加強您的內(nèi)容和設(shè)計，最重要的一點就是它要跟網(wǎng)站的其他部分協(xié)調(diào)且風(fēng)格一致。不要把所有炫目的Icon圖標(biāo)都一股腦的放到您的網(wǎng)站設(shè)計中，要多關(guān)注網(wǎng)站整體風(fēng)格的一致性。
圖13
更多的案例
Icon輔助設(shè)計的網(wǎng)站實例
圖14
圖15
圖16
圖17
原教程來自：iconlibrary.iconshock.com
譯文地址：如何使用Icon圖標(biāo)輔助網(wǎng)站設(shè)計
