全面解析设计的四大基本原则

设计的四大基本原则,相信设计师们都不陌生,也一定都在自己的设计中多多少少运用到了。可能有的设计师运用到了,也不见得清晰的理解设计四大基本原则,所以今天小梓主要以 “设计的四大基本原则是什么”,“如何更好的运用设计的四大基本原则” 为主题来写这篇文章。

四大基本原则是什么?

亲密性

亲密性原则是指:将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。当然了,如果某些信息项或组彼此之间并无关联,这些元素就不应存在很近的亲密性(即不应靠近)。这样就能为用户提供一个直观的提示,使用户马上了解页面的组织和内容。

总结:亲密性意味着关联,在一个页面上,物理位置的接近就意味着存在关联 (实际生活中也是如此) 。就像两个很靠近的人走在大街上,你会认为他们认识,反之,两个相距甚远的人,你会认为他们不认识…

举例:下图1左边的排版中每一个内容都和其他的内容间距相同,看不出它们之间有什么关系。而图1右边的排版缩小了标题与内容之间的间距,加大了组与组之间的间距,从而使得标题与内容之间的关系更加清晰,同时空间感也更强。

下图2左边的排版中数字看起来像一个单独的单元,与内容无关。而图2右边的排版缩小了数字与内容之间的间距,使它们靠的更近了,这样一来,我们很容易就发现了它们之间的关系。

对齐

对齐原则是指:任何元素都不能在页面上随意安放,每一项都应当与页面上的某个内容存在某种视觉联系。如果页面上的一些项是对齐的,这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的,但在你眼里(以及在你的心里)它们之间也会有一条看不见的线把彼此连在一起。不知道大家有没有听过一句话,整齐即是美。

现在的对齐方式分为:左对齐、右对齐、左右对齐、居中对齐。

总结:对齐意味着有条理,页面最好只使用一种对齐方式。

举例:下图1左边的排版中既有居中对齐、左对齐、还有右对齐、整体显得非常杂乱,不知从何看起。而图1右边的排版统一使用了右对齐的方式,整体看上去非常舒适有条理。

下图2左边的排版中有三种对齐方式 (标题剧中对齐,文本左对齐,图片右对齐),并且文本与图片上下没有对齐,整体关系不够明确。而图2右边的排版统一使用左对齐,并且文本与图片上下对齐,使得整个排版井然有序。

重复

重复原则是指:设计的某些方面需要在整个作品中重复。重复元素可能是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式、空间关系等。读者能看到的任何方面都可以作为重复元素。你在工作中肯定已经用过重复。例如,所有标题都设置为相同的大小和粗细,项目中的每个列表都使用相同的项目符号,这些都是重复的例子。

总结:可以把重复认为是“一致性”。不过重复还不只是自然的一致,这是一种统一设计各个部分的有意识的行为,就如我们为每个项目所做的设计规范,就是为了使项目更加的统一。

举例:下图1每一段内容的标题、文本、还有圆形符号都是重复元素,使得整个页面非常具有组织性与连续性。

下图2的头部采用了深色的背景填充,如果没有底部重复的深色小色块,整个页面就不会有这么强的连续性,所以在页面中连续性也是非常关键的,尤其是有多个页面的时候。

对比

对比原则是指:页面上的不同元素之间要有对比效果,达到吸引用户的对比效果。如果两个项不完全相同,就应当使之不同,而且应当是截然不同。对比不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读者,并且制造焦点。可以采用多种方式产生对比。如大字体与小字体的对比;细线与粗线的对比;冷色与暖色的对比;平滑材质与粗糙材质的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比…

总结:要想实现有效的对比,对比就必须强烈,千万不要畏畏缩缩。

举例:下图1左边的排版中标题与文字的对比比较轻微,中规中矩。而图1右边的排版中把标题颜色换成了红色,就与文字的对比非常明显,让人一眼就注意到了标题。

下图2左边的排版也是对比不够强烈,没有抓住眼球。而图2右边的排版则截然不同,只是换了一个黑色的背景色就抓住了人的眼球,再加上红色的标题,白色的副标题、浅灰色的文本,使得整个页面的层级非常分明且突出。

如何更好的运用四大原则?

在设计页面的时候,我们往往采用的不止一种基本原则,而是四种基本原则都会用到。要知道,一个好的页面设计,亲密性、对齐、重复和对比,往往都是相辅相成的,而不是孤立存在的。

