设计并不像人们所想的那样难以驾驭，它是一个可以通过学习来掌握的技能。设计有着任何人都能够应用到工作中的规范。如果你是一个应用软件的工程师，或者是制作幻灯片的商务人士，那么有一些技巧很适合于你。我将会演示如何将网格，排版和色彩理论这三个基本的设计规则应用到实际工作中去。

设计基础入门

所有的设计都包含以下三种元素：

·美学

·情感

·设计资料

ps.我是一名产品设计师，所以我将使用产品设计作为参照点，但是你依然可以在其他设计中使用相同的原则。

美学是从传统的视觉设计原则中发展而来的。视觉设计的核心就是网格系统，排版，色彩原理和动效。美学不仅仅是“让事物更好看”，更是一种视觉语言。能通过视觉来交流也是一种能力。

情感是让你明白你是为谁而设计。在产品设计中，这叫做“用户调研”或者“用户体验”。在你不知道你在和谁交流或者对方想要表达的内容的情况下，这也不会影响你的沟通效率。设计永远都不是独立存在的。它的核心必定拥有要解决的问题及目标。

最后，你得了解一些设计工具。设计工具的领域跨度从餐巾纸上的涂鸦到D3.js。我可以想象出在你脑海首先出现的是photoshop或者illustrator。代码同样可以是设计工具，事实上，很多产品设计师都跨界到编程，或者GUI和代码混合使用，这在Framer.js的工具中可以见到。

……

案例

我将使用一个真实的产品作为案例，并在这篇文章中将这些设计规则的应用方法在案例中得以体现。我选择了一个提供在线课程的教育网站。 我不会做任何结构上的改变，因为改变结构的话就扯远了。

我将在这个案例的改版中运用到以下几个规则：网格，排版和色彩理论

这个页面给我的第一印象是看起来很乱；你的视线不知道该从何看起。所以，首先我会把它的视觉风格完全剥离开，只关注于内容。

规则1.网格

所有元素都要对齐。第一件将彻底改变你的设计的事情是对齐。这意味着你的网站，应用程序或者幻灯片中的所有元素都位于网格中，无论是水平方向还是竖直方向。

网格排版

传统的网格排版包含栏、模块、负空间、空间和基线构成。一些常见的排版布局包含文稿、栏目和区域。网格排版可以尽量简单，也可以很容易的排出时尚感，因为这个部分几乎没有技术的限制。

网页网格

网页网格在试着向平面排版靠拢但是始终限制于网页浏览器的兼容性。它由平面设计发展而来，但是更加复杂。

对于网格的选择高度依赖于你的项目类型。对于大多数项目，你需要一个拥有列容器布局的网格系统。这意味着总宽度是一个固定的数值，如960px或者68em。使用边界容器确保你的文本在大屏幕上依旧可读。每行字符数在45-75个之间，是可读性最强的排版方式。

你可以很容易的将一个CSS网格应用到你的项目中。很难想象一个你会去从头开始为一个网格系统编码。我们已经有了很多丰富的网格框架（960，Bootstrap，Foundation）。任何网格框架都会提供你一个列系统。最常用的布局是12，16或者24列。我个人最喜欢的是Neat.io，因为它提供了固态默认值，但是也能很方便的自定义。

当开发网页应用时，你应该考虑使用一个能够利用整个窗口宽度并且提供模块化的网格系统。对于创建app来说，你会想要一个建立在不同模块上，能够整齐的占用整个屏幕的网格系统。Zurb Foudation for apps 就是这样一个特别的框架。

竖线韵律

这是棘手的一部分，即竖直分割线。竖直分隔线或者基线网格是布局中的网格基准。现在还没有轻松的方式来将基线网格实施到网页中。我偏向于使用simple Sass map来实现，然后用Basehold.it来检查。

在网页设计中，一个实现视觉连贯性的方式是使用竖直分隔线。对于一个网站来说，这代表无论任何字号和字体，它的行高总是一致的偶数倍单位。

层级

层级反应出页面中最重要的元素和内容流。头部通常比段落文本要大，并且吸引能够首先吸引人们的注意力，同时允许他们跳过这个内容。

另一个吸引人们注意力的方式，除了放大它，就是使用负空间。负空间或者留白相当于给予一个元素以衬垫，使得它的权重更大。

……

案例

我做的第一件事就是在页面上拉网格线。像学校logo和课程卡片的元素，排版方式都是失调的。

1.我将基线网格布局完毕，并应用于所有的文本。

2.比如导航和学校logo区域的容器也同样应用在基线网格当中。学校logo占用了两列网格。

3.顶部周围的留白或者负空间为它们衬托出更高的层级，使得它们能够首先被注意到。  

规则2.排版

当心设计小伙伴们批评你的排版。排版汇聚了五个多世纪和数以百计的书本的艺术精髓。下面有一些小技巧，能避免被创意部的人嘲笑。

选择有品质的字体

样式。寻找具有多种样式的字体，它应该具有不同权重的粗体和斜体。比如，Sura字体没有斜体，可能在使用时会出现问题。

字间距（字符之间的空格）。你不能完全靠CSS来处理糟糕的字间距，所以应该寻找拥有均衡比例字间距的字体。看看Ecgar字体中的字母几乎挤到一起。这会在字号较小的情况下降低可读性。

符号。检查所选字体拥有所有的特殊符号。也许你不需要过于奇异的符号，但是需要确保所选字体具有所有的排版符号。 不要太花哨。相对于强硬的规则，这更应该被称为设计感。但是试着避免在你的设计中出现过多的字体样式。

