400-616-5551

您所在位置: 首页> 学习课程> UI设计培训 | 为什么说“大间距分隔设计"是新趋势呢?

UI设计培训 | 为什么说“大间距分隔设计"是新趋势呢?

发布百知教育 来源:学习课程 2019-10-30

首先,我们来回顾一下在APP UI设计当中,间距有哪些作用。


1、可以吸引用户注意力(一个物体周围的留白越多,就会越容易吸引用户的注意力)。


2、区分内容,提升可读性,(间距较远的区分越大)


3、阐述元素之间的关系。(间距小的联系越紧密)。


4、强化信息层级。(从信息层级的角度来说,级别越高的内容间距越大。因为越重要的内容就要吸引用户越多的注意力,因此其实简单来说,间距的作用可以归纳成一句话:建立视觉层级来简化界面内容,让用户更容易接受)。



其次,从阿里巴巴 APP 8.0改版的案例上,我们重点来学习和了解下,如今大厂是如何来优化APP容器布局系统的。


最大的变化就是:视觉容器的升级


UI设计培训


在做APP UI布局视觉框架的时候,他们选择「大间距分隔」,为内容留出干净、简洁的视觉空间。做视觉容器的升级,可以从以下5个方面来着手。


1、选择了大间距分隔的设计方案


UI设计培训


2、新的APP版本精简内容栅格,避免形式给用户阅读带来的负担。


UI设计培训



3、大大的提高留白率,提升页面整体的透气性,为内容留出更清爽、轻松的阅读空间。


UI培训



4、拉大字体大小的梯度,加重字体颜色梯度,提升文字的清晰度和可读性。


UI培训


5、强化重点版块,突出业务重点、增强用户感知

换句话说:强调版块特性,塑造买家心智感知,达成业务目标
比如阿里巴巴这次8.0的改版在首页当中[强化搜索]:
7.0时,曾上线过将搜索做到「主观上觉得显眼」的测试方案,但相较于之前沉浸式搜索,数据几乎没变化。


UI培训


8.0 阶段,从视觉表现层跳出看:「强化搜索」并不意味把搜索设计得更「显眼」,而是达成「让更多用户更高频地使用搜索」这一目标。如提升搜索底部词、热搜词精准度和吸引力、增加搜索布点等,都可能助力达成业务目标。


UI设计培训


基于用户单手操作时,拇指在屏幕不同区域的点击体验,选择将搜索组件移到更易于点击、视线更聚焦的屏幕位置,上线后数据提升非常明显。


所以,以上都是采用大间距间隔来设计的阿里巴巴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


上一篇:java培训 | Java服务,内存OOM问题如何快速定位?

下一篇:应届生去公司找个Java程序员的职位需要什么技能?

相关推荐

www.baizhiedu.com

有位老师想和您聊一聊

关闭

立即申请