圓角設計的優勢是什么?為什么喬布斯和淘寶都喜歡它

4 評論 15317 瀏覽 53 收藏 9 分鐘

圓角設計在生活中是比價常見的設計了,在手機、網頁端我們都能看到圓角設計。可是你有想到為什么圓角設計這么受大家喜歡嗎?圓角設計的優勢是什么?本文作者從五個方面對圓角設計進行了分析梳理,總計了圓角設計的優勢,與大家分享。

前言

Steve Jobs 說服 Bill Atkinson 畫出圓角矩形

早在1981年,當時 Apple 的天才程序員 Bill Atkinson 正向團隊展示他是如何用一種聰明的方法可以在僅有 68000 處理器的 Lisa 和 Macintosh 機器上快速畫出圓和橢圓;

Steve Jobs 看了之后有另外的想法,他說:“圓和橢圓都不錯,但是能畫出帶圓角的四邊形嗎?我們現在也能畫出嗎?”

Bill Atkinson 回答說很難做到,而且他認為并不真需要圓角四邊形;

Steve Jobs 就立刻強烈回應了:“到處都是圓角四邊形!看看這個房間周圍就知道了!”并且還帶著 Bill Atkinson 出去轉看可以碰到多少圓角四邊形,最后 Bill Atkinson 被說服,第二天下午就拿出了滿意的結果。

淘寶廣泛使用圓角卡片

再到21世紀的你,年年都逛淘寶雙十一,在瀏覽心儀的寶貝的時候,不知道你有沒有發現淘寶界面默默的完成了進一步的改版,對比之前的“99劃算節”現在的界面中圓角卡片已經在產品中得到了廣泛的運用。

為什么淘寶會選擇圓角卡片作為自己重要的設計組件?它的優勢是什么?

圓角卡片的優勢

1. 設計趨勢

正如 Steve Jobs 在1981年所說:到處都是圓角四邊形看看這個房間周圍就知道了!我們可以縱觀近年來各大廠商發布的旗艦手機,在工業設計上的角度來看基本都采用了更加柔和的圓角設計。例如iPhone、SAMSUNG、小米、VIVO等等……

在屏幕設計上同樣選擇了圓角設計,在細節之處也保持了高度的統一,例如iPhone在攝像頭位置的連接處同樣采用了圓角弧度作為過渡??梢妶A角設計的應用已經在工業設計的中的成為了非常重要的設計語言。

2. 眼睛更易識別

相對于其他圖形,人類的眼睛在識別圓角弧形的時候更加容易。因為人眼睛的生理構造上的中央凹 (是視網膜中視覺最敏銳的區域) 在處理圓形時最快,而處理矩形邊緣則需要涉及大腦中更多的“神經影像工具”。

所以,人眼在處理圓角矩形更加容易,因為它們看起來比普通矩形更接近于圓。

例如在 App Store 中 today頁面,每天推送的內容通過圓角的卡片設計呈現給用戶,可以快速識別當前模塊,但如果換成直角的話,我們發現相對于圓角卡片它的識別成本明顯增加。

3. 感覺更安全

圓角自身的圖形屬性則更加柔和、舒適,給人一種安全感和親密。而尖角則給人一種尖銳、具有攻擊性的感覺,我們可以回憶一下日常比較尖銳的物體,例如剪刀、刀子、警示牌等等,都會給人造成傷害或者警示他人。

在設計玩具的時候會采用大量的圓角設計,來讓家長對其放下戒備心,讓家長覺得這是安全的,可以給孩子玩。事想哪個家長會給孩子一把刀子玩?

4. 信息更容易處理

在圓角矩形中,由于邊緣圓角向內指向矩形的中心更加明顯,所以使用圓角卡片更加凸顯卡片中內的內容。如圖例:

當多個卡片并排時,帶圓角的卡片具有更強的內部指向性,且相鄰的兩條線差異化較大,我們可以清楚分辨他們的邊界線,所以更加容易被分辨;

而同樣大小的直角矩形的內部指向性較弱以及臨近的兩根“線”更加相似,分辨起來會相對困難一些。

5. 便于實行組件化管理

圓角卡片有利于實行組件化管理,首先圓角卡片作為組件化主要載體之一,具有良好的延展性,能適應不同的使用場景。

例如淘寶首頁和微淘頁面,前者作為整個 App 主要流量入口、后者擔當內容社區的角色,兩者功能相差甚大,但通過圓角卡片都能滿足兩者的需求。

其次圓角卡片通過對內容進行規劃組織使得各業務線的內容更加統一,內容之間的層級更加明顯,信息之間有明確的主次順序關系,邏輯關系更加清晰,便于用戶識別。

劃重點

  1. 圓角卡片更容易被人眼識別;
  2. 圓角給人感覺更加安全;
  3. 圓角卡片具有內指向性,人們對于圓角卡片更容易識別4.圓角卡片的廣泛使用便于組件化的管理。

#參考文章#

  1. 為什么我們都應該學會組件化設計思維? https://www.uisdc.com/component-design-thinkin
  2. Material Design 2來了?比圓更圓,圓了又圓 https://zhuanlan.zhihu.com/p/35063573
  3. 從圖標轉角論親和力的差異 【含圖標教程】 https://www.zcool.com.cn/article/ZNDcwNTI4.html
  4. 無框界面 https://zhuanlan.zhihu.com/p/24771017
  5. 用戶體驗設計之圓角和直角 http://blog.sina.com.cn/s/blog_5d7170af0101dnpk.html
  6. 淺析圓角特征在產品設計中的應用-嚴偉杰 http://www.doc88.com/p-9592118891884.html
  7. 從圓角角到圓角 https://mp.weixin.qq.com/s/j3iAigMJitiIT2yfBHF3CA
  8. 西瓜視頻 3.0改版總結 https://www.zcool.com.cn/work/ZMzExMTcxMDg=.htm

 

本文由 @ 姜正 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 總之,一句話,好看。

    回復
  2. 從心理學角度,圓角與直角相比,容易誘發積極情緒。

    回復
    1. 厲害厲害滴~~

      來自上海 回復
  3. 文章分析通俗易懂,相比于“矩形”這種幾何形狀,“圓角矩形”更趨向于有機形態,有機形態更符合本能層面的認知,自然、和諧

    來自江蘇 回復