顯示具有 UX使用者體驗 標籤的文章。 顯示所有文章
顯示具有 UX使用者體驗 標籤的文章。 顯示所有文章

使用 A/B 測試來改善網站 UI 設計的 30 個例子(4)24-30

使用 A/B 測試來改善網站 UI 設計的 30 個例子(4)24-30


簡單實用UI設計的30個使用A/B測試優化網站的例子(4)24-30

本篇為「使用 A/B 測試來改善網站 UI 設計的 30 個例子」的第 4 篇,第 3 篇請點此連結

範例24:嘗試銷售「好處」而不是功能

0713-24.png
克里斯‧古利博(Chris Guillebeau)在《100美元創業》(The $100 Startup)一書中寫道,人們真的很在乎愛情、金錢和自由,也希望同時能減少壓力、衝突和麻煩。
人們在挑選產品時,考慮的點除了性能外,更在乎這個產品能如何帶給他們好處 -- 例如若能同時幫他省錢又省力就太好了。而這就是產品能帶給顧客的價值所在,也是他們會掏錢的關鍵。所以網頁的說明別只向顧客說明產品或服務內容,說明能為顧客帶來哪些好處吧!

範例25:謹慎設計「沒有符合的產品」的網頁

0713-25.png
如何在網頁上呈現數據是一套學問,只是許多  UI 設計擅長表現 1000 個以上的數據,結果卻忽略了「零數據」的情況--當使用者想搜尋符合特定條件的商品未果時,跳出的「搜尋到 0 個商品」。或者另一個情況:當初使用者查看您的網頁時,在沒有任何引導的情況下操作,導致顯示 0 數據,這會有讓使用者感覺被忽略的風險。
此時,有 sense 的  UI 設計師會使用「網頁使用教學」或提示來取代冰冷的「搜尋到 0 個商品」頁面,讓使用者感受這個網頁是有人性的,營造暖心的 UX 使用者體驗!
推薦閱讀:改變 UI/UX 竟讓友情加溫、麵包烤更香!Netflix 紀錄片揭露設計師巧思

範例26:讓使用者能選擇「不參加」

0713-26.png
傳統行銷策略上,會只有一個寫著「我想要...」的方框(check box)以供勾選,若不想參加則可以不勾選。某些粗魯的行銷手段甚至會預設設為勾選,常讓使用者一不留意就「被答應」了 。
更好的做法是將正反向的選擇各放一個方框,告訴使用者「你可以要也可以不要」,然後再替使用者默選其中一項。
因為此舉可以減緩當使用者不想參與時的牴觸感,亦可可讓使用者潛意識產生「所有人都照原樣進行,那我也這樣做吧」的想法,進而讓我們的目的更容易達到,還不會引使用者的反感。畢竟行銷道德也會影響使用者對品牌的評價。

範例27:保持一致性,避免使用者重新學習

0713-27.png
世紀最有影響力之一的設計師唐.諾曼在《設計的心理學》中闡述,產品設計的最終目的,是為了讓產品符合使用者的預期。這個概念也是人因工程的核心概念之一,也就是「一致性」。維持「一致性」的產品易學易用、錯誤較少,可以減少心智工作的負荷,可以說是人人都期望中的產品。
而網頁的一致性同樣能幫助使用者容易學習,若破壞一致性原則,使用者就得重新學習一次。在介面上,一致性可藉由如顏色、形狀、大小、標記或語言等方式完成。
不過,當有需凸顯的內容時,依然可以使用「不一致」的元素吸引使用者注意。

範例28:善用「自動填入」以避免使用者重複操作

0713-28.png
UX 使用者體驗與轉換率的角度來看,最糟糕的事莫過於一遍遍地詢問人們已經提供的資料。提供預設值或自動填入之前填過的資料,再讓使用者檢查正確性,都比每次要他們重新輸入來的好。
盡量減少使用者的操作流程並節省他們的時間,絕對是有益處的。

範例29:UI 設計應要保留大多數人都習慣的操作方式

0713-29.png
同樣是基於「一致性」原理,維持常見的操作習慣也是很重要的。如果在整個 UI 介面上保持慣常的操作模式,使用者自然不會遇到太困難的阻礙。如圖例,人們已經習慣在介面右上角會有表示關閉的「X」圖示,就如呼吸般自然。
當然,新的操作模式也許可以帶來耳目一新的感覺,但在推翻傳統,必須謹慎思索改革的目的與成效。

