为了从众多竞争对手中脱颖而出,不少站长又在探究别具一格的网站排版设计。这不,空间共享式网页排版开始火了,它是指让网站上的元素横跨不同的区块、实现空间共享的一种排版设计。这个概念听上去可能很复杂,但却很容易辨识,比如文字区域的文本横跨延伸到图片或色块区域中,共享其他组件的空间。这种共享式网页排版简单高效,能让整个网站充满层次,它还可以用来承载很多创意十足的设计,用来创造令人眼前一亮的网站作品。那么在网站中究竟应该怎样使用这种网页排版呢?下面小飞就带大家一起看看什么是空间共享式网页排版,以及空间共享式网站设计的几种使用方法。
什么是空间共享式网页排版?
不少人将空间共享式网页排版看做是分屏设计的一种延伸。不过相比界线分明的分屏式设计,空间共享式网页排版的核心在于某个元素同其他元素共享空间,,元素可以横跨多个图层或区块,有时甚至会出现元素相互叠加的情况。这种排版布局方式有两个好处,一方面,网页元素是相互区分,重点信息层次分明,有助于用户更好的理解网站重要内容。另一方面,网页的元素又是互相融合的,两个矩形的卡片式是相互连接的,这使得元素可以更好的被承载,尤其是文本元素。空间共享式网页排版除了可以应用在网站设计中,它还能在海报或明信片设计发挥自己的光和热。
在空间共享式网页排版中,横跨多个区块的元素可以显而易见,也可以很微妙。下图是HometownTrolley网站的首页,它就使用了空间共享式网页排版。右侧的文本处的线条延长至左侧的图片中,将用户视觉引导到图片上,而左侧汽车的后视镜又嵌入到了右侧的文本区块中,两侧元素实现了空间的共享,这种共享又是微妙、细致的,让页面显得尤其协调。
下面是空间共享式排版的一些应用方式:
混搭图片和文字
在空间共享式排版中,图片和文字混搭算得上是最经典的设计方式了。很多设计师喜欢在共享式排版中使用垂直定向的图片。在这种排版样式中,文字的应用也相当自由,它既可以横跨横跨图片或留白存在,也可以在各个区域中单独使用。图片和文字的混搭往往可以给用户留下印象深刻的视觉效果。
TheSquareApartments网站就是一个栗子。它在首页使用了空间共享式排版方式,上方的标题横跨了图片和文本区块,而下方的细节文字说明又是单独存在的,文字和图片的属性都被淋漓尽致的展现出来。图片和文字混搭的方式还有一个好处,由于文本需要跨越不同的区域,配色不用保持完全的统一,根据文字周围的背景色进行调整,这样的设计简单而容易上手。这也是空间共享式排版设计中最简单易学的一种样式。
选用大胆的字体
在空间共享式布局下使用有趣而独树一帜的文字也是比较不错的选择。跨越不同区块大胆独特的字体不仅可以带来独特的视觉体验,还能够创造页面重心,同时也不会降低自己的焦点位置。
如果你在空间共享式排版中使用大胆、独特的字体,记得选择有趣显眼的字体,应用文本也不能太短。另外,图片和背景色也要协调一致,字体与这两者要在色彩上形成对比,这样字体在整个页面上可读性才会比较高。可读性是这种设计手法中最重要的点,通常情况下,文本部分建议选择黑色或者白色的字体,虽然许多用户觉得看起来很简单,但是要平衡图片、背景和文本三个部分的配色体系,实际上还是挺麻烦的。
色块和文本组合
前面我们说过图片和文字混搭是空间共享式排版中最经典的方式之一。不过如果你的网站主页中没有图片,你同样也可以使用空间共享式设计,这时我们就要请色块和几何图形出山了,色块或几何图形与文字搭配也能呈现非同凡响的视觉效果。