今天一个总监和我说,app页面是3维空间的,我震惊了!

2021-9-27    lanlanwork


拿满屏都是封面的页面为例,比如视频类、动漫类的产品页面,我们可以从以下三个纬度来思考:

1.y轴(高度)的空间节省

2.x轴(宽度)的空间节省

3.z轴(深度)的空间节省

 

1.y轴(高度)的空间节省

y轴,顾名思义,就是高度,我这里举三个例子来说明下:

第一个例子,我们来说说封面,我们看国内的漫画平台,比如快看,大部分是竖封展示:

图片

但是国外的很多漫画平台都是横封展示居多:

图片

二者单从高度占比来讲,横封会矮一些:

图片

第二个例子,也是关于封面的,国内外都会有一些方形封面,但是国内的方形封面一般一排只有两个,而国外的会相对多一点:

图片

单看高度,右边的会节约一些纵向空间。

第三个例子,我们还可以在一些信息上进行整合

比如,快看最近浏览这个模块,标题是放在上面,信息是放在封面下面的:

图片

但是有一些产品比如波洞,标题是左侧的,而信息文字是放在封面上的:

图片

信息也能看的清,相比之下,后者高度上节约了太多空间:

图片

这也是合理节约高度空间的一种方法。方法还有很多,大家可以多多思考尝试。

 

2.x轴(宽度)的空间节省

x轴,就是宽度了,正常我们只是思考如何在屏幕内进行节约空间,那是否可以利用屏幕外的空间呢?

当然是可以的,国外有很多常规模块都有利用这一原理来进行展示作品,比如:

国内可能主要用在猜你在追,浏览历史这种模块多一点。是否可以在更多模块内使用这一展示方式,可以根据自身产品定位来尝试。

 

3.z轴(深度)的空间节省

z轴,那就是屏幕的前后景深了,也就是深度,不仅仅只是思考二维平面的宽高了,而是思考如何利用屏幕纵像的空间。

举个最简单的例子,想哔哩哔哩漫画这种:

就很好的利用了z轴的空间,物体不仅仅只是在二位平面内展示,而是延伸到屏幕里面,有了深度,相同平屏幕大小,展示更多空间的内容。

再比如,最早在韩国app看到的这种交互方式:

图片

也是很好的利用页面纵向的空间,达成一定的亮点和空间利用率。

再再比如,下拉页面后,在页面的后面出现一些内容:

原理也都是类似的,当二维空间无法满足我们的内容摆放需求的时候,我们就可以想办法拓展维度,让我们的空间变得更广,利用率更高,还容易产生一定的创意!

 

总结

以上就是我个人在节约利用移动端空间的小小总结,当然,有时候信息展示也不能紧紧只考虑面积占比问题,还需要从用户体验的爽感、信息层级、点击转化等多个维度来思考,我这里只是单纯从占比这个点来思考,希望能给大家提供一点思路,仅供参开!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺

转载请注明:学UI网》今天一个总监和我说,app页面是3维空间的,我震惊了!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档