圖形是產(chǎn)品設(shè)計(jì)中被討論得最多的元素之一。視覺設(shè)計(jì)師使用不同形狀的圖形來表達(dá)事物的多樣性；交互設(shè)計(jì)師選擇不同形狀的圖形，解決用戶在某場(chǎng)景下的訴求問題。其中爭(zhēng)議大，且被更多互聯(lián)網(wǎng)設(shè)計(jì)師使用的圖形，是圓角矩形。而當(dāng)中的討論點(diǎn)是：同樣的圖形，圓角處理與直角處理所傳遞的信息有什么不同？為什么圓角成了趨勢(shì)？

許多人認(rèn)為圖形外框的多樣化趨勢(shì)是由 CSS 技術(shù)的革新開始，但正確的時(shí)間點(diǎn)，應(yīng)該是在 iPhone 4 被發(fā)布的那一刻。

當(dāng)中的差異是：前者是通過技術(shù)參數(shù)來改變形狀內(nèi)容以引起用戶注意；后者是通過傳播真實(shí)產(chǎn)品塑造用戶對(duì)于圖形外觀的全新認(rèn)知。認(rèn)知的轉(zhuǎn)變，需作用于習(xí)慣與行為，而當(dāng)中的核心手段，就是設(shè)計(jì)。（參考滴滴類產(chǎn)品改變?nèi)说某鲂蟹绞剑?/p>

用戶對(duì)于一款產(chǎn)品的認(rèn)知，主要依據(jù)產(chǎn)品所能解決的實(shí)際問題以及外在形式。而設(shè)計(jì)師需要關(guān)注的點(diǎn)會(huì)更多，包括產(chǎn)品架構(gòu)，流程，技術(shù)等內(nèi)容。同時(shí)還需要站在用戶視角觀測(cè)產(chǎn)品是否易于使用，我們通常將其稱為「用戶心理模型」。類比于用戶只需了解手表是否正常走動(dòng)，能否準(zhǔn)點(diǎn)報(bào)時(shí)，設(shè)計(jì)師則需要理解手表設(shè)計(jì)框架，結(jié)構(gòu)形式等詳細(xì)內(nèi)容。其中最重要的，還是一名設(shè)計(jì)師對(duì)內(nèi)容的全局認(rèn)知。

回到圖形外觀的話題上，同樣的道理，人們對(duì)于產(chǎn)品設(shè)計(jì)中的圖形使用已經(jīng)逐漸理想化，好比圖形外觀的形式如何已經(jīng)不重要，重要的是圖形所傳遞的信息本身。這樣的認(rèn)知稍顯片面，對(duì)于設(shè)計(jì)師而言，圖形以圓角形式呈現(xiàn)的背后邏輯，比表面上它所表達(dá)的信息更為重要。理解這一點(diǎn)之后，設(shè)計(jì)師再使用圓角矩形傳遞信息，理解上會(huì)更顯深刻。

所以我后面會(huì)圍繞下面這幾個(gè)問題，來說明圓角矩形的意義：

為什么 iPhone 4 的發(fā)布是圓角矩形成為設(shè)計(jì)趨勢(shì)的轉(zhuǎn)折點(diǎn)？

圓角矩形傳遞的信息有什么不同之處？

頭像與按鈕為什么越來越多地使用圓角？

圓角矩形為何成為趨勢(shì)

雖然在 iPhone 4 發(fā)布時(shí)，大多數(shù)的軟件圖標(biāo)都還是擬物風(fēng)，但它們的圖形外框大多是以圓角矩形的方式來處理。在 iOS 系統(tǒng)里，這種圓角矩形的載體已經(jīng)成了其系統(tǒng)統(tǒng)一承載內(nèi)容的形式。

也許有人會(huì)問為什么 Apple 選擇了這樣的呈現(xiàn)方式，而不跟 Android 一樣，為了體現(xiàn)內(nèi)容的豐富性，讓圖標(biāo)外框多樣化呢？原因有兩個(gè)。

其一是喬布斯認(rèn)為所有物件都有圓角，而相比圓形與橢圓，圓角矩形反而是生活中更為常見的現(xiàn)象。

Andy Hertzfeld 在 Round Rects Are Everywhere 中講了關(guān)于圓角矩形誕生的故事。

Apple 的天才程序員 Bill Atkinson 創(chuàng)立了一種能夠快速繪制圓形與橢圓的方法，喬布斯認(rèn)為圓形與橢圓都不錯(cuò)，但是圓角矩形會(huì)更好。而 Bill Atkinson 并不這么認(rèn)為，他覺得圓角矩形更難繪制，且人們也不需要圓角矩形。于是，喬布斯回應(yīng)道：「到處都是帶有圓角的矩形！」他指著房間里的各種物件，幾乎所有地方都可以看到圓角矩形。他甚至說服 Bill 和他一起繞著街區(qū)走一圈，指出他能找到的每個(gè)帶有圓角的矩形。當(dāng)他們看到帶有圓角的禁止停車的標(biāo)示時(shí)，Bill 終于被喬布斯說服，第二天就拿出了繪制圓角矩形的方案。

