顯示具有 ui/ux設計 標籤的文章。 顯示所有文章
顯示具有 ui/ux設計 標籤的文章。 顯示所有文章

2022年3月14日 星期一

要選RWD還是AWD呢?哪個才有SEO優勢?

 網頁RWDAWD兩種技術想做SEO的話,到底哪個有利?

網頁RWD和AWD兩種技術想做SEO的話,到底哪個有利?

該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

現在 RWD 正流行,可是並不是所有的網頁都適用 RWD技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力,再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD,簡單整理如下表所示:

  RWD AWD
人力需求 較少,因為只有一套 CSS 較多 (因為需要多套 CSS),
需要網頁人才與尚需前端工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式
維護成本 較少,因為只有一套 CSS 較多,因為有多套 CSS 以及程式
適用內容 網站內容較單純時適用。
如簡單的企業形象網站、一頁式網站等等。
網站內容較多、較複雜時適用。
如博克來、MOMO 購物網、蝦皮拍賣等。
適用排版 較簡潔的畫面與排版 較多元化、複雜的畫面與排版
SEO 支援 SEO 優化、維護較容易 同左,但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址,導致流量分散。
工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS
可支援的裝置 各裝置都適用 各裝置都適用

以上分析建議仔細看過。 以下再作補充說明:

評估現有的資源人力

只需要寫一套 CSSRWD 所耗的時間與成本一定比 AWD 還快又省,適合小型網頁、新創產業或是各方面資源有限的狀況下。幾近客製化的 AWD 網頁雖然有利於做 UI / UX,但是需要前端工程師來撰寫判斷使用者來配對 CSS 的程式,且若想要做 SEO 的話,也是需要前端工程師把多套 CSS 串在同一個 URL 的。

網頁設計畫面要求較嚴謹的狀況下,就使用 AWD 吧!

若有足夠的預算,且希望使用者無論使用手機、桌機、平板等尺寸不一的裝置都能擁有完美的網頁瀏覽體驗的狀況下,就選擇 AWD 吧!往後在網頁維護上,前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改,且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有 「牽一髮動全身」 的隱憂。 若硬要使用 RWD 也無非不可行,但是若 CSS 樣式寫得不夠嚴謹的話,則恐怕不同的裝置會寫到同一種 style,這時就需要花更多時間來修復,反而浪費更多成本。

AWD 要怎麼做才能對 SEO 無痛?

很多人都說 AWD 對 SEO 不利。那是因為大多數的人會省去將 「行動版」 與 「桌機板」 串在同一個網址的流程,索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址,所以流量自然會分流,對 SEO 當然有負面影響!

觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ,會發現行動版的網址前面多會有個 「m.」 的開頭,就是這樣的情況。

但我們先回到原點,弄懂 AWD 的基本原理,其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下,判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟,才可以集中流量在同一個網址中,對 SEO或品牌辨識度都比較好,就不會有前面提到 「分流」 的問題,也不會影響到 SEO

所以不要再說 AWD 對 SEO 不利了!不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址」 的作法。你所需要的,是要把行動版與桌機板使用同一個 URL。

 

相關文章:

元宇宙也有翻譯蒟蒻了!Meta推全球語言都可翻譯的人工智慧

Google提出Android隱私沙盒,標榜保護用戶資料安全

所有的新創業者都需要SEO 的7 個理由!

SEO是什麼?跟AdWords差在哪?如何自學?

面對到來的資訊戰Meta和Google等科技巨頭會怎麼做?

Meta元宇宙中的人物都怎麼了!?

Google將使用什麼取代cookies,且保護用戶隱私呢?

2022年3月13日 星期日

網頁設計RWD和AWD哪個優?

 想做網頁設計卻糾結要用RWDAWD?

想做網頁設計卻糾結要用RWD和AWD嗎?

AWDRWD 的最終目的是一致,全部是希望可以針對桌機、平板、手機等不同尺寸的裝置,顯示出易於瀏覽的網站畫面。

在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

RWD 和 AWD 的差異與優缺點


在網頁上,RWD 是「Responsive Web Design (響應式網頁設計)」的縮寫;而 AWD 則是 「Adaptive Web Design (自適應式網頁設計)」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法,讓網頁設計無論在桌機螢幕上、或是尺寸較小的行動裝置上,都能清楚的呈現,讓使用者能更舒服的瀏覽網頁。

