如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

本文轉(zhuǎn)自，頭條號的人人都是產(chǎn)品經(jīng)理，的一個大神。

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

OLD NEW

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

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

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

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

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

我對圖形的理解

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

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

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

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

那么僅僅只是這些嗎？

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

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

Google是如何做的？

Google這次讓我們打開眼界，下面Google的原話：

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

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

下圖是來自材質(zhì)語言的截圖：

圖片來自google

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

需要注意點

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

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

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

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

總結(jié)思考

Google的本次材質(zhì)設(shè)計語言的更新，我相信后續(xù)會有一些產(chǎn)品為了打造一些品牌調(diào)性，也會慢慢去融入更多的品牌符號語言進(jìn)去。

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

那么我們可以從中取學(xué)習(xí)了解如何才能讓我們產(chǎn)品更加差異化？在同質(zhì)化的今天，你是如何打造個性化與具有調(diào)性的產(chǎn)品呢？

如今AI已來臨，機(jī)器人對設(shè)計影響極其大，從Google本次更新迭代中就大量提到了AI對產(chǎn)品的影響，以及如何去學(xué)習(xí)用戶的習(xí)慣，然后預(yù)測用戶的下一步需求。

我們以后產(chǎn)品會越來越智能，越來越了解人性，除了硬件的升級，研發(fā)能力加強，我們也要多去思考下：如何打造獨具匠心的產(chǎn)品？如何打造一個無縫體驗、多平臺、跨語言產(chǎn)品視覺統(tǒng)一體驗？

這方面跨平臺多終端體驗，蘋果已經(jīng)做得很不錯了，當(dāng)然還有spotify 音樂產(chǎn)品無縫跨平臺，聽歌／切歌／選歌體驗。相信這只是一個開始，后續(xù)會有更多精彩

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)