愈加多的网页内容开始采取别具一格的排版设计，其中最典型的一种，就是让文字布局横跨不一样的元素所处的地区，让排版和其他的模块共享空间。这种设计理念并不复杂，而这种趋势也在网站制作范围愈加热。

这种设计手法很容易辨别，文字排版部分一般会从页面的一个地区，延伸到另外一个模块所在的地区，譬如某个图片上的文字内容延伸到另外一个图片或者彩色区块当中，共享了其他组件的空间。这种设计所牵涉到的页面图层的达成方法会非常有意思，由于它可以承载不少富有创造力的设计。所以，下面大家一块儿看看一些典型的设计手法：

nclick="zoom" height="630" src="http://upload.chinaz.com/2016/1226/6361833955039481382333704.jpeg" border="0" alt="" />

这种空间共享式排版是一种相当容易辨别的设计手法。事实上，在一些海报和明信片设计中，也可以使用如此的设计。它的最典型的特点是，文字或者一样的元素横跨多个图层、模块或者区块。

从广泛意义上来讲，这个设计手法的核心定义是某个元素和其他的元素共享空间，横跨不同地区，元素相互叠加。这种设计常常被视作为分屏设计的一种延伸。

很多跨地区的排版设计都很明显，但也有比较微妙的，譬如上面的网页 Hometown Trolley 。右边文本部分伸出一条线，将用户视觉引导到左边的图像当中，假如你注意观察，还会发现左侧汽车的后视镜从背景中突出并延伸到右边的文本区块当中来。

假如设计得适当的话，这种设计手法可以借用元素地区的叠加，有效的帮忙用户更好地知道内容和信息。共享的地区成为了不同区块和不同信息的连接。这种设计的另外一个好处在于，文本内容可以更好的被承载，共享的模式就像是两个相互连接的巨型卡片模块。

nclick="zoom" height="631" src="http://upload.chinaz.com/2016/1226/6361833955047281399076275.jpeg" border="0" alt="" />

好看的排版和精美的图片总能相辅相成。很多设计师都爱在用共享空间式排版的时候，使用垂直定向的图片（不过因为各种屏幕的高宽比不同，这种技术用的比率并不高。）。

空间共享式的排版设计可以将各种元素的属性淋漓尽致地呈现出来，还能确保整体设计在视觉上的愉悦感。文本字母可以横跨图片和留白，也可以在每个地区单独地用，合起来看和分开看都含有意义，就像视觉化的“双关”。

而上面的 Square Apartments 就是如此的设计，标题无论是合起来看，还是分开看，都具备意义。

如此的设计有一个好处，因为文本需要跨越不一样的地区，色彩搭配不需要维持完全的统一，依据文字周围的背景色进行调整，如此的设计简单而容易上手。难的地方在于文本内容的分拆和合并的状况下，表达的意思是不是都适合。

nclick="zoom" height="637" src="http://upload.chinaz.com/2016/1226/6361833955048841403305520.jpeg" border="0" alt="" />

有趣而又独树一帜的字体，在跨越不同模块的空间共享式布局下，能带来独特的视觉体验。如此的字体一般本身就能非常不错地发挥强调有哪些用途，即便横跨多个不一样的地区，也不会减少其作为焦点的地位。

假如你想沿着这个思路来设计，最好的做法是让标题尽可能长一点，选取足够亮眼的字体，和字体色彩有足够对比度的图片和文本背景色，确保文本的好可读性。

可读性是这种设计手法中非常重要的点，一般情况下，文本部分会选择黑色或者白色的字体，虽然很多用户看着或许会感觉简单，但要平衡图片、背景和文本三个部分的色彩搭配体系，事实上还是挺麻烦的。

nclick="zoom" height="582" src="http://upload.chinaz.com/2016/1226/6361833955051961405062182.jpeg" border="0" alt="" />

图片和文本的搭配是很多设计师的最佳选择搭配策略，但假如没图片也同样可以达成空间共享式的排版设计，用色块、几何图形和文本，是一样的道理。

上方 Startup Lab 的网站就将色块和文本以极其流行的方法搭配起来，文字横跨白色的背景和不一样的色块，适当的色彩对比让整个视觉看上去微妙又舒服。

nclick="zoom" height="632" src="http://upload.chinaz.com/2016/1226/6361833955061321421332170.jpeg" border="0" alt="" />

用空间共享式的排版，并不以为着你不可以用其他的设计手法，譬如动效就能与之非常不错的结合起来。用动效、视差等特效可以便于用户理解你的设计，鼓励用户与页面交互。

在页面元素较多的时候，微妙的动效可以更好的创建视觉焦点。

在上面的页面当中，那个小的圆形LOGO会缓慢地转动，在这个不对称布局的页面当中，它是当之无愧的视觉焦点。它非常不错地填补了图片和文本之间的空白，让整体设计愈加完整和平衡，加上动画成效，你会对这个品牌有印象深刻。

维持简洁

nclick="zoom" height="632" src="http://upload.chinaz.com/2016/1226/6361833955069121438074741.jpeg" border="0" alt="" />

在绝大部分的状况下，简洁的设计还是很有效的。虽然这是老生常谈，但它完美的避免了复杂设计所面临的各种问题，高效直接的排版设计也更容易发挥用途。这时，一个简单的空间共享式的排版就可以让用户立刻注意到，并且发挥成效。

假如你不了解从何入手，可以尝试用最简单的极简布局框架，用黑色的文本和白色的背景，就像上面Melville 这个也能，让彩色的图片成为视觉焦点。

在空间共享式的页面中，排版设计和图片的处置相对而言愈加现代化，相比传统的设计手法而言，其实并没复杂多少。这种设计手法让页面中常常被用户忽视的元素和其他的元素有了更多的交集，让页面内的元素“互动”了起来。