為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)

為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)
為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)

想當UI設計的你不可不知圓角設計的秘密!!圓角設計真的有比較好嗎?(下)

本篇為上篇,下篇請點此為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)

1. 認知負荷論(cognitive load theory)

認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出,他假設人類的認知結構由工作記憶和長時記憶組成。其中工作記憶也可稱為短時記憶,容量十分有限,一次只能記下 5~9 條簡單的訊息。

著有《視知覺》(Visual Perception)的瑞士物理學家、藝術家 Jürg Nänni 也曾提出:視網膜中區處理「正圓形」是最快速的,而處理多稜角的形狀則較吃力,速度也較慢。

結合以上理論我們可以得知:「圓角」更容易被大腦處理,因為它能夠降低大腦的認知負荷,也有利於在同樣時間內接受更多資訊。故比起一般的矩形,人類的大腦更願意接納圓潤的圓角矩型。

2. 視覺動線論

視覺動線是指在讀取眼前資訊時,視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。

人眼在擷取資訊時,通常不一定會意識到有視覺動線隱藏其中,但眼睛卻會自然而然地依照視覺動線的設計來移動。

而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線,而不會感到突兀與刺眼。

3. 曲線偏坦論(Contour Bias)

以演化心理學的觀點來看,人在面臨可能造成危害的事物時,會湧現出恐懼、不安與抗拒的情緒,這是人類經歷長時間的演化後遺傳下來的「適應體」,目的是幫助我們存活,提高生存機會。

除了心理學,腦科學也指出當面對尖銳的物體時,大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞,有產生情緒的功能,能產生恐懼記憶並引發應急反應,讓身體能逃離危險。

所以,人類對於形狀銳利的物品往往有先天的排斥,如會連想到尖銳物的方角矩型;對於有曲線的圓融物體則會有較高的接納度,讓圓角矩型不被人腦淺意識抗拒。

圓角不是萬靈丹 善用不濫用才是好的 UI

我們已經知道了圓角佔有許多先天優勢,但並非一股腦地選擇圓角就是正確答案。

在 UI 設計的領域,需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等,今天企業若要一切都端正穩重,那圓角就不一定是最佳解答;並且若是矯枉過正,使用弧度過大的圓角可能會看起來不專業,造成反效果。

UI師能塑造出怎麼樣的品牌視覺,背後有許多的「眉眉角角」,需要不斷吸收新知、訓練思考,長時間累積自我的美學素養。

 

更多UI或其他程式語言相關文章請點下方連結!!

 

 

 

其他閱讀

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

CSS教學-displayvisible屬性介紹

Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!()

不懂網站前端在做甚麼?零基礎學員非讀這篇不可!!

人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?()

為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)

為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)
為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)

想當UI設計的你不可不知圓角設計的秘密!!圓角設計真的有比較好嗎?(上)

「圓角矩形」是近年盡人皆知的 UI 設計優勢,自 iPhone 4 發售至今日,到處都可以看到這個乍看簡單、但其實富有深意的幾何圖形。

然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢?箇中緣由,其實也藏在哆啦 A 夢身上!

「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示,任何圖形設計元素如形狀、線條、顏色、紋理和圖案,都能淺移默化地影響人們的感官認知,從而讓平面圖形附上不同的喻意。

乍聽之下有點形而上學,但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色,也都被賦予了「幾何暗示」!

三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示


▲ 哆啦 A 夢中的五個角色造型都跟個性息息相關(圖片取自 flickr)
 

 

陪伴許多人長大的國民作品《哆啦 A 夢》(ドラえもん),其中的主要角色個個形象鮮明、深入人心,是運用幾何圖形設計角色的好範例:

自戀愛現、在狡猾的同時又常有鬼點子的小夫,從是身形、嘴形到髮型都呈現三角形;而個性粗暴、蠻不講理,但在緊要關頭時又展現了正直的胖虎,無論臉型與身體都呈現寬大的方型。

