app界面Ui设计与三维空间的羁绊,惊讶到小编了,快码!

大家都知道,移动端是寸土寸金的,所以很多需求放希望在同一个页面内可以展示更多内容!

我们作为设计师如何能更有效的利用页面区域呢,今天就来和大家分享一下个人的看法。

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

 

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

 

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

 

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

 

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

 

总结

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

本站所有素材均来自网络,如果侵犯了您的版权,就随时联系我们的客服。你还可以关注我们的微信公众号与微博公众号随时获取我们最新动态。
UI社 » app界面Ui设计与三维空间的羁绊,惊讶到小编了,快码!

良凡设计-专注高端品牌企业官网建设--UI社官方推荐

立即查看 咨询客服