新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(下)

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(下)
新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(下)

身為UI人一定不能錯過今年要登場的新式身分證設計!!快一起來看看吧!!(下)

本篇為下篇,上篇請點此新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)

卡面設計簡約質感,劃出你的隱私空間

新式身分證除了極簡風的 UI 介面之外,到底還有哪些亮點呢?

翻翻我們手中的現有身分證吧!現有的卡面樣式是 14 年前的設計,在今日文武百業都數位化的時代,早已不敷現況使用。政府為展現數位化決心、並因應逐日被重視的個資隱私,卡面與功能都已大幅變化,讓我們逐一細說如下:

一、隱私保護升級、遺失也不怕洩個資

除充滿質感的外觀,資訊呈現上也做不少調整。伴隨著個資保護意識抬頭,新版 ID 的 UI 介面一改過去拿出身分證便個資全都露的尷尬感,將大多數的個人資訊儲於晶片內。

新式 ID 僅保留個人基本資料:姓名、身分證字號、出生日、人像等,至於其他更私密的資訊如父母姓名、出生地等,都於晶片內加密保護,且需經本人同意、輸入身分證後 6 碼及自訂的 2 組密碼後,機關才能讀取資料。

萬一不小心遺失身分證,更可直撥「1996」專線掛失,自然人憑證就立即停用!失主也可申請紙本臨時證明,供掛失補辦期間使用。

而原有的身分證因為有密碼保護機制,所以毋需擔心晶片內容被讀取、盜用; 而晶片則是封裝後無法再取出、無法被側錄或複製偽造。

除此之外,數位身分證沒有儲存的功能,所以使用時不會留下紀錄,避免被第三方監控,真正保障各資安全。

二、兼具駕照健保卡功能,還可綁定手機!

今年 10 月後,若數位身份證執行狀況順利的話,政府將進入開發「行動身分證 APP」的階段,並將身份證與健保卡、駕照等證件「多卡合一」!如此一來,出門就真的不用帶一堆證件在身上,無論是要看病、驗車、遇到警察臨檢等等,只需一機在手便可搞定要各項大小事!

三、辦事不用往外跑,數位 ID 網上搞定!

身分證數位化的最大特點就是,任何需要證件才能辦理的業務,也都同步數位化,能在線上直接辦理。透過政府骨幹網路 (T-Road) 串接政府各機關、部門的獨立系統資料股,民眾最快在今年 10 月之後,就能在網路上辦理公投連署、健保、社福、津貼、勞保、年金、護照簽證等 16 項業務!這樣就不需要為了印身分證、臨櫃申辦事務而東奔西跑了

新版身分證不僅在 UI 介面的設計有乾淨利落、資訊分明的特點,更在技術、使用、便民性上有著巨大的突破!未來在其他功能上的結合,更是指日可待!讓我們一同期待 10 月份新卡的蒞臨吧!

 

更多UI相關文章請點下方連結或至本部落格首頁點選喔~

 

 

 

其他閱讀

JavaScript入門教學#18|創造JavaScript物件(Objects)

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

差點被拋棄的冠軍程式語言-Java入門教學(一)

Java 身世之謎/寫出第一個Java程式

APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!

品牌重塑UI怎麼做?奧迪,福斯絕佳範例!!()

UI,UX設計課程沒教的設計心理學就看這篇!!

優質SEO速成班:長尾關鍵字提高轉化率

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)
新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)

身為UI人一定不能錯過今年要登場的新式身分證設計!!快一起來看看吧!!(上)

睽違14年,今年10月即將入手的 eID,新功能你期待嗎?

還記得 2018 年內政部舉辦的「新版身分證」設計競賽嗎? 當時任職 HTC,參與 HTC Sense UI 介面設計與 HTC Themes 設計的魯少綸,他的作品「形|SHAPE」以簡潔的 UI 廣獲評審青睞,獲得「設計獎」,更成為新式身分證的設計依據。

▲ 新身分證得獎做品:左圖為設計獎、右圖為人氣獎

不過在網路票選過程中,「形|SHAPE」僅獲得 46 票,與獲得近 10 萬票卻只得了一個「人氣獎」的作品「嶼民在地」票數相差懸殊,引發網友們不滿。「不禮貌鄉民團」在臉書上貼出比較,質疑為何 9 萬 6 千票的作品卻輸給僅有 46 票的作品,引發論戰。

