[產(chǎn)品設(shè)計]產(chǎn)品設(shè)計中圓角為何應(yīng)用那么廣泛?
無論是硬件設(shè)計還是軟件設(shè)計,圓角的應(yīng)用都非常廣泛。這是因為人眼處理圓角更容易,圓角具備較強的信息引導(dǎo)性,能夠更加凸顯卡片中的內(nèi)容信息;同時,圓角的設(shè)計也更具安全性、親密性。
我們最熟悉的蘋果公司在使用圓角卡片最早卡已追溯到1981年,當(dāng)時 Apple 的天才程序員 Bill Atkinson 正向團隊展示他是如何用一種聰明的方法可以在僅有 68000 處理器的 Lisa 和 Macintosh 機器上快速畫出圓和橢圓。
Steve Jobs 看了之后有另外的想法,他說:“圓和橢圓都不錯,但是能畫出帶圓角的四邊形嗎?我們現(xiàn)在也能畫出嗎?” Bill Atkinson 回答說,很難做到,而且他認為并不真需要圓角四邊形。Steve Jobs 就立刻強烈回應(yīng)了:“到處都是圓角四邊形!看看這個房間周圍就知道了!”并且還帶著 Bill Atkinson 出去轉(zhuǎn)看可以碰到多少圓角四邊形,最后 Bill Atkinson 被說服,第二天下午就拿出了滿意的結(jié)果。
首先,我們縱觀2018年當(dāng)下各大廠商發(fā)布的手機,在工業(yè)設(shè)計上來看基本都采用了更加柔和的圓角設(shè)計,例如:iPhone、SAMSUNG、小米、VIVO等等。
在屏幕設(shè)計上同樣選擇了圓角設(shè)計,在細節(jié)之處也保持了高度的統(tǒng)一,例如:在攝像頭位置的連接處同樣采用了圓角弧度作為過渡。我們以iPhone為例:
可見,圓角設(shè)計的應(yīng)用已經(jīng)成為硬件工業(yè)設(shè)計的中的非常重要的設(shè)計語言。
不止是手機的工業(yè)硬件設(shè)計上采用了大量的圓角,各大廠商的手機系統(tǒng) UI 也大量采用了圓角設(shè)計。
大家最熟悉的可能就是 iOS 系統(tǒng)里的圓角設(shè)計,自2007年隨著 iOS 7 的發(fā)布,Apple 將 iOS 上的標(biāo)志性的圓角標(biāo)輪廓做了更新,將工業(yè)設(shè)計中的曲線連續(xù)概念應(yīng)用到了視覺設(shè)計上,一直延續(xù)至今,在 iOS 12 全面應(yīng)用。
除了 iOS ,Android 的各大廠商也紛紛使用圓角設(shè)計,例如 SAMSUNG 的 ONE UI,都是采用了圓角的設(shè)計語言。
以及國內(nèi)的 MIUI 10 的系統(tǒng)界面設(shè)計同樣使用了圓角作為設(shè)計語言。
相對于其他圖形,人類的眼睛更容易識別圓角矩形而不是直角矩形,因為人在眼睛的生理構(gòu)造上中央凹(fovea centralis,是視網(wǎng)膜中視覺最敏銳的區(qū)域)在處理圓形時最快,而處理矩形邊緣則需要涉及大腦中更多的“神經(jīng)影像工具”[1]。
所以,人眼處理圓角更容易,因為它們看起來比普通矩形更接近于圓。
例如:App Store today頁面,通過圓角的卡片設(shè)計用戶可以快速識別內(nèi)容,但如果換成直角的話則會提升它的識別成本。
在巴羅(Barrow)神經(jīng)學(xué)研究所完成的關(guān)于“角(corners)”的科學(xué)研究發(fā)現(xiàn):“角的突顯性感知與角的度數(shù)的線性變化,銳角比鈍角產(chǎn)生更強的虛幻的突顯性”[2]。
換句話說,角越銳利,看起來就越顯而易見。而角出現(xiàn)的越凸顯,就越多對視覺過程產(chǎn)生影響。
例如:西瓜視頻改版中,將“銳角”的播放按鈕改成了“圓角”的播放按鈕,較少了銳角對用戶的視覺影響。
相對于銳角,圓角顯得更加柔和,具有安全感。尖銳的圖形或者物品更容易應(yīng)用在警惕性的場景里,會給人予以警示或者傷害。
例如危險的標(biāo)示:
圓角自身的圖形屬性則更加柔和、舒適,給人一種安全感和親密,例如:在設(shè)計玩具的時候會采用大量的圓角設(shè)計,來讓家長對其放下戒備心,讓家長覺得這是安全的,可以給孩子玩。試想哪個家長會給孩子一把刀子玩?
現(xiàn)在的少兒用戶群體增長也帶來了不可避免的趨勢,針對少兒用戶,由于群體的特殊性,少兒應(yīng)用 app 中使用了大量的圓角設(shè)計,例如:ABC mouse 中控件都使用了大圓角的設(shè)計,使界面顯得富有童趣,且安全可靠。
圓角在使用地圖或圖表的場景中具有的得天獨厚的優(yōu)勢,圓角的弧度能夠更加平滑的連續(xù)的引導(dǎo)用戶的視線,符合用戶的頭部與眼睛的自然運動,而銳角則會迫使用戶的視線進行強制轉(zhuǎn)折,其中容易造成用戶的停頓。
例如:北京的地鐵地圖,在折線處都采用了圓角設(shè)計,具有很強的引導(dǎo)性,來幫助用戶快速查詢各個地鐵站點。
在一些具有引導(dǎo)性、指向性的圖標(biāo)中大量使用圓角曲線,例如高德地圖的導(dǎo)航界面,轉(zhuǎn)彎 icon 的轉(zhuǎn)折點使用了圓角作為過渡,引導(dǎo)用戶視線。
在卡片上的應(yīng)用中,由于邊緣圓角向內(nèi)指向矩形的中心更加明顯,所以更加凸顯卡片內(nèi)的內(nèi)容。
當(dāng)多個卡片并排時,帶圓角的卡片具有更強的內(nèi)部指向性,且相鄰的兩條線差異化較大,我們可以清楚分辨他們的邊界線,所以更加容易被分辨。而同樣大小的直角矩形的內(nèi)部指向性較弱以及臨近的兩根“線”更加相似,分辨起來會相對困難一些。