至於個性善良溫柔、富有同情心的靜香,臉型與整題造型都較圓潤,沒有稜角;至於最備受喜愛的哆啦 A 夢,整個角色從頭到手都是圓型設計。

▲藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象。

不只日本,歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底,藉此創造出引人入勝、個性鮮明的角色,足見一個好的幾何設計所具有的優勢。

卡通之外 賈伯斯也瘋狂的圓角設計

不只卡通動漫畫之外,許多商業產品也為了讓客戶留下良好的第一印象,採用親民的圓角設計。

話說從頭,要談圓角矩型,就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為:所有物件都有圓角,而且相較於圓形與橢圓形,圓角矩形設計在生活中其實更為常見。

▲ 2020 年發售的 iPhone SE 依然保留標誌性的圓角設計。

1981 年,Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁:「圓角的矩形很難用電腦技術畫出來,而且又不必要!」

Steve Jobs 二話不說便把 Bill 從座位上拉起來,指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街,指出大街小巷每個小角落的圓角矩形給他看:「你看,到處都有圓角矩形!」

最後,在一個「禁止停車」的圓角矩形路標牌被指出來後,Bill 認輸了。「好啦,我放棄。我回去看看是不是真的跟我想像的一樣困難。」

隔天下午,Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡,這個幾何圖形已經成為其 UI 介面傳承的一部分。

不只是「好看」 圓角設計的背後深意

近年 3C 產品硬體設計上都大量使用圓角,UI 介面設計也順其自然地大量採用圓角。除了是為了要「跟上潮流」,圓潤的造型也的確讓產品設計加分。舉凡服務性產品、企業官網、社群媒體、網路商店等,需要 UI 介面的地方全都導入圓角設計。但是圓角「好看」的背後,到底是什麼原因?

人們為何會熱愛圓角的科學根據尚未定論,大致有以下三種說法:

 

本篇為上篇,下篇請點此為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)

更多UI或其他程式語言相關文章請點下方連結!!

 

 

 

其他閱讀

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

CSS教學-displayvisible屬性介紹

Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!()

不懂網站前端在做甚麼?零基礎學員非讀這篇不可!!

人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?()

你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?(下)

你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?(上)
你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?(上)

你沒想過可代的萌寵也能成為人工智慧的訓練師對吧!!今天要帶大家來一探究竟喔~(下)

本篇為上篇,下篇請點此你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?(上)

讓機器人能自立自強的人工智慧技術

而 Google 研究人員的下一個目標,就是如何用最少的人力、讓機器人在現實世界中正常運作。

儘管機械手臂的技術已經大有突破,比如同樣為 Google 研發人員設計的分散式 Q 學習演算法(QT-Opt)。但是,將相同的方法應用於四足機器人卻很困難,因四足機器人更可能會因事故損壞自身、離開訓練區域,相較之下更需要人工干預。

▲四足機器人的自動化學習系統面臨安全性與自動化的挑戰。

首先研究人員通過多任務學習(multitask learning)生成,將機器人驅動到工作空間,防止機器人離開訓練區域;並通過設計安全約束,將機器人跌倒的次數降到最低。

例如:若當前有兩項任務,「向前」與「向後」行走。如果機器人處在工作區的後面,調度程序將選擇「向前」任務,反之亦然。如果機器人掉落,則將調用自動起身控制器,接著進行下一個任務。

該框架成功地訓練了從無到有的策略,無需人工干預,機器人就可以朝不同的方向走,還使機器人能挑戰非平坦的地面,例如記憶泡棉床墊和鏤空的地墊。

四足機器人的未來展望

四足機器人能夠像真正的狗一樣走路,但依然有不足之處:由於算法和硬體的限制,它不能完成高度動態的行為,如大幅度的跳躍。也不比全手動設計的控制器穩定;並且絆倒後雖能重新站起來,但仍然不甚靈活。