RWD 與 AWD 的差異,簡單的來說,前者是無論行動裝置或是桌機,都使用同一套 CSS;而後者是針對各種裝置撰寫對應的 CSS,可以有多套 CSS,例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。

RWD 與 AWD 的差異,簡單的來說,就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下:

RWD 會把所有裝置的樣式都寫在同一套 CSS 中,因此無論行動裝置或是桌機,都是使用同一套 CSS 。當使用者打開了網頁,就能即時透過網頁的寬度,決定要套用到 CSS 中的哪一個樣式。

AWD 是針對各種裝置撰寫對應的 CSS,因此就會針對不同的裝置,而有多套的 CSS 樣式碼:例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。AWD 的方式必須仰賴前端工程師撰寫的程式,來判斷使用者是使用哪種裝置開啟網頁,再自動匯入相應的 CSS 檔案:如程式判斷出某使用者是使用桌機瀏覽網頁的話,就會自動匯入桌機的 CSS 樣式檔案;若是使用手機開網頁,就匯入手機的 CSS 樣式檔。

RWD、AWD 的異同之處

RWD 與 AWD 只是方式不同罷了,沒有所謂的哪個比較好,優缺點比較如下:

共同之處

RWD 與 AWD 都會判斷裝置,並且依照裝置顯示出對應的樣式。

不同之處

RWD

無論行動裝置或是桌機,都使用同一套 CSS
當使用者打開了網頁,就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。

AWD

針對各種裝置撰寫對應的 CSS,因此會有多套 CSS,一般來說會有兩套 CSS:桌機專屬的一套 CSS,手機專屬的一套 CSS。
當使用者打開了網頁,程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。

RWD 的優點與缺點

優點

  • 節省網站製作成本
    因為無論是桌機、手機的樣式,全都只塞在同一套 CSS 檔案,所以開發成本較低,適合內容較單純的網站、新創公司或是個人工作室使用。
  • SEO 更方便
    因為同一個網頁、URL 也只有一個,所以更方便 SEO

缺點

  • 開發容易、維護耗時
    全部的樣式碼都一窩蜂塞在同一套 CSS 裡面,所以在網頁維護上較不容易,常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況,很可能修改某個樣式碼,卻也影響到了其他不需修改的樣式碼,而導致網站 「跑山」 的窘境。
  • 行動裝置網頁載入恐會更慢
    因為所有的裝置都使用同一個 CSS 碼,所以較無法針對行動裝置做圖片顯示的最佳化,加上 RWD 網頁的機制是將資訊先下載後,再根據裝置大小重新排列,所以會較慢。

AWD 的優點與缺點

優點

  • 網頁維護更分明,不怕樣式被吃到
    雖然成本較 RWD 高,但是由於桌機與手機的 CSS 分別在不同的檔案,因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼,不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊 style 也改變的後顧之憂。
  • 有利於 UI/UX
    若對畫面顯示的要求較高,希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時,就適用 AWD,可針對不同的瀏覽介面而做出對應的 UI/UX,讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。
  • 行動裝置網頁載入更快
    可針對行動裝置而做優化,將原本的大圖縮減成最合適的尺寸,減少不必要的大圖,就能加快行動裝置的網頁 loading。

缺點

  • 維護較容易,但開發成本高
    一開始需要針對不同的裝置而寫出好幾套 CSS,耗時耗力,且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求,還需另請工程師將同一網頁的多套 CSS 串在同一個網址內,否則流量會自動被手機與桌機瓜分。

 

該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

當下 RWD 正夯,只需要寫一套 CSS 的 RWD 所耗的時間與成本一定比 AWD 還快又省,適合小型網頁、新創產業或是各方面資源有限的狀況下。

即便如此,也並非所有的網頁都適用 RWD。若是對網頁設計畫面要求較嚴謹的狀況下,AWD 網頁在後續的維護上讓前端工程師、UI 設計師較能找到對應的 CSS 檔來修改,沒有如 RWD 般所有的樣式都塞在同一套 CSS 「牽一髮動全身」 的隱憂。

