发布日期: 3/4/2019 10:02:39 AM 　点击量: 1101

网页设计本质上是印刷设计发展过程中原理的进化和理论的创造。 传统的设计行业为网页设计带来了很多技术与理念，但这些在虚拟环境中需要花费更多的时间才能掌握。 更不幸的是，我们没有一个单一的平台来展示我们的内容；我们必须与多个浏览器、操作系统和屏幕尺寸作斗争。

慈溪网站建设

随着网页设计的发展，我们也观察到了一些设计原则。 基于网格的设计近年来有所增加，这些设计师可以根据列网格来布局他们的网站。余姚网站建设。网格系统成为一个非常流行的布局方式，通过使用比例和平衡来组织和对齐元素，并向页面添加秩序。

基于我们使用比例和平衡的知识，可以利用另一种印刷设计理念：基线网格。

什么是一个基线网格？

基线网格是一种用于改善基于网页排版的技术。 本质上，它将所有文本对齐到垂直方向上的网格（简称垂直网格，可以理解为一行），每个字母的底部都位于网格上，就像在划线纸上书写。 宁波网站建设。最终的结果是：通过潜意识的平衡以及一致性，使页面上的文本达到完美的组织。

正如我之前所说，印刷是一种静态媒介。 为打印格式而设计时，允许你在你的观察窗口（例如PS、AI等设计软件上的画布）上设定最终的呈现效果。 然而，由于你的设计可以通过网页在各种可选的平台上进行解析，对于使用不同设备或者平台的用户，CSS渲染你的行高值和其他印刷值也将会有所不同。 对于许多设计师来说，这只能通过猜测和预测最后呈现在用户面前的样式。

在印刷中的基线网格-慈溪网络公司

许多印刷设计师通过结合他们的设计工具来使用基线网格，比如说InDesign、PS和AI等等。 印刷中的网格可以追溯到早期的1200年代。 事实上，从网格到黄金比例（即大多数基于数学的理论）的一切都可以在生活中随处可见，最突出的是建筑。

网格使得可以将所有的设计元素（文字、摄影、绘画和颜色）彼此之间构成形式上的关系；也就是说，网格系统在设计中是一个引入秩序的手段。 有意地对元素进行组合比起对元素随机地布局更具有清晰、整洁和成功的效果。 -- Josef Müller Brockmann。

创建一个基线网格-余姚网络公司

现在，让我们来看一下在实际操作中，如何创建一个基线网格。

首先，我们必须基于与字体大小的比率来定义基线网格的行高（line-height）。举个例子，1:1.5是一个不错的数值，为我们提供了一个50%的呼吸空间。 如果文字尺寸为12px，那么行高（使用1:1.5这个比例来计算）将会是18px。 150%是一个不错的数值，为我们的设计提供了易读性，当然，这个数值不是固定的，你可以取任何合适的数值。宁波网络公司。 但是，当考虑行高时，你应该尽可能选取130%-160%范围的比率（对于西文来说是这样的，对于中文，行高可大于这个数值）。

在我们再进一步之前，你应该了解 CSS line-height 实际上是如何工作的。 line-height是文本行的整体高度，而不是文本本身。 它的工作原理是通过在文本上方和下方添加填充，以使其空间化（可以理解为上下留白）。慈溪微信营销。 如果我们实际上拿一些文本并为其设置一个背景，我们将会看到文本位于行中间，而不是完全覆盖在行上方。