之后，他們將其命名為「RoundRects」。在接下來的幾個(gè)月里，Roundrects 逐漸進(jìn)入用戶界面的各個(gè)部分，并很快變得不可或缺。

尤其是在 13 年，iOS 7 對(duì)圓角的更新。它已經(jīng)與我們平時(shí)認(rèn)為的圓角矩形不同，這個(gè)圓角的優(yōu)化過程非常復(fù)雜，當(dāng)中涉及的數(shù)學(xué)算法如果不是專業(yè)的研究學(xué)者，可能無法理解其差異。

簡(jiǎn)單來說，Apple 采用的圓角曲率所生成的圖形，是更圓滑，無明顯切角的。這樣的圓角矩形在過渡上更平滑，且在視覺上的體驗(yàn)也更融洽。

其二是，為了打造沉浸式體驗(yàn)，喬布斯認(rèn)為應(yīng)該讓 iPhone 的各個(gè)元素形式統(tǒng)一化。

與上述圓角圖標(biāo)相似的是 iPhone 機(jī)身。

iPhone 機(jī)身所呈現(xiàn)的圓角在制作工藝上，比軟件圖標(biāo)的圓角更為復(fù)雜。而其內(nèi)外一致的表現(xiàn)形式就是為了打造沉浸式體驗(yàn)，形成產(chǎn)品的品牌認(rèn)知。而 iPhone X 的面世，就是為了將這一概念徹底落實(shí)。

前面提到，用戶與設(shè)計(jì)師對(duì)于一款產(chǎn)品的認(rèn)知是不同的。用戶認(rèn)識(shí)一款產(chǎn)品，首先關(guān)注的是外觀表現(xiàn)，其次才是被承載的內(nèi)容。所以當(dāng)用戶對(duì) iPhone 以及其軟件圖標(biāo)的展示形式已經(jīng)形成認(rèn)知，那么 iPhone X 的全面屏也就是很自然的一種結(jié)果。

機(jī)身形態(tài)與軟件形式的自然結(jié)合，能夠讓用戶更好的接受產(chǎn)品的外在形式，且其全面屏的設(shè)計(jì)也能更好地被用戶認(rèn)可。甚至被很多人吐槽的 iPhone X 齊劉海也是依據(jù)這樣的圓角形式來設(shè)計(jì)的，目的就是為了營造統(tǒng)一的產(chǎn)品形態(tài)。

以至于其他一些產(chǎn)品在機(jī)身上的模仿，導(dǎo)致讓人誤以為類似的工業(yè)特性所產(chǎn)生的第一直覺都是「這是一款 iPhone」，仔細(xì)一看才知道，噢，原來是……

當(dāng)一款真實(shí)的產(chǎn)品被人所接受，以普遍使用在生活場(chǎng)景中，其中逐漸營造出用戶對(duì)圓角矩形的慣性認(rèn)知，以至于它的可接受度也逐漸提高。

這也是我在開篇提到說「iPhone 4 的發(fā)布奠定了圓角矩形成為設(shè)計(jì)流行趨勢(shì)的基調(diào)」的原因。

到這為止還只是背景，下面我們?cè)偕钊肓牧奶匦浴?/p>

圓角矩形所傳遞的信息特性

上節(jié)講述了圓角矩形興起的背景，當(dāng)然這只是一部分，圓角矩形成為流行趨勢(shì)，不能說完全是因?yàn)?Apple。還有一點(diǎn)是，它自身本就具備的優(yōu)勢(shì)。

上面提到喬布斯說服比爾，要有圓角矩形，因?yàn)樯钪械教幎际菆A角矩形。但是這里有一個(gè)問題沒有解決，即「為什么生活中到處都是圓角矩形」呢？

玩 3D 工具的人應(yīng)該知道，在 C4D 等軟件里，想要對(duì)一件物體創(chuàng)建圓角通常是選擇「倒角」，再控制「段數(shù)」，之后通過「平滑」選項(xiàng)，將角度變得更為圓滑（當(dāng)然還有其它方式）。目的是在渲染的時(shí)候不至于讓物體看起來太尖銳，色澤也更通透。

在生活中，物件棱角如果過于鋒利，則顯得不夠安全。工業(yè)角度，圓角/倒角可以讓物件更好組裝。相比棱角過于尖銳以至于讓人覺得冰冷，圓角的設(shè)計(jì)反而讓人更能感受到溫度。所以對(duì)于推崇自然至上的喬布斯，在選擇元素時(shí)，也會(huì)希望能貼近生活。

從視覺，觸感，便捷等因素能了解到真實(shí)物件的圓角優(yōu)勢(shì)，但優(yōu)勢(shì)是否適用于圖形元素呢？

這里有個(gè)相通點(diǎn)，即虛擬圖形依附于視覺而存在。人眼在接收?qǐng)D形信息時(shí)，對(duì)圓角矩形的認(rèn)知會(huì)優(yōu)于直角矩形。因?yàn)槿搜劢Y(jié)構(gòu)中辨識(shí)力最強(qiáng)的部位，會(huì)優(yōu)先識(shí)別圖形的視覺中心。而圓角與直角矩形的區(qū)別就在于內(nèi)容速度的識(shí)別差異。

