在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設計補給站:奧迪,福斯LOGO平面化(上) 字體 ▲ 新 Audi Logo 與字體搭配的準則。 新的 Audi 字體也隨著新的 logo 曝光。Strichpunkt 表示：隨著新的「簡潔有力」的清新風格的 Audi logo。 ▲ Audi 標語的使用範例（總是以小型字體出現在畫面的角落）。 圖標 ▲ 各式新的 Audi UI icons 為線條化設計，靈感來自精確的車輛工程設計圖 而用於網站、app、車用數位裝置的 2D 線條線條化圖標，Strichpunkt 表示設計靈感來源自 Audi 車輛研發設計時，工程師繪出的精確的工程設計圖。 ▲ 新的 Audi UI icons使用範例 影片 ▲ Strichpunkt 替出現於新 UI 介面上的 Audi 影片立下「S 型曲線」原則：「一開始強而有力的加速啟動，然後在結束時迅速減速」。 而所有出現在數位裝置上的 Audi 形象影片動作也都遵循 S 型曲線模式，Strichpunkt 表示「一開始強而有力的加速啟動，然後在結束時迅速減速。」 奧迪也為此新視覺辨識制定了品牌指南，製作「Audi 品牌指南網站」，開放各式資源給大眾免費瀏覽、下載，包含全新設計的 Audi Logo、字體、形象圖片、影片，甚至連 HTML 原始碼、被淘汰的設計都有，讓用戶感到有參與到他們的品牌重塑過程。 現在，Strichpunkt 將在子網域上啟動一個互動式工具，使用戶可以模擬奧迪風格的設計、字型、排版，背景和顏色。然後，該工具會告訴他們：其模擬作品是否符合 Audi 的設計原則與方針。 ▲ 各式新的 Audi 廣告，應用了所有 Strichpunkt 為 Audi 打造的 Logo、構圖、字體、等元素。 Strichpunkt 表示：這一連串的互動式工具，都是為了讓新的 Audi 品牌設計方針「更平易近人」，與 Audi 的新品牌識別「accessible to everyone（每個人都可使用）」相呼應。「這是汽車業的創舉，為新的開放式的象徵（a symbol of new open-ness）」。 本篇為Audi篇下集，下一篇為福斯UI的介紹【不落後於 Audi，福斯跟進「數位優先」視覺辨識與UI】請點此
今天的UI設計補給站要來跟大家介紹大廠汽車的LOGO平面化是怎麼設計的~有興趣的同學請享用~(上) AUDI 的「數位優先（digital-first）」UI 視覺辨識 ▲ 因應 Audi 的「數位優先」品牌重塑計畫，德國設計公司 Strichpunkt 幫 Audi 打造出極簡一致、功能為主的跨平台 UI 介面。主要元素為區塊佈局、簡單配色、獨特的 Audi 字體以及平面化的 Audi 標誌 現今人們上網的媒介已不再侷限於桌上型電腦，手機上網、或是在車上裝設平板電腦上網早已普及。因此德國汽車公司 Audi 早在於2017 年透露了他們的品牌重塑（rebrand）計畫，以「數位優先（digital-first）」為其主軸。 「數位優先（digital-first）」的品牌重塑（rebrand）計畫聚焦於數位裝置的 UI 設計，期望更多用戶，無論是使用平板、手機、桌上型電腦等上網媒介瀏覽 Audi 網站、或是使用 Audi 的 APP 等上網行為，都能有更好的使用者體驗（UX）。德國的設計公司 Strichpunkt 負責這次 Audi 品牌重塑計畫的 UI/UX 設計，並期望讓所有的數位平台 —— 從 Audi 的網站、app 應用程式到車上的數位裝置（包含數位螢幕、聲音 app 及包含智慧手錶在內的所有數位產品等）都維持一致。 ▲ Audi 的「原子設計（atomic design）」基本概念。 此次「品牌重塑」專案可說是顛覆性的翻新，Strichpunkt 創建了新型態的「原子設計（atomic design）」思路：在評估數位設備的外觀時，我們將 Audi 的視角變化應用於設計上面。。 我們的思考過程不只是從最小的設備開始，而且是從設計的最小元素開始。」延續此「原子設計」的設計方法， Strichpunkt 建構出一套功能優先、走極簡風格的 UI 使用者界面。這套新 Audi UI 用戶界面已於 2017 年公開於網路上：任何人都可以從 GitHub 或是 Audi UI Photoshop kit 下載使用 Audi 圖標，UI 組件和字體。 ▲ Audi 的新 UI 介面佈局 簡要概述一下這次 Audi 的新 UI 設計：「介面佈局大至上分為垂直和水平的區塊，以達成視覺上的平衡。內容則顯示在這些方形區塊中；而這些方形區塊也置入於與設備的（螢幕）邊緣隔開的網格中。當這些方形區塊被賦予其他的附加功能時，則被視為「卡片」。為了被使用者重視，所有的元素都在階層式的結構中突出顯示。 ▲ 替 Audi 設計新 Logo 的設計公司 Strichpunkt 上傳的 Audi 品牌重塑影片-展示了 Audi 的品牌形象、字體、網站以及各裝置的 UI 使用者介面。 根據裝置螢幕的大小，Strichpunkt 使用了簡單的黑色、白色、灰色、紅色和不同色階的銀色，以及不同的字體大小。您可以在這裏找到更多有關Audi UI 使用者介面設計的詳細信息。 ▲ Strichpunkt 為了 Audi 的新 UI 設計，所打造的全新 2D 化 Logo、新 Audi 字體、品牌配色；下方則是用於網站、app、車用數位裝置的線條化圖標以及 S 型曲線模式 新的Audi Logo-2D扁平化 ▲ Audi 的新 Logo 由原本的立體風變為 2D 平面風，俐落的外型更適用於嵌入各式各樣的設計。 Strichpunkt 替 Audi 完成了新的 Logo 設計，一改原本的「仿3D」立體設計，而以 2D 的 Logo 取代之。Logo 造型為扁平的四個圈圈、沒有品牌文字在 LOGO 下方、顏色非黑即白。 本篇為Audi篇上集，Audi篇下集【為落實“數位優先”的UI設計...Audi竟將LOGO壓扁了!】請點此