範例30:「做了能避免⋯⋯」的行動呼籲內容比「做了能得到⋯⋯」更好

0713-30.png
損失規避理論(Loss aversion)指出,當人們面對同樣數量的收益和損失時,會認為損失更令他們難以忍受。也就是說,人們當然喜歡獲得,但更討厭失去!
這個理論可以套用在產品設計和使用者溝通。例如若產品的目的是保護客戶現有的財富或安全等等,比起推銷客戶還未擁有的東西更能說服客戶購買。
在上圖的網站 UI 設計 A/B 測試中,左側的行動呼籲是「請這樣做,以免失去你的健康、財富或朋友」;右側的則是「請這樣做,就可以增加你的健康、財富或朋友」。左側的「恐嚇式描述」會讓人聯想到事情發生時(如失去財富等)的嚴重性,就按下「Do This」按鈕以先預防,因此比起右側的敘述更有「讓人不敢拒絕」的說服力。

相關文章:
特效不夠AI 來湊!迪士尼換臉技術達百萬畫素
Google Analytics「工作階段」定義與範例一次解析!
亞馬遜人工智慧出包 搞混國會議員與罪犯
人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼
深入了解Python和R語言,有助找出學習方向(下)
行銷人必知!善用Python,讓工作變得輕鬆(下)
人工智慧最佳教練居然是狗狗,你聽說過嗎(上)

使用 A/B 測試來改善網站 UI 設計的 30 個例子(3)17-23

使用 A/B 測試來改善網站 UI 設計的 30 個例子(3)17-23


簡單實用UI設計的30個使用A/B測試優化網站的例子(3)17-23

本篇為「使用 A/B 測試來改善網站 UI 設計的 30 個例子」的第 3 篇,第 2 篇請點此連結


範例17:顯示出項目的即時動態

0713-17.png
在  UI 設計中,常會以不同方式表現出項目的不同狀態,例如:E-mail 上可標記出未讀或已讀、帳單明細會顯示已繳清或未繳的帳目等。而向使用者顯示項目所處的狀態是提供反饋的好方法。
即時動態可以幫助消費者確認是否已經操作過了、操作是否成功、以及接下來應該進行什麼動作

範例18:把引導型按鈕的敘述改寫為「能帶給用戶哪些好處」

0713-18.png
想像一下若是眼前的網頁上有兩個按鈕,其中一個標示「能替你省下一大筆錢!」,另一個寫著 「點這裡註冊」,肯定大部分使用者都會被前者吸引。
前者就是所謂「能帶來好處的按鈕」,能替使用者產生價值;而後者則是「任務導向的按鈕」,代表使用者耗費時間跟精力。而「能帶給使用者好處」的按鈕自然有較高的轉換率。

範例19:直接操作比多階層下拉式選單更直覺

0713-19.png
直接處理畫面上的資訊,有時會比使用整合工具列還直覺,如多階層下拉式選單(context of button)雖然十分常見,但過多的階層可能會增加操作的步驟,所以下次設計時不妨考慮減少階層或直接操作的方法。

範例20:若當下就可以操作,就不要再多開分頁!

0713-20.png
當我們希望使用者做有價值的動作,如:留下聯絡方式、基本資料等,最好把填寫用的欄位或表單放置本頁上。若能與頁面整合在同一層,會比讓使用者連結到別頁輸入資料來的好。
精簡流程、讓使用者花最少的時間就能了解頁面資訊,並將簡單易懂的表單放置於該頁面上。除了方便性,也可藉此讓使用者預估填寫所需的時間,會更加增加使用者填寫的意願。

範例21:以過渡形式表現操作導致的 UI 介面改動

0713-21.png

當使用者在與 UI 介面互動時, UI 設計成能藉由隱藏、顯示、移動或調整大小等變化來回應使用者的行為,也能協助使用者理解介面的使用方式
其實在變化過程中增加一些動態變化,也能達到尊重使用者的效果:故意延遲、以過渡形式表現尺寸或位置的變化,能讓使用者有更多時間、更有餘裕地去理解網頁的變動。
但需要注意的是,動態效果的時間最好在0.5秒以下,過長就可能引起使用者的不悅——特別是想要快速完成流程的使用者。

範例22:讓先使用者漸進式參與,而不是先要求註冊

