首先,我们来回顾一下在APP UI设计当中,间距有哪些作用。
1、可以吸引用户注意力(一个物体周围的留白越多,就会越容易吸引用户的注意力)。
2、区分内容,提升可读性,(间距较远的区分越大)
3、阐述元素之间的关系。(间距小的联系越紧密)。
4、强化信息层级。(从信息层级的角度来说,级别越高的内容间距越大。因为越重要的内容就要吸引用户越多的注意力,因此其实简单来说,间距的作用可以归纳成一句话:建立视觉层级来简化界面内容,让用户更容易接受)。
其次,从阿里巴巴 APP 8.0改版的案例上,我们重点来学习和了解下,如今大厂是如何来优化APP容器布局系统的。
最大的变化就是:视觉容器的升级
2、新的APP版本精简内容栅格,避免形式给用户阅读带来的负担。
3、大大的提高留白率,提升页面整体的透气性,为内容留出更清爽、轻松的阅读空间。
4、拉大字体大小的梯度,加重字体颜色梯度,提升文字的清晰度和可读性。
8.0 阶段,从视觉表现层跳出看:「强化搜索」并不意味把搜索设计得更「显眼」,而是达成「让更多用户更高频地使用搜索」这一目标。如提升搜索底部词、热搜词精准度和吸引力、增加搜索布点等,都可能助力达成业务目标。
基于用户单手操作时,拇指在屏幕不同区域的点击体验,选择将搜索组件移到更易于点击、视线更聚焦的屏幕位置,上线后数据提升非常明显。
所以,以上都是采用大间距间隔来设计的阿里巴巴8.0改版之后的设计方案。都是值得我们在迭代和优化重构自家app的时候,需要考虑的几个点。
另外,大间隔分隔设计也是属于模块化设计一种新型表现形式。
现如今是app UI设计当中最常用的设计形式,非模块化设计莫属,由于app的设计界面要适配各种手机终端屏幕,所以我们不需要直接定义每个模块的具体宽度,因为这个宽度会被拉伸,高度也随之等比拉伸,我们一般按照比例来定义每个模块的宽度,按照屏幕宽度分成一个个豆腐块,可按1/5、1/4、1/3、1/2、1/1的比例划分,这样设计的好处是可以形成统一规格的模块化管理,页面不会过于凌乱,对用户起到模块清晰、信息规范标准化的视觉导向性作用。
随着年轻用户的增加,以及他们的使用app习惯的发生改变,我们对APP容器的选择和布局,也会发生一些改变。如今很多大厂APP都选择了大间距分隔设计的方案,可能会是接下来的APP设计新趋势。值得大家的关注。
如追波网上一些比较好看的APP UI设计作品,大部分都是大间距分隔设计。
看完这些大间隔分隔设计的APP UI界面,有没有感觉到非常的舒适,也非常符合目前用户的喜好呢?
间距越大越有层级感,需要掌握好一个度。
间距的最大用处就是区分,有时光使用间距,区分效果不是很明显,这时,就要用到在使用间距的基础上使用线条,配色,阴影,图案等办法再次强化区分。
下面我们分享字间距和行间距的一些设计规范:
1.字间距:以微软雅黑为例,内文字间距设定在-20~10之间视觉上较为恰当。
2.行间距:以微软雅黑为例,内文行间距为160~200之间较为恰当。(同样改变字体后,数字相对调整)
以上部分内容来源:阿里巴巴(1688) APP 8.0 视觉品牌升级手记
UI培训:http://www.baizhiedu.com/ui2019