UI設計中的圓角讓小叮噹和賈伯斯也抵擋不住誘惑!(下)
所以人們為何著迷於UI中的圓角設計?這篇有三個說法!
1. 認知負荷論(cognitive load theory)
認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出,他假設人類的認知結構,是由工作記憶和長時記憶組成的。其中,工作記憶也可稱為短時記憶,且容量十分有限,一次只能記下 5~9 條簡單的訊息。
著有《視知覺》(Visual Perception)的瑞士物理學家、藝術家 Jürg Nänni 也曾提出:視網膜中區處理「正圓形」的速度是最快的,而處理多稜角的形狀則較吃力,速度也較慢。
結合以上理論我們可以得知:「圓角」更容易被大腦處理,因為它能夠降低大腦的認知負荷,也有利於在同樣時間內接受更多資訊。故比起一般的矩形,人類的大腦,似乎更願意接納圓潤的圓角矩型。
人眼在擷取資訊時,通常不一定會意識到有視覺動線隱藏其中,但眼睛卻會自然而然地依照視覺動線的設計來移動。
而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線,不會讓人感到突兀與刺眼。
除了心理學,腦科學也指出當面對尖銳的物體時,大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞,有產生情緒的功能,能產生恐懼記憶並引發應急反應,讓身體能逃離危險。
所以,經過演化,其實人類對於形狀銳利的物品往往有先天的排斥,如會連想到尖銳物的方角矩型;對於有曲線的圓融物體則會有較高的接納度,讓圓角矩型不被人腦淺意識抗拒。
我們已經知道了圓角佔有許多先天優勢,但並非一股腦地選擇圓角就是正確答案。
在 UI 設計的領域,需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等,今天企業若要一切都端正穩重,那圓角就不一定是最佳解答;並且若是矯枉過正,使用弧度過大的圓角可能會看起來不專業,造成反效果。
UI設計師能塑造出怎麼樣的品牌視覺,背後有許多的「眉眉角角」,像各行各業一樣,需要不斷吸收新知、訓練思考,長時間累積自我的美學素養!
本篇為下篇,上篇請點此連結
相關文章:
UI設計中的圓角讓小叮噹和賈伯斯也抵擋不住誘惑!(上)
關於十月將入手的新身分證,今天來探討它的UI設計!(上)
原來新版身分證的UI也超值得玩味!進來解釋給你聽!(下)
從哆啦A夢到 iPhone...為何 UI 設計用「圓角」就是比較討喜?
APCS 程式檢定,該從 C、Java 還是 Python 下手?
【前端工程師CSS教學】float浮動屬性
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍
認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出,他假設人類的認知結構,是由工作記憶和長時記憶組成的。其中,工作記憶也可稱為短時記憶,且容量十分有限,一次只能記下 5~9 條簡單的訊息。
著有《視知覺》(Visual Perception)的瑞士物理學家、藝術家 Jürg Nänni 也曾提出:視網膜中區處理「正圓形」的速度是最快的,而處理多稜角的形狀則較吃力,速度也較慢。
結合以上理論我們可以得知:「圓角」更容易被大腦處理,因為它能夠降低大腦的認知負荷,也有利於在同樣時間內接受更多資訊。故比起一般的矩形,人類的大腦,似乎更願意接納圓潤的圓角矩型。
2. 視覺動線論
視覺動線是指在讀取眼前資訊時,視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。人眼在擷取資訊時,通常不一定會意識到有視覺動線隱藏其中,但眼睛卻會自然而然地依照視覺動線的設計來移動。
而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線,不會讓人感到突兀與刺眼。
3. 曲線偏坦論(Contour Bias)
最後,以演化心理學的觀點來看,人在面臨可能造成危害的事物時,會湧現出恐懼、不安與抗拒的情緒,這是人類經歷長時間的演化後遺傳下來的「適應體」,目的是幫助我們存活,提高生存機會。除了心理學,腦科學也指出當面對尖銳的物體時,大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞,有產生情緒的功能,能產生恐懼記憶並引發應急反應,讓身體能逃離危險。
所以,經過演化,其實人類對於形狀銳利的物品往往有先天的排斥,如會連想到尖銳物的方角矩型;對於有曲線的圓融物體則會有較高的接納度,讓圓角矩型不被人腦淺意識抗拒。
圓角不是萬靈丹 善用不濫用才是好的 UI
我們已經知道了圓角佔有許多先天優勢,但並非一股腦地選擇圓角就是正確答案。
在 UI 設計的領域,需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等,今天企業若要一切都端正穩重,那圓角就不一定是最佳解答;並且若是矯枉過正,使用弧度過大的圓角可能會看起來不專業,造成反效果。
UI設計師能塑造出怎麼樣的品牌視覺,背後有許多的「眉眉角角」,像各行各業一樣,需要不斷吸收新知、訓練思考,長時間累積自我的美學素養!
本篇為下篇,上篇請點此連結
相關文章:
UI設計中的圓角讓小叮噹和賈伯斯也抵擋不住誘惑!(上)
關於十月將入手的新身分證,今天來探討它的UI設計!(上)
原來新版身分證的UI也超值得玩味!進來解釋給你聽!(下)
從哆啦A夢到 iPhone...為何 UI 設計用「圓角」就是比較討喜?
APCS 程式檢定,該從 C、Java 還是 Python 下手?
【前端工程師CSS教學】float浮動屬性
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