0713-22.png
比起劈頭就要訪客馬上註冊,不如先讓訪客們有機會體驗產品,或至少讓訪客先觀看使用案例、過往客戶回饋或是介紹影片!在訪客還在建立第一印象時彰顯出產品的功效,亦可以表現出與他牌的不同。
一旦使用者看到您產品的價值、並體會到能帶來的價值,他們會更樂意接受您之後分享的其他訊息。「漸進式參與」即是一種盡可能推遲註冊過程,但依方面卻能增添使用者主動註冊動機的方法。

範例23:嘗試減少線框,不要浪費精力在分割框架

0713-23.png
使用者的耐心與時間都有限,所以網頁如何爭分奪秒地抓住他們的注意力就十分重要。常見的設計會利用線框(border)來強調劃分不同內容,但也正是因為線條的明顯具體,反而導致使用者耗費更多專注力,因為線框區分出的區塊(box)若過多或安排不當,會讓人感覺雜亂不齊。
解決方法如:在設計之前就定義好內容與視覺之間的關係(例如色彩設計)、減少不必要的區塊、對齊不同的背景色,才能有效地減輕使用者的閱讀難度。
本篇為「使用 A/B 測試來改善網站 UI 設計的 30 個例子」的第 3 篇,第 4 篇請點此連結

相關文章:
特效不夠AI 來湊!迪士尼換臉技術達百萬畫素
Google Analytics「工作階段」定義與範例一次解析!
亞馬遜人工智慧出包 搞混國會議員與罪犯
人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼
深入了解Python和R語言,有助找出學習方向(下)
行銷人必知!善用Python,讓工作變得輕鬆(上)
人工智慧最佳教練居然是狗狗,你聽說過嗎(上)


使用 A/B 測試來改善網站 UI 設計的 30 個例子(2)9-16



使用 A/B 測試來改善網站 UI 設計的 30 個例子(2)9-16

簡單實用UI設計的30個使用A/B測試優化網站的(2)9-16例子

本篇為「使用 A/B 測試來改善網站 UI 設計的 30 個例子」的第 2 篇,第 1 篇請點此連結

範例9:清楚描述 TA (目標客群),而不是宣稱「適合所有人」

0713-9.png
網站是瞄準特定族群還是面向普羅大眾?即使鎖定客群的策略有風險,讓網站在短期內失去一些潛在客戶,但誠實與公開透明才是與消費者信任的基礎。
網站清楚描述產品或服務的目標族群畫面,可以讓網站吸引到相似特質的使用者,同時透露出的「排他性」會讓使用者感到自己是被重視的,並建立出親近感。

範例10:不會有人被優柔寡斷吸引,多使用肯定語氣吧!

0713-10.png
當你收到一封語句充滿「也許、可能、說不定」的信件,以及收到一封肯定且充滿信心語句的信件,哪個寄件人會讓你覺得比較能信任?相信大部分的人都會認為答案明確的信能讓人安心吧!
優柔寡斷會降低信任感,如果網頁上常使用問句或不確定性的字詞,例如:有興趣嗎?想購買嗎?會讓消費者覺得你對產品或服務信心不足,這時候可以使用更具權威性、專業性的語句,像是如何帶給顧客良好的產品或最佳的 UX 使用者體驗。

範例11:善用色彩對比度來凸顯號召性用語

0713-11.png
醒目的行動呼籲性(CTA,Call-to-action)可以使你的 UI 介面更加強大。有多種方式能輕鬆提高 CTA:如透過深淺色調、陰影、漸層或對比色的手法來增加畫面上的對比性,提升被使用者注意到的機會。

範例12:標示出產品的原產地

0713-12.png
為產品添加名稱、圖片與原產地標示都展現出獨特性方法。特別是提到國家、地區或城市,因為這正如人們自我介紹來自哪裡一樣,是一個非常人性化的交流方式,也會顯得更加友善。
另外,說明原產地故事也能讓產品與產地名聲達到雙贏。

範例13:別讓使用者填太長的表單

0713-13.png
人類天生就牴觸勞動密集的行為,這個理論同樣適用於讓顧客填寫表單,每多一個表格就增加使訪客轉身放棄的風險!並不是每個人都能飛快地打字,更別說在移動裝置上打字仍然不輕鬆。檢視是否每個表格都有必要回答,並盡可能減少表格數量。
如果必填欄位真的為數眾多,可以嘗試讓最重要的資訊先讓使用者填寫完,提交後再出現一個單獨的頁面,請使用者繼續填寫第二重要的資訊。

