平面设计在前端的应用

含义

将图像和文字巧妙地安排到规划好的形式中。

平面设计的三大要件

设计所需的工具、方法；原材料的供应与质量；实际应用的场景和设计原则。

平面设计的原则

颜色不等价

1. 不是所有的颜色是等价的，因为同一照明度下，多种颜色的相对亮度不一样。明亮度与饱和度是区别颜色对比的主要因素，色相/色调 (hue) 也是区分颜色对比一个因素。如蓝色和黄色这样的互补的颜色．会产生强烈的对比，但明亮的黄色与白色却让人难以区分文本与背景。

人类的视觉黄斑

2. 栏宽度与黄斑区域（macula, 视网膜的“清晰聚焦”范围）大体一致

3. 若非用渐变背景不可，应使用黑色字体。文本与背景要有较强的对比度。

Gestalt感知原理

1912年，Gestalt 心理学院（Gestalt School of Psychology）开始研究人类是如何从视觉信息中对模式进行感知的。观察了许多重要的视觉现象并编订了目录。“形状”和“图形”在德语中是“Gestalt”，因此这些理论也被称为视觉感知的格式塔（Gestalt）原理。

在当今的产品设计与图形设计的应用中中，Gestalt 原则在具体的设计实施过程中扮演着人的视觉认知与界面设计之间的跨海大桥，一定程度上减少了可用性测试阶段中的诸多问题，对于提升界面设计效率与产品气质有着显著的作用，富有创意的视觉感知让人眼前一亮，以提高广告营销的传播效果。所以在平面设计的模块里，十分有必要介绍一下Gestalt的感知原理。

1. 相近原则

proximity

每个元素没有外观上的区别（只有位置上的区别），相互靠近的元素，通常都会被观察者认为它比起相距较远的元素更具有相关性。

2. 相似原则

similarity

每个元素之间相互靠近，位置等距外观上颜色有差别（外观上相似），但观察者往往会联想到具有一致视觉特征的群体元素。

3. 连续原则

continuity

绝大多数的观察者会认为这是两条相交的直线，却少有人认为这是从中点衍射的四条线段。说明我们视觉感知神经偏向于喜欢连续不断的事物。

4. 图形与背景的关系

graphic and background

在图形与背景的反转中，观察者的感知对同一视场的两种可能的解释中交替：你看到的是一个高脚杯或两张面孔，你不能同时看两张面孔（强行尝试，你只会看到一个高脚杯）。

相近性的差异会对观察者的感知产生不同影响。图b两张面孔相距较近，观察者比较难感知到面孔，更容易感知到高脚杯。图c两张面孔相距较远，面孔更容易被感知。

5. 收合/补齐原则

closure

绝大多数的观察者会认为这是一个白色正方形，放在四个蓝色小圆上，只有少数人认为这是四个残缺了1/4的圆而已。说明我们视觉感知神经偏向于完整的事物，甚至脑补出意象中的“完整”。

6. 1+1=3的效果（effects）

不断出现的黑点

两个元素之间的白色空间（也叫负空间）形成了第三个元素。当元素靠近时，另外一个视觉元素就会活跃起来。本图在黑色方块之间出现的灰色“斑点”，增加了另外一种效果。但前提是元素之间要相近，否则就只有1+1=2的效果。

视觉结构的建立

上述的感知原理都依赖于负空间的巧妙安排。所有排版和图像设 计依赖的都是“负空间”（实体周围的空间，留白），从而实现群组和易读性，这些视觉叙事、视觉重心、强调、图像叙事都要依靠留白区域。在网页设计中更多的通过margin 和 padding制造负空间，适当的负空间能给受众带来舒适感。

所以现在程序员们流行使用Bootstrap 网格系统（Grid System），来对网页的元素进行排版。

Bootstrap 网格系统（Grid System）

grid

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类

工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 使用行来创建列的水平组。
• 内容应该放置在列内，且唯有列可以是行的直接子元素。
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
• 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4

想具体学习Bootstrap 网格系统技术，应用于网页排版当中，请访问菜鸟的Bootstrap 教程

希望我的文章能有助于您在平面设计中，给受众带来舒适、愉悦的体验。你的满意就是我的心意。