今天一個(gè)總監(jiān)和我說(shuō),app頁(yè)面是3維空間的,我震驚了!

2021-9-27    lanlanwork


拿滿屏都是封面的頁(yè)面為例,比如視頻類、動(dòng)漫類的產(chǎn)品頁(yè)面,我們可以從以下三個(gè)緯度來(lái)思考:

1.y軸(高度)的空間節(jié)省

2.x軸(寬度)的空間節(jié)省

3.z軸(深度)的空間節(jié)省

 

1.y軸(高度)的空間節(jié)省

y軸,顧名思義,就是高度,我這里舉三個(gè)例子來(lái)說(shuō)明下:

第一個(gè)例子,我們來(lái)說(shuō)說(shuō)封面,我們看國(guó)內(nèi)的漫畫(huà)平臺(tái),比如快看,大部分是豎封展示:

圖片

但是國(guó)外的很多漫畫(huà)平臺(tái)都是橫封展示居多:

圖片

二者單從高度占比來(lái)講,橫封會(huì)矮一些:

圖片

第二個(gè)例子,也是關(guān)于封面的,國(guó)內(nèi)外都會(huì)有一些方形封面,但是國(guó)內(nèi)的方形封面一般一排只有兩個(gè),而國(guó)外的會(huì)相對(duì)多一點(diǎn):

圖片

單看高度,右邊的會(huì)節(jié)約一些縱向空間。

第三個(gè)例子,我們還可以在一些信息上進(jìn)行整合

比如,快看最近瀏覽這個(gè)模塊,標(biāo)題是放在上面,信息是放在封面下面的:

圖片

但是有一些產(chǎn)品比如波洞,標(biāo)題是左側(cè)的,而信息文字是放在封面上的:

圖片

信息也能看的清,相比之下,后者高度上節(jié)約了太多空間:

圖片

這也是合理節(jié)約高度空間的一種方法。方法還有很多,大家可以多多思考嘗試。

 

2.x軸(寬度)的空間節(jié)省

x軸,就是寬度了,正常我們只是思考如何在屏幕內(nèi)進(jìn)行節(jié)約空間,那是否可以利用屏幕外的空間呢?

當(dāng)然是可以的,國(guó)外有很多常規(guī)模塊都有利用這一原理來(lái)進(jìn)行展示作品,比如:

國(guó)內(nèi)可能主要用在猜你在追,瀏覽歷史這種模塊多一點(diǎn)。是否可以在更多模塊內(nèi)使用這一展示方式,可以根據(jù)自身產(chǎn)品定位來(lái)嘗試。

 

3.z軸(深度)的空間節(jié)省

z軸,那就是屏幕的前后景深了,也就是深度,不僅僅只是思考二維平面的寬高了,而是思考如何利用屏幕縱像的空間。

舉個(gè)最簡(jiǎn)單的例子,想嗶哩嗶哩漫畫(huà)這種:

就很好的利用了z軸的空間,物體不僅僅只是在二位平面內(nèi)展示,而是延伸到屏幕里面,有了深度,相同平屏幕大小,展示更多空間的內(nèi)容。

再比如,最早在韓國(guó)app看到的這種交互方式:

圖片

也是很好的利用頁(yè)面縱向的空間,達(dá)成一定的亮點(diǎn)和空間利用率。

再再比如,下拉頁(yè)面后,在頁(yè)面的后面出現(xiàn)一些內(nèi)容:

原理也都是類似的,當(dāng)二維空間無(wú)法滿足我們的內(nèi)容擺放需求的時(shí)候,我們就可以想辦法拓展維度,讓我們的空間變得更廣,利用率更高,還容易產(chǎn)生一定的創(chuàng)意!

 

總結(jié)

以上就是我個(gè)人在節(jié)約利用移動(dòng)端空間的小小總結(jié),當(dāng)然,有時(shí)候信息展示也不能緊緊只考慮面積占比問(wèn)題,還需要從用戶體驗(yàn)的爽感、信息層級(jí)、點(diǎn)擊轉(zhuǎn)化等多個(gè)維度來(lái)思考,我這里只是單純從占比這個(gè)點(diǎn)來(lái)思考,希望能給大家提供一點(diǎn)思路,僅供參開(kāi)!

 

原文地址:菜心設(shè)計(jì)鋪(公眾號(hào))
作者:菜心設(shè)計(jì)鋪

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》今天一個(gè)總監(jiān)和我說(shuō),app頁(yè)面是3維空間的,我震驚了!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