對於爭議不斷的新身分證競賽結果,設計師聶永真表態:不要用民粹霸凌設計獎得主!究竟新式身分證除了極簡風的 UI 介面之外,到底還有哪些亮點,值得設計師為它發聲呢?

新身分證 UI:高延展性、整齊易讀、具包容性,獲評審青睞

▲ 新身分證版面切成單純的左右兩塊,給予長短不一的字數有很大的延展性,版面也更整齊易讀。

左右區塊排版,簡潔易讀

據「身分證再設計官網」所寫的官方勝選理由,「形|SHAPE」以整齊的排版勝出。其實由上圖不難發現:「形|SHAPE」無論是正面、反面,都只有切成單純的左右兩個區塊。正片的左區塊約佔了整體版面的 2/3、背面則占了約 3/4。

延展性強:無論文字多長都能排進去!

作者將姓名、地址以及「中華民國國民身分證」的中英文字樣⋯⋯等等字數較多的資訊,巧妙的置於較大的左區塊,讓整張身份證有整齊分明的排版;且左區塊的文字內容有足夠的空間可以延展,因此無論地址、姓名的長度多長,都能在雙語的排版上明暸易讀。

低調呈現台灣意象 質感律動感都到位

另外,作者也將代表台灣土地的圖樣,低調的詮釋在細節中:身分證簡約的白底,搭配玉山山脈的等高線圖的壓紋,上頭還印有台灣島狀的光影變化箔膜。對比其他直白地使用具體的台灣島外型、101 等圖樣,兼具律動感與藝術感的等高線線條作為背景,確實是十分令人玩味的呈現方式。

 

本篇為上篇,下篇請點此新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(下)

更多UI相關文章請點下方連結或至本部落格首頁點選喔~

 

 

 

其他閱讀

JavaScript入門教學#18|創造JavaScript物件(Objects)

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

差點被拋棄的冠軍程式語言-Java入門教學(一)

Java 身世之謎/寫出第一個Java程式

APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!

品牌重塑UI怎麼做?奧迪,福斯絕佳範例!!()

UI,UX設計課程沒教的設計心理學就看這篇!!

優質SEO速成班:長尾關鍵字提高轉化率

給UI,UX設計師的設計心理學小教室!!

給UI,UX設計師的設計心理學小教室!!
給UI,UX設計師的設計心理學小教室!!

UI,UX設計師們除了要有些專業和美感外還要懂一點心理學喔!!

最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知,有對我很有幫助,其中有一條:平均每個人在記憶時候最大數量為7個。

另外一條是:眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。 視覺感知是設計領域的重中之重,特別是產品設計師和UIUX設計師,作為設計師需要去了解和運用這些定律,提升用戶視覺感知。

什麼是視覺感知

視覺感知是人們能夠獲得信息,並由大腦進行處理的最有成效的方法。 人的眼睛有著接收及分析視像的不同能力,從而組成視覺。 腦部將眼睛接收到的物象信息,分析出四類主要信息就是有關物象的空間、色彩、形狀及動態。 有了這些數據,我們可辨認外物和對外物作出及時和適當的反應。

視覺感知的特點

速度快,所有信息以圖形存儲,人眼閱讀圖像比文字更快,在絕大多數情況下,人們感知圖標和插圖的圖片元素比文字更快。 大部分用戶是視覺驅動的,所以視覺感知機制通常應該在設計過程中考慮,研究裡面有幾條規則挺有意思:1.人眼閱讀圖像比文字更快。 2.人們需要約1/10秒來獲得視覺場景或元素的一般感知(該速度對於文字表達基本不可能的)。 3.大腦儲存重要的信息片段通常由固定為視覺圖像,即使它們是通過文字感知得到的。

視覺感知規律心理學家提到的視覺記憶感知三個核心規律,很簡單也好記憶:

1.集中:要記住一件事情或大量的數據,需要集中精力。 否則,數據將在短期記憶裡上被丟棄的機率很高。

2.聯想記憶:大腦裡其實有個巨大的網絡連接,我們會自動將感知到的新的片段能和舊的片段聯繫關聯,感知就會越強,也在設計中也就是常說的用戶習慣。

