Google最新設計語言:如何將品牌DNA融入產品

15 評論 19675 瀏覽 81 收藏 12 分鐘

今天帶大家一起學習下Google最新設計語言- 品牌DNA的高級拓展性運用大法。

2018年5月9日凌晨1點,Google開發者大會上對 Material Design做了更新的講解,其中令我印象深刻的是Google對圖形語言單獨拿出來做一個模塊來解釋,如下圖我標紅的地方。

old

OLD? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?NEW

對!就是這個SHAPE的單詞,為什么我會如此看重,大家應該知道構成設計語言的四大基礎原子是:字體/顏色/網格系統/圖形。

這里的圖形包括圖標和一些輔助圖形,它有什么不同呢?

大家看之前以往的版本,材質設計語言里面沒有單獨去說形狀這一元素,當然也有做的比較好的產品,比如:韓國的 29cm 和 11街,國內天貓/網易蝸牛讀書等等。

圖形語言對我們產品影響極其大,之前網上也有這樣的文章,比如:提取logo上面視覺基因,然后運用到圖標里面。對,這個沒錯,但是我覺得不夠好,不全。

今天和大家一起來分析下Google是如何做的。

我對圖形的理解

圖形無處不在,人眼對圖形的識別能力遠遠高于字體,圖形便于記憶、傳播,這就是為何每次做LOGO時候都需要去考慮圖形延展呢?

目的為了傳播品牌,在用戶心中打造產品形象,比如:可口可樂弧線、阿迪達斯、蘋果logo這些國際性大牌子的logo都是易于記憶與傳播的。

那么在產品設計中如何體現呢?

我們常用在圖標里面去展現一些品牌元素,比如:天貓貓頭直接和圖標融合,這是一個很成功的例子。還有韓國的Genie音樂產品,也是直接logo和圖標集合。

那么僅僅只是這些嗎?

當然不夠,如果我們想傳達我們產品的品牌理念,深入到用戶心中,只在圖標里運用是不夠的。

比如:可口可樂每年做產品運營推廣,不斷大量的重復它logo弧線元素,這樣能長期在用戶心中形成記憶點。

Google是如何做的?

Google這次讓我們打開眼界,下面Google的原話:

形狀可以引導注意力,讓用戶易于識別組件,溝通狀態和品牌語言傳達。

對次有了一些更深刻的認識,形狀其實運用不止我們平常所理解的。我之前寫過一篇文章,就是形狀對布局的影響,里面就是講了形狀的一些基礎作用。

下圖是來自材質語言的截圖:

圖片來自google

Google的想法非常大膽:一個方形的變化,延伸出不同的形狀,當然并不是單獨一個產品設計里面放這么多形狀,而是運用到不同產品,運用不同的圖形,傳達其特殊品牌調性、大統一,局部戰略調整。

比如:上圖凹槽圖形用在主TAB上,形成視覺焦點,容易吸引用戶區關注它,一般核心功能會如此設計。

Google已提到了可以用于區分不同組件,這觀點我很贊同,之前我對愛奇藝做了視覺分析,發現它們一級導航和二級導航樣式一樣,那么這樣用戶如何區分呢?

圖形可以用于表達某一正在交互的狀態,比如:選中狀態,當然并不是單獨去使用。Google特定強調了:需要和其他視覺元素集合起來使用,比如:顏色。

其實這一觀點以前就有啦!比如:咱們的check box控件,選中前后狀態不一樣。

不過Google這個是否略顯夸張些?

最后重點來啦!比如:可以用于表達品牌語言,那么圖形來自哪里?用在哪里?

如:上圖是一個Crane的應用,他們logo是中間一個圖形加外帶橢圓底,這里Google提取了橢圓作為視覺DNA,并沿用到產品的每一個控件。

同一產品多終端統一符號語言。

如下圖提取LOGO關鍵特殊符號:

下圖Shrine提取菱形棱角圖形運用到產品設計細節里面。

看完你想說什么?我只想冷靜三分鐘?。。?/p>

