Google 拿出了能與蘋果一高下的設計準則:Material Design

作者 | 發布日期 2014 年 07 月 02 日 8:52 | 分類 Android , Google , 軟體、系統
Material-Design

過去 Google 的產品線,每一個都相當的獨立,在產品的設計上反映得尤為明顯,甚至不必看產品設計,只要看一下 Google 每款產品的 LOGO 都能發現許多不同風格的設計。這種混亂難以體現出 Google 的風格,如果 Google 的風格就是混亂和無序的話。



2011 年,賴利·佩吉成為 Google CEO 之後,他管理公司的政策從過去的自由、放任,變為緊密、整合。根據先前的報導,在 Google 發展的初期,因為鼓勵觀點的碰撞,結果發展成一種不留情面的爭論氛圍,主管之間衝突不斷,甚至會拒絕合作。佩吉決心要改變公司的氛圍,2013 年 2 月,在納帕山谷的卡內羅斯客棧酒店裡,他對所有 Google 高級主管說,Google 要實現 10 倍的發展速度,要用全新的方法來解決問題,因此主管之間要學會合作。從現在開始,Google 要對爭鬥零容忍。

除了 Google 不同產品線相互之間變得更加開放、合作外,佩吉還大膽改變 Google 「以工程師為主導」的文化。2011 年,公司啟動代號為「肯尼迪」的專案,召集公司裡所有重要的設計師,重新設計 Google 裡的每一項產品,尋找一種共同的設計語言。最終他們找到跨產品的設計是「卡片式設計」。不僅如此,2012 年,佩吉大膽地作出一項決定,讓設計師參與到早期產品的設計開發中,這項產品是現在我們看到的 Google Now——一項典型採用卡片式設計的跨設備產品,從 Android 到 Chrome,它的表現都幾乎一致。

可以這麼說,從 Google Now 上,Google 的設計師們通過整合 Google 現有的技術和能力,再加上對跨設備界面與交互思考,結合卡片式設計,終於設計出在不同設備上界面和體驗都相對統一的產品。而現在這種跨界的設計經驗,經過兩年的努力,復用在一致飽受割裂、碎片化困擾的 Android 平台上。

Screenshot-2013-05-16-at-7.53.35-AM

由放任發展走向統一管理

Android 一開始充滿著舊 Google 時代的風格:自由、放任。開發者可以任意上傳自己的應用,而不必通過審核;開發者可以隨意按照自己的想法設計應用,Google 方面不予任何限制。可以說,Android 一開始就是一片 Google 開闢的荒地,他允許每個人都可以隨意使用,結果是所有人都各行其事,讓這塊荒地亂糟糟的。直到 Android 4.0,從 Palm 跳槽到 Google 擔任 Android 用戶體驗副總裁的馬蒂亞斯·杜瓦迪(Matias Duarte)上任後,才真正提出設計指導。

而 Google I/O 2014 上著重展示的 Material Design,以非常高調的方式,宣布了 Google Design 的存在:不欣賞設計、對設計毫無感覺的 Google 已是昨日歷史。在發表會當時,Google 還上線名為 Google Design 的網站。從 Android 到衍生的 Android Wear、Auto 和 TV,Material Design 貫穿其中,成為溝通不同平台、設備的靈魂,讓用戶在不同平台上也有連貫的體驗。為了維護這種一致性,Google 甚至不允許第三方修改 Android Wear、Auto 和 TV 的界面以及交互,十分強勢。

非擬真也不全平面的界面設計

Material Design 不能簡單地歸納為平面化設計(Flat Design)。實際上,Android 4.0 的設計風格,也不是純粹的平面化設計,在經過仔細觀察之下,我們可以看到 Android 4.0 在細節上並沒有反對高對比、陰影、紋理,換言之它並不反對立體感。不過,它也不能歸類為擬物化設計,畢竟它所是用的圖案、形狀並非是對現實實體的模擬,而是按照自己對數字世界的理解,以色彩、圖案、形狀進行視覺訊息上的劃分。

根據 Hi-iD 之前在《花樣, 形式, 風格, 氛圍, 主義……設計》中總結設計當中不同的層次,以 Google 過去各個產品而言,都充滿了不同的花樣和形式,但無法統一為一種風格。而現在,Material Design 則結合卡片式設計,又結合現實世界裡紙張的隱喻,統一了 Google 在設計上的表達,從而展示出一種強烈的風格。這種風格不會因為我們使用 Android Wear 或 Android TV 等不同的設備,而感到不同。Hi-iD 說得好,「風格既是自我表達也是一種記名和品牌」。