3.重複:不斷去重複激活一些片段,直到達到長期識別為主。 基於這3個點的的規律我們需要在視覺中可以去運用,通過設計強調突出我們想表達的內容,突出重要信息,通過簡單的交互讓用戶和他之前的經驗關聯。

視覺感知如何運用

1.通過圖標加強感知

2.減少數量加強感知關注度在設計中很重要,如果同時提供了幾個選項,按鈕,選項,用戶的短期記憶會花費更多的時間和精力來考慮,這時候隨時可能會讓用戶跳失。 米勒定律:每個人在工作記憶時候最大數量為7個。 人的大腦短時記憶容量約為“7”。

希克定律:人​​們選擇的元素越多,越難選擇。 一但選擇點很多,越是猶豫,分散,特別在電商設計裡面,我們需要平衡所有的信息,給予用戶最有用信息和行動點。

3.通過圖像強化感知, 除了圖標,還可以通過圖像來強化感知力,我們應該掌握圖像處理的手法,通過不同的形式來組織內容,圖片沒有秘密也最直接,最能被記憶

4.通過導航強化感知

導航是可用性的關鍵因素。 通過tab移動,能記住用戶路徑和數據;因此,設計導航時候,交互和視覺一致和清晰很重要。

5.通過直接的表達加強感知

關於顯示或隱藏的各種菜單的討論目前有很多,我們重要的是要記住,界面的關鍵目標應該是用戶清楚地了解發生了什麼。 他想要的操作在那裡。 因此,關於漢堡包菜單,滑塊,隱藏層次的導航和內容的操作設計應該梳理好頁面功能層級設計,不要去隱藏一些核心操作。

6.通過多媒體藝術加強感知除了以上,還可以通過視頻,音頻,動效,3D等。 通過這種刺激,不僅設計師可以創造更多創意,而且對不同的人記憶加強,比如618,雙11, 造物節一些動效,音頻對大家記憶刺激很強。

視覺感知心理學,更多幫助我們在做設計時候,了解人們是如何與世界互動,哪些元素影響他們的行為。 通過設計去改變引導用戶,管控好用戶使用路徑,能更好幫助產品成功。

更多UIUX相關文章請點閱下方連結!!

其他閱讀

隔壁大媽超羨慕我,想要在家工作就先學UI課程!

程式語言學習大熱潮,UI課程是一定要的啦!

一個成功的案例,讓你秒懂UI課程是如何影響台灣的零售業!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

美國NASDAQ上市公司、外商IT教育培訓企業

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

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

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

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

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

UI設計小教室:奧迪,福斯LOGO平面化(上)

UI設計小教室:奧迪,福斯LOGO平面化(上)
UI設計小教室:奧迪,福斯LOGO平面化(上)

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壓扁了!】請點此UI設計小教室:奧迪,福斯LOGO平面化(中)

 

想看更多UI,UX的文章請點下方連結~

 

 

 

其他閱讀

隔壁大媽超羨慕我,想要在家工作就先學UI課程!

程式語言學習大熱潮,UI課程是一定要的啦!

一個成功的案例,讓你秒懂UI課程是如何影響台灣的零售業!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

美國NASDAQ上市公司、外商IT教育培訓企業

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

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

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

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

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

UI,UX設計師非懂不可的視覺感知心理學~

UI,UX設計師非懂不可的視覺感知心理學~
UI,UX設計師非懂不可的視覺感知心理學~

你是UI,UX設計師嗎?你懂甚麼是視覺感知心理學嗎?還不知道的同學快往下讀吧!!

最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知,有對我很有幫助,其中有一條:平均每個人在記憶時候最大數量為7個。

另外一條是:眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。 視覺感知是設計領域的重中之重,特別是產品設計師和UIUX設計師,作為設計師需要去了解和運用這些定律,提升用戶視覺感知。

圖片

什麼是視覺感知

視覺感知是人們能夠獲得信息,並由大腦進行處理的最有成效的方法。 人的眼睛有著接收及分析視像的不同能力,從而組成視覺。 腦部將眼睛接收到的物象信息,分析出四類主要信息就是有關物象的空間、色彩、形狀及動態。 有了這些數據,我們可辨認外物和對外物作出及時和適當的反應。

視覺感知的特點

