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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

 

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

 

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

 

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

 

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

 

总结

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

声明:* 本站所提供的资源均来源于互联网,站内所有文字、图片内容由网站会员上传而来,UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。如果有侵犯到您的权益,请联系本站删除,谢谢合作!联系邮箱:Uishe#qq.com (请将[#]换成@)