隨著當(dāng)今越來(lái)越多的信息需要被展示、曝光，而移動(dòng)設(shè)備的屏幕空間又有限，為了減少用戶在使用應(yīng)用時(shí)的跳轉(zhuǎn)，減少用戶的路徑，設(shè)計(jì)師們開辟了第三個(gè)維度——即在 z 軸上展示疊加的分層動(dòng)效進(jìn)行交互表達(dá)，從二維到三維，這樣更能有效利用手機(jī)屏幕上的有限空間，這也是以后界面設(shè)計(jì)的大趨勢(shì)。

這個(gè)思維方式最早是在安卓的MATERIAL DESIGN語(yǔ)言上體現(xiàn)出來(lái)的。（以下簡(jiǎn)稱MD）

 

Depth（深度）：

Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.

在MD的設(shè)計(jì)規(guī)范中，用Depth來(lái)說(shuō)明界面設(shè)計(jì)中的深度，既而在界面設(shè)計(jì)中引入了Z軸的設(shè)計(jì)思維，將界面設(shè)計(jì)由二維設(shè)計(jì)引進(jìn)了三維設(shè)計(jì)思維的地帶。MD通過(guò)抽象化紙片在物理世界中的形態(tài)，定義除了各種信息層級(jí)以及常用狀態(tài)的表達(dá)方式。

再來(lái)看看，如今iOS的最新版本iOS 12，也已經(jīng)開始向這一方向進(jìn)行發(fā)展。最典型的要屬以下的iOS的內(nèi)置應(yīng)用：股市、語(yǔ)音備忘錄、地圖、錢包、音樂(lè)、播客、App Store等。

三維設(shè)計(jì)法，在界面設(shè)計(jì)當(dāng)中，主要分為兩個(gè)方向來(lái)運(yùn)用，視覺(jué)設(shè)計(jì)和交互設(shè)計(jì)。

人們通過(guò)雙眼能夠分辨出物體遠(yuǎn)近大小的形態(tài)，因此如果利用這樣的視覺(jué)規(guī)律，便可以在畫面中呈現(xiàn)出真實(shí)的效果，突出視覺(jué)的立體化。

因?yàn)槭巩嬅娈a(chǎn)生三維的模擬真實(shí)的效果，可以畫面更具有吸引力，我們之所以能夠看清楚物體，是因?yàn)橛泄獾拇嬖冢F(xiàn)實(shí)生活的影子是因光而產(chǎn)生的，才是一個(gè)真實(shí)立體形。如果能恰當(dāng)運(yùn)用光影的效果，那將會(huì)讓圖形在進(jìn)行三維空間轉(zhuǎn)換時(shí)變得更加凸顯。

當(dāng)今，在界面的視覺(jué)設(shè)計(jì)方面，通過(guò)層疊、卡片化和投影的設(shè)計(jì)手法來(lái)對(duì)界面的內(nèi)容進(jìn)行處理，可以增加界面的層次感。在如今同質(zhì)化嚴(yán)重的扁平化設(shè)計(jì)下，能給人煥然一新的感覺(jué)，同時(shí)也給人一種內(nèi)容呼之欲出的感覺(jué)，加強(qiáng)了點(diǎn)擊的欲望。這樣的設(shè)計(jì)手法讓界面的Z軸空間得以加強(qiáng)，必將是下一個(gè)新的趨勢(shì)。

例如：KEEP、潮汐、蝦米音樂(lè)

 

例如：Dribbble 和 Behance

圖片來(lái)源于網(wǎng)絡(luò)

 

而在交互設(shè)計(jì)方面，想同時(shí)展示多種內(nèi)容時(shí)，假設(shè)對(duì)一個(gè)需求有著很強(qiáng)的曝光要求，或者是想讓用戶知道有這項(xiàng)內(nèi)容的存在，但又不想讓頁(yè)面內(nèi)容過(guò)長(zhǎng)，導(dǎo)致被忽略或難以找到時(shí)，可以采用頁(yè)面Z軸層級(jí)覆蓋的表現(xiàn)形式。

