重庆网站建设公司润雪科技
业成于勤
,守于挚
技精于专
,做于细
重庆网站建设 新闻动态 公司动态

自学体系第一课!写给新人设计师的界面排版原则

2018-12-03      发布者:润雪科技      浏览量:2664

前面的视觉体系和大家简单提到过传统平面排版的四大原则:亲密性、对比、重复、对齐。那界面排版有什么原则呢?今天菜心就来用实例分享一下界面排版中需要注意哪些原则。

大纲如下:

一、亲密原则

二、对比原则

三、平衡原则

四、相似原则

一、亲密原则

空间上接近的内容,我们更容易将之归类到一组,这就是我们所说的亲密原则。——重庆网站设计

如下图:


image.png


我们很容易将唐僧、孙悟空、沙僧分成一组,而将猪八戒单独分离出来,因为前三者离的更近。

我们来看下面这张图:


image.png


你能分清标题是属于上面还是下面吗?

当你了解了亲密原则后,就知道为什么分不清,这也就是我们学习理论知识的原因,当我们看到错误的设计时,可以说出哪里不对,而不是凭感觉。——重庆网页设计

那这个原则如何运用到我们界面设计上呢?

看下图:


image.png


上图是简书文章列表中的一条,我们在平时工作中也经常会遇到这种信息排版。首先我们需要清楚,上图的内容有三个:上分割线、内容区和下分割线。此时我们可以判断,内容区内的所有间距一定小于内容区与分割线的间距,因为根据亲密性原则,有关联的内容会离的更近,内容区的内容相对分割线来说,就是关联性比较强的,所以它们的间距就会相对较小。

这样的间距规律还可以让我们清晰的区分开每一条信息,不会导致信息干扰。

亲密性原则是我们在界面排版中最常用的原则之一,大家一定要牢牢的记住并大量实践,为我们后期的排版设计打下坚实的基础!——重庆定制网站

二、对比原则

我们经常会遇到界面看着混乱的情况,但又不知道为什么,其实大部分情况都是因为界面内容对比不明显而造成的。

例如下图:


image.png


虽然上图符合亲密原则,但似乎看着还是有些凌乱,其中一个很重要的原因就是因为界面信息内容的对比不够强烈,我们不知道该看哪里!——网站设计

而我们来看一下今日头条的信息排版:


image.png


你会发现重要信息和次要信息的大小对比非常强烈,使我们聚焦在主要信息(标题)上,这样看着就不会那么散乱。

看完这个排版后再去解决上面那个散乱的问题,会不会更容易些呢?大家不妨自己尝试排一下,这样会让你的印象更加深刻。

我们平时也要多去研究一些排版,好的排版你需要去分析它为什么好,不好的排版你需要分析它为什么不好,你能否排的更好,只有通过这样不断地刻意练习,你才能扎扎实实的前进。

回到正题,其实关于对比的方式还远不止大小层面,还有颜色对比、粗细对比、形状对比、疏密对比等等,所以大家在进行对比排版的时候,不妨多维度考虑,一定可以找到合适的解决方案。

三、平衡原则

平衡原则是界面排版布局的首要原则,大到整个官网,小到一张图文,都需要我们对视觉平衡有一个良好的把控。——定制网站

举几个例子:


image.png


看上图,我们可以发现,图片下方的文字是左对齐,为了达到视觉上的平衡,设计师将VIP 图标和更新集数放在图片右侧。——网站设计

再来看下图:


image.png


我们会感觉整个页面怪怪的,好像在向右上角倾斜,就是因为没有遵循平衡原则,而当我们将最下方的按钮移动到右侧时,如下图:


image.png


整个页面看着就会平衡很多。

这里需要注意一点,一些艺术类的海报排版为了达到某些效果,可能会有意打破平衡,但那是特殊的平面艺术设计,而对于我们UI设计来说,在进行界面排版的时候,大多数情况还是要遵循平衡原则,这样才能让用户感觉整个界面更加协调、舒服。

四、相似原则

我们需要对相似的内容赋予相同的属性,例如同一级别的标题文字大小相同,相同颜色(如蓝色等)的字体都可以点击等等。——定制网站

例如下图:


image.png


当然相似原则的因素也不只有文字颜色,还有背景色、方向、大小等等,有兴趣的同学可以多多总结积累,大家一起交流。——网站设计


本文由重庆网站建设公司润雪科技原创,文章地址:/news/id/1615.html

重庆网站建设公司 - 润雪科技

地址:中国 · 重庆市南岸区南坪亚太商谷7幢23-10、23-11        电话:400-807-5908        手机:186-9655-6121        客服QQ:714-287-173

重庆网站建设公司润雪科技,专注于重庆网站建设重庆网站制作重庆网站设计重庆做网站,公司都秉承以“产品”为核心“用户”为中心,从实际出发为客户提供更优质的服务为宗旨,联系电话:400-807-5908
COPYRIGHT (©) 2017 网站建设公司润雪科技渝ICP备15012622号