範例14:別隱藏頁面上的選項,大方展現吧!

0713-14.png
下拉式選單的優點在於可以增加頁面的空間,若是要選擇可預期、已熟悉或高度重複操作的項目(如:生日、日期或地區)那使用下拉式選單是個不錯的策略。
但對於使用者來說,下拉式選單隱藏了一組他們要努力去發現的選項。這些選項若是跟產品有關,而且是交易流程中必經的,那你可以考慮不要隱藏這些選項,這樣可以提升網頁著轉換率

範例15:別讓使用者覺得已經「滑到最底了」

0713-15.png
長型的一頁式網站是趨勢,但若是  UI 設計不良、看到一半就讓使用者誤以為「已經滑到最底了」,這可是會大幅扼殺轉換率的。
UI 設計師可以建立一種固定的視覺模式或節奏,例如圖標或是小動畫,來引導使用者「網頁還沒看完,下面還有內容」。設計時也需注意欄位之間留白區域的尺寸:過大的空隙會讓人誤以為已經沒有內容了。

範例16:保持焦點,不要用連結淹沒使用者

0713-16.png
為了滿足使用者可能的所有需求,有的網頁會在上下左右都貼上「連結」,但其實每多安插一個的連結(例如:「按這裡以了解更多」),就會增添讓使用者分心的風險,讓他們沒辦法滑到最後、看到你的 CTA(行動呼籲)。
附上連結不是錯誤,只是數量與位置都要妥善規劃。減少多餘的連結,可增加讓使用者注意到頁尾 CTA(行動呼籲)的機會。
本篇為「使用 A/B 測試來改善網站 UI 設計的 30 個例子」的第 2 篇,第 3 篇請點此連結


相關文章:
特效不夠AI 來湊!迪士尼換臉技術達百萬畫素
Google Analytics「工作階段」定義與範例一次解析!
亞馬遜人工智慧出包 搞混國會議員與罪犯
人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼
深入了解Python和R語言,有助找出學習方向(下)
疫情中的人工智慧:AI首張專輯"武漢肺炎"問世
人工智慧最佳教練居然是狗狗,你聽說過嗎(上)


使用 A/B 測試來改善網站 UI 設計的 30 個例子(1)1-8

使用 A/B 測試來改善網站 UI 設計的 30 個例子(1)1-8

簡單實用UI設計的30個使用A/B測試優化網站的(1)1-8例子

 UI 設計的知識網站「GoodUI.org」整理分享了許多已經 A/B 測試的 UI 設計,先幫忙把常見的網頁排版都測完,幫助  UI 設計師/網頁設計師們省下許多功夫!

什麼是A/B測試

A/B 測試(A/B Test)運用了統計學的原理,顧名思義就是眼前有「A 版」與「B 版」兩種方法,為了測試哪種方法能獲得更好的市場反應,將 2 種版本同時上線,將消費者導入 A 或 B 版網頁做測試。
A/B 測試的優點在於可以得到實際的數據,而非依靠主觀意見來決定網站的架構與 UI 設計,也能不落傳統思維的俗套。只是各個版本需運行一段時間,待累積足夠的數據,才能確保測試的準確性,也需耗費不少成本。

範例1:嘗試使用單欄排版取代多欄

0713-1.png
多欄式排版的 UI 設計有分散頁面焦點的風險,而單欄式排版可以更好地安排內文敘述,同時從上而到下引導讀者的視覺動線也更加直覺,也能避免於閱覽者分心。最後可以安排醒目、富有號召力的內容做結尾。

範例2:在行動呼籲前先給予誘因

0713-2.png
UI 排版上,先給予像是「送禮」等誘因,是一種基於互惠原則的有效說服策略,同時也是能優化 UX 使用者體驗、改變顧客想法的最簡單方式。即使聽起來似乎很理所當然,但嘗試表現出友善的態度,如一封感謝信、小紀念品等,也能讓網站受眾的 UX 體驗更佳。這個微小的 UI 調整,也許會在未來帶來出乎意料的好處。

範例3:嘗試合併類似功能的欄位,避免版面破碎化

0713-3.png


範例4:讓社群證明價值,不要自吹自擂

0713-4.png
社群的廣泛好評對於提高轉化率是很好的說服策略,當客戶看到其他用戶支持並討論您的產品服務,會增進他們想深入了解的動機。
嘗試蒐集過往客戶的推薦文、滿意度證明或各種可以佐證的數據證明,並放在網頁上吧!