采用了Z軸層級(jí)覆蓋的架構(gòu)形式，用戶主要的交互操作變?yōu)樯侠⑾吕瓉?lái)閱讀信息，減少了點(diǎn)擊跳轉(zhuǎn)這一類的操作，減少了用戶的操作成本。且滑動(dòng)手勢(shì)，是以后人機(jī)交互發(fā)展中的一個(gè)必然趨勢(shì)。

在一些APP中有所表現(xiàn)的有：豆瓣FM、豆瓣詳情頁(yè)等。（大家可以從這些APP上獲取設(shè)計(jì)靈感）

豆瓣FM

 

豆瓣（電影詳情頁(yè)）

 

例如：

上圖是京東（APP）的商品詳情頁(yè)，這時(shí)候我們接到的需求是將上圖的文案放進(jìn)這個(gè)界面中。

要知道在寸土寸金的APP界面中，每一個(gè)位置都是十分的寶貴，一但放置不佳，就會(huì)給用戶的視覺(jué)流造成一定的影響，使得用戶體驗(yàn)下降。況且，還是京東這樣流量巨大的電商APP，位置便顯得更加寶貴，而上圖中的紅色標(biāo)記范圍就是我們的限制區(qū)域，下面我們先來(lái)看一個(gè)不合理的做法。

上圖我們是直接加了一個(gè)界面，將這個(gè)模塊設(shè)定為可以進(jìn)行跳轉(zhuǎn)，從而達(dá)到顯示完整（文案）的需求。

這樣做，不僅增加了用戶的路徑，而且還會(huì)給來(lái)回切換的用戶造成一定的困擾，消耗了手機(jī)的資源的同時(shí)，下面的留白也顯得很浪費(fèi)、空曠，視覺(jué)上就很不美觀。

那么，京東是怎么做的呢？

京東采用了一個(gè)浮層設(shè)計(jì)（Z軸），將全跳轉(zhuǎn)改為半跳轉(zhuǎn)，這便是在界面設(shè)計(jì)中的Z軸運(yùn)用，這樣既可以達(dá)到文案所要求的曝光，也能最大利用讓界面的空間，實(shí)現(xiàn)與原場(chǎng)景的完美銜接。

通過(guò)在 Z 軸上進(jìn)行分層設(shè)計(jì)，模擬物理世界中人與物的真實(shí)的交互模式，幫助用戶理解產(chǎn)品設(shè)計(jì)，將信息更好的淺層化，這樣可以給設(shè)計(jì)師們帶來(lái)更多發(fā)揮的空間。

在使用這個(gè)思維來(lái)做設(shè)計(jì)時(shí)，可以事先考慮以下幾點(diǎn)：

• 根據(jù)用戶使用體驗(yàn)，來(lái)判斷是否需要使用Z軸分層交互。
• 這樣做是否能幫助用戶更好的理解你所做的設(shè)計(jì)？
• 空間感設(shè)計(jì)主要意義是能正確的引導(dǎo)用戶，并建立起對(duì)產(chǎn)品的使用邏輯。
• 每一個(gè)界面層級(jí)只需要表現(xiàn)一件事。
• 當(dāng)你想要在界面中加入一個(gè)菜單欄但發(fā)現(xiàn)沒(méi)有空間？這時(shí)候可以考慮使用Z軸的設(shè)計(jì)。
• 謹(jǐn)慎使用Z軸層級(jí)交互，因?yàn)樗鼤?huì)增加空間關(guān)系的復(fù)雜度。
• 多參考現(xiàn)實(shí)世界中的真實(shí)交互，它給你的預(yù)期和感受，在互聯(lián)網(wǎng)設(shè)計(jì)中的很多靈感都來(lái)自于對(duì)真實(shí)世界的理解。

 

總結(jié)：

我們?cè)谧鲈O(shè)計(jì)時(shí)，可以把當(dāng)前的界面可以想象成一個(gè)的三維世界——分作X軸，Y軸，與Z軸，在這三個(gè)坐標(biāo)軸上，可以進(jìn)行思維上拓展。

在交互設(shè)計(jì)當(dāng)中，減少跳轉(zhuǎn)便是減少用戶路徑，就是使用各種方法在三維空間中，用x軸、y軸、z軸做出最合適、合理的用戶體驗(yàn)設(shè)計(jì)。