前面已经总结了设计的四大基本原则是什么,接下来主要以举例的形式来让大家更好的运用四大基本原则,举例涉及平面及UI等。

APP设计

下图是我们常见的App Store里面的两个页面,第一个搜索的页面尽管它非常的简洁,没什么太多的内容,但它的设计里面同样运用了四大基本原则。而第二个App的页面虽然复杂一些,但同样也是运用了四大基本原则,尤其是重复与亲密性。

网页设计

下图是一个企业官网,采用了比较多的对比、对齐、重复和亲密性。相比较移动端App而言,网页运用的四大基本原则更加明显,让人更容易察觉,因为它的空间大,内容多。

平面设计

下图是两张活动海报,一个是设计展的海报,一个是七夕的海报。它们共同的特点除了都采用了四大基本原则,还有一个很明显的特点就是,它们标题与内容的对比非常强烈,很吸引眼球。同时重复的元素也让整个设计更加的完整一致。

总结:以上分别通过App设计、网页设计及平面设计的角度举例,无非是想告诉大家设计的四大基本原则运用是非常广泛的,并不仅仅局限于某种形式的设计。举例最主要还是起一个举一反三、抛砖引玉的作用,更多的还是希望大家在设计中多观察、多思考、多实践。

对了,以上举例内容中,因为怕显示的特别杂乱,所以可能还有许多没有框选出来的对齐、重复、对比及亲密性的地方,大家不要纠结哦。

希望大家看完都能有收获吧!

小梓的设计笔记(公众号)

作者:小梓

(0)

相关推荐

  • 学习编程的四大基本原则

    所有好的学习方法万变不离其宗,都要遵循以下四大基本原则: 操作方法 01 坚持.首先要有毅力,对编程的热爱也可以在一定程序上起到帮助. 02 实践.当你学到了一种新的技术或知识时,多实践是巩固学习的一 ...

  • 排版中的组合与重复

    大家好,伴随着阳光明媚的周三夜晚,本猫又和大家见面了,之前有篇文章详细介绍了排版中的两大基本原则[对比]与[对齐],那么本篇文章介绍余下的两大基本原则[组合]与[重复],他们一起构成了设计排版中的四大 ...

  • 四大妙招让新手逐渐掌握linux系统维护

    其实Linux服务器系统的维护技巧有很多,掌握其中的一些可以帮助用户更加便捷应用,这里就先给大家介绍四大妙招,让新手可以逐渐掌握linux系统维护。 用户要及时拥有最新版本系统 尽管是开源软件,但是L ...

  • 解析无线网络设计四大必备要件

    笔者现在给企业设计无线网络时,若企业的要求比较高,一般都会在无线网络中实现四个要件。在提高无限网络性能的同时,也提高其可控性与容错性。 无线网络的发展已经势不可挡,大有替代有线网络的趋势。为此无线网络 ...

  • 四大主流火车购票APP对比测评教程

    APP图标从左到右依次为:网易火车票、高铁管家、携程旅行、去哪儿旅行 五一小长假进入倒计时,相信小伙伴们对出行已经跃跃欲试,而在购买火车票环节,如今人们拥有更多选择,手机购票因其便利快捷赢得越来越多用 ...

  • IPv4/IPv6综合组网技术基本原则解析

     IPv4概念 IPv4,是互联网协议(Internet Protocol,IP)的第四版,也是第一个被广泛使用,构成现今互联网技术的基石的协议。1981年 Jon Postel 在RFC791中定义 ...

  • 支付宝钱包推12306公众服务号 新增四大功能全新上线

    实现电脑端与手机端用支付宝购买火车票服务后,12月16日,支付宝钱包的“支付宝12306公众服务”也宣告正式开通。新上线的12306公众服务号提供了信息公告、购票贴士、列车服务和交易管理,四大菜单功能 ...

  • 使用图片来安排幻灯片版面时的几个基本原则

    【译者的话】在幻灯片上写满文字是一种费力不讨好的设计,也没有一个观众能够记住你上面的那些数据及文字。而用图片来进行演讲能够达到更好的沟通效果,也能够产生更大的视觉冲击力。本文将探讨使用图片来安排幻灯片 ...

  • PPT课件制作的一些基本原则

    PowerPoint是目前最常用的演示设计工具,由于它多媒体的功能强大而又简单易学,所以很多教师都以PowerPoint,为工具制作课件。PowerPoint内置丰富的动画、过渡效果和多种声音效果,并 ...