之所以存在這樣的差異，主要是因?yàn)閳D形存在視覺引導(dǎo)的作用。圓角因?yàn)槠淦交乃倪?，將用戶的視線過渡到圖形中心，而直角矩形因?yàn)榧怃J的特性，導(dǎo)致人眼在圖形識(shí)別上容易發(fā)散。因此，在圖形元素的選擇上，為了讓用戶聚焦，圓角則獲得了設(shè)計(jì)師的青睞。

所以之后在其它設(shè)計(jì)系統(tǒng)與設(shè)備上，更多圓角類圖形也被投入使用。尤其是在各類 App 與網(wǎng)頁設(shè)計(jì)中，圓角矩形更是被廣泛應(yīng)用于頭像、按鈕等元素上。

頭像與按鈕的圓角含義

隨著互聯(lián)網(wǎng)產(chǎn)品的普及，人們對(duì)于產(chǎn)品界面的審美意識(shí)與體驗(yàn)意識(shí)逐漸提高，界面的視覺呈現(xiàn)也成了互聯(lián)網(wǎng)公司所重視的對(duì)象。頭像作為產(chǎn)品界面中用于身份信息識(shí)別的主要元素，一直是用戶以及設(shè)計(jì)師最為關(guān)注的內(nèi)容之一。

因此，對(duì)頭像外框形狀的選擇尤其謹(jǐn)慎。當(dāng)中最為常見的主要有兩類：圓形、圓角矩形。所以在進(jìn)行選擇時(shí)，設(shè)計(jì)師除了針對(duì)于兩類圖形依附于界面本身的視覺效果外，還需整體考量圖形與界面元素的融合程度進(jìn)行綜合分析。至于直角矩形，目前很少會(huì)見到其用于頭像的設(shè)計(jì)上。

以圓形的表現(xiàn)形式而言，其周圍沒有任何節(jié)點(diǎn)與棱角，給人以靈動(dòng)、均衡、平滑、優(yōu)美的感受，通常會(huì)在帶有設(shè)計(jì)感或內(nèi)容元素較為豐富的產(chǎn)品上出現(xiàn)，如 ins、微博、知乎等。相比圓形而言，棱角尖銳的直角矩形給以人沉著、冷靜、拘謹(jǐn)、冰冷的感受，所以很少產(chǎn)品會(huì)將其作為展示型頭像開放給用戶使用。而圓角矩形正好中和了這兩者的氣質(zhì)，也成了很多產(chǎn)品選其作為頭像的原因。通常這類頭像會(huì)出現(xiàn)在設(shè)計(jì)較為簡(jiǎn)約的界面上，如微信首頁的用戶頭像。

無論是圓形頭像，還是圓角矩形頭像，其最終目的無非是身份識(shí)別以及彰顯個(gè)性。上節(jié)聊過，圓角在識(shí)別上會(huì)引導(dǎo)用戶傾向于圖形的視覺中心，而頭像作為辨識(shí)身份的信息，并不需要仔細(xì)審視，只需要快速識(shí)別即可。所以只有在點(diǎn)擊用戶頭像時(shí)，才會(huì)以矩形形式完整呈現(xiàn)。

這里有一個(gè)點(diǎn)是，當(dāng)圓角矩形以頭像形式出現(xiàn)在界面中時(shí)，通常是以小圖的方式呈現(xiàn)。因此，當(dāng)小圖集中于元素復(fù)雜的界面中時(shí)，圓角矩形犧牲了構(gòu)圖結(jié)構(gòu)，省略了四邊內(nèi)容背景反而成為了優(yōu)勢(shì)，信息與細(xì)節(jié)明顯少于直角矩形，以至于在界面上幫助用戶更快識(shí)別頭像內(nèi)容，判斷圖形有用信息。

所以在頭像的形狀選擇上，圓角矩形的優(yōu)勢(shì)會(huì)明顯高于其他圖形。而圓形與圓角矩形的差異就是上述提到的，要根據(jù)界面元素的豐富性、設(shè)計(jì)感等因素進(jìn)行抉擇。

但是這里還有個(gè)思考點(diǎn)，就留個(gè)各位自己思考了。如果仔細(xì)觀察各類產(chǎn)品，去尋找圓形頭像與圓角矩形頭像的區(qū)別，那么在頭像尺寸上，也可以看到一些秘密。

原本我還想再以按鈕為例解讀圓角直角的差異，不過仔細(xì)回顧內(nèi)容之后自認(rèn)為已經(jīng)非常詳細(xì)，相信各位自己也能去做好分析，所以就不增長篇幅了。有興趣的同學(xué)，可以自己做一波分析。

當(dāng)前題目：圓角矩形為什么能成為設(shè)計(jì)趨勢(shì)？
標(biāo)題網(wǎng)址：http://www.rwnh.cn/news/32356.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、電子商務(wù)、定制開發(fā)、云服務(wù)器、網(wǎng)站維護(hù)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)