中国设计网:为什么你的界面总是不精致?

设计资讯
发布日期
2020-04-02 19:59
发送

APP里面的间距和边距的设计,很有学问的,最近设计公司的产品,大部分都是列表,这些页面视觉效果不强,但是难点在于要做的看起来舒服,而其中一个难点就是间距的设计。不要小看间距这个问题,新手做出来的界面大部分翻车的问题就是在于间距。 今天我们就来好好研究一下关于间距的问题,主要有APP外边距,字间距、行间距和元素边距等四个方面,希望对大家有所帮助。

间距的重要性

当我们想了解间距乃至更加标准的使用间距,首先我们要明白为什么要使用间距。间距的使用有很多作用,可以吸引用户注意力、提升界面内容的可读性,阐述元素之间的关系。其实简单来说,间距的作用可以归纳成一句话:建立视觉层级来简化界面内容,让用户更容易接受。那么我下面就先来看第一种今天要讨论的间距:外边距。

外边距

我们今天说的边距不是关于设计APP时需要留一定的屏幕间距,这个是最基础的知识了,相信大家都懂,这里我们要研究的是图文与屏幕边距怎样更好的表现。通常来说,在图片和屏幕边距之间保留一定像素边距能够更好的引导用户竖向往下读,如下图所示:

但是当图片与屏幕边距为0的时候,用户的注意力更多的集中在图片上,如下面对比图所示:

由于没有留白做视觉引导,视线在往下浏览时,会被图片直接割裂,造成在图片上停留的时间更长,因此通栏的设计大多更适合出现在页面中间的运营banner上,如下图所示:

这种设计视觉上很容易就能吸引用户的注意,但是也很容易喧宾夺主,因此目前来说图片与屏幕边距为0的情况使用的不是很多,个人认为是有边距的图片或者banner可控性更强一点,也更推荐新手设计师借鉴。但是还有一个产品对于外边距的处理有别的方法,如下图所示:

MOO音乐的外边距是30px,但是它左边卡片的标签外边距是20px,也就是说MOO对标签的处理是让标签冲出卡片左边10px,这样的设计也让用户的注意力更集中在了标签上,值得借鉴。

字间距 1、图文单行结合

首先要说的这种情况在我们平时使用的产品中是经常见的,大字号搭配小字号,如下图所示:

这种彼此对比明显,能够更好的进行信息的主次传递,那么在大字号与小字号之间的间距使用多大比较合适呢?如下图所示:

这里是以京东金融、淘宝、微信读书和QQ读书四个主流产品里的单行文字间距为例的,上图中我们可以看出文字与文字之间的间隔大多在16-20px之间,至于选择16px还是20px,个人认为是通过左边图片的高度决定的,同时不论右边的文字是两行或者是三行,也都以左边图片的高度居中。除了文字和图是左右搭配的,还有一种常见的情况是上下结构的,如下图所示:

这类卡片式的设计,在我们的设计中经常用到,但行间距依然是一个难以让界面看起来精致的点,从上图中我们能够看出来,标题文字的大小是不一样的,但行间距却都是大概率的重合,因此个人认为我们可以参考这种类型的行间距数值:16-20px ,而文字的部分有各自产品的设计规范。

2、图文多行结合

图文多行在设计里面算是比较复杂的情况,如下图所示:

这种类型要考虑到的因素很多,标题是否换行、多行的间距、字体大小这些都是我们在设计的时候需要处理的细节,首先我们先来看标题只有单行的情况,如下图所示:

从上图中我们能够看出来,虽然不存在折行的情况,但是因为展示的信息很多,所以页面设计的时候也会比较复杂,这种结构大多出现在电商产品中,因为外露的信息比较多,想要尽量在列表页展示更多的信息来吸引用户点击。而这里需要遵循的方法有两个,第一个是亲密性原则,将你认为是同组的信息做亲密处理,上图中蓝色高亮的部分就是表示同组信息之间的行间距,而巧合的是,其中有三个产品的行间距都是16px,饿了么的行间距是20px。因此16px是在图文设计时展示亲密信息比较好的选择。第二个原则是4的倍数定律,上图中的所有间距都是4的倍数,这跟我们在设计页面定间距是的道理是一样的。

行间距

责编:春林
THE END

本文标题:中国设计网:为什么你的界面总是不精致?
本文链接:https://www.chinadesignw.com/sjzx/1120.html

相关热点

10月22-23日,第28届中国(深圳)国际礼品及家居用品展览会(秋季展)即将在深圳国际会展中心举办,作为最具影响力的礼业顶级盛会,本届展会携手产业上下游4000+展商继续逐浪前行、斩获...
设计资讯/ 2020-09-11
聚焦设计价值 深耕设计师生态圈 躺平设计家平台拥有超1000万全球注册设计师,遍布200多个国家与地区,并与全球5万个商家建立了深度合作。 躺平设计家以免费、简单、高效的3D设计工...
设计资讯/ 2020-09-07
首届福佑文玩乐淘节今日开幕 上海福佑文玩城今天举行首届福佑文玩乐淘节开幕仪式。 本次文玩乐淘节邀请到了全国各地500多位文玩藏家齐聚福佑,并特设六场专业的主题活动:海上...
设计资讯/ 2020-09-03
9月1日是全省中小学开学的日子,江北设计小镇正式启用的金陵中学浦口分校迎来了首个开学日。 据了解,金陵中学浦口分校是江北设计小镇为提高教育水平和办学质量,新引进的公办...
设计资讯/ 2020-09-02
8月28日,同裳@东方 2020大浪杯中国女装设计大赛暨十周年颁奖盛典在深圳大浪时尚小镇盛大举行。星光璀璨,万众期待,最终18号选手杨岳凭借作品《拾荒者的乐趣》突出重围,一举夺...
设计资讯/ 2020-09-01
以升级住房消费健康绿色建筑为主题的第十六届国际绿色建筑与建筑节能大会暨新技术与产品博览会(以下称:绿建大会)2020年8月26至27日在苏州国际博览中心完美收官。2005年至今,绿建...
设计资讯/ 2020-09-01

相关推荐

3