UI設計中的圓角讓小叮噹和賈伯斯也抵擋不住誘惑!(上)



UI設計中的圓角讓小叮噹和賈伯斯也抵擋不住誘惑!(上)


iphone和多啦A夢中竟然隱藏著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設計!(下)

原來新版身分證的UI也超值得玩味!進來解釋給你聽!(上)

從哆啦A夢到 iPhone...為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 C、Java 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

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

這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

網頁前端CSS必學兩屬性:display與visible

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!