UI的視覺辨識,AUDI"數位優先"是怎麼做的?

UI的視覺辨識,AUDI"數位優先"是怎麼做的?

 

 

AUDI 的「數位優先(digital-first)」UI 視覺辨識

devices-2200px.jpg
▲ 因應 Audi 的「數位優先」品牌重塑計畫,德國設計公司 Strichpunkt 幫 Audi 打造出極簡一致、功能為主的跨平台 UI 介面。主要元素為區塊佈局、簡單配色、獨特的 Audi 字體以及平面化的 Audi 標誌

 

如今人們上網的媒介不再侷限於桌上電腦,使用手機上網、或是在車上裝設平板上網已越來越普及。因此德國汽車公司 Audi 早在2017 年透露了他們的品牌重塑(rebrand)計畫,以「數位優先(digital-first)」為主軸。

「數位優先(digital-first)」的品牌重塑計畫,聚焦於數位裝置的 UI 設計,他們期望更多用戶,不論是使用平板、手機,還是桌上型電腦,透過各類上網媒介瀏覽 Audi 網站、或是使用 Audi 的 APP 等上網,都能有更好的使用者體驗(UX)。德國的設計公司 Strichpunkt 負責這次 Audi 品牌重塑計畫的 UI/UX 設計,並期望讓所有的數位平台 —— 從 Audi 的網站、app 應用程式到車上的數位裝置(包含數位螢幕、聲音 app 及包含智慧手錶在內的所有數位產品等)都維持一致。

basic-of-atomic-design (1).jpg
▲ Audi 的「原子設計(atomic design)」基本概念。

此次「品牌重塑」專案可說是顛覆性的翻新,Strichpunkt 創建了新型態的「原子設計(atomic design)」思路:在評估數位設備的外觀時,我們將 Audi 的視角變化應用於設計上面。。 我們的思考過程不只是從最小的設備開始,而且是從設計的最小元素開始。」延續此「原子設計」的設計方法, Strichpunkt 建構出一套功能優先、走極簡風格的 UI 使用者界面。這套新 Audi UI 用戶界面已於 2017 年公開於網路上:任何人都可以從 GitHub 或是 Audi UI Photoshop kit 下載使用 Audi 圖標,UI 組件和字體。

09-audi-digital-branding-160923-2200px.jpg
▲ Audi 的新 UI 介面佈局

簡要概述一下這次 Audi 的新 UI 設計:「介面佈局大至上分為垂直和水平的區塊,以達成視覺上的平衡。內容則顯示在這些方形區塊中;而這些方形區塊也置入於與設備的(螢幕)邊緣隔開的網格中。當這些方形區塊被賦予其他的附加功能時,則被視為「卡片」。為了被使用者重視,所有的元素都在階層式的結構中突出顯示。

▲ 替 Audi 設計新 Logo 的設計公司 Strichpunkt 上傳的 Audi 品牌重塑影片-展示了 Audi 的品牌形象、字體、網站以及各裝置的 UI 使用者介面。

根據裝置螢幕的大小,Strichpunkt 使用了簡單的黑色、白色、灰色、紅色和不同色階的銀色,以及不同的字體大小。您可以在這裏找到更多有關Audi UI 使用者介面設計的詳細信息。

06-audi-digital-branding-160923-2200px.jpg

▲ Strichpunkt 為了 Audi 的新 UI 設計,所打造的全新 2D 化 Logo、新 Audi 字體、品牌配色;下方則是用於網站、app、車用數位裝置的線條化圖標以及 S 型曲線模式

 

新的Audi Logo-2D扁平化

audi_rings_examples.jpg

▲ Audi 的新 Logo 由原本的立體風變為 2D 平面風,俐落的外型更適用於嵌入各式各樣的設計。

 

Strichpunkt 替 Audi 完成了新的 Logo 設計,一改原本的「仿3D」立體設計,而以 2D 的 Logo 取代之。Logo 造型為扁平的四個圈圈、沒有品牌文字在 LOGO 下方、顏色非黑即白。

本篇為Audi篇上集,Audi篇下集【為落實“數位優先”的UI設計...Audi竟將LOGO壓扁了!】請點此連結

 

相關連結

 

“數位優先”的UI視覺設計怎麼做才高招!?(上)

 

“數位優先”的UI視覺設計怎麼做才高招!?(中)

 

“數位優先”的UI視覺設計怎麼做才高招!?(下)

 

Google Ads編輯器超好用!新增10種功能報你災!

 

人工智慧時代到!!三分鐘帶你認識最新AIoT!

 

5G新時代!!UI, UX新趨勢就看這篇!!(上)

 

網路行銷不可不知的小撇步:文字特效吸睛!

 

2天考取Google Ads證照!新手廣告投放攻略

 

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

 

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

 

零基礎如何花 14 小時考取 GoogleAds 認證? 五種 GoogleAds 廣告不藏私攻略

 

從無到有-挑戰14小時取得Google證照

    Ezra.Yii5778 發表在 痞客邦 留言(0) 人氣()