這篇帶你看:福斯和奧迪如何落實"數位優先"的UI設計!(下)

-


這篇帶你看:福斯和奧迪如何落實"數位優先"的UI設計!(下)


本篇為福斯UI設計篇，關於Audi的UI設計，請點此 連結 以及 此連結



UX和UI設計可不只和奧迪有關,連福斯也參一咖!一起來看看UI.UX設計和它有什麼關係!



不落後於 Audi，福斯跟進「數位優先」視覺辨識
▲ 新的福斯LOGO設計由原本的「仿3D」變回2D平面icon，就可零違和地嵌入於更多裝置的UI視覺設計。

而 2019 年 7 月，德國的另一間汽車公司-福斯汽車也宣布將推出全新 LOGO。同年的 9 月 10 日，在法蘭克福國際車展前夕的「福斯之夜」上，福斯正式發布了全新的品牌標誌——也是將原本的立體風 Logo「平面化」，他們進而表示，品牌接下來將會有完全嶄新的商業策略！
▲ 福斯LOGO進化史-一切的LOGO變化都是為了符合當時的UX

由以上影片我們可以看到：福斯Logo的進化史，都是與當時的UX有關。

而去年2019 年，最新的 LOGO 整體造型，依然使用字母「V」和「W」上下組合的形式，不過變得更簡單直觀。原先設計成浮雕概念的立體造型，改為平面化 2D 風格，「V」和「W」兩個字母中間的空隙變大，「W」的底部和外部圓圈完全脫離，留下了空間。

其實「扁平化」是現代數位時代的設計趨勢，除了福斯，許多知名廠商的 LOGO 也都改頭換面、採用扁平化的設計，如 Google、YouTube、Netflix、ebay、Citroën等。

扁平化設計為去除陰影、漸層和反射光澤等3D要素，通常使用高亮度的色彩，搭配無襯線字體，呈現出簡約現代風格。目的是為了減少不必要的裝飾元素，而將核心元素明確傳達。

除了LOGO，UI設計也正流行扁平設計。

同時，這種簡約的設計無論在傳統印刷輸出、電視或螢幕相對較小的智慧手機上，都能更好更快地呈現，也更符合現今數位化的潮流。

 

新LOGO也是新戰略

 值得注意的是，福斯這次不只換了Logo，連品牌識別聲音也換了。在過去，福斯汽車的廣告，結尾都是低沉渾厚的男性嗓音，但福斯大這次大破例，請到了德國著名的女演員露易絲‧海爾姆（Luise Helm）獻聲，打破多年聲音形象，改以溫暖、愉快、自信的女性聲音取代。

以後的福斯廣告，都將使用女聲來宣讀「福斯」品牌名了。
▲ 福斯熱門主打車款「Golf 8」廣告即為女聲宣讀品牌名稱

新LOGO同時展現了福斯汽車朝向電動化新時代發展的決心。

 福斯汽車準備電動化轉型，雖然已有一段時日，但關鍵轉捩點是在2016年。當時福斯集團（Volkswagen AG）爆出廢氣排放超標醜聞：福斯在美國銷售的車款中，植入了規避官方檢驗的軟體，在官方檢驗時自動調整數字以通過廢氣排放標準，但實際上這些車輛排放廢氣全超標10至40倍！！

在這起醜聞發生後，福斯集團便開始改變策略，朝新替代能源發展。

福斯近期全力主打的，就是在法蘭克福車展亮相的電動車ID.3，是全世界首款採用碳中和製程的電動車款，已在歐洲地區正式接單。明年系列車款ID. CROZZ SUV、ID.BUZZ、ID.VIZZION和ID.BUGGY等各式電動車也將陸續加入。

福斯第一款全電動車以「3」命名，代表正式在電動車領域踏出關鍵一步，與為了成為全球車壇的電動車領導品牌的決心。

現在是汽車產業全速往電動車發展的重要時間點，老牌車廠換上新裝，而這個新戰場的表現如何，就讓人拭目以待了～


相關文章：

這篇帶你看:福斯和奧迪如何落實"數位優先"的UI設計!(上)

這篇帶你看:福斯和奧迪如何落實"數位優先"的UI設計!(中)

UI 課程結束之後,得繼續深造!來看看你還有哪些選擇呢?

網頁設計學習零負擔-簡易的HTML5教學

前端工程師需釐清的RWD概念(上)RWD網頁VS傳統網頁設計

想在海外發光發熱發大財嗎?趕快開始UI課程吧! 

達內教育海外合作企業

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

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

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

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

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

這個網誌中的熱門文章

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

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是
閱讀完整內容

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

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手! 
閱讀完整內容

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

-
圖片
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d
閱讀完整內容