您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計理論 >> 瀏覽設計教程

圓形元素在界面設計中的運用

圓形元素在界面設計中被廣泛運用,從常見的圓形圖標到圓形的頭像,又或是圓形的輪廓形狀。圓形是一種特殊的形狀,它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此,在使用圓形元素設計界面時會有一些注意事項。

一、圓形頭像

放眼望去,圓形頭像已然占領了我們的手機。不妨看看下面舉的這些例子,如下圖所示。


圓形元素在界面設計中的運用 三聯(lián)


從左到右依次是搜狗地圖、QQ、Instagram。當然,還有很多其它的例子,就不一一列舉啦。此刻,肯定有同學已經(jīng)按耐不住要跳出來反駁了,微信和Facebook就不是圓形頭像,不信你看下面兩張圖。


d1df56a455f56ac7256cb095c8b4.jpg


方與圓之間,孰對孰錯,請繼續(xù)看下文分解。

1.用戶使用頭像的目的

不管是圓形頭像,還是方形頭像,其歸根結底都是頭像。用戶使用頭像的目的,主要是作為個人身份的象征。區(qū)別于其他用戶的特征有很多,例如用戶名、用戶ID、用戶頭像。在這些備選項中,頭像最便于快速識別和記憶,尤其是帥哥美女。

除此之外,還有一部分通過頭像來彰顯自己的個性,例如美女通常會使用自己的性感自拍作為頭像來表現(xiàn)自己的魅力,又或是使用卡通人物或形象作為頭像來表現(xiàn)自己的藝術氣息,再或是使用萌寵作為頭像來表現(xiàn)自己的愛心或是呆萌。

2.用戶使用什么照片作為頭像

隨著智能手機的越來越普及,人們拍攝照片的門檻也變得越來越低,越來越多的用戶使用自拍的照片作為頭像。照片的內(nèi)容五花八門,例如人物、風景、花草、寵物。即使是正常的人物照片,背景中也會摻雜著很多其它的元素,例如下圖所示。


5cf056a456106ac7256cb020a2c8.jpg


第一張照片中人物背景雖然虛化了,但背景仍然很凌亂,一些微弱的對比色很容易就搶奪了用戶的視線。第二張照片中人物是配角,豪車才是真正的主角,這類型的自拍照不再少數(shù)。第三張照片人物拍攝的光線陰影錯亂,故意露出一線背景內(nèi)容,其用意如何昭然若揭。此外,用戶手機的好壞、拍照水平也不一致,拍攝出的照片質量也參差不齊。

使用這些照片作為頭像時,人物不但不被突出,反而被弱化了。雖然智能手機屏幕越來越大,但是當頭像集體在界面中展示的的時候,每個頭像依然較小。

3.方形頭像和圓形頭像的區(qū)別

方形頭像和圓形頭像的區(qū)別可以用兩張對比圖來說明,如下圖所示。


5d5c56a456266ac7256cb013db0c.jpg


左圖是方形頭像,右圖是圓形頭像。通過對比,可以發(fā)現(xiàn)以下幾點:

a、圓形頭像能夠更好地幫助用戶聚焦到人臉。雖然左圖能夠完整地呈現(xiàn)人物特征,但是干擾信息較多,例如背景中的燈光、門柱、屏風。對比之下,右圖更為清晰地展示了人物的臉部特征,例如錐子臉、美瞳、假睫毛。在前面的分析中也提到,手機拍攝的照片質量參差不齊。在這種現(xiàn)實情況下,圓形頭像更有利于忽略照片的背景,提高頭像的識別效率。

b、嚴格意義上講左圖并不能稱之為頭像,而更應該稱之為照片。原因很簡單,頭像嘛,自然應該以展示“頭”為主,而左圖中頭像只占畫面四分之一不到的區(qū)域。從這個角度來說,顯然右圖更為合適。在選擇照片作為頭像時,如果是圓形,用戶更愿意選擇臉部的照片作為頭像;如果是方形,用戶則相對更隨意,通常是全身或是半身照。不信,你可以打開自己的微信,看看自己的好友頭像,或者往前滑滑看看前面的配圖。

c、日常生活中,我們看到的大多數(shù)相框都是方形的,圓形的相框較少,這是因為大多數(shù)照片都是方形的。因此,使用圓形的輪廓來表現(xiàn)頭像,能夠快速地和照片區(qū)分開來,更加突出。

當然,使用圓形的輪廓作為頭像,還有一些其它的原因,例如技術上的進步。

早期由于CSS等技術的不成熟,圓形、圓角圖形的處理非常麻煩,現(xiàn)在變得容易很多。