不過即使如此,研究人員相信,他們的方法可以促進人工智慧機器人的發展,未來更能獨立運作,足以完成現實世界中的工作,像是在多層倉庫或是訂單履行中心裡運輸物料;並表示,未來也有興趣繼續研發,將自動培訓系統應用於更複雜的現實環境中。

 

更多人工智慧相關文章請點閱下方連結!!

 

 

 

其他閱讀

AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍

CSS教學-display與visible屬性介紹

用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

新一代Google人工智慧眼鏡功能大進化!還兼具外型喔~(上)

台灣人工智慧學校創辦人陳昇瑋英年早逝!

人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?(上)

你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?(上)

你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?(上)
你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?(上)
你沒想過可代的萌寵也能成為人工智慧的訓練師對吧!!今天要帶大家來一探究竟喔~(上)

 

 

Google 人工智慧研究團隊最新發表的機器人研究日誌中,詳細介紹了他們所研發的四足機器人如何流暢動作和透過 AI 技術自學行走。目前的機器人仍需要許多人工參與,而 Google 建立的技術,讓機器人只需 8 分鐘的動作資料,就能自己學會向前、向後以及左右轉彎等運動,再也不用常常得扶起翻倒的機器人。

Google人工智慧研究員讓機器人「向狗學習」

為了開發出行動敏捷、不需要人工協助的機器人,Google 的人工智慧機器人研究科學家可說是絞盡腦汁,在觀察到自然界各種動物矯健又不費力的身手後──如翻身飛躍咬住飛盤的狗兒;研究人員決定向大自然取經,讓這些動作靈巧的小生物擔任機器人的老師,學習快速流暢的動作。

運動模仿、強化學習與自適應控制技術

研究人員先建立一套能夠模仿學習的人工智慧技術,旨在讓四足機器人可以通過模仿真實世界的狗來學習敏捷的動作。

首先,研究人員捕捉真狗的各種動作,諸如小跑、跳躍與起身等等, 做為機器人執行各種技能的參考運動,並使用強化學習(Reinforcement Learning;RL)技術訓練控制策略,以仿效真實狗狗的動作。

▲強化學習技術用於訓練模擬機器人來仿效狗的動作。

在物理模擬的策略訓練上,通過對不同的參考運動使用不同的獎勵函數,在每個連續時步密切跟蹤參照的動作,訓練模擬機器人模仿各種不同的動態。

研究人員先在模擬環境完成訓練機器人的策略,接著再使用自適應控制技術(Adaptive control)將訓練好的策略實現在真實世界中,利用真實機器人的資料,高效地自適應策略,使研究人員能「教」一台四足機器人快走、跳躍或轉彎。

但由於模擬終究無法匹敵真實,模擬中訓練的策略應用在真實機器人上效果不甚佳。

為此,研究人員使用潛在空間(Latent Space)適應技術,通過改變機器人的質量和摩擦等物理量來隨機化模擬訓練中的動力學,將數值用編碼器映射到一個數字表示(即編碼),在訓練過程中將此編碼作為附加輸入傳遞給控制策略,當將該策略部署到一個真實的機器人上時,研究人員刪除編碼器,並直接在潛在空間中搜索一組允許機器人成功執行技能的變量。

這個方式十分成功,讓機器人能夠成功地執行現實世界中所需的動作。並且只要有 8 分鐘的資料供機器人參照,不只能從影片學會狗的走路動態,即使是動畫師製作的動畫,機器人也能從中學會轉頭等的複雜動作。

 

本篇為上篇,下篇請點此你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?(下)

更多人工智慧相關文章請點閱下方連結!!

 

 

 

其他閱讀

AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍

CSS教學-display與visible屬性介紹

用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

新一代Google人工智慧眼鏡功能大進化!還兼具外型喔~(上)

台灣人工智慧學校創辦人陳昇瑋英年早逝!

人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?(上)