本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第1章,第1.6节,作者: 【德】Smashing Magazine 译者: 赵俊婷 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.6 丰富强大的版式
多年以来,排版在网页设计中一直扮演着重要角色。大胆、强烈、沉重的刊头能够有效地宣传电子商务网站或作品集网站;然而一个巧妙的刊头则更有助于呈现内容的结构,并且提升易读性。很显然,我们见到了更大的变化,更灵活的排版,在一定程度上使@font-face属性和字体嵌入式服务的出现成为可能,如TypeKit。丰富的版式元素能够在浏览器中选择和复制,这在几年前可不是一件容易的事。未来追求的是夸张和大胆的排版。丰富的字族不仅将运用到标题上,还将运用到正文和副本中,将排版技术从印刷界带入网页设计界。此外,设计师们还将大胆尝试更多丰富的、复杂的衬线字体,以及有气势的slab字体。网页设计师还可以通过CSS3文字阴影属性为排版添加了更多深度。当然,这些细微之处与布局的选择密不可分。这些排版设计通常是基于网格的设计,并且是从印制界引入的技术,如旁注和脚注。我们进一步了解到,设计师正在扩大他们的字体集合,添加越来越多的阴影字体,避免特定的字体不可用。这样很好,毕竟字体的大小(或粗细)不太一样;一些字体会显示得比其他字体更宽或更粗一些。因此,更大的长宽比例意味着,一些用户在查看你的页面时,将比你看到更小的字体尺寸。
Kilian Muster
Kilian Muster采用了相当宽松的衬线字体来完成设计,包括字族中的Palatino、Palatino Linotype、Book Antiqua、Constantia、Times和Times New Roman字体。在Kilian的博客中也含有便笺。
extrapolish
请注意,这家波兰网页设计机构网站上的文本大多数设置为大写,如导航菜单、简介,甚至联络地址都是大写。尽管如此,其设计仍显得平静、大气、干净且精致。
DNA to Darwin
此网站仅采用了衬线字体贯穿整个设计。字体为:“skolar-1”、“skolar-2”、Georgia和Times。值得注意的是,文本被区分成列。直到去年我们还没有看到过此类设计。
Pioneers
此网站结合了生动形象的图片和俏皮的排版。和“传统经典”的网页比较起来,该设计更像是一本小册子或一张海报。
Colly
Simon Collison巧妙地将访客的注意力引向最微小的细节,从而呈现出排版之美。没有加粗字体和令人感到惊艳的排版,只有简单易读和美观大方的设计。
The Saint John’s Bible
此网站将衬线字体运用到了极致。该字体配合主题,完美地适应了布局。请特别注意,这样美观的视觉设计是如何与传统经典的排版布局相融合的。
Brewhouse
不错的风格和视觉的组合,使页面很醒目。但是到目前还不清楚为何设计者在该页面使用了三种不同的标题字体,理论上两种就已经足够了。
图_页面_294_图像_0001.jpg
terminalbrewhouse.com
Tick Talk
还能再大胆一些吗?大型加粗字体,大写字母贯穿了整个页面。当用户滚动页面时,能观看到非常漂亮的背景效果。这是一个非常简单而有力的设计。
总结
现代网页设计应该更好、更丰富且更便于用户使用。我们注意到,使用良好的视觉设计可以获得更美观和更好的用户体验。传统的技术,从印刷排版逐渐被应用到网络,作为布局技术或丰富的多功能排版技术,水平甚至是对角线布局的排版给多年来我们所熟知的平面设计带来了崭新的视角。这些进展都是网页设计时代到来的一个标志。在这个时代中,设计师可以使用新的工具和技术,并使其潜能发挥到最大。网页设计师理应期待激动人心和有有前途的时代到来。