上手即用！正在瘋狂流行的方塊堆疊式排版布局

如果你曾仔細觀察過時下設計優秀的網站，你會發現堆疊式排版已經出現的非常頻繁了，其中尤其突出的是方塊堆疊式排版。毫無疑問，這種悄然流行的設計手法是一種值得關注的設計趨勢。

仔細觀察，你會發現這種方塊堆疊式排版有著令人無法拒絕的美感，它以一種整齊的方式將文字內容排列到一起，營造出一種整飭的設計感，抓住用戶的注意力。今天的文章，我們一同來借助各個網站的設計案例來探索這種設計趨勢，總結技巧。

在圖片和視頻中使用

方塊堆疊式排版最常使用的場合就是圖片和視頻。在網站和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