速度快,所有信息以圖形存儲,人眼閱讀圖像比文字更快,在絕大多數情況下,人們感知圖標和插圖的圖片元素比文字更快。 大部分用戶是視覺驅動的,所以視覺感知機制通常應該在設計過程中考慮,研究裡面有幾條規則挺有意思:1.人眼閱讀圖像比文字更快。 2.人們需要約1/10秒來獲得視覺場景或元素的一般感知(該速度對於文字表達基本不可能的)。 3.大腦儲存重要的信息片段通常由固定為視覺圖像,即使它們是通過文字感知得到的。

視覺感知規律心理學家提到的視覺記憶感知三個核心規律,很簡單也好記憶:

1.集中:要記住一件事情或大量的數據,需要集中精力。 否則,數據將在短期記憶裡上被丟棄的機率很高。

2.聯想記憶:大腦裡其實有個巨大的網絡連接,我們會自動將感知到的新的片段能和舊的片段聯繫關聯,感知就會越強,也在設計中也就是常說的用戶習慣。

3.重複:不斷去重複激活一些片段,直到達到長期識別為主。 基於這3個點的的規律我們需要在視覺中可以去運用,通過設計強調突出我們想表達的內容,突出重要信息,通過簡單的交互讓用戶和他之前的經驗關聯。

視覺感知如何運用

1.通過圖標加強感知

2.減少數量加強感知關注度在設計中很重要,如果同時提供了幾個選項,按鈕,選項,用戶的短期記憶會花費更多的時間和精力來考慮,這時候隨時可能會讓用戶跳失。 米勒定律:每個人在工作記憶時候最大數量為7個。 人的大腦短時記憶容量約為“7”。

希克定律:人​​們選擇的元素越多,越難選擇。 一但選擇點很多,越是猶豫,分散,特別在電商設計裡面,我們需要平衡所有的信息,給予用戶最有用信息和行動點。

3.通過圖像強化感知, 除了圖標,還可以通過圖像來強化感知力,我們應該掌握圖像處理的手法,通過不同的形式來組織內容,圖片沒有秘密也最直接,最能被記憶

4.通過導航強化感知

導航是可用性的關鍵因素。 通過tab移動,能記住用戶路徑和數據;因此,設計導航時候,交互和視覺一致和清晰很重要。

5.通過直接的表達加強感知

關於顯示或隱藏的各種菜單的討論目前有很多,我們重要的是要記住,界面的關鍵目標應該是用戶清楚地了解發生了什麼。 他想要的操作在那裡。 因此,關於漢堡包菜單,滑塊,隱藏層次的導航和內容的操作設計應該梳理好頁面功能層級設計,不要去隱藏一些核心操作。

6.通過多媒體藝術加強感知除了以上,還可以通過視頻,音頻,動效,3D等。 通過這種刺激,不僅設計師可以創造更多創意,而且對不同的人記憶加強,比如618,雙11, 造物節一些動效,音頻對大家記憶刺激很強。

視覺感知心理學,更多幫助我們在做設計時候,了解人們是如何與世界互動,哪些元素影響他們的行為。 通過設計去改變引導用戶,管控好用戶使用路徑,能更好幫助產品成功。

更多UIUX相關文章請點閱下方連結!!

其他閱讀

隔壁大媽超羨慕我,想要在家工作就先學UI課程!

程式語言學習大熱潮,UI課程是一定要的啦!

一個成功的案例,讓你秒懂UI課程是如何影響台灣的零售業!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

美國NASDAQ上市公司、外商IT教育培訓企業

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

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

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

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

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

品牌重塑UI怎麼做?奧迪,福斯絕佳範例!!(上)

品牌重塑UI怎麼做?奧迪,福斯絕佳範例!!(上)
品牌重塑UI怎麼做?奧迪,福斯絕佳範例!!(上)

UI設計師看過來~還在煩惱品牌重塑怎麼做嗎?看看奧迪,福斯的範例吧!!(上)

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壓扁了!】請點此品牌重塑UI怎麼做?奧迪,福斯絕佳範例!!(中)

 

想看更多UI,UX的文章請點下方連結~

 

 

 

其他閱讀

隔壁大媽超羨慕我,想要在家工作就先學UI課程!

程式語言學習大熱潮,UI課程是一定要的啦!

一個成功的案例,讓你秒懂UI課程是如何影響台灣的零售業!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

美國NASDAQ上市公司、外商IT教育培訓企業

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

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

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

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

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