萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 讓網頁設計中的圖標更具吸引力的幾大要素

讓網頁設計中的圖標更具吸引力的幾大要素

  圖標在網頁設計中的作用

  圖標在網頁設計中用途廣泛,幾乎每個網站中都存在著圖標。通過這些小小的圖標,可以方便的實現視覺引導和功能劃分。如果選用恰當,圖標能和頁面 中的 圖片有機融合,保持視覺上的一致性,同時也能夠和整個網站的風格相契合。圖標並不是華而不實的小玩意兒,小圖標有大用處。在網頁設計中,如果設計師並不擅 長圖標設計,那麼就需要在圖標選擇上下功夫了。

讓網頁設計中的圖標更具吸引力的幾大要素 三聯

  一般來說,根據使用手法、使用場合的不同,一張圖像可以有多種解讀,圖標亦如此。圖標不但能夠吸引用戶的注意力,還能分割頁面中的區域,最為重要的事,圖標能夠提供一種視覺隱喻,能賦予物體某種含義,這樣用戶掃一眼便能知曉功能,因此,圖標是一種提高用戶體驗的工具。

  圖標在網頁設計中的作用

  圖標可以說是一種不穩定的視覺元素,因為圖標包含了太多的意象,可以扮演不同的角色。一個鉛筆的圖標,就能代表很多意義,可以代表設計,也可以代表出售鉛筆,也可以代表素描。圖標最主要應用於:

screenshot

  視覺上分割內容:讓內容更具有吸引力和可讀性。經常被應用到網站的主體、列表、或者其他文本較多的元素中。

screenshot

  作為概念的視覺參照物,快速引導用戶:這在導航元素中最為常見(上圖)——比如放大鏡代表搜索——非常簡單,有時候連文本注釋都不需要。

  效果突出,因此圖標被廣泛使用。因此可以在網頁設計幾乎每個元素中都找到圖標的身影:標題、腳注、導航條、列表;圖標可以大幅提升頁面中元素的浏覽效果。

  優秀的圖標具備哪些優點?

screenshot

  我們不難發現,圖標是優秀網頁設計中不可或缺的部分,但如果使用不當或者圖標設計的不到位,那麼辨識度就很差,用戶也難以理解。因此我們需要 外觀精致、意味深刻的圖標,比如上面這套就不錯。

  盡管圖標設計說來話長,而且也比較復雜,但是圖標對各種設計來說,都大有裨益。無論是何種設計,如果想要使用圖標,那麼必須記住下面這兩點:概念傳達完善、具備視覺有效性。

  如何保持圖標的視覺有效性?

  圖標能夠很好的組織相關內容,吸引注意力,將用戶引導至重要信息處,前提是,圖標要與內容、其他圖標、整個網站的視覺風格一致。

  圖標系列應該保持視覺統一

  對於一組風格不統一的圖標,即使某款圖標設計的再棒,也要放棄。視覺統一,關乎到整體設計。

  如何實現視覺上的統一?這裡有一些小技巧,包括:

screenshot

  使用相同的顏色或者配色,如上圖

screenshot

  將所有的圖標設置為形狀相同,如上圖。

screenshot

  邊界屬性要一致,如上圖。

screenshot

  效果要一致,比如說漸變、透明、陰影等效果,如上圖。

screenshot

  最後,還要考慮圖標的視覺風格是否與內容、網站的風格一致。

  一定限度的自由組合

screenshot

  有時一款網頁設計僅僅采用一套圖標,但如果不夠用,可以嘗試采用多套圖標,上圖的This website,就采用了多套圖標,只不過這幾套圖標的維度相同。而且這幾套圖標也不在一塊兒工作,他們應用於不同的頁面,彼此之間並無不和諧。只要熟練掌握這種變通的方法,那麼圖標的選擇更加自由。

  圖標應該和網站整體設計相配

  當然,圖標與其他設計元素搭配的方法說不清、道不盡。但是從基本觸發,有兩種方法:

screenshot

  圖標與網站整體形成鮮明的對比: 當圖標作為導航時,這種方法非常奏效,比如上圖的社交媒體鏈接,更能夠吸引注意力。

screenshot

  圖標的視覺風格要與整體設計風格相似: 像上圖中的圖標,與整個頁面風格完美契合,提供了一種視覺上的和諧感。

  如何用圖標完善的傳達概念

  通過邏輯性和一致性來傳達概念。

  圖標要簡單易懂

screenshot

  每個人都有每個人的見解,圖像的解釋也不是絕對的,可能一部分人能夠理解這款圖標,另一部分人就不能。但圖像的傳達能力比文字強,比如說上圖中的圖標,就能清晰的傳達含義。

screenshot

  但有時候,設計師試圖在圖標信息圖中添加復雜的概念,結果圖標的混淆作用大約傳達作用,比如上圖。這種情況下,就需要做進一步的信息提煉,回歸 內容。如果還是無法解決問題,那麼說明圖標在此次設計中並不適用。建議多多了解一下信息圖設計,這種設計就非常注重圖標的概念傳達。

  網頁設計發展迅猛,圖標設計同樣進步飛快。曾經無法用圖標傳達的概念,現今已經可以通過技巧來實現傳達,圖標成為了網頁設計師的重要工具。立足基本,多進行實踐與創新,相信你的設計會越來越充滿藝術感,越來越易於理解。

copyright © 萬盛學電腦網 all rights reserved