Material Design 在設計上並沒有完全拋棄 Google 過去在設計上取得的成果。Material Design 和 Google 的標誌一樣,崇尚多彩,但它並不使用那種很豔麗的顏色,反而似乎是為了讓圖案變得沉穩,而有意令原本過於搶眼的色彩混入一點點的灰色,讓圖案變得活潑之餘,又不會因為過於豔麗而讓人感覺到落於俗套和嬉皮。它也沒有拋棄陰影,仔細觀察 Android 4.0 的下拉式選單,我們可以看到底部和右側有著淡淡的陰影。

style-color-colorstory-01_large_mdpi

適用不同尺寸螢幕的設計語言

不過,比起過去的 Andorid Design 來說,Material Design 更有自己的目標,它不僅僅為了好看而已,它要讓不同設備的螢幕上表現出一致、美觀的視覺體驗以及交互。根據 InfoQ 報導,2014 年 4 月 Accel Design 大會期間,杜瓦迪接受 InfoQ 採訪時提出,「作為一個概念,行動已死,它完蛋了。」他的意思是說,「將用於行動設備的應用程序作為單獨的應用程序自行設計是一個錯誤的做法。」

杜瓦迪說,「不應該為不同的螢幕規格創建不同的產品,而是使用一種統一的設計方法開發一款可以跨多種螢幕的產品:桌面、智慧型手機、車載系統解決方案、智慧型手錶。當人們整天都在所有這些不同的螢幕之間切換時,他們應該能夠繼續使用一個特定的應用軟體。這點不僅適用於產品的視覺外觀,也適用於其功能集。如果一個人開發了一個叫車應用軟體,而它能在 7 英吋的螢幕上運行,但不能在 2 英吋的螢幕上運行,這是不行的。」

1111

有跡可循的互動規則

為了統一跨設備間的界面和交互,讓用戶得到連貫的體驗。Material Design 不再讓畫素處於同一個平面,而是讓它們按照規則處於空間當中,具備不同的維度。按照 Wired 的話來說,那就是讓畫素具備海拔高度,這樣子的話,系統的不同層面的元素,都是有原則、可預測的,不讓用戶感到無所適從,也避免開發者擔心因為不同的視覺風格而產生衝突。

Material Design 還規範了 Android 的運動元素,讓按鈕的彈入彈出,卡片的滑入滑出以及從一個界面變化成另一個界面的方法(比如從介紹一首歌的界面到控制播放的界面),都是有秩序、深思熟慮過的。Wired 總結,Material Design 中只有在強調動作以及改變交互狀態時,才會使用運動元素來表示。

對於現實世界中的隱喻,Material Design 更加傾向於用色彩來提示。現在我們按下螢幕當中的按鈕時,可以看到按鈕顏色迅速發生變化,向石頭投入湖面一樣,產生了一波漣漪。杜瓦迪這樣設計是因為 Material Design 中的按鈕都處於一個平面,不再突起,因此它必須採用和以往不同的表示方法,以表明自己已經被按下。

Material Design 所展示的模板當中,最顯眼的是它的小圓點。它的作用好像 iPhone 上的 Home 鍵,是快捷功能入口,又是視覺上有趣的點綴。

然而,正如 Material Design 名字所暗示的,為了適應多尺寸的螢幕,杜瓦迪以及他的團隊,尋求一種更加抽象的表達,一種存在螢幕裡的顯示「材料」。根據 The Verge報導,杜瓦迪團隊在面對 Google 產品裡大量采用的卡片式設計時,靈感火花一閃:何不如這些「卡片」,想像成現實當中存在的,四處滑動的物體。

03

如果這些卡片遵循物理世界裡的法則,那麼它就有自己的規矩,不見得每個人都能夠任意使用,對於設計師來說「限制」是有必要的。在 Google 設計師的想像中,這種抽象的「材料」特性很像紙張,但它又做到現實當中紙張做不到的事情,比如變大變小。這賦予這種「材料」極大的靈活性,讓它足以適應不同尺寸的螢幕。然而,對於 Google 來說,Material Design 還將擴展到 Google 其它產品當中,讓所有產品都烙印上濃濃的 Google 風格。

對於杜瓦迪來說,從 Android 4.0 到 Material Design,體現了他身為設計師的素質和能力,而在這不同的經歷當中,他的感受是,「打造 Ice Cream 時,我好似軍艦上的一名上校,被叫去輪機艙,而這艘船即將在 30 分鐘後轉彎。創造 Material Design 就像指揮太平洋艦隊的海軍上將。我們要在一無所知的情況下作出決定,而船在 48 小時後啟航。」

至於 Material Design 本身,它是一個足以媲美蘋果設計的一套設計框架。

關鍵字: ,

發表迴響