圖標(biāo)是空心好還是實(shí)心好?
最近,空心圖標(biāo)和實(shí)心圖標(biāo)的討論變得激烈起來,有言論指出空心圖標(biāo)在視覺上比實(shí)心圖標(biāo)看起來更復(fù)雜,更容易讓用戶差生疲勞感和倦怠感。對(duì)此,設(shè)計(jì)師們都各抒己見,一部分人表示贊同這種說法,而另一部分人則表示這樣的言論將問題過分了放大化了,并且在證據(jù)方面有所欠缺。
圖標(biāo)也可以理解為是網(wǎng)站中的一種指引,是每個(gè)新用戶都會(huì)涉及到的元素,所以無論空心或?qū)嵭模粋€(gè)能夠令人一目了然,并且記憶深刻的圖標(biāo)才是用戶真正喜歡的圖標(biāo)。
以下是AnyForWeb搜尋的一些空心或?qū)嵭牡膱D標(biāo)案例,看看你更傾心于哪一款呢?
1.模糊背景上覆蓋著由簡(jiǎn)單線條、字體和單一的顏色組成的空心圖標(biāo),這會(huì)讓整個(gè)界面看起來很優(yōu)雅。不僅如此,這種簡(jiǎn)易的設(shè)計(jì)手法也讓設(shè)計(jì)師輕松不少,在效果和操作上都令大家很滿意。
2.純色的背景似乎搭配任何元素都能達(dá)到令人意想不到的效果,下面這個(gè)案例也不例外。正紅色與白色之間的經(jīng)典配搭,加以可愛的造型,成就了一個(gè)俏皮的實(shí)心圖標(biāo)設(shè)計(jì)。界面底部的實(shí)心按鈕與幽靈按鈕也與圖標(biāo)區(qū)域前后呼應(yīng)。
3.APP底部的圖標(biāo)隨著用戶的任意切換,在空心和實(shí)心之間自由轉(zhuǎn)變。實(shí)心的圖標(biāo)相比較空心的而言,給人一種更突出和明顯的視覺效果,讓用戶更容易的抓到重點(diǎn)。而主內(nèi)容左邊的卡通小圖案同時(shí)采用了空心的設(shè)置,盡顯極簡(jiǎn)主義。
4.Line的界面似乎代表了大多數(shù)APP的圖標(biāo)設(shè)計(jì)方式。頭部和底部的圖標(biāo)選用兩種顏色的實(shí)心設(shè)計(jì),下拉菜單部分使用空心圖標(biāo)。這樣的設(shè)計(jì)雖然比較大眾化,但不可否認(rèn)的是,這樣的做法的確讓整個(gè)界面看起來格外整潔。
5.幽靈按鈕雖然簡(jiǎn)潔大方,但是過多的使用會(huì)另界面很單調(diào)無味,但如果使用全部實(shí)心的圖標(biāo)設(shè)計(jì)又會(huì)覺得很突兀。下面這個(gè)案例就想出了一個(gè)好方法。既然空心實(shí)心都不合適,那不如嘗試一下讓兩者結(jié)合在一起吧。
6.兩種色差明顯的顏色搭配在一起會(huì)體現(xiàn)出一種自然而然的時(shí)尚感,黑色背景和亮黃色的圖標(biāo)元素就是很典型的例子。強(qiáng)烈的對(duì)比色會(huì)讓空心圖標(biāo)看起來也像實(shí)心圖標(biāo)一樣,具有突出重點(diǎn)的效果。
7.Metro風(fēng)格的界面設(shè)計(jì)也能運(yùn)用在APP的圖標(biāo)模塊中,案例中將各種第三方分享平臺(tái)的實(shí)心圖標(biāo)都用方塊元素連接在一起,讓原本單調(diào)的圖標(biāo)瞬間活躍了起來,給用戶一種煥然一新的感覺。
8.傳統(tǒng)的導(dǎo)航圖標(biāo)大多會(huì)集中在一個(gè)區(qū)域內(nèi),而SevenEleven的APP在此做了很大的突破,將4個(gè)部分分別分布在界面的上下左右,簡(jiǎn)單的界面突然有了運(yùn)動(dòng)場(chǎng)的氛圍,讓APP充滿了生命力。
9.天氣類應(yīng)用的看點(diǎn)中總會(huì)有氣候圖標(biāo)的一席之地,正如這個(gè)案例中所表現(xiàn)的,這又是一個(gè)空心與實(shí)心相結(jié)合的圖標(biāo)設(shè)計(jì)。
10.這也是一個(gè)純色塊與實(shí)心圖標(biāo)搭配的案例,這個(gè)APP的界面設(shè)計(jì)其實(shí)很普通,但正因?yàn)閳D標(biāo)的設(shè)計(jì)讓網(wǎng)站變得可愛起來。
圖標(biāo)在網(wǎng)頁設(shè)計(jì)中算是一個(gè)小單元,但它的重要性大家都有目共睹。空心圖標(biāo)和實(shí)心圖標(biāo)在不同的環(huán)境中發(fā)揮著不同的作用,美化著網(wǎng)頁中的小細(xì)節(jié)。
本文地址:http://irelandcustomcontracting.com/tutorial/ui2150.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