今天帶大家一起學(xué)習(xí)下Google最新設(shè)計(jì)語(yǔ)言- 品牌DNA的高級(jí)拓展性運(yùn)用大法。

2018年5月9日凌晨1點(diǎn)，Google開(kāi)發(fā)者大會(huì)上對(duì) Material Design做了更新的講解，其中令我印象深刻的是Google對(duì)圖形語(yǔ)言單獨(dú)拿出來(lái)做一個(gè)模塊來(lái)解釋?zhuān)缦聢D我標(biāo)紅的地方。

OLD NEW

對(duì)！就是這個(gè)SHAPE的單詞，為什么我會(huì)如此看重，大家應(yīng)該知道構(gòu)成設(shè)計(jì)語(yǔ)言的四大基礎(chǔ)原子是：字體／顏色／網(wǎng)格系統(tǒng)／圖形。

這里的圖形包括圖標(biāo)和一些輔助圖形，它有什么不同呢？

大家看之前以往的版本，材質(zhì)設(shè)計(jì)語(yǔ)言里面沒(méi)有單獨(dú)去說(shuō)形狀這一元素，當(dāng)然也有做的比較好的產(chǎn)品，比如：韓國(guó)的 29cm 和 11街，國(guó)內(nèi)天貓／網(wǎng)易蝸牛讀書(shū)等等。

圖形語(yǔ)言對(duì)我們產(chǎn)品影響極其大，之前網(wǎng)上也有這樣的文章，比如：提取logo上面視覺(jué)基因，然后運(yùn)用到圖標(biāo)里面。對(duì)，這個(gè)沒(méi)錯(cuò)，但是我覺(jué)得不夠好，不全。

今天和大家一起來(lái)分析下Google是如何做的。

我對(duì)圖形的理解

圖形無(wú)處不在，人眼對(duì)圖形的識(shí)別能力遠(yuǎn)遠(yuǎn)高于字體，圖形便于記憶、傳播，這就是為何每次做LOGO時(shí)候都需要去考慮圖形延展呢？

目的為了傳播品牌，在用戶心中打造產(chǎn)品形象，比如：可口可樂(lè)弧線、阿迪達(dá)斯、蘋(píng)果logo這些國(guó)際性大牌子的logo都是易于記憶與傳播的。

那么在產(chǎn)品設(shè)計(jì)中如何體現(xiàn)呢？

我們常用在圖標(biāo)里面去展現(xiàn)一些品牌元素，比如：天貓貓頭直接和圖標(biāo)融合，這是一個(gè)很成功的例子。還有韓國(guó)的Genie音樂(lè)產(chǎn)品，也是直接logo和圖標(biāo)集合。

那么僅僅只是這些嗎？

當(dāng)然不夠，如果我們想傳達(dá)我們產(chǎn)品的品牌理念，深入到用戶心中，只在圖標(biāo)里運(yùn)用是不夠的。

比如：可口可樂(lè)每年做產(chǎn)品運(yùn)營(yíng)推廣，不斷大量的重復(fù)它logo弧線元素，這樣能長(zhǎng)期在用戶心中形成記憶點(diǎn)。

Google是如何做的？

Google這次讓我們打開(kāi)眼界，下面Google的原話：

形狀可以引導(dǎo)注意力，讓用戶易于識(shí)別組件，溝通狀態(tài)和品牌語(yǔ)言傳達(dá)。

對(duì)次有了一些更深刻的認(rèn)識(shí)，形狀其實(shí)運(yùn)用不止我們平常所理解的。我之前寫(xiě)過(guò)一篇文章，就是形狀對(duì)布局的影響，里面就是講了形狀的一些基礎(chǔ)作用。

下圖是來(lái)自材質(zhì)語(yǔ)言的截圖：

圖片來(lái)自google

Google的想法非常大膽：一個(gè)方形的變化，延伸出不同的形狀，當(dāng)然并不是單獨(dú)一個(gè)產(chǎn)品設(shè)計(jì)里面放這么多形狀，而是運(yùn)用到不同產(chǎn)品，運(yùn)用不同的圖形，傳達(dá)其特殊品牌調(diào)性、大統(tǒng)一，局部戰(zhàn)略調(diào)整。

比如：上圖凹槽圖形用在主TAB上，形成視覺(jué)焦點(diǎn)，容易吸引用戶區(qū)關(guān)注它，一般核心功能會(huì)如此設(shè)計(jì)。

Google已提到了可以用于區(qū)分不同組件，這觀點(diǎn)我很贊同，之前我對(duì)愛(ài)奇藝做了視覺(jué)分析，發(fā)現(xiàn)它們一級(jí)導(dǎo)航和二級(jí)導(dǎo)航樣式一樣，那么這樣用戶如何區(qū)分呢？

圖形可以用于表達(dá)某一正在交互的狀態(tài)，比如：選中狀態(tài)，當(dāng)然并不是單獨(dú)去使用。Google特定強(qiáng)調(diào)了：需要和其他視覺(jué)元素集合起來(lái)使用，比如：顏色。

其實(shí)這一觀點(diǎn)以前就有啦！比如：咱們的check box控件，選中前后狀態(tài)不一樣。

不過(guò)Google這個(gè)是否略顯夸張些？

最后重點(diǎn)來(lái)啦！比如：可以用于表達(dá)品牌語(yǔ)言，那么圖形來(lái)自哪里？用在哪里？

如：上圖是一個(gè)Crane的應(yīng)用，他們logo是中間一個(gè)圖形加外帶橢圓底，這里Google提取了橢圓作為視覺(jué)DNA，并沿用到產(chǎn)品的每一個(gè)控件。

同一產(chǎn)品多終端統(tǒng)一符號(hào)語(yǔ)言。

如下圖提取LOGO關(guān)鍵特殊符號(hào)：

下圖Shrine提取菱形棱角圖形運(yùn)用到產(chǎn)品設(shè)計(jì)細(xì)節(jié)里面。

看完你想說(shuō)什么？我只想冷靜三分鐘?。?！

其實(shí)說(shuō)實(shí)話，對(duì)于品牌DNA的延續(xù)早在年初的時(shí)候就思考過(guò)，如何去把品牌語(yǔ)言在產(chǎn)品設(shè)計(jì)里面體現(xiàn)？

我當(dāng)時(shí)理解是：首先要了解我們的品牌核心是什么？

我們的品牌理念是啥？品牌solgan，我們要給用戶傳達(dá)一種什么樣的情懷？然后如何去巧妙提取產(chǎn)品logo里面的視覺(jué)基因，比如：某一圖形元素；比如：線條／點(diǎn)／某一特殊圖形符號(hào)，這圖形一定是易于延展，拓展性強(qiáng)的。

然后運(yùn)用到產(chǎn)品的每一個(gè)細(xì)節(jié)里面，比如：圖標(biāo)、按鈕、異常狀態(tài)、啟動(dòng)頁(yè)、運(yùn)營(yíng)banner、情感化設(shè)計(jì)等等，如今大佬Google 已經(jīng)去這樣做了，而且做得很系統(tǒng)，包括動(dòng)效都有引子。

當(dāng)時(shí)也有一些產(chǎn)品已經(jīng)這樣做了，比如：韓國(guó)29cm，設(shè)計(jì)細(xì)節(jié)非常好，圖形運(yùn)用非常到位。國(guó)內(nèi)天貓貓頭運(yùn)用也是滲透到產(chǎn)品里面去了。

Google這次又給我我們一些大膽的思考，能運(yùn)用這么廣的范圍？