空间共享式网页设计有什么使用方法

为了从众多竞争对手中脱颖而出，不少站长又在探究别具一格的网站排版设计。这不，空间共享式网页排版开始火了，它是指让网站上的元素横跨不同的区块、实现空间共享的一种排版设计。这个概念听上去可能很复杂，但却很容易辨识，比如文字区域的文本横跨延伸到图片或色块区域中，共享其他组件的空间。这种共享式网页排版简单高效，能让整个网站充满层次，它还可以用来承载很多创意十足的设计，用来创造令人眼前一亮的网站作品。那么在网站中究竟应该怎样使用这种网页排版呢?下面小飞就带大家一起看看什么是空间共享式网页排版，以及空间共享式网页设计的几种使用方法。

什么是空间共享式网页排版?

不少人将空间共享式网页排版看做是分屏设计的一种延伸。不过相比界线分明的分屏式设计，空间共享式网页排版的核心在于某个元素同其他元素共享空间，元素可以横跨多个图层或区块，有时甚至会出现元素相互叠加的情况。这种排版布局方式有两个好处，一方面，网页元素是相互区分(带有分屏式设计的特点)，重点信息层次分明，有助于用户更好的理解网站重要内容。另一方面，网页的元素又是互相融合的，两个矩形的卡片式是相互连接的，这使得元素可以更好的被承载，尤其是文本元素(突破了分屏式设计的限制)。空间共享式网页排版除了可以应用在网页设计中，它还能在海报或明信片设计发挥自己的光和热。

在空间共享式网页排版中，横跨多个区块的元素可以显而易见，也可以很微妙。下图是Hometown Trolley网站的首页，它就使用了空间共享式网页排版。右侧的文本处的线条延长至左侧的图片中，将用户视觉引导到图片上，而左侧汽车的后视镜又嵌入到了右侧的文本区块中，两侧元素实现了空间的共享，这种共享又是微妙、细致的，让页面显得尤其协调。

下面是空间共享式排版的一些应用方式：

混搭图片和文字

在空间共享式排版中，图片和文字混搭算得上是最经典的设计方式了。很多设计师喜欢在共享式排版中使用垂直定向的图片(这种图片一般在网站中不常用，因为大多数设备屏幕以横向为主)。在这种排版样式中，文字的应用也相当自由，它既可以横跨横跨图片或留白存在，也可以在各个区域中单独使用。图片和文字的混搭往往可以给用户留下印象深刻的视觉效果。

The Square Apartments网站就是一个栗子。它在首页使用了空间共享式排版方式，上方的标题横跨了图片和文本区块，而下方的细节文字说明又是单独存在的，文字和图片的属性都被淋漓尽致的展现出来。图片和文字混搭的方式还有一个好处，由于文本需要跨越不同的区域，配色不用保持完全的统一，根据文字周围的背景色进行调整，这样的设计简单而容易上手。这也是空间共享式排版设计中最简单易学的一种样式。

选用大胆的字体

在空间共享式布局下使用有趣而独树一帜的文字也是比较不错的选择。跨越不同区块大胆独特的字体不仅可以带来独特的视觉体验，还能够创造页面重心，同时也不会降低自己的焦点位置。

如果你在空间共享式排版中使用大胆、独特的字体，记得选择有趣显眼的字体，应用文本也不能太短。另外，图片和背景色也要协调一致，字体与这两者要在色彩上形成对比，这样字体在整个页面上可读性才会比较高。可读性是这种设计手法中最重要的点，通常情况下，文本部分建议选择黑色或者白色的字体，虽然许多用户觉得看起来很简单，但是要平衡图片、背景和文本三个部分的配色体系，实际上还是挺麻烦的。

色块和文本组合

前面我们说过图片和文字混搭是空间共享式排版中最经典的方式之一。不过如果你的网站主页中没有图片，你同样也可以使用空间共享式设计，这时我们就要请色块和几何图形出山了，色块或几何图形与文字搭配也能呈现非同凡响的视觉效果。

Startup Lab的网站就将色块和文本以极其时尚的方式搭配起来，创造了好几个分层，让页面变得饱满而充实。清晰的阴影字体不仅可以突出自身作为主体的地位，还可以与二级字体形成很好的对比，合理的色彩搭配也让整个网站在视觉上很舒服，能够给用户提供不一样的浏览体验。

结合动画效果

使用空间共享式的排版，并不意味着你不能使用其他设计手法，比如动效就可以与之很好的结合起来。在用户界面或导航条目中使用动画效果能够便于用户理解你的设计，也能鼓励用户与页面进行交互。而在页面元素较多的时候，微妙的动效还可以更好的创建视觉焦点。

在Message in a Bottle这个网站上，首页中间的圆形Logo会缓慢地转动，在这个不对称的页面当中，它是当之无愧的视觉焦点。它很好地填补了图片和文本之间的空白，让整体设计更加完整和平衡。动画效果让你对这个品牌的印象会更加深刻。

简约设计

在大多数的情况下，简约的设计都是非常有效的。虽然你可能觉得这是老生常谈，但简约设计常确实完美规避了复杂设计所面临的各种问题，高效直接的排版设计更易发挥作用。如果你觉得前面几种空间共享式设计方式都太复杂了，不妨选择一个简洁的排版方式，这种方式很是直观，可以很好地吸引用户的注意力。

Melviie这个网站采取的就是最简单的极简布局框架，使用黑色的文本和白色的背景，让中间的图片成为视觉焦点。如果你不知道从何入手，不妨就学习这种方式设计空间共享式排版布局吧!

在空间共享式网页中，排版设计、图片、文字等元素的处理看上去可能更加现代化，但相比传统设计手法，它也没有复杂多少。空间共享式的设计手法让页面中常被用户忽略的元素和其他元素有了更多的交集，让页面内的元素"互动"了起来。

本文来源起飞页自助建站平台