谷歌Material Design UI 為什么這么美?設計即功能
Google I/O 2014發布了全新的設計語言Material Design(卡片式材料設計),它是迄今為止最受歡迎的視覺設計語言之 一,利用了分層的卡片式設計、使用更多的空白和層次排版結構,經歷了幾年的迭代和提煉,來為手機、平板電腦、臺式機和“其他平臺”提供更一致、兼具外觀和 功能的“外觀和感覺”。而且,不止于谷歌和安卓app。
事實上,多重層疊的概念并非谷歌首創,不過,谷歌對其進行了更深一層的開發——在觸覺體驗中滲入大膽活力的審美效果(本質設計)。那么,其實,Material Design真正的優勢在哪呢?
首先,我們來具體了解一下Material Design:
Material Design突破了谷歌以往的所有設計,包括柵格、風格、布局等,谷歌將其特點概括為擬物和扁平的結合。和蘋果以前的擬物設計 并不盡相同,Material Design更關心系統反應的質感、層次、深度,和其他物體的疊放邏輯,比如打開頁面時,新頁面不是像以往那樣直接跳轉, 而是從一個中心點擴展開來,并且利用原頁面在底部的投影營造出立體空間感,告訴用戶,頁面從哪里來、到哪里去,形成一種操作邏輯。從某種程度上來 說,Material Design更像是把交互界面變成了一張張有邏輯順序的卡片紙。
Material誕生之初首先搭載的設備分別是Nexus 6智能手機和Nexus 9平板電腦,但后來延伸至其他所有設備,取得這樣的效果都是因為它植根于幾個原則:
1、原質化的視覺提示:設計結合實體物理屬性,參照了紙質和墨水材料的元素。
2、圖像式的、深思熟慮的:技術推動了視覺效果的變革,空間、尺度、色彩、圖像、排版等元素組成層次結構明顯的設計,一切都經過了慎密的考慮。
3、移動效果產生的意義:和物理世界接近的觸感可以讓用戶更為自然、快速地理解和認知。
認識“原質化外觀”:
如前文所提到的,其實這個新型的設計我們可以將其理解為“數字紙”,然后組成這個這個框架的元素就是一層層“卡紙”,系統運行時就像翻開一張張由一定邏輯組合的卡紙。而與真正卡紙不同的是,Material可以改變它們的形狀和形式,比如拉伸和彎曲。
就如 Mobile Design Trends 2015 & 2016 所解釋的那樣,設計本身相當于一個內容和信息的裝載體。這個載體采用的是扁平化設計,但利用陰影展現出其層級形式就成為了與其他設計的區別特征,其他設計 或者是采用漸變、紋理等形式來區別層次。例如以下這個APP的界面,用戶進行最新的操作的菜單顯示于頂層,歷史操作路徑則變成灰色外觀處于底層。
在設計中建立起目錄的功能和與內容的聯系,不僅使得操作更接近物理真實,而且建立起一種深度,多種要素疊加起來就像是創造了一個三維的世界。
Material為響應式設計而生
分層式的設計根本上說是迎合了響應式設計的趨勢——每考慮一個層級的設計,就要考慮所有元素之間應該如何自動關聯。所以說,谷歌的扁平化并不只是把立體的設計效果壓扁,事實上,Material的扁平化設計更是功能上的簡化與重組。
谷歌當初推崇這套標準是因為,靈活的柵格設計能夠保證布局的一致性、連接點之間內容的回流,以及由點到面的打開方式能夠描述出APP的打開過程。
為了適應各種設備的屏幕和分辨率,在從點變成面的過程中,應用界面的連接點像素包括了480、600、840、960、1280、1440和1600的像素梯度。這些參數給設計者在調整臺式電腦、平板電腦和智能手機的界面時提供了一個尺寸的基準。
Material和其他移動界面設計趨勢
越來越多的網站設計已在UI上走扁平式設計的路線,當谷歌創造了分層式界面連接時,其他系統也會加入到這場UI美學的變革當中。而Material Design為什么能夠鶴立雞群呢?
其實,Material Design也是借鑒了其他扁平化設計的概念以及新潮的技術,甚至有些人會職責谷歌的Material Design與扁平化設計模式Flat Design 2.0太過雷同。
在Material的扁平化設計中,它仍舊使用了分層元素來營造三維空間,而且實質上是設計師將以往被淘汰的設計技巧重新拿了回來。因為本質上來 說,扁平化的概念最核心的地方就是:去掉冗余的裝飾效果,即去掉多余的透視、紋理、漸變等等能做出3D效果的元素,讓“信息”本身重新作為核心被凸顯出 來,并且在設計元素上強調抽象、極簡、符號化。但Material的成功就在于化腐朽為神奇,它重拾這些技巧最大的不同是,將其用于提高系統的實用性,而 非裝飾性。
Material和其他設計模式最大的區別還在于,其配色方案已經最大限度地接近于扁平化設計美學。因為在扁平化設計中,配色是最重要的一環,它 通常采用比其他風格更明亮更炫麗的顏色,而且還意味著更多的色調。其他設計最多只包含兩三種主要顏色,但是扁平化設計中會平均使用六到八種顏色。谷歌的 Material正是如此,對于不同的選項會配有不一樣的顏色——明亮、絢麗、完全飽和的色調。
比如下圖這個APP界面,所有元素組合起來(圖片、標記、簡要文字、層疊)就簡單利落地展示了該應用要傳達的信心。這就體現了Material Design并不是為了營造視覺沖擊而堆疊這些圖片、陰影效果,而是它本身是功能的一部分,能夠輔助核心信息的突出。
如今,你似乎已經很難找到哪個界面不是由點到面,進而全屏顯示的,這就是一個不可逆轉額UI設計趨勢。
via TNW