内容
这篇文章首先出现在.net杂志的第229期上,.net杂志是面向网页设计师和开发人员的全球最畅销杂志。
垂直节奏是您在HTML / CSS上布局页面时应关注的最重要的事情之一,即在您向下浏览页面时类型块或类型行形成的视觉模式。
诸如标题,列表项,图像等可能会影响此节奏。拥有良好的垂直节奏至关重要,因为这有助于提高页面的可读性和可扫描性。
网络上有很多很棒的教程(例如,在这里和这里),您可以找到如何通过在行高中使用ems以及了解如何保持类型“同相”来在技术上实现正确的垂直节奏。方法。
等级制度
需要密切注意的基本内容是元素之间的行高和页面上的整体视觉层次。设置合适的线高比例可能是一项涉及设计的工作,但掌握这一点很重要。层次结构也很重要,因为图像和文本元素应该在视觉上相互协调–最重要的部分通常较大,并且在页面上排在首位。
平面设计师已经处理垂直节奏的想法很多年了,只是在最近的一段时间内,网页设计师才真正真正地涉足了这一领域。随着人们越来越需要使用网格布局来构建网站并关注响应式实现以适应多种屏幕宽度,从视觉设计的角度来看,现在比以往任何时候都更为重要,可能不仅仅是技术上的。
五个例子检查
1.印刷风格要素 Robert Bringhurst的这本书是版式研究的标准。阅读,食用,以任何方式将其倒入大脑。
2.弗兰克·奇梅罗(Frank Chimero) 除了总体上令人惊叹之外,设计师Frank Chimero的个人网站最近进行的重新设计还展现了极好的垂直节奏。当您也向下滚动页面时,他使用视差效果来帮助将节奏带回家。
3.丹·塞德霍尔姆 有关出色的排版垂直节奏的一个很好的例子,请查看Dan Cederholm的博客。副本和标题的行高成正比例。
4.焦点实验室 网页设计和品牌公司Focus Lab巧妙地使用层次结构来帮助传达对访问者最重要的信息。
5.打字错误 Typography Studio Typofonderie网站的图像和文字具有很好的垂直韵律。元素之间的间隔在整个网站中成比例,并且主图像和辅助图像/部分之间的层次结构是完美的。
在Creative Bloq上发现10个惊人的实验设计示例。