6
| 本文作者： 百度MUX | 2016-01-08 10:29 |
【編者按】文章來自百度MUX翻譯小組，應作者要求，如文章已獲雷鋒網授權轉載，也請保留原標題。
譯者注：本文譯自UXPin出品的電子書Mobile Design Book of Trends 2015&2016中第二章Layered Mobile Interfaces。第一章卡片設計可參看：《2015-2016年最流行的APP設計是什么？比如，Facebook那樣的》。
UXPin 這本電子書結合豐富案例講述了2015-2016年間重要的移動設計趨勢，共有6個章節：靈巧的手勢操作、層級化的移動界面、雋永的字體排印、扁平化設計、愉悅的微交互、小卡片。
Google的Material Design是最有影響力的視覺設計理念之一。它用清晰的設計和可用性準則重新塑造了一種所見即所得的交互方式。
（Photo credit: Dropbox）
然而Material Design的理念不僅僅局限在Google和安卓APP中。設計師們通過很多方法在使用這個設計理念。正如名字所暗示的那樣，多個元素的分層疊加，就像一副牌一樣，建立一種獨特而又統一的體驗，既實用又美觀。
將元素在界面內分層的想法并不是一個新理念。然而， Material Design結合了大量具備美感和動態的體驗，使得這一理念更進一步。
在我們更進一步說明之前，先確保大家對Material Design的認知都一樣。讓我們回憶一下：
Material Design是Google的一種設計理念，它概括出了APP在移動設備上應該長什么樣以及如何工作。它打破了一切——如動畫、風格、布局，同時給出了模式、內容、可用性的準則。如Google所說——
我們進行自我挑戰，為我們的用戶創造出了一種視覺語言，它遵循經典的設計準則，同時結合最新的科技和創新，這就是Material Design。
Material起源于移動設備，同時可以擴展到其它設備。它立足于以下幾個準則：
1、真實的視覺提示：該設計是建立在真實的基礎之上，通過紙張和墨水的實際展現得到的啟發。
2、形象鮮明，意圖明確：傳統的設計技術驅動了視覺效果。排版，網格，控件，尺度，色彩和圖像等等這些引導著設計。元素都按照清晰的層級歸屬于既定空間。色彩和樣式的選擇更加形象鮮明。
3、動畫呈現意圖：Material Design中動畫是一個關鍵要素，但它不僅僅是為了動起來。動畫需要發生在一個特定的場景中，通過簡單的轉換來聚焦設計。運動和行為都應當是真實物理世界的實際反應。
我們在討論分層界面設計的時候，常常會碰到一個概念叫“觸覺設計”。把它想象成好幾張紙堆疊在一起，它們組成一個包含所有事物的框架。這些紙張和顯示物理世界中的紙略有不同的是它們可以改變形狀和形式，比如延展或傾斜，但在某種程度上又是符合真實的物理反饋的。
（Photo credit: Google Material Design）
觸覺界面是一個內容和信息的容器。容器被設計成扁平的，邊緣帶有淡淡的影子，這樣不同容器和層級之間得以區分。其它區分層級關系的方式，比如紋理、漸變和劃分都是不必要的。
（Photo credit: Reddit）
在Reddit這個APP上，你可以看出不同層級之間的分離。覆蓋在主內容的灰色浮層之上，有一個明顯的最頂部的菜單界面。甚至是頂部大圖也包含了分層的元素和陰影來強調三維的觸覺界面。
（Photo credit: Google Material Design）
通過觸覺界面的設計可以清晰的明確內容之間的聯系和功能。（每個容器通常有一項工作，比如鏈接或視頻播放器。）這種方式也可用來定義深度，元素在容器中可層疊著展現，創造出一種近乎三維的世界。
層級設計本質上是為了自適應設計而生。所有的設計原則實際上都在鼓勵設計師進行自適應設計（無論你更喜歡稱之為自適應或響應式都可以）。
在考慮層級界面的時候，元素之間的相互關聯是很重要的。
（Photo credit: CBS Sports）
Google提及它的標準是源自于“彈性的網格確保了不同層級的一致性的布局，尺寸的臨界描述了內容如何重排在不同尺寸的屏幕，應用界面如何能能夠從小尺寸擴展到大尺寸?！?/p>
（Photo credit: Google’s Material Design Guidelines）
注意事項包括：
? 臨界尺寸：寬度包括480、600、840、960、1280、1440、1600像素
? 網格：12欄布局，包括模塊寬度和間距(8、16、24、40像素)，以及基線網格 ?
? 界面行為：UI自適應屏幕的規格，可切換或隱藏
? 模式：功能模塊是基于界面尺寸的，包括顯示、變形、擴展、集合和劃分。
設計師可以更容易的確保他們的界面可以在任何情況下適應任何設備。他們提供了一種規范來幫助設計師構建臺式電腦、平板電腦和手機的界面布局。
創建層級化界面的時候，其他的設計趨勢同樣可以發揮作用。Material Design借鑒了大量扁平化和其它技法的設計理念。實際上也存在Material Design是2.0版本的扁平設計的爭議，因很多視覺處理方式非常相似。
將層級化設計完全從扁平化設計中區分開來的關鍵點是層級化設計需要創造更多的三維空間以及光線的模擬。本質上來說，設計師回歸了一些扁平設計的的設計技巧，所不同的是他們可以利用這些技巧來提高易用性，而不僅僅是美化界面。
（Photo credit: WordPress for Android）
層級化設計的色彩選擇也非常接近扁平化設計的審美。最大的區別是Google提供了大量的可選色彩。調色板中具備明快、鮮明、高飽和度的色彩。雖然很多設計師在扁平化設計中會選擇藍色和紅色，更多的界面被賦予深紫和明黃色。這可能是因為這些色調搭配白色或者黑色的文字時對比強烈、識別度高。
（Photo credit: Morning Routine）
層級化界面在也可以很好的應用在極簡界面中，特別是涉及到排版的時候。有著清晰層次結構的無襯線字體是最好的選擇。谷歌建議使用Roboto作為主要字體（有很多類型，如細體、粗體、斜體和瘦體）。這個樣式可以區分字體之間的層級關系，以此在不同元素間對用戶進行引導。極簡主義的精髓就是，通過大小和比例的正確應用，哪怕只靠字體，也足夠了。
（Photo credit: Field Trip）
現在你已經很難找到一個沒有全屏圖像功能的APP了，層級界面進一步強調了圖像的生動和指向性。
上面是 Field Trip APP，它使大部分圖片都有明確的指向，說明了Material Design不僅僅是通過顏色，圖片和特效來加強視覺沖擊力，它們都是整體設計的必備元素。
最后，層級界面可以完美地卡片化，這在之前的章節已經說過了。縱觀所有的案例，幾乎都包含了卡片要素。從小卡片到全屏選項，這些都是一起進化的。
接下來呢？
2015年6月，谷歌發布了一些新的設計準則Material Design Lite，任何網頁和APP都可以遵循這個準則，來做的看起來更像安卓APP。我們應該從中汲取一些東西，即使是iOS APP或者非APP。
Material Design很好看而且在很多領域效果很好。設計師想要實際應用，而Lite版本提供了完美的層級指導。Material Design Lite 也是一個對開發者和設計師很好的工具，如果想要開發一個跨安卓iOS平臺的APP，那么通過應用這一準則，在外觀、感覺、功能上都會有著一致的體驗，而不用考慮設備的差異性。
層級化的概念肯定會被保留下來，但是整體看上去會更“非層級化”一些，少一點質感，這樣設計風格就可以介于Material Lite和iOS標準之間了。
（Photo credit: The Weather Channel）
Weather Channel iOS APP已經應用了這個策略。APP將卡片、顏色和圖片都層級化了。其中設計概念重合最多的地方是在卡片的應用和幾何圖形的布置上。“Less Material”的設計主要是減少應用深度和陰影，這樣看起來更扁平更精簡。
漸變和單色層是另一種形式的層級界面，可以持續的延伸層級。單色色板是一個經典的設計技巧，可以很容易地創建色彩銳利的組件，以適應幾乎任何類型的內容類型。
（Photo credit: Elevate）
Elevate iOS APP使用了漸變背景結合層級化卡片。這個動效是非常符合Material Design風格的，但漸變的使用卻很特別。這個簡單的變化體現了設計師在兼顧到更多方面的功能時，開始打破層級界面的視覺規則。
設計師持續使用更深的顏色和色調到層級界面和Material Design 概念中去?，F在大部分APP都應用了白色和淺色的方案，但是更深的顏色已經開始流行了。
（Photo credit: Weather Timeline）
Weather Timeline就是一個很好地例子。這個簡單的色調變化已經足以從同類APP中脫穎而出了。它依然使用了固有的層級，但是應用了更深的色調，看起來更簡單優雅。整個設計的都是不飽和的色調和諧的深色方案。
如今層級界面的趨勢才剛剛開始。
簡單的視覺風格和更易用的設計風格開始逐漸融合，然后隨著設計師的成長開始逐漸落地。更有意思的是層級界面看起來更像是最近幾年流行的設計風格的一種延伸，比如扁平化和極簡化。
在某些點上，趨勢有可能會回擺到擬物風格上，但是在那之前，Material Design的概念還是有立足點的。Design faster wireframes & prototypes with UXPin(free trial)
[ 干貨：資源和工具 ]
3．“How Material Design Sparked Evolution of Web Design” by Material Design Blog
5．Downloadable Material Design Color Palette Swatches ?
6．"The Interface Layer: Where Design Commoditizes Tech" by Scott ?Belsky
7．Material Up: Daily Design Inspiration ?
8． Material Design Icon Template Download ?
10．Material Design Typography Classes ?
11．Angular Material vs. Material Design Lite ?
Via：Mobile Design Book of Trends 2015&2016
本文來自百度MUX翻譯小組，雷鋒網發布，譯文僅作學習用途，如有其它用途請聯系原作者。
Keep calm and be awesome
雷峰網原創文章，未經授權禁止轉載。詳情見轉載須知。
