如何打造丰富而充满呼吸感的网页设计布局？

我们人类有成千上万的人和成千上万的面孔，但如何长不会偏离骨骼。因此，为了保持内部的坚固和持久性，外观是一出戏，相对自由的视觉想象。布局布局很容易，只不过是整理网页的元素列表，然后一个接一个地放在布局上。事实上，由于自由搭配的方式非常不同，我们总是把最好的解决方案挂在前线，事实上，最终的结果是粗心的。

我们人类有成千上万的人和成千上万的面孔，但如何长不会偏离骨骼。因此，为了保持内部的坚固和持久性，外观是一出戏，相对自由的视觉想象。布局布局很容易，只不过是整理网页的元素列表，然后一个接一个地放在布局上。事实上，由于自由搭配的方式非常不同，我们总是把最好的解决方案挂在前线，事实上，最终的结果是粗心的。

没有边界

一段文字，一张图片，甚至一个图标。。。当你布局时，因为你的材料不是马上抓住的，你的布局总是喜欢用矩形代表一段文本或一张图片。这没有错，但这种做法也会让你陷入“框架陷阱”。

就像这样的布局，只是画了一个一般的框架图，也许你只是想说这只是一个框架，因为许多材料在设计和规划的早期阶段并不完美。

然而，你很可能会这样设计页面

当然，你会说这并不坏，因为我们看到的几乎所有扁平的网页都是这种风格，但可以肯定的是，网页没有太多的呼吸空间，整个网页都充满了信息，如果稍微改变布局元素的大小和位置，实际上会显示不同的布局效果（下图），很明显后者的布局更灵活。

边界造成的局限性是你的思维。你将习惯于在这个框架中思考解决方案。如果你想避免这个陷阱，你应该学会通过框架思考。即使你做了一个好的框架，你也应该意识到这只是一个早期不确定方向的测试。你可以完全改变框架的结构。

许多设计师声称自己是艺术农民工，觉得自己离艺术家越来越远。本质上的区别是，工匠们只是重复一项劳动，在创造之前就已经知道了目标。例如，在设计网页之前，你已经知道网页最终是什么样子的，所以你的工作只是一步一步地完成每个元素的对齐。艺术家事先不知道结果，通常一步一步地试图找到更有效的解决方案，艺术创作类似于一种冒险。设计师实际上是两种身份的理想结合。

创造焦点

这可能有点夸张，但任何好的平面作品都必须有焦点。正如我们所说，十字准星的视觉结构习惯把焦点放在中心，有很多方法可以创造一个焦点，简而言之，就是创造一个冲突。想象一下，在一个稀疏的大厅里，两个人突然争论了什么，然后吸引了几个人观看，这个场景在原来安静的人群中创造了一个焦点。同样，在视觉领域也是如此，使用比较冲突应该是创造焦点最有效的方法。

我们对焦点的理解不应该局限于一个“点”。它是一个吸引你注意力的区域。它也可以分为真实焦点和虚拟焦点。真实焦点是虚拟焦点上更准确的投影。

在这个页面设计中，字母与静物相结合的区域位于中间，成为虚拟焦点。通过色彩对比，黄色眼镜突出了虚拟焦点区域，成为真正的焦点

除了颜色，任何其他属性都可以通过比较形成焦点。此时，你所要做的就是注意不要有太多的焦点。因此，除了焦点外，设计中的其他元素也应保持相似性。

在这里，我们总结一下可以用来比较属性。这些属性之间形成的对比度越大，冲突就越大。

空间:充满-空置、活跃-消极被动、前进-后退、近-远、二维-三维、封闭-开放

形式：简单、复杂、美、丑、抽象、具象、清晰、模糊、几何、直线、曲线、对称、不对称、完整-破碎

结构：井井有条——混乱无序——随意摆放——衬线字体——无衬线字体——机械——手工——

纹理:细-粗、光滑-粗、反射-哑光、光滑-粘、锐-钝

位置：顶部-底部，高-低，右-左，上-下，前-后，有节奏-随机，单独-分组，接近-远离，中心-边缘，排列整齐-相互无关，内部-外部

方向:垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹凸形、正体字-斜体字

尺寸:大-小、长-短、窄-宽、扩大-收缩、深-浅

颜色:黑色-颜色、亮色-暗色、暖色-冷色、亮度-暗度、自然-人造、饱和(深色)-无色(素色)