範例5:不要害怕重複顯示引導指示,只要放在不同位置就好

0713-5.png
在跨度大或多分頁的網站中,重複出現讓使用者點擊的行動呼籲是可行的,但當然不是指讓「購買」等按鈕在同一畫面重複顯示10次,這麼做肯定會惹惱使用者……。
重點在於合理規劃欄位分配,因長長的一頁式網頁已相當能被大眾接受,不需像過去一樣,把所有網頁元素都壓縮在一個螢幕大小。所以在一頁式網頁的最上方設置一個適中的點擊按鈕、最下方放置一個醒目的點擊按鈕,也是符合UX使用者體驗的原則。
根據 A/B 測試出來的使用者習慣,當使用者「滑」網頁到最底時,看到可點擊的按鍵,他們會停下來思考接下來要做什麼 —— 例如點下那個「購買」鍵。

範例6:讓「可點擊」和「可選擇」的外觀有差異

0713-6.png
為了清楚的引導訪客使用網站介面,UI 設計師要明顯區分出「可點擊」(如連結或按鍵)、「可選擇」(如選單)和純文字的樣式,不只在設計上要有所區別,同時上方描述文字也必須簡潔清楚。可以利用視覺元素,例如:顏色、深淺和對比度等,來達到又美觀又可以區分的效用。
例如以圖例來看,設計師選擇「藍色」做為網站上可點擊按鍵的色調,而選擇「黑色」為當前所在頁面的名稱。簡明扼要的顏色應用就能達到不言而喻的效果。最重要的是:千萬別使用過多的顏色混淆使用者。
推薦閱讀:為落實“數位優先”的UI設計...Audi,福斯竟將LOGO壓扁了!

範例7:突顯最推薦的項目,避免讓所有項目都看起來相同

0713-7.png
有心理學研究表示,當人們眼前的選擇越多,反而會陷入一種「分析癱瘓」的狀態,導致從選擇中挑選的機率越低。
 UI 設計師為了避免這個困境,比起單純陳列所有的項目,強調突出最主要的商品或服務是更好的做法。
推薦閱讀:UI設計師的配色攻略:5個黑色的設計意義/用法

範例8:讓使用者主動選擇「復原」,而不是重複詢問意圖

0713-8.png
想像一下,當按下按鍵或連結,網頁可能會出現兩種提示:第一種是在介面底部出現「復原」(undo)鍵,讓你回復至上一步;另一種則是跳出視窗要你「確認即將要進行的操作,確認後無法復原」。這兩者會帶給消費者什麼不同的使用者體驗 (UX)?
跳出視窗要你「確認自己在做什麼」會讓使用者覺得備受質疑,而「復原」提供使用者就算操作錯誤也可以回復到上一步的功能,則會讓人感到友善、包容與尊重。
另外,若使用者需重複的進行某項操作,網頁不斷跳出提示視窗,也讓使用者感到操作效率低下,產生不佳的UX體驗。
本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 1 篇,第 2 篇請點此連結

相關文章:
特效不夠AI 來湊!迪士尼換臉技術達百萬畫素
Google Analytics「工作階段」定義與範例一次解析!
亞馬遜人工智慧出包 搞混國會議員與罪犯
人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼
深入了解Python和R語言,有助找出學習方向(上)
疫情中的人工智慧:AI首張專輯"武漢肺炎"問世
人工智慧最佳教練居然是狗狗,你聽說過嗎(上)





Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(下)


Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(下)

最新首用UI設計落實數位優先,知名車廠奧迪.福斯做到了!我們來看看他們是怎麼做到的(下)


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

不落後於 Audi,福斯跟進「數位優先」視覺辨識

