登入 免費註冊
最新消息
設計課程
動態課程
設計選讀
免費教材
周邊商品

Hello! 我是 StudioPros 優仕創意的藝術總監宜軒!  StudioPros 專注於品牌設計與品牌體驗。我們擅長從使用者體驗出發,運⽤獨特、有趣、精準的視覺語彙為客⼾說故事及推廣品牌,為客⼾創造出更⼤的品牌價值,並提供其更多元的可能性。

New Google Workspace Icons

 

企業進行 Rebrand 的原因,絕非只為了「視覺美觀」這件事。每一次品牌的更新,都是有更大且實際的商業考量。例如 Medium 和 Uber 過去的翻新,多半都是與易用性、品牌方向的調整。
參考連結:Uber 大刀闊斧Rebranding的內幕與脈絡和Medium品牌竟然又更新了!談談其更新背後的理由和啟發

 

前一陣子大家一定也發現了 Gmail 更新了應用程式 Logo。

Gmail 目前的活躍用戶已高達10.6億人,可想而知,當這一群人打開電腦,要尋找熟悉的紅白 Icon,一時之間找不到所帶來的衝擊感,及不便都化成了批評和貶責。Logo 一更新,網路上立刻就出現了許多批評,大家各自表述對於 Icon 的更新所造成的不便,甚至覺得他們更新的莫名其妙已經對工作效率造成影響。不只 Gmail 的變動,當你打開 Google 的應用程式列表時,可以發現上方也有許多應用程式 Icon 改變了,例如:Google Meet、Google Calender 等。

究竟是什麼理由促使Gmail必須更新呢?為甚麼要在產品穩定成長的狀態下還要大膽的翻新識別呢?

我統整了許多國內外文章後,總結出兩大原因:

1.宣告 G Suite到 Workspace的產品型態轉變

什麼是 G-Suite? G Suite 是一整套雲端應用程式的簡稱,可滿足企業用戶聯繫、儲存檔案、控管專案進度以及保護資料安全等各種需求,有常見的Gmail 和 Google日曆、Hangouts Meet 等方便同事交流、視訊會議、分享行程,以及 Google 文件、簡報和試算表等各種可多人即時線上編輯的工具。

而 Workplace 則是由 G-Suite 優化後的服務。Google 將原本包含企業信箱Gmail、Google 日曆、Google 雲端硬碟及 Google 協作文件等辦公雲端軟體 G Suite更名為 Google Workspace。不僅在協作與視訊上新增更多進階功能,同時也在版本及價格的定位上做出更多分層。

2.更一致的視覺語彙呈現產品的相關性與互通性

由於在 G-Suite 時期,應用程式都是單獨建立而成,因此在視覺上並沒有明確的一致性。而 Workplace 優化其中一大重點,即是專注在各項應用程式間的互通性,也是這個原因,Google 團隊決定將 Gmail 等幾大應用程式Icon 進行更新。其中最令人有感就是 Gmail 的改變。

關於Gmail的設計?設計團隊談到他們曾考慮,完全放棄 M 子母,或完全去除 Gmail 紅色,但參與用戶研究的人員提出,不論是 M 或是紅色對於 Gmail 識別都是用戶識別的重要元素;很特別的反倒是 Icon 的信封元素是可取捨的。因此,根據這項研究成果,團隊保留 M 並加入了 Google的品牌色:藍、紅、黃、綠色,到新的Gmail Icon 設計中,使 Gmail 與 Google 本身品牌、Google Maps、Google相簿,Chrome 和許多其它 Google 的產品相似徽標更加接近。

承上文所述,Google 更新後隨之而來的除了驚訝,還有許多人負面的評論。在這些評論中,我們可以由此了解應用程式品牌更新時所需避免的痛點,我們發現其中最大的痛點是:

“ 我有時會同時在工具欄上同時打開 Google Drive,Meet和Gmail,很難區分彼此。”
用戶們最大的抱怨是 Google Workspace 圖標看起來太相似了,在使用時很不直覺,甚至需要花更多時間在思考上,對工作效率有很大的影響。從這個問題點上,我們可以探討 Icon 影響應用程式易用性的兩大關鍵:顏色和形狀。

1. 顏色:

顏色是人們判斷事物最先注意到的元素,利用色彩的差異來判斷事物是非常直覺簡單的。這也是為什麼舊的Google Icon 大家一致認為更好看和好用。
新圖標的顏色,讓它們實際上沒有顏色。

因為他們都擁有一致顏色,這讓使用者在判斷時變得困難,需要停下來思考並認真看圖像形狀判斷應用程式間的差別。
更麻煩的是,這些 Icon通常都是變得很小縮圖於瀏覽器的上方角落,這讓判斷時變得更費力。除了Google,Adobe 更新了它們的 Icon 後,也因為一樣的問題而收到不少負
評。

 

2. 形狀:

形狀的可區別性是解決色彩相似問題的方法之一。
圖像中以正負空間所營造出的感知形狀,可以讓使用者更直覺的判斷物件。

但是這一次的更新在形狀上卻變得更模糊,所有 Icon 都是空心的,也就是在正負空間的營造上是極度類似的。此外,五個 Icon 中有三個都是以矩型作為外框,這會使得 Icon 在縮小時或是模糊時,使用者需要更費力才能閱讀出其中的差別。

Source : Behave_or_else


因此,相較起來,原始的 Icon 反而易用性更高,除了色彩上有明確地做區分外,外觀造型也有更大的區別。對於使用者而言,在判斷上,所需的時間更少也更直覺。

 

上 為更新前 / 下 為更新後
 

 

總結

Rebranding 的背後總是有許多取捨,就如 Google 這次的更新,品牌希望提升視覺的一致性,但取捨的可能就會是他的易用性。我認為以應用程式來說,易用性相對於視覺一致性,似乎是更重要的。關於這點,或許Google也正在努力改善中。

而從這個案例中,可以提醒我們的是,未來在為品牌進行更新或設計時,易用性絕對是必須納入考量的,千萬別為了追求美感,犧牲了設計該有的實用性。


 

同場加映:如何專案順利進行並成功結案的眉眉角角

如果你也喜歡Studio Pros或李宜軒老師的作品,想知道老師在工作上是如何規劃、安排好專案上的大小事,從提案到執行是怎麼讓事務如流水一般有條不紊的完成整個專案嗎?

那你一定不可錯過 Studio Pros創辦人宜軒老師 所開設的新課程-職涯必修設計管理學|踏上晉升、接案、創業之路

不論你是自主接案或是設計產業的PM們,宜軒老師將會分享自己的專案管理方式,帶領同學從了解自己的職涯規劃、分清內外部管理的要點、如何妥善安排專案前中後期大小事務,讓自己從一般設計師進階,踏上晉升、接案、創業之路!
 

※ 本文轉發自 Studio Pros 優仕創意團隊 Medium 專欄