设计师入门必备-设计原则

好的设计是共通的，美与不美都是有迹可循的，如何去使用设计原则，这是设计师的入门规范，如果不能掌握设计四大原则，那么你的设计将会没有灵魂。

 首先了解一下第一大设计原则-亲密性，在生活中，什么样的角色是比较亲密的呢，爱人、情侣就是一种相互靠近的关系，亲密性就是说的靠近，先给大家展示三张图片，看看这三张图有哪里不一样：

第一列五行文字五个模块，第二列五行文字三个模块，第三列五行文字两个模块，这三列就是依靠亲密性原则来改变的，亲密性（proximity）的定义就是彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素，这有助于组织信息，减少混乱，为读者提供清晰的结构。说白了就是方便用户观察信息，俗话说得好，物以类聚，人与群分，日常生活中分组也是亲密性的一种表现，比如公司里面开发与开发坐一起，测试与测试坐一起，即物理位置的接近意味着存在关联，上面总结的几个例子很好理解，但真的要融入到设计中却是不容易的，比如说一组杂乱无章的文字放在你面前，你会不会使用亲密性让他们变得规整呢。下面展示一张名片，你的眼睛移动轨迹是怎么样的：

是不是一张名片要看好几个地方，那如果设计成下面这种样式：

如果像上面这样排版，把数据分成两大块，是不是更加一目了然，具有亲密性的元素可以形成视觉单元让阅读更有条理：

看上面这个菜单，利用亲密性排版是不是就更加明了了，所以大家在利用物理位置进行模块划分。那么再上升到我们的UI设计当中，大家可以看下各个网页，比如说淘宝网的展示，那么商铺商品功能划分，我们是怎么做到一目了然的，因为有很明显的模块划分，所以让用户能够简单识别，具体划分可以用到面、线、模块间距或留白等。最后再给大家说下使用亲密性要注意的五点，第一，要有意识地培养信息提炼能力，能对信息做好划分；第二，不要为了填充空白而把任何元素随意放置；第三，用距离体现亲密性，除非是并列项，不然不要随意等距离分布；第四，避免页面上有太多的孤立元素；第五，无关联的元素无条件分开。

我们已经了解亲密性原则，可以做好模块和模块之间的划分，那划分好了的模块之间又该如何摆放呢，接下来就说说我们的第二大设计原则-对齐。对齐（alignment）的定义就是任何东西都不能在页面上随意摆放，每个元素都应当与页面上的另一个元素有某种视觉联系，这样能建立一种清晰、精巧而且清爽的外观。首先我们看看下面的对比图：

与第二排相比第一排的圆就显得杂乱无章了，缺少规律，在现实生活设计中如果这样，估计客户分分钟抓狂，第二排就是对其中最直观的一种感受。再来看看下面的名片：

观察下五个元素的对齐方式可以发现，没有任何关联，可以尝试一下对齐排版：

无论是左对齐、右对齐还是居中对齐，都是以一条线为基准进行对齐的，居中对齐的设计更多情况是用于比较正式的场合，给人一种稳定的感觉，缺点是中规中矩，比较乏味，而且不容易产生关联度。给大家看几张居中对齐的设计，第一张是法国巴黎的凯旋门，第二张是印度的泰姬陵，给人的感觉就是高端大气上档次，还有我们中国的故宫也是一样的道理：

一般什么情况下会用到居中对齐了，比如婚礼请柬、邀请函或者获奖证书等等，当然不是说一定不要使用居中对齐，设计是灵活的，只要设计的合理美观，都是可以应用的：

总的来说，任何元素都不能在页面上随意摆放，每个元素都应当与页面上的另一个元素存在某种视觉联系，这样你的页面才有最佳的完整性。要注意下，对齐的根本目的是使页面统一而且有条理，尽量避免在同一页面无条理使用多个对齐方式，如果要使用就应该做出特别的展示效果。

接下来我们来聊一下设计的第三大原则-重复性原则，重复（Repetition）的定义就是让设计中视觉要素在整个作品中重复出现，可以是重复颜色、形状、材质、空间关系、线宽、字体、大小和图片等，这样做可以使页面更有条理，整体更加统一。下面的名片就用到了字体的重复性，让眼睛保留在页面的时间更长：

再看看下面这些杂志封面设计，不仅是字体上的重复，也可能是排版上的重复，颜色的重复，同一品牌的期刊，会采用统一排版格式，主要目的就是为了加深印象，增加品牌感的识别性：

使用重复原则的话要注意，避免太多的重复，重复太多会令人产生厌烦。接下来说说最后一个设计原则-对比原则，对比（Contrast），就是如果两个项不完全相同，就应当使之不同，而且应当是截然不同，对比的方法有很多，原则只有一个，大胆去做。22号的字体和24号的字体不会形成对比，1像素的线和2像素的线也不会成为对比：

我们第一眼看到的就是我爱学习，上面的文字就用到了我们的对比性原则。对比可以是多种形式的，结合下实际案例看下：

以上这张图就是利用颜色的对比，以暖色为前进色，会吸引我们的注意，哪怕少量的颜色也能产生明显的对比，以冷色为远离色，会在我们的视线中退后，大面积的冷色也不一定会被注意到。向我们的UI设计按钮点击和没点击也是两种截然不同的对比。对比的根本目的有两个方面，一个是增强页面效果，另一个是有助于信息的组织。

每天多了解一点设计技巧，这篇主要把设计的四大原则给大家梳理清楚，想要对这些东西进一步了解可以自行再去查阅相关资料，我的教程主要目的是起一个引导作用，最基础的教程，告诉大家学习方向，让大家在这个知识海洋里有迹可循的学习，避免被海量知识所淹没，想要更多学习资源的话可以关注一下我的微信公众号：weishunv_min，欢迎互动！