萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 圖標是空心好還是實心好?

圖標是空心好還是實心好?

   最近,空心圖標和實心圖標的討論變得激烈起來,有言論指出空心圖標在視覺上比實心圖標看起來更復雜,更容易讓用戶差生疲勞感和倦怠感。對此,設計師們都各抒己見,一部分人表示贊同這種說法,而另一部分人則表示這樣的言論將問題過分了放大化了,並且在證據方面有所欠缺。

  圖標也可以理解為是網站中的一種指引,是每個新用戶都會涉及到的元素,所以無論空心或實心,一個能夠令人一目了然,並且記憶深刻的圖標才是用戶真正喜歡的圖標。

  以下是AnyForWeb搜尋的一些空心或實心的圖標案例,看看你更傾心於哪一款呢?

  1.模糊背景上覆蓋著由簡單線條、字體和單一的顏色組成的空心圖標,這會讓整個界面看起來很優雅。不僅如此,這種簡易的設計手法也讓設計師輕松不少,在效果和操作上都令大家很滿意。

圖標是空心好還是實心好? 三聯

  2.純色的背景似乎搭配任何元素都能達到令人意想不到的效果,下面這個案例也不例外。正紅色與白色之間的經典配搭,加以可愛的造型,成就了一個俏皮的實心圖標設計。界面底部的實心按鈕與幽靈按鈕也與圖標區域前後呼應。

4ed2291f 45af 4fec 8d29 1d7964fdbdcb 圖標是空心好還是實心好?

  3.APP底部的圖標隨著用戶的任意切換,在空心和實心之間自由轉變。實心的圖標相比較空心的而言,給人一種更突出和明顯的視覺效果,讓用戶更容易的抓到重點。而主內容左邊的卡通小圖案同時采用了空心的設置,盡顯極簡主義。

04796a09 e5d3 4d7c b3ed f3f92f6d8c01 圖標是空心好還是實心好?

  4.Line的界面似乎代表了大多數APP的圖標設計方式。頭部和底部的圖標選用兩種顏色的實心設計,下拉菜單部分使用空心圖標。這樣的設計雖然比較大眾化,但不可否認的是,這樣的做法的確讓整個界面看起來格外整潔。

271dec29 656d 43e8 9f22 eb59c86155fb 圖標是空心好還是實心好?

  5.幽靈按鈕雖然簡潔大方,但是過多的使用會另界面很單調無味,但如果使用全部實心的圖標設計又會覺得很突兀。下面這個案例就想出了一個好方法。既然空心實心都不合適,那不如嘗試一下讓兩者結合在一起吧。

7ef4c2e0 ef9a 419b 8e97 56533ea3055a 圖標是空心好還是實心好?

  6.兩種色差明顯的顏色搭配在一起會體現出一種自然而然的時尚感,黑色背景和亮黃色的圖標元素就是很典型的例子。強烈的對比色會讓空心圖標看起來也像實心圖標一樣,具有突出重點的效果。

3cf91058 d37e 4b1b afe7 45ef3f20b80c 圖標是空心好還是實心好?

  7.Metro風格的界面設計也能運用在APP的圖標模塊中,案例中將各種第三方分享平台的實心圖標都用方塊元素連接在一起,讓原本單調的圖標瞬間活躍了起來,給用戶一種煥然一新的感覺。

2b352d82 4e61 4691 b459 939d96a37810 圖標是空心好還是實心好?

  8.傳統的導航圖標大多會集中在一個區域內,而SevenEleven的APP在此做了很大的突破,將4個部分分別分布在界面的上下左右,簡單的界面突然有了運動場的氛圍,讓APP充滿了生命力。

2b580b63 e405 4ec6 bc08 fc250ba7e84b 圖標是空心好還是實心好?

  9.天氣類應用的看點中總會有氣候圖標的一席之地,正如這個案例中所表現的,這又是一個空心與實心相結合的圖標設計。

4fc66fca 4dad 4f32 8128 3615f4f5000a 圖標是空心好還是實心好?

  10.這也是一個純色塊與實心圖標搭配的案例,這個APP的界面設計其實很普通,但正因為圖標的設計讓網站變得可愛起來。

e1a2d31d 94d1 4653 9820 a0d2edbf1ede 圖標是空心好還是實心好?

  圖標在網頁設計中算是一個小單元,但它的重要性大家都有目共睹。空心圖標和實心圖標在不同的環境中發揮著不同的作用,美化著網頁中的小細節。

copyright © 萬盛學電腦網 all rights reserved