其實說實話,對于品牌DNA的延續早在年初的時候就思考過,如何去把品牌語言在產品設計里面體現?

我當時理解是:首先要了解我們的品牌核心是什么?

我們的品牌理念是啥?品牌solgan,我們要給用戶傳達一種什么樣的情懷?然后如何去巧妙提取產品logo里面的視覺基因,比如:某一圖形元素;比如:線條/點/某一特殊圖形符號,這圖形一定是易于延展,拓展性強的。

然后運用到產品的每一個細節里面,比如:圖標、按鈕、異常狀態、啟動頁、運營banner、情感化設計等等,如今大佬Google 已經去這樣做了,而且做得很系統,包括動效都有引子。

當時也有一些產品已經這樣做了,比如:韓國29cm,設計細節非常好,圖形運用非常到位。國內天貓貓頭運用也是滲透到產品里面去了。

Google這次又給我我們一些大膽的思考,能運用這么廣的范圍?

需要注意點

Google舉了幾個反面例子,我們在提取圖形或者使用時需要注意的幾點,如下:

注意圖形的指向性和觸摸大小,千萬別影響用戶正常使用。

同一含義的組建樣式必須一致。

別使用形狀來暗示其他含義, 這個對話框的形狀表明它與它背后的卡片相關。

總結思考

Google的本次材質設計語言的更新,我相信后續會有一些產品為了打造一些品牌調性,也會慢慢去融入更多的品牌符號語言進去。

當然我們一定要克制與統一,這是最難做的一部分,Google雖然此次系統性的解釋圖形的意義及延伸使用,但是某些地方稍微有些過了,所以我們在設計提取DNA時候需要克制與統一。

那么我們可以從中取學習了解如何才能讓我們產品更加差異化?在同質化的今天,你是如何打造個性化與具有調性的產品呢?

如今AI已來臨,機器人對設計影響極其大,從Google本次更新迭代中就大量提到了AI對產品的影響,以及如何去學習用戶的習慣,然后預測用戶的下一步需求。

我們以后產品會越來越智能,越來越了解人性,除了硬件的升級,研發能力加強,我們也要多去思考下:如何打造獨具匠心的產品?如何打造一個無縫體驗、多平臺、跨語言產品視覺統一體驗?

這方面跨平臺多終端體驗,蘋果已經做得很不錯了,當然還有spotify 音樂產品無縫跨平臺,聽歌/切歌/選歌體驗。相信這只是一個開始,后續會有更多精彩。

#專欄作家#

Tony,微信公眾號:洞見設計,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經驗,擅長產品體驗設計,關注【洞見設計】后臺回復“彩蛋”領取設計資料。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自作者

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. Tony哥,哈哈,星球成員前來報道。

    來自北京 回復
    1. ??

      來自廣東 回復
  2. TONY老師您好,我是TEDxSudi的策展人。我們今年有一場年度大會,可以邀請您做我們的演講嘉賓嗎?

    來自浙江 回復
    1. 感謝邀請,我現在還沒這方面想法呢

      來自廣東 回復
    2. 那真的可惜了,不然相信在您的領域分享上一定是一場思想盛宴。

      來自浙江 回復
  3. Tony老師總能在趨勢來臨之際帶來最前沿的設計思考,每篇文章都很深入淺出,易于學習理解,有靈魂的設計師。

    來自北京 回復
    1. ??

      來自廣東 回復
  4. 界面風格形狀顏色需要綜合考量,各有目的,如果僅從品牌角度強行滲透確實有些過了。或許這項功能更加適合用來進一步規范設計控件的全局控制

    來自上海 回復
  5. tony 老師,婦聯4能給劇透下嗎 ?

    來自北京 回復
    1. 我還沒看呢

      來自廣東 回復
  6. 然而國內的設計都是照著iOS 抄,沒什么用

    來自湖南 回復
  7. 有特色但難看,早晚要改回去。

    來自北京 回復
  8. 好棒,學習了,為tony打call ??

    來自湖北 回復
    1. ??

      來自廣東 回復