设计的20个核心要素与原则
设计是一个复杂的、十分复杂的、very复杂的，有趣的和令人兴奋的业务。
然后呢，就算你在设计这个行业工作再久，你也要把自己当成一个初学者，因为技术是不断发展的，软件也是不断迭代的，设计潮流也是在变的；说实话，要想保住自己的饭碗，总要拿出点压箱底的技术来~~
所以，让我们尽可能的放慢一点步伐，讨论一下关于设计的20个原则。
1
线
我相信我们都知道什么是“线”，但只是要确定，“线”可以被定义为任何线性标记。所以，当你考虑它时，所有的一切都是“线”。
即使你现在正在阅读的这些单词和字母都是由成千上万个弯曲的，倾斜的直线组成的。
线条也可以有一定的想法！直的线能唤起整洁，波浪线可以创建运动，曲折线意味着紧张或激动。
通常写一篇文章时，会有一条“引导线”，这条线呢可以串起你整篇文章的重点，和故事发展的大概。
而在设计中也是如此！
让我们看看网页设计中的“引导线”的一个例子。这个网页是由一个很酷的对角线引导的设计，所以整个网站的设计，包括标题、导航、介绍都得跟着这对角线的设计而布局。
PRA的网站设计 ▲
一个全是用线组成一幅图的方式是一个非常强的表现方式，而下面这张图也让我想到了很久以前玩的一个手机游戏“找你妹”，曾经让我玩的是精力交瘁、欲罢不能，上瘾的有木有，咦？好像跑题了。
言归正传，这幅线框插画呢是设计师Ksenia给一个服装品牌设计的。用简单的白色线条来穿插整个画面，整体的设计风格体现了它的可识别性和独特性。也给这种线框广告插画起了一个不错的头。▼
线条是灵活的，简单的和有效的图形元素，只要运用的好，一样可以给你的设计增光添彩，不如现在就开始给自己设计一幅美美哒的线框图，也不枉我如此辛苦的码这么多字。
2
比例
比例是设计的很大一部分，有时是字面上的。在一个非常基本的定义中，尺度决定着个体元素的大小。
尺度可以帮助我们理解设计和图像。想想看，如果你是在一只大象旁边画一只老鼠，你可能会把老鼠画得比大象小得多，这将有助于观众立刻理解你的画。
这样，比例有助于我们对事物的感觉。但是，比例并不总是必须以现实主义为基础的。你可以改变你元素的大小，以创造惊人的效果，并发出信号，毕竟你的设计才是最重要的。
例如，看看这张电影海报，海报中，主角的头是不是被放大很多倍，马上吸引了大家的注意力有木有。
而这个比例是不是基于真实的人脸一般都是在现实生活中一样的大小，急剧扩大人脸有助于观众瞬间掌握电影的重点，以及使海报成为一个独特的设计。
这个元素对信号的重要性的比例通常被称为“层次结构”，这个有点不易于理解，说白了，就是要掌握画面的层次性，有虚有实，有明有暗，有远有近，有大有小，以达到画面的层次性。
3
颜色
关于色彩，说的人真是太多太多了，颜色多么重要，是个人都知道，很多爱美败家的女生衣柜里堆满了五颜六色的衣服，齐全的连颜料盘都要甘拜下风，由此可见大家对于颜色的喜爱程度。
色彩会产生特定的情绪、气氛和情感，每一个阴影都有特定的内涵与它联系在一起。总之，颜色可以打破你的设计。
让我们看看下面两个例子。首先，一个女性用品的设计。该设计选择了轻、软以及柔和的色彩。运用白色，浅灰色，粉红的色调和金属色字体，这些选定的颜色相得益彰地创造一个安静、优雅的女性化设计。
另一个设计，某果汁品牌。
颜色不是一个简单的原则，不止局限于品牌元素，颜色可以扩展到一切，甚至照片。滤镜和图像调节器给予照片中的色彩和色调无尽的可能性，只要你想的到。
我最后想说：
你在设计一个复杂和毫无灵感的海报时，为什么不特立独行一点，运用自己喜爱的色彩设计一个你觉得满意的作品，也许会有一个意想不到的收获！
4
重复
想想一些大品牌，比如可口可乐、谷歌、苹果、耐克，我相信对于他们的标志大家都很熟悉，其实比它们好的logo有很多，但是为毛单单就记住了它们。是的，你猜对了——重复。
重复是一个重要的元素，当涉及到品牌设计，无论是在保持品牌的一致性，还是在捆绑项目的同时。
让我们看看一个品牌的例子。下图中，VI中使用一致的颜色色调和一致的logo，保持统一的间距。
重复是一个关键因素，当涉及到品牌，它就不再是美丽的一次性设计。例如，涉及到创建模式和纹理的时候。
看看这个包装设计使用重复的图形。效果不再是繁琐无趣的旧窗帘，他们可以变得非常有趣和好看。那么，为什么不在你的下一个设计中实现重复的设计效果呢？
想要拥有更多的灵感，何不如自己尝试着做一套有趣的品牌VI，最少也要摆出几十个华丽的几何图形才对的起自己有木有？
5
负空间
说穿了， 负空间是在空间、地域、周围形成自己形状的元素。
很多人认为负空间的开发者是画家埃舍尔。
▲ 看到埃舍尔在空间中用鸟类创造鱼的形状？这是一种消极的工作空间。
考虑到周围的一切，利用物理设计，并操纵整个空间，形成新的形状。
消极的空间，当巧妙的使用物理设计可以创造真正惊人聪明的设计。
下图是由设计师乔治绘制的一系列动物图标，清晰的描绘出了简单干净的动物形状 。▼
6
对称
作为21世界最伟大的物种—人类被科学证明是会被对称所吸引的。我们发现只要是对称的面孔（好好笑，谁的面孔是不对称的？当我傻吗），图案和设计一般更具有吸引力。
很多的logo都使用了对称性设计，为了创造一个和谐平衡的画面。采用对称logo的大品牌呢，比如麦当劳，香奈儿，星巴克等都是，还有就是我们伟大的故宫设计也是对称性的，总而言之，对称设计是very高大上的。
当然，不可能所有设计都是对称性的，也不应该是。在一个看起来是平衡和对称的设计之间有一条线，看起来像是其中一边被复制，翻转，粘贴到另一边上去的。因此，不要试图实现完美的对称性，而是试图在你的设计中引入微妙的对称元素。
例如，这场婚礼邀请卡使用高度的对称性，但它不是完美的镜像。相反，设计师微微调整插图，以微妙的不同保持设计整体的对称平衡。▼
对称并不总是那么明显，有时它是微妙的，有时你甚至没有注意到它。
一个看不见的对称性例子可以在更具体的文本框中找到。打开任何一本杂志看看，可能是在一个较长的文章中你会发现它已被分割成文字列，这些列通常是对称设计的，以保持清晰、整洁、以及视觉上的吸引力。
看看这个年度报告，是不是也是对称的？▼
通过在你的布局设计中使用一点点对称，你可以创建一个平衡的秩序感。所以，下一次你在设计一个出版物的时候，或者一个有很多类型的设计，注意你使用的对称性有多少。切记，不可多，也不可少，至于具体多少？根据具体的设计来定！
7
透明度
也偶尔被称为“不透明度”，让我们看一个使用透明度的例子。这个惊人的例子是杰克用各种大小不一、不同颜色透明度的形状交叉而成的插画。
在这种方式中，调整与玩弄透明效果是强调图层和形状的一个比较独特的方式。
玩弄透明度也是一个伟大的技术，产生一个静态图像的运动感。
▲ 例如，看看这张海报，图像处理成不同程度的透明效果，交叉着创造一个引人入胜的效果和运动感。
透明度也不仅仅局限于数字图形。这个玻璃帖子是纽约博物馆的介绍牌，为了设计一个独特的引人入胜的效果。
仔细考虑你的设计是为什么人服务，不要害怕不敢用你的创意。
8
纹理
干净，锋利，光滑的平面设计可以是美好的，但有时候，选择一些纹理效果会更好。纹理可以增加触感、深度，对于你的设计可以起到增添一些有趣效果的作用。
然而，与许多事情一样，一定要适度的使用这种技术，因为太多的纹理会很抢你的设计。记住：使用任何效果的时候都要有个度。
让我们看看一个例子，在使用纹理的同时，使用了立体块状效果。这个漂亮的字体由丹卡沙罗设计，使用纹理营造了一个复古的风格。
注意，粗糙的质感不是为了分散注意力而是更好地提高了整体的视觉感。
看看下面这张葡萄酒公司所设计的名片， 墨水点式的纹理压花质感的名片，是不是瞬间档次上来了。在设计中使用纹理可以让你的设计变得更有感觉，更会脱颖而出。
9
平衡
平衡是生命中一个非常重要的东西，它在设计的世界里同样重要。
平衡的方法是考虑到每一个元素的“重量”。无论是文本框、图像、块状的颜色，都要考虑他们的大小、形状、和 “重量”。
一个好的方法是想象如果你的设计被打印成一个三维模型。它会站起来，还是瞬间從了？
看看这只猫的logo，非常完美平衡的设计。如果它是印刷的，答案是它会坐直。▼
一种类型的平衡是“不对称的平衡”，这是反映左和右、顶部和底部的分布排列，调整元素的大小，使他们能在视觉上平衡。
让我们看一个例子。这充满活力的圆形色块是一个聪明的元素分配，平衡了整体的设计。注意如何通过元素的大小实现从左到右，从上到下的平衡。
10
等级制度
先来说说层级之中具有国王地位的标题。
看看面这个杂志的例子，展示了三种不同的信号，标题/标题的重要性/标题的意思。无论你选择怎样的设计方式，一定要确保消费者可以不用思考的立即读懂你的标题。
下一个层级就要说到贵族了，这仍然是十分重要的元素，但不要像国王那样醒目。这就是—副标题（引文的附加信息）。保持副标题的醒目，但是千万不要比主标题还醒目，否则副标题岂不是要造反了？
▼ 下面这张图上，注意日期（一个非常重要的部分）变大了，比它下面的信息更大更明显。然而，它并没有比上面的标题更醒目。
在等级制度的最底端是农民，比如不重要的信息、链接等等。
▼ 这张夜市的海报中。你可以很容易地指出标题、副标题/日期，然后额外的并不那么重要的信息起到了点缀的作用。
当然，层次结构不仅仅局限于类型。图像也有层次结构， 没有不起眼元素的对比，又怎能突显其他元素的醒目。
11
对比
对比往往是设计中的关键因素，有了对比才能使你的设计变得洋气（洋气貌似是我想到的最高端的词了~~）。
在一个非常基本的定义中，对比度是你设计的两个元素之间的差异程度。一些常见的对比形式是黑暗与光明、厚与薄、大与小等等。可读性和易读性的对比影响也很大，比如说很多小说、出版物会在白色封面上放黑色的标题，如果在白色封面上放浅灰色标题，那对比度就会降低，而且不好读，所以，在设计中，请确保你的对比。
例如，看看这张纽约世博会自行车的海报，它的设计就具有强烈的对比度。因为他的整体是一分为二的，一面是绿色的扁平风，一面是灰色的拟物风，以确保两个面都是引人注目的，谁也无法抢了谁的风头。想象一下，如果“NEW YORK”和 “BIKE EXPO”是一种风格，一个色系的话，对比度将大大降低，标题也将不再突出。
所以，设计中想突出两个重点的时候，对比度将是最好的选择。
例如下图的字体设计就是一个非常经典的高对比度的例子，其中黑与白（黑暗和光明）、色块与线（厚与薄）给设计增添了无尽的趣味性和独特性。
对比不仅仅使文字的可读性增强，它也能很快的吸引眼球，达到视觉冲击的效果。这个方法在网站设计中得到广泛应用，让我们看看下图中这个例子。
看看这个暗黑的登录界面是如何设计的？明亮的红色按钮与暗黑的背景形成了鲜明的对比，这种有意的对比也是为了让用户一眼望去就能注意到这个按钮，并且点击进去，到达注册页面。
所以，使用对比，突出某些元素，也是值得我们学习借鉴的~~
12
框架
一张好的照片就如同艺术品一样，如果再来一个好的框架，是不是就堪称完美了。
例如，下图中这个菜单在选择框架的时候要注意两个元素，一个就是设计的整体风格，还有一个就是企业文化，不能只为单纯的好看。▼
框架也不一定是图形。如果你工作中有些很好的摄影元素，为什么不考虑用它们来为你设计框架？
看看下图中的海报，周围围起来的物品都是随机选择的，构成了一种独特的框架。这样，你的注意力自然而然地被吸引到了框架上，从而更好的注意到中间的文字。▼
13
网格
想想用网格做设计，就像是先打好房子的基础一样，这是非常关键的第一步，也就是先让你建立一个功能，到最终成型一个美丽的成品。
设计师或建筑师想好应放置些什么元素，什么与什么相对齐，提供一个雏形的建筑轮廓，也就是我们常说的原型图。
原型图是重要的，通常只能看到个大概，它们是由一定数量的行和列组成，留有设计元素的位置，使你的内容整洁、清晰、有条理。
先让我们看看一些原型图的例子。
这个例子是一本杂志的原型设计，整体排成了五个竖列，注意看！其中元素是如何包含在其中的，有元素占了三个竖列，也有元素才占两个竖列，但作为一个设计排版，整体还是非常整洁、干净的。
为了使设计更加灵活多变，考虑在元素中加入更多的竖列，如下面的例子。
依然是该本杂志的另一页原型设计，该图再次显示了元素的多变性。注意！左边的大元素是如何跨越多个竖列的，而另一边的元素只坐在了两个竖列上。
不要以为元素的布局只能规规矩矩的，如果你能掌握这个方法，完全可以尝试出一个惊人的设计。所以，一定一定要找到最适合布局的方法。
现在呢，我们基本上已经懂得了原型是什么，它是如何工作的，现在，让我们看看一些现实生活中如何摆放元素的例子。
看出图中有多少元素了吗？我才不告诉你们，自己算吧！无论哪种摆放方式，这个例子有一个清
所以大家在想下一个设计的时候，是不是可以想到元素也是可以这样摆的？
我已言尽于此，接下来的实践还是要看大家的努力~~
14
随意性
到目前为止，我们一直都比较喜欢有秩序的设计。但是，更有趣的，粗糙的，随意的设计呢？
随意性在设计中起着很大的作用，它有着一种特殊的随意性。让我们称之为“设计随意性”。
“设计随意性”和其他形式的随意性之间的区别是目的和执行。与设计中，你的主要目标应该是沟通，这个设计主要对消费者说什么？
例如，让我们看看一个设计，它可以很容易被视为“随机”，但是是有目的的随意性。
这张电影海报为了表现出一个杀手的内心独白，使用的字体是如此的不规则和诡异，字与字之间的间隔也是十分不规则的。
这不规则的设计方式，有些人会觉得阻碍了文字的易读性。但是，这是有目的性的，意图是代表一个混乱和扭曲的灵魂。
也有的设计像下图一样，使用拼贴的效果进行设计。虽然乍一看页面觉得有种时髦的粗糙和散乱，但是仔细一看，需要突出的信息并不多。
下图的设计是一个比较经典的随机性案例，图中奇怪的形状、纹理、插图与不规则的剪裁相互搭配，形成了非常有趣的设计方式。▼
这个设计虽然看起来是随机的，但如果你仔细分析它的各个元素，你会注意到设计的某些部分并不是无规律可循的（如左下角的蓝色形状和旁边的绿色尖角形状是不是相类似）。
值得一提的是，偶尔玩玩随机性和一些前卫的设计是不是很有趣，就像哈林哥的音乐一样，如今他的音乐风格是不是和以前的相比变得另类太多，但是大家却反而喜欢听，他也变得比以前更红了。
15
方向
许多设计一个很重要的点，是你的眼睛最先看向画面里的哪个位置，下一步又该看什么？符不符合眼睛看事物的逻辑。
很多研究已经分析了我们眼睛运动习惯的一个惯常模式，就是查看特定的东西。下图可以很好的解释。
研究证明，眼睛看东西有一个常见的模式，以“E”或“F”的形状看东西，当涉及到网页，把导航栏放在页面的左边或顶部是最好的选择。
另一种常见的模式，眼睛以一个“Z”的形状看东西，如下图所示。
总的来说，眼睛从左上角看到右下角，是一个大致扫一遍的过程。这你就得好好想想，怎样才能在“扫一遍”的过程中看到你想要展现的信息。
看下图，就是一个经典的使用方向的例子。
16
规则
这一点肯定会引发设计师们的世纪大战，有些说设计有规则，有些说没有，但从技术上说，他们都是对的。
正如同任何技能，有些东西你必须学习，这就是一般的规则。比如要用矢量的图形，不要像素化的，这些很多都是设计的规则。
但是，正如许多人认为，一旦你学会了这些规则，就是要打破这些规则的时候到了。
让我们看看一个例子，是如何故意打破规则的？
卡森是一个前卫的设计师，这张杂志封面产生了令人震惊的，动态的，破坏规则的设计，今天仍然受到赞赏。
另一个关于卡森的故事是他设计一个音乐家受访的版面。他竟然选择一个类似符号的字体，使整个版面变得不可读了。不过给我一万个胆子我也不敢这么做，否则明天铁定卷铺盖回家了。
卡森经常会和其他违规的设计师交流不同的想法来打破你的认知。这种“偏头痛”的文字不知道大家是怎么想的，反正我是只有“呵呵”了。
不过规则是用来打破的，因为设计这种东西并没有准确的界限，对于你来说，也会有个质的飞越。
17
运动
你听说过或见过有人描述一幅画或一件艺术品很有“动感”吗？你可能被这词整困惑了，毕竟，一件静态的绘画是如何移动的？但是，运动是视觉艺术的一大组成部分，包括平面设计。
早些时候，我们讨论了关于设计的方向和流程，这些因素在你设计“动感”的时候起了很大的作用。
但是，你想给一个元素一个字面意义上的“动感”，该怎么做呢？也许你有一个球，你想表现出它在运动；或者汽车，你想变现它在一条公路上行驶。有很多方法可以描绘这种运动，所以让我来举几个例子吧。
首先要说到的就是透明度！
下面logo的例子，几何形状的各种不透明度的叠影瞬间展示了一个干净、复杂的运动感。▼
同样，看看这个由克拉克艾伦设计的关于2012届奥运会的海报。通过简单的不透明的图层慢慢叠加从而变得复杂而浑浊，最终形成了强烈的速度感和运动感。
运动也可以通过一个模糊效果实现。看看这个例子，将运动模糊效果应用到一个静态页面是如此的成功。
下例中，由德国设计师anzinger设计的图书封面。将物体的边缘设计成模糊的产生运动错觉的有趣效果。
最后，运动也可以通过运动线来表现。这些都是常见的漫画和插图，使字符看起来像是要逃跑了一样。
让我们看看一个例子。
下面这个例子使用运动线来表现运动。一种微妙但有效的设计方式给元素一个动态的边缘，不是赶脚立马就不一样了？ ▼
18
深度
深度是设计世界中一个重要而令人兴奋的原则。即使有很多的媒介，你可以创造一个深度的感知和幻觉，从而超越二维设计。
那么，我们如何在设计中创造一个深度的幻觉呢？
首先，我们有什么可能是最常用的技术，阴影！学会素描的童鞋都知道，阴影可以瞬间让物体变得真实起来。所以我们平常也要善于观察身边的事物，看看光啊影啊神马的，不然当初学素描干嘛，为了砸钱玩吗？
下面这张海报呢，给物体都加上了阴影，说白了就是拟物风，每一个阴影对应不同的元素的表现方式都不一样，不要问我为什么，你和你朋友站一起看看，两个人的阴影会是一样的吗，如果一样的话，恭喜你，终于找到了你的双胞胎兄弟。
另一种技术呢是重叠某些元素。这与扁平风有点不相符，为了让画面看起来有层次感，设计师们也是卯足了劲。
比如下图中的这个设计，元素各种重叠，白色边框也可以看成是一个层次，是不是深度感瞬间就不一样了？ ▼
另一种技术是玩视觉角度，这是一种技术，往往给元素一个“3D效果”瞬间真实了有木有？通过调整某些元素的角度，你可以给它们错觉，创造即时深度。
让我们看看一个例子。
这个电子海报由尼尔史蒂文斯设计，每个字母向右倾斜一点点，给了他们独特的形状和深度。从这种简单的说明、阴影和调整的角度来看，每个元素的设计方式有助于创建一个动态的和引人入胜的效果。
当然，如今的时代已被扁平风所取代，在设计中已很难看到拟物有深度的效果，就像苹果以前的系统都是拟物风，而现在的苹果界面，大家不难发现，已被扁平风所取代。不过也有例外，就像老罗的锤子科技，依然特立独行地坚持着他们的拟物风，值得给老罗一点掌声。
19
排版
印刷术可以说是设计的最大的基础之一，这个就可以从古说到今了，那时候中国才是最屌的，什么小日本啊，美国啊根本比不了我们。
不过排版也得根据你到底想表达什么而定。
让我们看看关于排版的一个例子。
这些杂志是由本杰明设计的，每个排版布局都有着其相对应的目的。
下一步，我们有身体。现在，有一个正在进行的辩论在身体那些偏爱serif和sans-serif那些赞成在可读性和易读性术语之间复制世界。
那么答案是什么呢？好了，这下偏好和每一种情况，但一般来说，衬线是最好的打印，和无衬线字体是最好的网站。让我把它交由urbanfonts这个奇妙的信息图表来解释。
关于排版，其实很多人都在阅读性和设计感之间纠结，但一般来说，关于字体，印刷的话最好使用衬线体；网站、手机界面什么的，无衬线体比较好。
（所以很多杂志的文字会用宋体，手机UI界面用兰亭黑或苹方等等）。
下图呢，可以说是最错误的案例（放了那么多经典案例，终于可以来一个反面教材了）。
所以呢，大家要注意以下几点：
注意你的标题。
确保正文的文字不要太大也不要太小。
尽量避免一个版面使用过多的字体。
左对齐是最容易阅读的。
如果有疑问，就打印出来看看，会很容易发现问题所在。
说到排版，还有一个很值得一说的自定义字体——艺术字。
这本杂志设计只使用几种不同的字体，但总体来看，这些艺术字非常的时尚和有趣！
快看，快看！
Come on ! Baby !
20
组成
作文需要一个完美的结尾，因为它是一个最终的总结。
“作文”是指在你的设计中元素的整体安排，这听起来有点沉闷。但它实际上是一种对元素来说很有趣的玩法。
“组成”基本上就是把前面我所说的19种元素相结合起来，你可以使用规模、重复、排版、线条、随机性等等等等，以创造独特的，合适的布局。
来看看别人是如何组成的。
该设计把重点放在“30”上，通过使用规模和深度，来突出它。让“30”放大再放大，以至于撑满整个页面。 ▼
这些只是在设计中比较简单的实现方式。注意他们都是如何用这个特定的方式来创造一个强大的、有吸引力的和有效的设计。
这里的另一个随机性的例子。跟前一个相比该设计采用了类似的技术和设计原则，但产生了一个非常不同的结果。这张海报明显不是为了突出最大的人物主体，而是为了突出色块上的字，所以有时候最大的元素并一定是主角。
总的来说，通过使用不同的组合、技术和内容，你能够创建一个各种牛逼、无底线的布局。
欢迎加入Gad腾讯游戏美术群，群号码：167422913