借鉴。你不想让你的排版过于中规中矩。可以从著名的博客和设计师那里寻找灵感。 

字体搭配

1.没必要使用两种字体。你可以使用一种高质量字体的不同样式。你也可以使用一个字体家族，类似Alegreya和Alegreya Sans SC。绝对不要在一个设计中使用超过两种字体，除非你10000%确定你在做什么。

2.不要使用两种看起来差不多的字体，比如Open Sans和Helevatica。用户并不能区分它们，但是总体设计感会降低。使用看起来相似，但是特色鲜明的字体。  

……

案例

我选择了一种现代化的字体Titillium和具有特色的Work Sans。两种字体都属于sans-serifs。Titillium拥有更多的字符，这使得它很适合做头部的字体。Work Sans是一个拥有很多样式的高质量字体。 

规则3.色彩

关于色彩，我最想说的是它过于主观。目前确实有很多关于配色方案的规则，但是我们对于色彩的感知高度依赖于我们的文化背景和经验。你可以使用创造性的配色方案，但是它不能保证有100%的成功率。我首先会展示一些色彩的潮流方向，然后是色轮，最后展示如何使用它。

就像其他创意领域，配色方案也影响了我的设计方向。如同跟随潮流。常见的色彩趋势从艺术过渡至图片和工业设计，最后是网页设计。下面是一些主导色彩流行趋势的来源。

·Material Design

·高清摄影图的色彩

·灰度图

色彩灵感

区别于传统的图形设计，用于网页和移动产品的颜色则普遍内敛。你要保证可用性，选择高对比度的方案，并使颜色成为视觉语言的一部分。举个例子，你可能会拥有一个或者多个强调色来表明一个元素是可操作的。你并不会通过使用相同的颜色同时在用可操作元素（如按钮）和静态元素（如文本）来让用户感到困惑。

配色方案

阴影/单色。创建一个单色方案，你需要选择一个色调，并且搭配出4个或5个不同亮度的色盘。

单色方案对于文本和像边界，背景，阴影等等支持行的元素是非常适合的。

·你可能需要使最亮的颜色拥有大约95%的明度，最暗的大约20%的明度。

·你的文本绝对不要是纯黑色即色号为#000的颜色。20%的深灰色在白色背景中已经足够容易被眼睛获取。

·试着在你的灰色中加一点蓝色调来体现出具有现代感的冷灰感觉。

相似色方案也是现在在产品设计中非常流行的方案。创建相似色方案，你需要选择两种拥有相似色调的颜色，并在不需要作对比的情况下使用，但是需要明显的不同亮度。

要创建薄荷海军方案，我使用了色调为161和209的颜色，亮度分别为88和50。它们不会相差太大，但是依旧有识别性。然后我用两种色调相同的灰色作为海军色，来完成这个方案。

你可以试着使用同样的原理来创建其他颜色方案。

互补色方案使用两个色环中位于对立位置的颜色。你可以想象，纯互补色方案的形式看起来已经过时了，不再受欢迎了。

你可以试着创建一个互补色方案，像Slack设计中使用的有趣的扭曲设计。你依然可以使用在色调上对立的两个颜色，通过调整饱和度和亮度来使他们做互补色。你可以看到Slack使用了一个柔和的茄子的深色来搭配一个亮绿色。

我搭配了一套柔和的主题色，其中的绿色就不那么亮眼了。

三色系方案比较难创建，因为它是用了三种不同色调的颜色。正如互补色方案那样，我们可以通过调整饱和度和亮度来创建一个现代化的方案。

渐变

在现代化设计中，渐变是很受欢迎的。渐变在IOS7的扁平化版本设计中被重新引入。目前有两种趋势来创建渐变。

微渐变使用两或三种非常相似的颜色。微渐变基于相似色方案。创建微渐变时，选择饱和度于亮度几乎相同，并且色调相近的颜色。色调之间的差异应该控制在10或15之内。你也可以试着加入一个微小的角度到渐变中。

强调型渐变是区块中的新成员。强调型渐变基于三色或者互补色方案。对于使用这种戏剧性的渐变究竟是好还是坏并没有一个绝对的答案。所以在使用时应该小心谨慎一些。我其实强烈推荐将它用于较小的强调处（因此得名），而不是任何大型的元素。

……

案例

1.配色方案。我选择紫色作为基础色，创建了一组相似色方案。在我的配色过程中，我首先选择一个基础色（紫色）并且在色轮中查找匹配的颜色。我准备将紫色作为基本操作色，用于所有主链接和按钮。两个蓝色作为设计的辅助色，并且将它们用于不可操作的元素，比如头部和遮罩。

2.强调型渐变。我添加了一个明亮的渐变来作为一个强调用的对象。

结语

下面是最终的设计成品和我的设计过程。

1.总的来说，我减少了页面上的干扰元素。吸引注意力的基本要素是元素要位于一个具有标签和行动指引的黄金区域。页面中不和谐的颜色将我们的注意力从重要的元素上给分散了。现在导航栏仅仅由简单的白色线条作为区分（10%透明度）。学校logo都变为灰度图，并且占用视觉层级中的二级区域。

2.我添加了一个明亮的强调渐变，可以在整个设计中作为品牌的一部分。

3.我将主图换成了一张星空的图片。在我的脑海中，它代表着雄心壮志和探索。而且，我换它是因为原始图片很明显就是一张常见的素材图片。人们对面部表情非常敏感，并且能一眼就分别出赝品。