顯示具有 2020 標籤的文章。 顯示所有文章
顯示具有 2020 標籤的文章。 顯示所有文章

2020年1月6日 星期一

UI視覺Logo設計怎麼做才高招!?(上)

UI視覺辨識Logo,AUDI的"數位優先"是......?

UI視覺辨識Logo,AUDI的"數位優先"是......?


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



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

▲ 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視覺Logo設計怎麼做才高招!?(中)

UI視覺Logo設計怎麼做才高招!?(下)

數位行銷相關人員不可不知~2019Google年度搜尋排行榜!

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

人工智慧加上5G物聯網:AIoT誕生!!

真的只要兩天?!Google Ads證照就能輕鬆get!?


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

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

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

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

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

2019年12月31日 星期二

2020不可不知的UI,UX趨勢!(下)

想知道UI,UX設計新趨勢嗎?看過來!


想知道UI,UX設計新趨勢嗎?看過來!


本篇為下篇,上篇「5G影響下的UI設計趨勢」請點此連結

5G影響下的UX設計趨勢


1. 為「速度」而設計(Designing for speed)

如前所述,5G將在全球開始普及,數據傳輸速度大大加快的同時,也代表讀取時間大大減少,幾乎趨近於零。不僅影響了 UI 的設計,對UX設計來說,這也同時意味著,一個新的標準,因為未來任何頁面、任何功能在任何時刻的延遲,用戶都不再接受。
有傳言2020年所有的iPhone都會支援5G,畢竟由奢入儉易、由儉入奢難,那時要用戶等那怕只有一秒都很難了!

2. 讀取進度條將被淘汰(No more loaders)


▲ 5G影響下的UX設計趨勢:讀取進度條將被淘汰
當網頁在加載時,常常會看到一個讀取進度條、或是不斷轉動的小圓圈,用來告知使用者還需讀取多久的時間。
延續上一項,因為過去的數據傳輸速度有限,但5G將使這些讀取進度條消失,漸漸地使用者會不想再看到讀取進度了。

3. 產品負責人不勝枚舉(Product owner everywhere)


產品負責人(Product owner)是指公司裡負責將產品價值極大化,並負責管理產品代辦清單,對產品負有最終責任。通常只會有一位產品負責人。
現今的數位或電子商務公司,整個公司有多個產品負責人已不是新鮮事,有APP程序負責人,後端產品負責人與SEO負責人等等。
2020年後,產品負責人從管理用戶需求、監督開發、確保測試改進到最終增加價值等,將在數位行業中廣泛使用。

UX稽核將成為趨勢(UX audit becoming a trend)

UX Audit、UX稽核,通俗地講就是 UX 健康檢查,UX Audit的目的是讓設計師找出其中使用者經驗還未臻完美的部分,提供改版時優化產品體驗的著眼點。
對快速發展的新創產品而言,很容易將不斷追加額外新功,但UX設計師的首要之務其實是要將一件事做到最好,不斷精進最核心的使用者體驗,這在未來將會更加被重視。
從2019年開始,UI與UX設計便是一種不能擋的趨勢,到2020年依然會繼續升溫,並且5G世代會給它們更多發揮的舞台、依然有無限的發展可能!


相關文章

2020必知的UI,UX趨勢!(上)

UI設計的五大黑色魅力 (上)

UI設計的五大黑色魅力(下)

人工智慧物聯網的未來生活想像

遵守五大SEO重點,靠跨境電商.多國語言網站發大財!

2019 Google 熱搜話題排行,數位行銷人必看!

想要讓網路行銷影片變得出眾?這十種文字特效不能不學!


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

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

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

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

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

2019年12月30日 星期一

2020必知的UI,UX趨勢!(上)

UI,UX在2020的新趨勢是什麼?


UI,UX在2020的新趨勢是什麼?



2020 UI、UX設計關鍵影響:5G


▲ 5G 時代的即將來臨,所有產業都牽涉其中。
5G代表了我們將會迎來嶄新的商業模式,不僅會掀起大規模產業變革,並會為未來科技開啟一扇新的大門,如:自駕車。5G將成為未來科技得以開花結果的最大助力,幾乎所有高科技產業都會受到衝擊。
毫無疑問的,5G將會是2020年影響UIUX設計潮流最大的因素,這也闡明「速度」將會是今年度的核心理念。
既然了解了大環境的因素,緊接著,就讓我們來細看5G影響下的UIUX領域的各別趨勢吧!

5G影響下的UI設計趨勢

1. 訂製圖像(Custom-made graphics)


但是如果沒有品牌圖像,也不需急著去購買五花八門的圖庫(stock photo)套用,取而代之的則是要設計獨特、屬於自身的且符合品牌形象的圖像在網站或產品上使用。
好的視覺設計可以為品牌價值錦上添花,能使產品與服務顯得更有說服力和平易近人,而企業logo或標誌設計是品牌形象的核心。

2. 動態圖像與動作特效(Motion graphics and motion effects)


過去由於4G的侷限,複雜的動態圖像與花俏的動作特效可能會拖慢網頁的讀取,甚至有的使用者根本無法讀取。
但隨著5G的興起,這在2020年後將不再是問題,並徹底改變目前的設計思維,也不用擔心因網速太慢讓巧思被埋沒。
靜態圖像將會變成可以接受、但乏味無聊的,未來如果想奪得客戶注目,設計師需要更具創造性地對內容、字體與圖形等素材等進行動畫處理。

3. 使用對比度稍低的漸變色 (Use of less-contrasting gradient)

「漸變色」是近年的熱門配色,而在2020年,對比度較低的漸變色:如藍色到淺藍色、灰色到深灰色等,將流行於網頁整體配色,這樣的設計保持了乾淨簡約的主體,但有保有變化而能不枯燥。
本篇為上篇,下篇「5G影響下的UX設計趨勢」請點此連結


相關文章

2020不可不知的UI,UX趨勢!(下)

UI設計的五大黑色魅力 (上)

UI設計的五大黑色魅力(下)

2019 Google 熱搜話題排行,數位行銷人必看!

最新Google Ads編輯器出來了! 功能更多更強大

達內教育評價:學員分享之中年媽媽順利轉職網頁設計

想當整人專家嗎?漢堡王的網路行銷告訴你!

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

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

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

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

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