上手即用！正在疯狂流行的方块堆叠式排版布局

如果你曾仔细观察过时下设计优秀的网站，你会发现堆叠式排版已经出现的非常频繁了，其中尤其突出的是方块堆叠式排版。毫无疑问，这种悄然流行的设计手法是一种值得关注的设计趋势。

仔细观察，你会发现这种方块堆叠式排版有着令人无法拒绝的美感，它以一种整齐的方式将文字内容排列到一起，营造出一种整饬的设计感，抓住用户的注意力。今天的文章，我们一同来借助各个网站的设计案例来探索这种设计趋势，总结技巧。

在图片和视频中使用

方块堆叠式排版最常使用的场合就是图片和视频。在网站和APP当中，你会发现图片和视频中常常能看到这样的排版，当然，在平面设计中这种排版也并不鲜见。

为了充分发挥这种排版的优势，你需要特别注意文本的排布位置。文本应当是作为辅助，不能够盖住图片或者视频的关键部位，并且传递明确的信息。

文本所用的色彩也是重中之重。前景的文本和背景的图片/视频应该有足够的对比度，清晰可辨。这也是为什么许多设计师会让前景的文字使用黑色或者白色，它们更容易在不同的背景中确保可读性。

作为主导的艺术元素

当然，方块堆叠式排版并不是一直处于整体视觉的辅助地位，有时候它还会成为视觉设计的主体。

将方块堆叠式排版用作主要的视觉元素的时候，需要满足两个条件：大量的留白，字体中包含其他的视觉元素。其中所包含的可能是色彩，或者是图案、动画。但是不论是哪种，都会尽量让字体从周围的留白中脱颖而出。

不要过度设计，方块堆叠式布局主要是两种使用方式：黑白字体+彩色背景，或者彩色字体+黑白背景。根据这项规则来进行设计能让你少走弯路，更容易实现效果。

强调特定的词汇

许多项目运用了类似堆叠式的文本布局，但是在可读性上做的并不太好。在正确的用法当中，最关键的词应该是用最粗的字体最大的字号来显示的。

当然，说起来简单，做起来也并不是那么容易。你需要仔细推敲文本的字句和前言后语，句子的长短和文字的搭配要均衡，并且能同布局联动起来，最终效果看起来应该是恰到好处。所以，当你做好布局之后应当仔细审视一下，最重要的信息是否以最醒目的方式呈现出来？所有的信息可读性是否良好？形式和内容之间是否有割裂感？

如果有问题，那么你需要再仔细推敲一下。并不是所有的文案和文本都能这么设计，有些换个方式来展现或许更合适。所以，如果这种排版布局不适合你的内容，也不要感到讶异。

为社交媒体服务

我们对于方块堆叠式布局如此之熟悉，很大程度上也是得益于各大社交媒体的传播，因为它能够很好地同微博、Twitter、Instagram 甚至手机的卡片式界面很好地结合到一起，无缝地融为一体。

你会发现图片上配合堆叠式的文本是传播性极强的一种媒介形式。仔细看看你的社交媒体帐号，你会发现这种形式比起视频更加直给，比起长微博和文章更直观，无需复杂的操作。

它让用户以一种更视觉化的形式来获取信息，重点更加突出，让用户以足够漂亮也足够快速的方式获得信息。

强化设计感

绝大多数的设计现在看起来都相差不大，所以，为了突出设计感，你可以加入一些简单、有趣的设计元素，来强化方块堆叠式布局的用户浏览体验。

·在行间增加细线，让用户可以更加清晰地看清楚布局和内容
·在空隙间增加简单的形状或者图标来填充，让整体看起来更加饱满和一致
·适当地调整整体的形状，你个并不一定非得让整个布局保持完美的方形（钻石型的外观也没问题）
·可以通过适当地调整色调来强化整个布局的视觉效果
·用出人意料的、有趣的非衬线体来搭配。有趣的字体能让用户更加难忘！

选择方块堆叠式排版的5个理由

方块堆叠式排版的流行，很大程度上是因为它的简单和视觉化。而真正支撑方块堆叠式排版成为流行趋势的，大概就是下面的5个理由了：

·视觉上的吸引力。堆叠式的布局通常会被特定的空间紧密包围着，它会成为视觉的重心，自然而然地吸引用户注意。
·文字周围大量的留白会增强内容的可读性。
·字体的强调和设计上的调整让简单的文字显得更富于戏剧性和表现力。
·堆叠式的布局让文字给人一种形似LOGO的感受，更加醒目。
·堆叠式布局让你内容更加易读也更有趣

搞定方块堆叠式排版的5个设计技巧

如果你已经深入思考，并且认可了这种设计趋势，那么你可以送下面的5个技巧着手：

1、使用栅格。栅格系统能帮你更好地控制布局，从字体大小到行间距都更加整齐。
2、控制比例。正确的大小对比才能起到强调的作用。
3、做好断句，斟酌词句。强调的部分要精悍而准确，断句换行也要正确地传递信息。
4、两个部分的字体和字重要控制好比例和风格。
5、不要纠结于排版的高度对称和对齐。

结语

很多时候设计趋势并不是太过于复杂的东西，一些简单易用的趋势同样拥有持久的生命力。方块堆叠式排版最费神的部分还是文案的选取，适当地装饰之后，借助社交媒体能取得极强的传播性。

【技多不压身的设计师才有高薪资！】

1. 平面设计：《超赞！设计师完全自学指南》
2. 交互设计：《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计：《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发：《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧：《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案：《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南：《基础知识学起来！为设计师量身打造的DPI指南》
8. 交互设计自学路径图：《零基础入门！给非科班生的自学路径图之交互设计篇》

原文地址：designshack
原文作者：CARRIE COUSINS
优设译文：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量104万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com