▲ 新的福斯LOGO設計由原本的「仿3D」變回2D平面icon,就可零違和地嵌入於更多裝置的UI視覺設計。
而 2019 年 7 月,德國的另一間汽車公司-福斯汽車也宣布將推出全新 LOGO。同年的 9 月 10 日,在法蘭克福國際車展前夕的「福斯之夜」上,福斯正式發布了全新的品牌標誌——也是將原本的立體風 Logo「平面化」,也表示品牌接下來的將有嶄新的商業策略。
▲ 福斯LOGO進化史-一切的LOGO變化都是為了符合當時的UX
由以上影片我們可以看到:2019 年的新 LOGO 整體造型依然使用字母「V」和「W」上下組合的形式,不過變得更簡單直觀。原先設計成浮雕概念的立體造型,改為平面化 2D 風格,「V」和「W」兩個字母中間的空隙變大,「W」的底部和外部圓圈完全脫離,留下了空間。
其實「扁平化」是現代數位時代的設計趨勢,除了福斯,許多知名廠商的 LOGO 也都改頭換面、採用扁平化的設計,如 Google、YouTube、Netflix、ebay、Citroën等。
扁平化 UX 設計為去除陰影、漸層和反射光澤等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」命名,代表正式在電動車領域踏出關鍵一步,與為了成為全球車壇的電動車領導品牌的決心。
現在是汽車產業全速往電動車發展的重要時間點,老牌車廠換上新裝,在這個新戰場的表現如何,就讓人拭目以待了。



參考連結:

Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(上)

Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(中)

學好Unity3D.下個任天堂遊戲由你開發

工程師能不能光看電影就知道是Python還是Java?(上)

工程師能不能光看電影就知道是Python還是Java?(下)

口頭簡報讓你緊張到說不出話嗎?人工智慧教練幫你訓練好口條!!

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

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

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

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

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

Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(中)


Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(中)

最新首用UI設計落實數位優先,知名車廠奧迪.福斯做到了!但聽說做法令人稱奇(中)


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

字體

0102-6.png
▲ 新 Audi Logo 與字體搭配的準則。
為了品牌重新塑造計畫,新的 Audi 字體也隨著新的 logo 曝光。Strichpunkt 表示:隨著新的「簡潔有力」的清新風格的 Audi logo。
0102-7.jpg
▲ Audi 標語的使用範例(總是以小型字體出現在畫面的角落)。

圖標

0102-8.png
▲ 各式新的 Audi UI icons 為線條化設計,靈感來自精確的車輛工程設計圖
而用於網站、app、車用數位裝置的 2D 線條線條化圖標,Strichpunkt 表示設計靈感來源自 Audi 車輛研發設計時,工程師繪出的精確的工程設計圖。
0102-9.jpg
▲ 新的 Audi UI icons使用範例

影片

▲ Strichpunkt 替出現於新 UI 介面上的 Audi 影片立下「S 型曲線」原則:「一開始強而有力的加速啟動,然後在結束時迅速減速」。
而所有出現在數位裝置上的 Audi 形象影片動作也都遵循 S 型曲線模式,Strichpunkt 表示「一開始強而有力的加速啟動,然後在結束時迅速減速。」
奧迪也為此新視覺辨識制定了品牌指南,製作「Audi 品牌指南網站」,開放各式資源給大眾免費瀏覽、下載,包含全新UX設計的 Audi Logo、字體、形象圖片、影片,甚至連 HTML 原始碼、被淘汰的設計都有,讓用戶感到有參與到他們的品牌重塑過程。
現在,Strichpunkt 將在子網域上啟動一個互動式工具,使用戶可以模擬奧迪風格的設計、字型、排版,背景和顏色。然後,該工具會告訴他們:其模擬作品是否符合 Audi 的設計原則與方針。
0102-10.jpg

▲ 各式新的 Audi 廣告,應用了所有 Strichpunkt 為 Audi 打造的 Logo、構圖、字體、等元素。
Strichpunkt 表示:這一連串的互動式工具,都是為了讓新的 Audi 品牌設計方針「更平易近人」,與 Audi 的新品牌識別「accessible to everyone(每個人都可使用)」相呼應。「這是汽車業的創舉,為新的開放式的象徵(a symbol of new open-ness)」。
本篇為Audi篇下集,下一篇為福斯UI的介紹【不落後於 Audi,福斯跟進「數位優先」視覺辨識與UI】請點此連結



參考連結:

Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(上)

Audi.福斯利用UI 設計成功落實數位優先,但做法卻是...(下)

學好Unity3D.下個任天堂遊戲由你開發

工程師能不能光看電影就知道是Python還是Java?(上)

工程師能不能光看電影就知道是Python還是Java?(下)

口頭簡報讓你緊張到說不出話嗎?人工智慧教練幫你訓練好口條!!

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

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

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

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

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

全球首屆元宇宙時裝周,複刻20年前的失敗?

全球首屆元宇宙時裝周, 遇到瓶頸 複刻20年前的失敗? 目錄 元宇宙時裝周參與盛況 叫好不叫座?新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」(Metaverse Fashion Week...