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