決策者必須先檢視網站的規模、內容、專案的需求以及現有的人力,再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD,本篇文章「網頁一定得選擇 RWD 嗎?AWD 要怎麼做才能無痛SEO?」有近一步的分析與講解。

 

相關文章:

元宇宙也有翻譯蒟蒻了!Meta推全球語言都可翻譯的人工智慧

Google提出Android隱私沙盒,標榜保護用戶資料安全

所有的新創業者都需要SEO 的7 個理由!

SEO是什麼?跟AdWords差在哪?如何自學?

面對到來的資訊戰Meta和Google等科技巨頭會怎麼做?

Meta元宇宙中的人物都怎麼了!?

Google將使用什麼取代cookies,且保護用戶隱私呢?

 

2020年1月31日 星期五

UI設計心理學指南!視覺感知超重要!

搞UI設計不可不知的心理小祕密!


搞UI設計不可不知的心理小祕密!


最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知,有對我很有幫助,其中有一條:平均每個人在記憶時候最大數量為7個。
另外一條是:眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。 視覺感知是設計領域的重中之重,特別是產品設計師,作為UI /UX設計師需要去了解和運用這些定律,提升用戶視覺感知。



UI 設計師的心理學指南

什麼是視覺感知

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

視覺感知的特點

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

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

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

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

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

視覺感知如何運用

1.通過圖標加強感知

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

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

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

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

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

6.通過多媒體藝術加強感知除了以上,還可以通過視頻,音頻,動效,3D等。 通過這種刺激,不僅設計師可以創造更多創意,而且對不同的人記憶加強,比如618,雙11, 造物節一些動效,音頻對大家記憶刺激很強。
視覺感知心理學,更多幫助我們在做 UI / UX 設計時候,了解人們是如何與世界互動,哪些元素影響他們的行為。 通過 UI / UX設計去改變引導用戶,管控好用戶使用路徑,能更好幫助產品成功。

相關文章

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

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

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

學習Unity3D,讓你成為自己心目中的遊戲開發者!

修圖不再苦哈哈!Photoshop只要3秒就做出吸睛圖!

教你為網站妝模作樣的CSS網頁設計課程

SEO教戰守則(一)誰是你的對手?

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

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

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

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

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

2020年1月8日 星期三

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

UI視覺Logo設計怎麼做才高招!?連福斯也跟進!


UI視覺Logo設計怎麼做才高招!?連福斯也跟進!




本篇為福斯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等。
扁平化設計為去除陰影、漸層和反射光澤等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視覺Logo設計怎麼做才高招!?(上)

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


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

數位行銷媒體人必看!!Google搜尋各類排行榜~

5G時代到!人工智慧又將如何改變你我的生活!?

如何兼顧家庭跟事業?44歲媽咪告訴你最真實的達內教育評價!

2019谷歌熱搜話題排行出爐!數位行銷人必看!


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

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

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

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

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

2020年1月7日 星期二

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

UI視覺設計Audi還對Logo做了什麼?


UI視覺設計Audi還對Logo做了什麼?


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

字體

▲ 新 Audi Logo 與字體搭配的準則。

新的 Audi 字體,隨著新的 logo 一起曝光了。Strichpunkt 表示,這是新的「簡潔有力」清新風格的 Audi logo。
▲ Audi 標語的使用範例(總是以小型字體出現在畫面的角落)。

圖標


▲ 各式新的 Audi UI icons 為線條化設計,靈感來自精確的車輛工程設計圖
而用於網站、app、車用數位裝置等部分的 2D 線條線條化圖標,Strichpunkt 表示設計靈感來源自 Audi 車輛研發設計時,工程師繪出的精確的工程設計圖。

▲ 新的 Audi UI/ UX icons使用範例

影片

▲ Strichpunkt 替出現於新 UI / UX 介面上的 Audi 影片立下「S 型曲線」原則:「一開始強而有力的加速啟動,然後在結束時迅速減速」。

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


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



相關文章

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

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


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

迎接5G時代~UI, UX也要跟上新趨勢!!(上)

再也沒有眼見為憑?英劇結合人工智慧拍出精彩影集!!

考取Google Ads證照不用等!!只要兩天就可以!!

Google Ads編輯器超好用!新增10種功能報你災!

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

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

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

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

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

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證照