二、圓形的icon

在APP的UI設計中,我們會經(jīng)??吹揭慌排艌A形的icon,例如下圖所示。


fc6956a4564232f875520ff01b89.jpg


上圖中,前面兩個分別是美團和淘寶。在設計上,都有兩行橫排的圓形圖標。最后一張圖是搜狗地圖的服務tab頁,可以發(fā)現(xiàn)也有縱向排列的一溜圓形圖標。

在這里,要回答兩個問題:

1.為什么要用圓形?

2.為什么要用圓形而非矩形?

第1個問題很方便回答。每個功能入口的圖標都不相同,如果去掉圓形輪廓,勢必會顯得十分凌亂。大家都知道圓形是一個封閉的形體,加上圓形之后就能夠弱化圖標的差異性,讓其變得更加規(guī)整,看起來也更加清爽,整齊劃一。同時,在功能上也表明各個圖標之間的平等地位,不會因為某個圖標形狀特殊而有所偏袒。

在回答第2個問題之前,首先回歸圓形和方形的基本特征,

圓形:動,曲線,運動,靈動,流動

方形:靜,直線,規(guī)則,嚴肅,理性

圓形和方形比起來,顯得要靈動很多,不至于那么呆板、嚴肅。如此,不難理解為什么用圓形而非矩形。

其次,圓形能夠使圖標在方形頁面中脫穎而出——不覺得這幾個圓形圖標在頁面中非常突出搶眼么?原因嘛,很簡單。我們的手機屏幕大多是方形的,界面中的大多數(shù)元素也是方形的,這時候用一點少量的圓形,自然在界面中形成焦點,這一點在后面的分析中還會見到。

除了這種形式之外,還有一些單個的圓形圖標浮于頁面底部,通常執(zhí)行的是返回至頂部的操作。

三、圓形和方形的結合

圓與方就像太極中的陰與陽,相生相克,而又生生不息。巧妙地將圓形與方形進行結合,能夠讓頁面變得生動活潑的同時,也能夠更好實現(xiàn)功能上的引導,如下圖所示的幾個案例。


ebb456a4567032f875520fafc8f5.jpg


第一幅圖是谷歌手機地圖,地點右上角的出行方式圖標剛好被方形的臨時層一分為二。從功能上來講,出行方式是下一步的行為,不屬于臨時層里的內(nèi)容,因此置于右上角的位置是比較合適的。從UI角度來說,圓形與方形結合,使的圓形變得更加突出顯眼;同時圓形置于右上角,頁面也不那么死板,反而讓頁面變得生動、活潑起來。

第二幅圖是宜人貸,微微鼓起的弧度讓這個理財項目變得十分突出,同時也打破了頁面沉悶的布局。

第三幅圖是kitchen stories,整個頁面保持左右居中,作者的頭像居中現(xiàn)實,對頁面進行了分割的同時起到了承上啟下的作用。

在頁面設計中,圓形元素通常不是獨立存在的,而是和其他元素相生相息,相互包容。尋求好的視覺效果的同時,也要弄清楚頁面元素之間的相互關系,這樣產(chǎn)出的設計才是真的好設計。

四、圓形的輪廓

結合現(xiàn)實物體,借用圓形輪廓,打造頁面點睛之筆。還是舉幾個栗子給大家看看吧,如下圖所示。


a29156a4568e6ac7256cb0899d80.jpg


第一幅圖所示的是網(wǎng)易云音樂的播放界面。圓形輪廓與唱片保持一致,雖然占據(jù)了頁面的主要空間,但是使的整個頁面變得文藝簡潔。

第二幅圖所示的是搜易貸的賬戶頁面??捎糜囝~采用瓶裝水的設計,余額較多則水漲的越高,同時會有晃動的效果,栩栩如生的同時讓頁面變得靈動起來。

第三幅圖所示的是樂動力的首頁。步數(shù)越多,則描邊進度條越多,暗色變得越暖。與現(xiàn)實生活中的儀表盤相對應,漸變色搭配圓形,使的頁面變得主次分明,極富視覺沖擊力。

可以發(fā)現(xiàn),在使用圓形元素時要注意頁面的平衡,例如左右和上下的對齊居中。為了保證頁面的均衡和清爽,通常會在圓形元素周圍保留較多的空白。這些都是在使用圓形元素時需要注意的事項。


[教程作者:Sim_H]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di3186.html
微信網(wǎng)頁設計樣式庫近日發(fā)布
2016年電商設計的9個熱門趨勢
圖趣網(wǎng)微信
建議反饋
×