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

用户头像
深圳/学生/4年前/3210浏览
今天一个总监和我说,app页面是3维空间的,我震惊了!

如何更好的利用页面空间

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

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

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

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

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

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

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

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

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

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

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

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

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

第三个例子,我们还可以在一些信息上进行整合 比如,快看最近浏览这个模块,标题是放在上面,信息是放在封面下面的:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

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

48
阅读原文
|
举报
|
33
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI 登录界面设计模板包
【新年UI图标】汽车icon
【新年UI图标】秒杀icon
户外旅行飞机情侣假日出行
【新年UI图标】影音icon
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】30个图标
钱包ui模板
新拟态风格 UI设计组件库
UI界面 组件
我的钱包-UI界面设计-app
新能源APP应用UIKit
智能家居中心 简约 UI设计组件库
【新年UI图标】珠宝icon
高级感金属拟物 UI设计组件库
科技医疗透明柜UI界面设计
Security Camera UI kit
矢量立体简约UI蓝白图标
【新年UI图标】游戏/娱乐icon
拟物风质感写实UI卡片合集源文件
高级表盘系列UI源文件
【新年UI图标】钱包icon
【新年UI图标】会员icon
3D渐变流体抽象矢量UI背景图
你可能喜欢
相关收藏夹
UX
UX
UX
UX
UX
20
大家都在看
登录注册