密度:透明-暗、稠、薄、液体-固体

重力:轻-重、稳定-不稳定

(摘自《平面设计原则》一书)

当设计师做设计时，他们不会提前在大脑中设置这些规范，而是通过经验的积累形成潜在的直觉。这个列表的意义不是你需要写下它，而是在浏览后的任何设计场合。例如，在工作完成后，你可以看到焦点是否足够吸引人，哪些元素需要进一步调整。

突出焦点的前提是非焦点区域的元素应尽可能保持一致。制造冲突似乎很容易，但需要一步一步地保持一致。

举例来说，下面页面中间的图案也是整个页面的焦点

可以看出，虚拟焦点区域是由手绘花、几何图案数字和其他手绘图案组成的图案几何图形，但实际焦点落在最大的手绘花上。此时，手绘花的有机性与相邻的几何形式进行了比较，即几何形式与有机形式之间的比较。

实心花的最大尺寸与右下方手绘大脑正好相同，它们之间也有颜色和无色的对比。

三角形的几何形和数字的位置正好是三角形。仔细观察，整个画花的材质与图中的几何形和数字相同，与手绘大脑的绘画材质明显不同。它们相互比较，相互统一。

经过分析和观察，焦点的结构并不像预期的那么简单。如果比较和统一被视为天平的两极，那么所有元素之间的关系都是根据它们之间的价值来衡量的，这种变化最终会达到平衡。这可以看作是一种力学。

假如你的画面中的元素越多，你就越需要加强整个画面的统一。

下面的设计是一个由许多小插图聚集在一起的页面，意外地陷入混乱，设计师将这些插图分为三个内容，每个内容与背景色分区，形成三个矩形，这是形状的统一。这些插图的材料和风格也是统一的，而插图对象显示的方向也是向下倾斜的，这也形成了一种统一。因此，你可以看到这张照片的对比相对较弱，焦点是左边的矩形，毫无疑问，这个焦点中的插图可以看到是一件男士衬衫和一件女士衬衫，男女用品的对比。这种对比度相对不是很强烈。

保持比例

说到比例，它不可避免地与数学公式有关。事实上，简单地说，我们可以将比例视为视觉原子单位，所有位置和大小之间的关系都以原子单位为基准。

例如，如果我确定一个原子单元是一个50px的正方形，那么创建一个基于这个矩形的图形就是由这个正方形构建的，有点像我们玩的拼图游戏。

圆的魅力在于圆，可以适用于任何布局，也可以形成聚焦

因为我们对圆有一种流动性，所以它没有稳定性的特点。如果在布局上使用圆形布局，就会影响其周围的布局表达。因此，我们需要进一步改进圆的使用。例如，保持圆的尺寸不容易太大，因为太大的圆很容易挤压屏幕的边缘线，对周围有一种压迫感。

在使用几何布局设计时，文本段落通常使用矩形布局，也就是说，在匹配图片和图案建模时，需要使用几何本身的魔力进行排版。事实上，自然本身的结构可以简化为几何形状，甚至图片本身也具有几何形状的特征。因此，您可以将图片内容本身与几何图形结合起来。

有些几何形状并不简单。例如，矩形通过倾斜角度变成平行四边形。当两个三角形叠加在一起时，它们就变成了六角星。在四边形中增加一个边就是五边形，然后依次增加它就变成了多边形。几何学可以通过巧妙的组合形成一个新的形状，这几乎使几何学具有无尽的魔力。

例如，角变圆后，图形的尖锐感消失了，为整个图形增添了灵活性

后记

聪明本身就是一个非常有感染力的词，可能是因为很多人认为这需要付出很大的努力。事实上，他们越努力，就越渴望快速到达。只要设计目标明确，你只需要跟随目标进入过程。这里不得不提到，许多看似简单的可操作技能可能无法真正帮助你，比如“使用黄金比例可以获得最佳效果”、“非对称布局必须比对称布局更具活力”、“页面颜色不得超过三种颜色”和“蓝色字体阅读体验差”。。。这样的经验总结之所以不能误导你，并不是因为它本身

最有趣的设计是，从来没有标准的答案。一部杰作，即使被称为大师，也在等待有人突破它。也许我们也应该放弃“突破”的竞争性思维表达，但应该说，不同的人应该表现出不同的风格。