三維設計法,教你做出最合適的用戶體驗設計

在交互設計中,可以使用各種方法在三維空間中,做出最合適、最合理的用戶體驗設計。

三维设计法,教你做出最合适的用户体验设计

隨著當今越來越多的信息需要被展示、曝光,而移動設備的屏幕空間又有限,為了減少用戶在使用應用時的跳轉,減少用戶的路徑,設計師們開闢了第三個維度——即在 z 軸上展示疊加的分層動效進行交互表達,從二維到三維,這樣更能有效利用手機屏幕上的有限空間,這也是以後界面設計的大趨勢。

三维设计法,教你做出最合适的用户体验设计

這個思維方式最早是在安卓的MATERIAL DESIGN語言上體現出來的。(以下簡稱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的設計規範中,用Depth來說明界面設計中的深度,既而在界面設計中引入了Z軸的設計思維,將界面設計由二維設計引進了三維設計思維的地帶。MD通過抽象化紙片在物理世界中的形態,定義除了各種信息層級以及常用狀態的表達方式。

三维设计法,教你做出最合适的用户体验设计
三维设计法,教你做出最合适的用户体验设计三维设计法,教你做出最合适的用户体验设计

再來看看,如今iOS的最新版本iOS 12,也已經開始向這一方向進行發展。最典型的要屬以下的iOS的內置應用:股市、語音備忘錄、地圖、錢包、音樂、播客等。

三维设计法,教你做出最合适的用户体验设计三维设计法,教你做出最合适的用户体验设计

三維設計法,在界面設計當中,主要分為兩個方向來運用,視覺設計和交互設計。

三维设计法,教你做出最合适的用户体验设计

人們通過雙眼能夠分辨出物體遠近大小的形態,因此如果利用這樣的視覺規律,便可以在畫面中呈現出真實的效果,突出視覺的立體化。

因為使畫面產生三維的模擬真實的效果,可以畫面更具有吸引力,我們之所以能夠看清楚物體,是因為有光的存在,現實生活的影子是因光而產生的,才是一個真實立體形。如果能恰當運用光影的效果,那將會讓圖形在進行三維空間轉換時變得更加凸顯。

當今,在界面的視覺設計方面,通過層疊、卡片化和投影的設計手法來對界面的內容進行處理,可以增加界面的層次感。在如今同質化嚴重的扁平化設計下,能給人煥然一新的感覺,同時也給人一種內容呼之欲出的感覺,加強了點擊的慾望。這樣的設計手法讓界面的Z軸空間得以加強,必將是下一個新的趨勢。

例如:KEEP、潮汐、蝦米音樂

三维设计法,教你做出最合适的用户体验设计

例如:Dribbble 和 Behance

三维设计法,教你做出最合适的用户体验设计
三维设计法,教你做出最合适的用户体验设计三维设计法,教你做出最合适的用户体验设计

而在交互設計方面,想同時展示多種內容時,假設對一個需求有著很強的曝光要求,或者是想讓用戶知道有這項內容的存在,但又不想讓頁面內容過長,導致被忽略或難以找到時,可以採用頁面Z軸層級覆蓋的表現形式。

採用了Z軸層級覆蓋的架構形式,用戶主要的交互操作變為上拉、下拉來閱讀信息,減少了點擊跳轉這一類的操作,減少了用戶的操作成本。且滑動手勢,是以後人機交互發展中的一個必然趨勢。

在一些APP中有所表現的有:豆瓣FM、豆瓣詳情頁等。(大家可以從這些APP上獲取設計靈感)

三维设计法,教你做出最合适的用户体验设计

豆瓣FM

三维设计法,教你做出最合适的用户体验设计

豆瓣(電影詳情頁)

例如:

三维设计法,教你做出最合适的用户体验设计

上圖是京東(APP)的商品詳情頁,這時候我們接到的需求是將上圖的文案放進這個界面中。

要知道在寸土寸金的APP界面中,每一個位置都是十分的寶貴,一但放置不佳,就會給用戶的視覺流造成一定的影響,使得用戶體驗下降。況且,還是京東這樣流量巨大的電商APP,位置便顯得更加寶貴,而上圖中的紅色標記範圍就是我們的限制區域,下面我們先來看一個不合理的做法。

三维设计法,教你做出最合适的用户体验设计

上圖我們是直接加了一個界面,將這個模塊設定為可以進行跳轉,從而達到顯示完整(文案)的需求。

這樣做,不僅增加了用戶的路徑,而且還會給來回切換的用戶造成一定的困擾,消耗了手機的資源的同時,下面的留白也顯得很浪費、空曠,視覺上就很不美觀。

那麼,京東是怎麼做的呢?

三维设计法,教你做出最合适的用户体验设计

京東採用了一個浮層設計(Z軸),將全跳轉改為半跳轉,這便是在界面設計中的Z軸運用,這樣既可以達到文案所要求的曝光,也能最大利用讓界面的空間,實現與原場景的完美銜接。

通過在 Z 軸上進行分層設計,模擬物理世界中人與物的真實的交互模式,幫助用戶理解產品設計,將信息更好的淺層化,這樣可以給設計師們帶來更多發揮的空間。

三维设计法,教你做出最合适的用户体验设计

在使用這個思維來做設計時,可以事先考慮以下幾點:

  • 根據用戶使用體驗,來判斷是否需要使用Z軸分層交互。
  • 這樣做是否能幫助用戶更好的理解你所做的設計?
  • 空間感設計主要意義是能正確的引導用戶,並建立起對產品的使用邏輯。
  • 每一個界面層級只需要表現一件事。
  • 當你想要在界面中加入一個菜單欄但發現沒有空間?這時候可以考慮使用Z軸的設計。
  • 謹慎使用Z軸層級交互,因為它會增加空間關係的複雜度。
  • 多參考現實世界中的真實交互,它給你的預期和感受,在互聯網設計中的很多靈感都來自於對真實世界的理解。

總結:

我們在做設計時,可以把當前的界面可以想象成一個的三維世界——分作X軸,Y軸,與Z軸,在這三個座標軸上,可以進行思維上拓展。

在交互設計當中,減少跳轉便是減少用戶路徑,就是使用各種方法在三維空間中,用x軸、y軸、z軸做出最合適、合理的用戶體驗設計。

題圖來自 Unsplash,基於CC0協議。


分享到:


相關文章: