设计的四大基本原则，相信设计师们都不陌生，也一定都在自己的设计中多多少少运用到了。可能有的设计师运用到了，也不见得清晰的理解设计四大基本原则，所以今天小梓主要以 “设计的四大基本原则是什么”，“如何更好的运用设计的四大基本原则” 为主题来写这篇文章。
四大基本原则是什么？
亲密性
亲密性原则是指：将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。当然了，如果某些信息项或组彼此之间并无关联，这些元素就不应存在很近的亲密性(即不应靠近)。这样就能为用户提供一个直观的提示，使用户马上了解页面的组织和内容。
总结：亲密性意味着关联，在一个页面上，物理位置的接近就意味着存在关联 (实际生活中也是如此) 。就像两个很靠近的人走在大街上，你会认为他们认识，反之，两个相距甚远的人，你会认为他们不认识…
举例：下图1左边的排版中每一个内容都和其他的内容间距相同，看不出它们之间有什么关系。而图1右边的排版缩小了标题与内容之间的间距，加大了组与组之间的间距，从而使得标题与内容之间的关系更加清晰，同时空间感也更强。
下图2左边的排版中数字看起来像一个单独的单元，与内容无关。而图2右边的排版缩小了数字与内容之间的间距，使它们靠的更近了，这样一来，我们很容易就发现了它们之间的关系。
对齐
对齐原则是指：任何元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在某种视觉联系。如果页面上的一些项是对齐的，这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的，但在你眼里(以及在你的心里)它们之间也会有一条看不见的线把彼此连在一起。不知道大家有没有听过一句话，整齐即是美。
现在的对齐方式分为：左对齐、右对齐、左右对齐、居中对齐。
总结：对齐意味着有条理，页面最好只使用一种对齐方式。
举例：下图1左边的排版中既有居中对齐、左对齐、还有右对齐、整体显得非常杂乱，不知从何看起。而图1右边的排版统一使用了右对齐的方式，整体看上去非常舒适有条理。
下图2左边的排版中有三种对齐方式 (标题剧中对齐，文本左对齐，图片右对齐)，并且文本与图片上下没有对齐，整体关系不够明确。而图2右边的排版统一使用左对齐，并且文本与图片上下对齐，使得整个排版井然有序。
重复
重复原则是指：设计的某些方面需要在整个作品中重复。重复元素可能是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式、空间关系等。读者能看到的任何方面都可以作为重复元素。你在工作中肯定已经用过重复。例如，所有标题都设置为相同的大小和粗细，项目中的每个列表都使用相同的项目符号，这些都是重复的例子。
总结：可以把重复认为是“一致性”。不过重复还不只是自然的一致，这是一种统一设计各个部分的有意识的行为，就如我们为每个项目所做的设计规范，就是为了使项目更加的统一。
举例：下图1每一段内容的标题、文本、还有圆形符号都是重复元素，使得整个页面非常具有组织性与连续性。
下图2的头部采用了深色的背景填充，如果没有底部重复的深色小色块，整个页面就不会有这么强的连续性，所以在页面中连续性也是非常关键的，尤其是有多个页面的时候。
对比
对比原则是指：页面上的不同元素之间要有对比效果，达到吸引用户的对比效果。如果两个项不完全相同，就应当使之不同，而且应当是截然不同。对比不仅可以用来吸引眼球，还可以用来组织信息、清晰层级、在页面上指引读者，并且制造焦点。可以采用多种方式产生对比。如大字体与小字体的对比；细线与粗线的对比；冷色与暖色的对比；平滑材质与粗糙材质的对比；间隔很宽的文本行与紧凑在一起的文本行形成对比；小图片与大图片的对比…
总结：要想实现有效的对比，对比就必须强烈，千万不要畏畏缩缩。
举例：下图1左边的排版中标题与文字的对比比较轻微，中规中矩。而图1右边的排版中把标题颜色换成了红色，就与文字的对比非常明显，让人一眼就注意到了标题。
下图2左边的排版也是对比不够强烈，没有抓住眼球。而图2右边的排版则截然不同，只是换了一个黑色的背景色就抓住了人的眼球，再加上红色的标题，白色的副标题、浅灰色的文本，使得整个页面的层级非常分明且突出。
如何更好的运用四大原则？
在设计页面的时候，我们往往采用的不止一种基本原则，而是四种基本原则都会用到。要知道，一个好的页面设计，亲密性、对齐、重复和对比，往往都是相辅相成的，而不是孤立存在的。
前面已经总结了设计的四大基本原则是什么，接下来主要以举例的形式来让大家更好的运用四大基本原则，举例涉及平面及UI等。
APP设计
下图是我们常见的App Store里面的两个页面，第一个搜索的页面尽管它非常的简洁，没什么太多的内容，但它的设计里面同样运用了四大基本原则。而第二个App的页面虽然复杂一些，但同样也是运用了四大基本原则，尤其是重复与亲密性。
网页设计
下图是一个企业官网，采用了比较多的对比、对齐、重复和亲密性。相比较移动端App而言，网页运用的四大基本原则更加明显，让人更容易察觉，因为它的空间大，内容多。
平面设计
下图是两张活动海报，一个是设计展的海报，一个是七夕的海报。它们共同的特点除了都采用了四大基本原则，还有一个很明显的特点就是，它们标题与内容的对比非常强烈，很吸引眼球。同时重复的元素也让整个设计更加的完整一致。
总结：以上分别通过App设计、网页设计及平面设计的角度举例，无非是想告诉大家设计的四大基本原则运用是非常广泛的，并不仅仅局限于某种形式的设计。举例最主要还是起一个举一反三、抛砖引玉的作用，更多的还是希望大家在设计中多观察、多思考、多实践。
对了，以上举例内容中，因为怕显示的特别杂乱，所以可能还有许多没有框选出来的对齐、重复、对比及亲密性的地方，大家不要纠结哦。
希望大家看完都能有收获吧！
原文地址：小梓的设计笔记（公众号）
作者：小梓
评论0