2018-5-14 藍(lán)藍(lán)設(shè)計(jì)的小編
本文轉(zhuǎn)自,頭條號的人人都是產(chǎn)品經(jīng)理,的一個(gè)大神。
2018年5月9日凌晨1點(diǎn),Google開發(fā)者大會上對 Material Design做了更新的講解,其中令我印象深刻的是Google對圖形語言單獨(dú)拿出來做一個(gè)模塊來解釋,如下圖我標(biāo)紅的地方。
OLD NEW
對!就是這個(gè)SHAPE的單詞,為什么我會如此看重,大家應(yīng)該知道構(gòu)成設(shè)計(jì)語言的四大基礎(chǔ)原子是:字體/顏色/網(wǎng)格系統(tǒng)/圖形。
這里的圖形包括圖標(biāo)和一些輔助圖形,它有什么不同呢?
大家看之前以往的版本,材質(zhì)設(shè)計(jì)語言里面沒有單獨(dú)去說形狀這一元素,當(dāng)然也有做的比較好的產(chǎn)品,比如:韓國的 29cm 和 11街,國內(nèi)天貓/網(wǎng)易蝸牛讀書等等。
圖形語言對我們產(chǎn)品影響極其大,之前網(wǎng)上也有這樣的文章,比如:提取logo上面視覺基因,然后運(yùn)用到圖標(biāo)里面。對,這個(gè)沒錯,但是我覺得不夠好,不全。
今天和大家一起來分析下Google是如何做的。
圖形無處不在,人眼對圖形的識別能力遠(yuǎn)遠(yuǎn)高于字體,圖形便于記憶、傳播,這就是為何每次做LOGO時(shí)候都需要去考慮圖形延展呢?
目的為了傳播品牌,在用戶心中打造產(chǎn)品形象,比如:可口可樂弧線、阿迪達(dá)斯、蘋果logo這些國際性大牌子的logo都是易于記憶與傳播的。
那么在產(chǎn)品設(shè)計(jì)中如何體現(xiàn)呢?
我們常用在圖標(biāo)里面去展現(xiàn)一些品牌元素,比如:天貓貓頭直接和圖標(biāo)融合,這是一個(gè)很成功的例子。還有韓國的Genie音樂產(chǎn)品,也是直接logo和圖標(biāo)集合。
那么僅僅只是這些嗎?
當(dāng)然不夠,如果我們想傳達(dá)我們產(chǎn)品的品牌理念,深入到用戶心中,只在圖標(biāo)里運(yùn)用是不夠的。
比如:可口可樂每年做產(chǎn)品運(yùn)營推廣,不斷大量的重復(fù)它logo弧線元素,這樣能長期在用戶心中形成記憶點(diǎn)。
Google這次讓我們打開眼界,下面Google的原話:
形狀可以引導(dǎo)注意力,讓用戶易于識別組件,溝通狀態(tài)和品牌語言傳達(dá)。
對次有了一些更深刻的認(rèn)識,形狀其實(shí)運(yùn)用不止我們平常所理解的。我之前寫過一篇文章,就是形狀對布局的影響,里面就是講了形狀的一些基礎(chǔ)作用。
下圖是來自材質(zhì)語言的截圖:
圖片來自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上,形成視覺焦點(diǎn),容易吸引用戶區(qū)關(guān)注它,一般核心功能會如此設(shè)計(jì)。
Google已提到了可以用于區(qū)分不同組件,這觀點(diǎn)我很贊同,之前我對愛奇藝做了視覺分析,發(fā)現(xiàn)它們一級導(dǎo)航和二級導(dǎo)航樣式一樣,那么這樣用戶如何區(qū)分呢?
圖形可以用于表達(dá)某一正在交互的狀態(tài),比如:選中狀態(tài),當(dāng)然并不是單獨(dú)去使用。Google特定強(qiáng)調(diào)了:需要和其他視覺元素集合起來使用,比如:顏色。
其實(shí)這一觀點(diǎn)以前就有啦!比如:咱們的check box控件,選中前后狀態(tài)不一樣。
不過Google這個(gè)是否略顯夸張些?
最后重點(diǎn)來啦!比如:可以用于表達(dá)品牌語言,那么圖形來自哪里?用在哪里?
如:上圖是一個(gè)Crane的應(yīng)用,他們logo是中間一個(gè)圖形加外帶橢圓底,這里Google提取了橢圓作為視覺DNA,并沿用到產(chǎn)品的每一個(gè)控件。
同一產(chǎn)品多終端統(tǒng)一符號語言。
如下圖提取LOGO關(guān)鍵特殊符號:
下圖Shrine提取菱形棱角圖形運(yùn)用到產(chǎn)品設(shè)計(jì)細(xì)節(jié)里面。
看完你想說什么?我只想冷靜三分鐘?。?!
其實(shí)說實(shí)話,對于品牌DNA的延續(xù)早在年初的時(shí)候就思考過,如何去把品牌語言在產(chǎn)品設(shè)計(jì)里面體現(xiàn)?
我當(dāng)時(shí)理解是:首先要了解我們的品牌核心是什么?
我們的品牌理念是啥?品牌solgan,我們要給用戶傳達(dá)一種什么樣的情懷?然后如何去巧妙提取產(chǎn)品logo里面的視覺基因,比如:某一圖形元素;比如:線條/點(diǎn)/某一特殊圖形符號,這圖形一定是易于延展,拓展性強(qiáng)的。
然后運(yùn)用到產(chǎn)品的每一個(gè)細(xì)節(jié)里面,比如:圖標(biāo)、按鈕、異常狀態(tài)、啟動頁、運(yùn)營banner、情感化設(shè)計(jì)等等,如今大佬Google 已經(jīng)去這樣做了,而且做得很系統(tǒng),包括動效都有引子。
當(dāng)時(shí)也有一些產(chǎn)品已經(jīng)這樣做了,比如:韓國29cm,設(shè)計(jì)細(xì)節(jié)非常好,圖形運(yùn)用非常到位。國內(nèi)天貓貓頭運(yùn)用也是滲透到產(chǎn)品里面去了。
Google這次又給我我們一些大膽的思考,能運(yùn)用這么廣的范圍?
Google舉了幾個(gè)反面例子,我們在提取圖形或者使用時(shí)需要注意的幾點(diǎn),如下:
注意圖形的指向性和觸摸大小,千萬別影響用戶正常使用。
同一含義的組建樣式必須一致。
別使用形狀來暗示其他含義, 這個(gè)對話框的形狀表明它與它背后的卡片相關(guān)。
Google的本次材質(zhì)設(shè)計(jì)語言的更新,我相信后續(xù)會有一些產(chǎn)品為了打造一些品牌調(diào)性,也會慢慢去融入更多的品牌符號語言進(jìn)去。
當(dāng)然我們一定要克制與統(tǒng)一,這是最難做的一部分,Google雖然此次系統(tǒng)性的解釋圖形的意義及延伸使用,但是某些地方稍微有些過了,所以我們在設(shè)計(jì)提取DNA時(shí)候需要克制與統(tǒng)一。
那么我們可以從中取學(xué)習(xí)了解如何才能讓我們產(chǎn)品更加差異化?在同質(zhì)化的今天,你是如何打造個(gè)性化與具有調(diào)性的產(chǎn)品呢?
如今AI已來臨,機(jī)器人對設(shè)計(jì)影響極其大,從Google本次更新迭代中就大量提到了AI對產(chǎn)品的影響,以及如何去學(xué)習(xí)用戶的習(xí)慣,然后預(yù)測用戶的下一步需求。
我們以后產(chǎn)品會越來越智能,越來越了解人性,除了硬件的升級,研發(fā)能力加強(qiáng),我們也要多去思考下:如何打造獨(dú)具匠心的產(chǎn)品?如何打造一個(gè)無縫體驗(yàn)、多平臺、跨語言產(chǎn)品視覺統(tǒng)一體驗(yàn)?
這方面跨平臺多終端體驗(yàn),蘋果已經(jīng)做得很不錯了,當(dāng)然還有spotify 音樂產(chǎn)品無縫跨平臺,聽歌/切歌/選歌體驗(yàn)。相信這只是一個(gè)開始,后續(xù)會有更多精彩
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com