2022-4-29 博博
圓形元素在界面設(shè)計(jì)中被廣泛運(yùn)用，從常見的圓形圖標(biāo)到圓形的頭像，又或是圓形的輪廓形狀。圓形是一種特殊的形狀，它能夠在眾多幾何形狀中被我們快速地注意到。也正因?yàn)槿绱耍谑褂脠A形元素設(shè)計(jì)界面時(shí)會(huì)有一些注意事項(xiàng)。
一、圓形頭像
放眼望去，圓形頭像已然占領(lǐng)了我們的手機(jī)。不妨看看下面舉的這些例子，如下圖所示。
從左到右依次是搜狗地圖、QQ、Instagram。當(dāng)然，還有很多其它的例子，就不一一列舉啦。此刻，肯定有同學(xué)已經(jīng)按耐不住要跳出來反駁了，微信和Facebook就不是圓形頭像，不信你看下面兩張圖。
方與圓之間，孰對孰錯(cuò)，請繼續(xù)看下文分解。
1.用戶使用頭像的目的
不管是圓形頭像，還是方形頭像，其歸根結(jié)底都是頭像。用戶使用頭像的目的，主要是作為個(gè)人身份的象征。區(qū)別于其他用戶的特征有很多，例如用戶名、用戶ID、用戶頭像。在這些備選項(xiàng)中，頭像最便于快速識別和記憶，尤其是帥哥美女。
除此之外，還有一部分通過頭像來彰顯自己的個(gè)性，例如美女通常會(huì)使用自己的性感自拍作為頭像來表現(xiàn)自己的魅力，又或是使用卡通人物或形象作為頭像來表現(xiàn)自己的藝術(shù)氣息，再或是使用萌寵作為頭像來表現(xiàn)自己的愛心或是呆萌。
2.用戶使用什么照片作為頭像
隨著智能手機(jī)的越來越普及，人們拍攝照片的門檻也變得越來越低，越來越多的用戶使用自拍的照片作為頭像。照片的內(nèi)容五花八門，例如人物、風(fēng)景、花草、寵物。即使是正常的人物照片，背景中也會(huì)摻雜著很多其它的元素，例如下圖所示。
第一張照片中人物背景雖然虛化了，但背景仍然很凌亂，一些微弱的對比色很容易就搶奪了用戶的視線。第二張照片中人物是配角，豪車才是真正的主角，這類型的自拍照不再少數(shù)。第三張照片人物拍攝的光線陰影錯(cuò)亂，故意露出一線背景內(nèi)容，其用意如何昭然若揭。此外，用戶手機(jī)的好壞、拍照水平也不一致，拍攝出的照片質(zhì)量也參差不齊。
使用這些照片作為頭像時(shí)，人物不但不被突出，反而被弱化了。雖然智能手機(jī)屏幕越來越大，但是當(dāng)頭像集體在界面中展示的的時(shí)候，每個(gè)頭像依然較小。
3.方形頭像和圓形頭像的區(qū)別
方形頭像和圓形頭像的區(qū)別可以用兩張對比圖來說明，如下圖所示。
左圖是方形頭像，右圖是圓形頭像。通過對比，可以發(fā)現(xiàn)以下幾點(diǎn)：
a、圓形頭像能夠更好地幫助用戶聚焦到人臉。雖然左圖能夠完整地呈現(xiàn)人物特征，但是干擾信息較多，例如背景中的燈光、門柱、屏風(fēng)。對比之下，右圖更為清晰地展示了人物的臉部特征，例如錐子臉、美瞳、假睫毛。在前面的分析中也提到，手機(jī)拍攝的照片質(zhì)量參差不齊。在這種現(xiàn)實(shí)情況下，圓形頭像更有利于忽略照片的背景，提高頭像的識別效率。
b、嚴(yán)格意義上講左圖并不能稱之為頭像，而更應(yīng)該稱之為照片。原因很簡單，頭像嘛，自然應(yīng)該以展示“頭”為主，而左圖中頭像只占畫面四分之一不到的區(qū)域。從這個(gè)角度來說，顯然右圖更為合適。在選擇照片作為頭像時(shí)，如果是圓形，用戶更愿意選擇臉部的照片作為頭像；如果是方形，用戶則相對更隨意，通常是全身或是半身照。不信，你可以打開自己的微信，看看自己的好友頭像，或者往前滑滑看看前面的配圖。
c、日常生活中，我們看到的大多數(shù)相框都是方形的，圓形的相框較少，這是因?yàn)榇蠖鄶?shù)照片都是方形的。因此，使用圓形的輪廓來表現(xiàn)頭像，能夠快速地和照片區(qū)分開來，更加突出。
當(dāng)然，使用圓形的輪廓作為頭像，還有一些其它的原因，例如技術(shù)上的進(jìn)步。
早期由于CSS等技術(shù)的不成熟，圓形、圓角圖形的處理非常麻煩，現(xiàn)在變得容易很多。
二、圓形的icon
在APP的UI設(shè)計(jì)中，我們會(huì)經(jīng)常看到一排排圓形的icon，例如下圖所示。
上圖中，前面兩個(gè)分別是美團(tuán)和淘寶。在設(shè)計(jì)上，都有兩行橫排的圓形圖標(biāo)。最后一張圖是搜狗地圖的服務(wù)tab頁，可以發(fā)現(xiàn)也有縱向排列的一溜圓形圖標(biāo)。
在這里，要回答兩個(gè)問題：
1.為什么要用圓形？
2.為什么要用圓形而非矩形？
第1個(gè)問題很方便回答。每個(gè)功能入口的圖標(biāo)都不相同，如果去掉圓形輪廓，勢必會(huì)顯得十分凌亂。大家都知道圓形是一個(gè)封閉的形體，加上圓形之后就能夠弱化圖標(biāo)的差異性，讓其變得更加規(guī)整，看起來也更加清爽，整齊劃一。同時(shí)，在功能上也表明各個(gè)圖標(biāo)之間的平等地位，不會(huì)因?yàn)槟硞€(gè)圖標(biāo)形狀特殊而有所偏袒。
在回答第2個(gè)問題之前，首先回歸圓形和方形的基本特征，
圓形：動(dòng)，曲線，運(yùn)動(dòng)，靈動(dòng)，流動(dòng)
方形：靜，直線，規(guī)則，嚴(yán)肅，理性
圓形和方形比起來，顯得要靈動(dòng)很多，不至于那么呆板、嚴(yán)肅。如此，不難理解為什么用圓形而非矩形。
其次，圓形能夠使圖標(biāo)在方形頁面中脫穎而出——不覺得這幾個(gè)圓形圖標(biāo)在頁面中非常突出搶眼么？原因嘛，很簡單。我們的手機(jī)屏幕大多是方形的，界面中的大多數(shù)元素也是方形的，這時(shí)候用一點(diǎn)少量的圓形，自然在界面中形成焦點(diǎn)，這一點(diǎn)在后面的分析中還會(huì)見到。
除了這種形式之外，還有一些單個(gè)的圓形圖標(biāo)浮于頁面底部，通常執(zhí)行的是返回至頂部的操作。
圓與方就像太極中的陰與陽，相生相克，而又生生不息。巧妙地將圓形與方形進(jìn)行結(jié)合，能夠讓頁面變得生動(dòng)活潑的同時(shí)，也能夠更好實(shí)現(xiàn)功能上的引導(dǎo)，如下圖所示的幾個(gè)案例。
第一幅圖是谷歌手機(jī)地圖，地點(diǎn)右上角的出行方式圖標(biāo)剛好被方形的臨時(shí)層一分為二。從功能上來講，出行方式是下一步的行為，不屬于臨時(shí)層里的內(nèi)容，因此置于右上角的位置是比較合適的。從UI角度來說，圓形與方形結(jié)合，使的圓形變得更加突出顯眼；同時(shí)圓形置于右上角，頁面也不那么死板，反而讓頁面變得生動(dòng)、活潑起來。
第二幅圖是宜人貸，微微鼓起的弧度讓這個(gè)理財(cái)項(xiàng)目變得十分突出，同時(shí)也打破了頁面沉悶的布局。
第三幅圖是kitchen stories，整個(gè)頁面保持左右居中，作者的頭像居中現(xiàn)實(shí)，對頁面進(jìn)行了分割的同時(shí)起到了承上啟下的作用。
在頁面設(shè)計(jì)中，圓形元素通常不是獨(dú)立存在的，而是和其他元素相生相息，相互包容。尋求好的視覺效果的同時(shí)，也要弄清楚頁面元素之間的相互關(guān)系，這樣產(chǎn)出的設(shè)計(jì)才是真的好設(shè)計(jì)。
四、圓形的輪廓
結(jié)合現(xiàn)實(shí)物體，借用圓形輪廓，打造頁面點(diǎn)睛之筆。還是舉幾個(gè)栗子給大家看看吧，如下圖所示。
第一幅圖所示的是網(wǎng)易云音樂的播放界面。圓形輪廓與唱片保持一致，雖然占據(jù)了頁面的主要空間，但是使的整個(gè)頁面變得文藝簡潔。
第二幅圖所示的是搜易貸的賬戶頁面。可用余額采用瓶裝水的設(shè)計(jì)，余額較多則水漲的越高，同時(shí)會(huì)有晃動(dòng)的效果，栩栩如生的同時(shí)讓頁面變得靈動(dòng)起來。
第三幅圖所示的是樂動(dòng)力的首頁。步數(shù)越多，則描邊進(jìn)度條越多，暗色變得越暖。與現(xiàn)實(shí)生活中的儀表盤相對應(yīng)，漸變色搭配圓形，使的頁面變得主次分明，極富視覺沖擊力。
可以發(fā)現(xiàn)，在使用圓形元素時(shí)要注意頁面的平衡，例如左右和上下的對齊居中。為了保證頁面的均衡和清爽，通常會(huì)在圓形元素周圍保留較多的空白。這些都是在使用圓形元素時(shí)需要注意的事項(xiàng)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.dzxscac.cn