close

 

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪上篇

 

如何將UI設計和"數位優先"變成巧妙組合?今天要介紹給你,這兩個世界級汽車品牌是怎麼做的!

 

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

1.jpg
▲ 因應 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 及包含智慧手錶在內的所有數位產品等)都維持一致。

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

此次「品牌重塑」專案可說是顛覆性的翻新,Strichpunkt 創建了新型態的「原子設計(atomic design)」思路:在評估數位設備的外觀時,我們將 Audi 的視角變化應用於設計上面。。 我們的思考過程不只是從最小的設備開始,而且是從設計的最小元素開始。」

延續此「原子設計」的設計方法, Strichpunkt 建構出一套功能優先、走極簡風格的 UI 使用者界面。這套新 Audi UI 用戶界面已經於 2017 年公開在網路上:任何人都可以從 GitHub 或是 Audi UI Photoshop kit 下載使用 Audi 圖標、UI 組件和字體。

3.jpg
▲ Audi 的新 UI 介面佈局

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

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

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

 

4.jpg

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

 

新的Audi Logo-2D扁平化

 

5.jpg

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

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

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

 

 

相關閱讀推薦:

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪下篇

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-福斯篇

前端工程師和網頁設計師必學-AWD怎麼做才能對SEO無痛?

怕過勞又薪水不漲嗎?!開始上UI課程你可以過你要的人生!

決戰2020!!你不容錯過的UI/UX趨勢~(上)

決戰2020!!你不容錯過的UI/UX趨勢~(下)

達內時代科技教育集團簡介

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

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

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

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

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

arrow
arrow
    創作者介紹
    創作者 布萊恩的創業小窩 的頭像
    布萊恩的創業小窩

    布萊恩的創業小窩的部落格

    布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣()