卡片式設(shè)計(jì):來(lái)自Google的第三大設(shè)計(jì)風(fēng)格
經(jīng)常使用Google產(chǎn)品的朋友應(yīng)該體驗(yàn)的出,以Google Now為代表,Google全線產(chǎn)品都努力趨向簡(jiǎn)潔,在其中,“卡片”這一并不新鮮的概念成了Google最重視的元素。
不知Google是有意還是無(wú)意,卡片的設(shè)計(jì)體現(xiàn)了典型的現(xiàn)代主義風(fēng)格,白色正方形方框里只有最關(guān)鍵的文字或者圖片,無(wú)一絲一毫的冗余。這種設(shè)計(jì)似乎在暗示我們,或許今后可以用簡(jiǎn)單的方式呈現(xiàn)更多的信息。
我頭一回見到卡片還是在用知識(shí)圖譜的時(shí)候,此次在Google Now見到卡片,感覺既親切又陌生,以天氣和導(dǎo)航為例,Google一改之前被動(dòng)提供信息的方式,以大量的個(gè)人數(shù)據(jù)為基礎(chǔ),基于算法來(lái)預(yù)知用戶的下一步動(dòng) 作,從而在用戶搜索之前就給出答案,不可謂不高明。只是,凡事需要適可而止,在萬(wàn)眾期待Google Glass能使用更先進(jìn)的現(xiàn)實(shí)增強(qiáng)技術(shù)的時(shí)候,Google居然也拿卡片來(lái)糊弄大家,真當(dāng)卡片是***的啊!更過(guò)分的是,Google+每頁(yè)現(xiàn)在已顯示三欄 卡片,可Google還嫌不足,硬是把評(píng)論和多余的內(nèi)容也隱藏了進(jìn)去,但是這里你可能要問(wèn)了,那隱藏了怎么看呢,哎,別急,人家Google總能發(fā)明異想 天開的解決方案:你可以點(diǎn)擊小卡片,就會(huì)彈出大卡片,完整的信息可是在大卡片上的。
如此單純可愛的卡片,也被Google玩出了忒多花樣。
現(xiàn)在吹捧Google卡片是不是還為時(shí)過(guò)早呢?
Android的用戶體驗(yàn)負(fù)責(zé)人Matias Duarte坦誠(chéng):“沒人說(shuō)過(guò)卡片是我們發(fā)明的,我們只是把這種隨處可見的設(shè)計(jì)搬到了移動(dòng)互聯(lián)網(wǎng)領(lǐng)域而已,它和實(shí)體卡片一樣,從始至終都是為了解決一樣的設(shè)計(jì)問(wèn)題。”
我說(shuō):“大量信息連續(xù)性推送的問(wèn)題從移動(dòng)互聯(lián)網(wǎng)出現(xiàn)***天就存在了,當(dāng)然早于最近幾年才流行的觸屏設(shè)備。”所以不難理解,當(dāng)谷歌工程師們面對(duì) Google Now提出的設(shè)計(jì)挑戰(zhàn)時(shí),為什么選擇卡片了,它既可以單獨(dú)開來(lái)靈活使用,又可以組成一組來(lái)傳遞那些大量的或者有連續(xù)性要求的信息,并且在表達(dá)上能呈現(xiàn)出整 體一致的效果。
只是,設(shè)計(jì)師們沒有想到的是,卡片反過(guò)來(lái)影響了他們的設(shè)計(jì)方案。Duarte是這樣和我說(shuō)的:“卡片有著天然的局限性,正是這種局限性使得其他部分 的設(shè)計(jì)變得簡(jiǎn)單許多,想想看,如果一張卡片上放兩三張圖片,那會(huì)顯得多亂啊,所以只能放一張圖片或信息,這樣一來(lái),就不用考慮多圖情況下的排版問(wèn)題了。”
卡片設(shè)計(jì)像病毒一樣席卷Google
Google卡片一洗之前信息顯示的雜亂無(wú)章,在某種意義上甚至重新定義了信息顯示,首先、它直接排除了多余的信息,尤其是廣告;其次、它淘汰了超鏈接,能讓用戶專注于信息本身而不是找信息這種事情上。另外值得一提的是,Google卡片能在各種尺寸的屏幕上實(shí)現(xiàn)無(wú)差別體驗(yàn),甚至是在Glass上也 一樣。
不為人所知的是,Google花在用戶體驗(yàn)上的精力要遠(yuǎn)遠(yuǎn)比花在數(shù)據(jù)整合上的多,別看現(xiàn)在有41種卡片,數(shù)倍于這個(gè)的卡片在Google內(nèi)部就被否定了,每一種卡片類型都是經(jīng)過(guò)數(shù)個(gè)團(tuán)隊(duì)的審核才最終問(wèn)世,我敢肯定沒有哪張卡片是通過(guò)行政命令加入那41種當(dāng)中的。
Google+也加入了使用卡片的行列,Google+***設(shè)計(jì)師Fred Gilbert告訴我,Google+使用了超過(guò)三十種卡片,他還特意告訴了我一些很細(xì)微的不同,但是我僅僅認(rèn)出了其中幾處。
雖然我本人不建議諸位糾纏于細(xì)節(jié),但不可否認(rèn),正是這些細(xì)節(jié)確保了不同的內(nèi)容在一塊屏幕上和諧相處,而且放置卡片的“欄”的概念也值得表?yè)P(yáng)。它從容 的適應(yīng)不同尺寸的屏幕上,同時(shí)還保證著用戶體驗(yàn)的一致,比如,在筆記本上,Google+可以在同一時(shí)間顯示三欄卡片;而在手機(jī)上可以一次顯示一欄卡片, 而這并不影響卡片的使用效果。
Google卡片真的真的有點(diǎn)擬物化
在整個(gè)采訪過(guò)程種,有個(gè)詞一直回響在我的腦海里:存在感。Duarte這樣對(duì)我說(shuō):“你或許會(huì)想,所謂的卡片只是屏幕上的幾個(gè)象素點(diǎn)罷了。但是,或 許你已經(jīng)注意到,我們的設(shè)計(jì)師給了卡片以‘肉體’。雖然沒有特別復(fù)雜的效果,卻依然能讓人感覺,那是真實(shí)的。”偉大的設(shè)計(jì)師們把平面的設(shè)計(jì)擬物化,讓人下 意識(shí)的以為那是真正的卡片,從而去摸、去翻、去整理。
這次Google大會(huì)上,***次登臺(tái)的Google Maps團(tuán)隊(duì)也展示了他們的重大變革,他們的地圖卡片整合了更多的信息,不僅有餐廳位置和導(dǎo)航,還有來(lái)自普通用戶和評(píng)估公司Zagat的評(píng)價(jià),有效的解決 了多年來(lái)Google Maps不得不在地圖外增加一個(gè)列表顯示附加信息的窘境。團(tuán)隊(duì)中的用戶體驗(yàn)設(shè)計(jì)師Jonah Jones對(duì)我說(shuō):“我們不想把整個(gè)地圖都蓋住,所以左上角的面板可以展開也可以折疊。但是還有個(gè)小小的問(wèn)題,它總是無(wú)法讓人感覺到它可以被操作,比如 說(shuō),當(dāng)面板處于打開狀態(tài)時(shí),人們通常感覺它是無(wú)法折疊的。”這個(gè)問(wèn)題可能來(lái)自于卡片的擬物化設(shè)計(jì),批評(píng)它和贊美它的人同在。
Jones和他的團(tuán)隊(duì)發(fā)現(xiàn),其實(shí)可以學(xué)習(xí)真的卡片那樣,把Google Maps上的卡片也堆起來(lái),這樣用戶就能像使用真的卡片那樣使用它們了,卡片也不至于喧賓奪主了。
卡片有點(diǎn)像Google的狗皮膏藥,哪需要就能貼哪
如今,這個(gè)脫胎于便條的白色矩形成了Google顯示信息的不二選擇,大部分Google的產(chǎn)品都采用了它,為來(lái)很有可能一舉占領(lǐng)所有設(shè)備的桌面。但是,作為一家并不以產(chǎn)品設(shè)計(jì)和視覺傳達(dá)出名的公司,卡片的效果不應(yīng)該被吹捧到和多平臺(tái)戰(zhàn)略一樣的地位。
Google已然介入我們的生活太深了,它幾乎無(wú)所不在,卡片的出現(xiàn)更像是一個(gè)緩沖器,一邊是手眼通天的巨頭,一邊是一無(wú)所知的用戶,新奇事物有效轉(zhuǎn)移了人們的視線,巨頭可以更從容的進(jìn)行布置。