色條遮蓋應(yīng)該是在排版設(shè)計當(dāng)中最為常用的一個設(shè)計技巧之一，它的玩法有很多，可以用來作為承載文本和其他元素的襯底，可以用來裝飾，合理的選擇樣式，色條遮蓋能夠讓簡單的版面快速變成出彩而又有趣的設(shè)計。在某種意義上，用來遮蓋和穿插的色塊/色條，就像 Ui 設(shè)計當(dāng)中的 「卡片式設(shè)計」一樣，是一個近乎「啥都可以往里裝」的容器，是一種通用的版式設(shè)計元素。

上一篇排版小技巧：

1、增加層級，重新規(guī)整內(nèi)容

和將信息整個平鋪在頁面上不同，色條遮蓋能在前景的文本和背景之間增加一個視覺層級，通過有明顯不同的色彩對比，將原本零散的文本規(guī)整出邊界，就像 UI 設(shè)計中的卡片一樣成為前景文本的載體。

2、整合信息，輔助梳理版面

在主要的視覺元素（諸如圖片和團）和用來傳遞含義的文本之間，靈活地插入使用色條襯底，將含義、功能接近的文本收納到一起 ，整合成視覺易于消化的意群，穿插在版面中進行使用。這種信息整合的方式最大的特征是層級的清晰性和靈活度，可以良好地兼容不同層級的文本。

3、強化視覺，消減單調(diào)的布局

色條本身的幾何形體本身就具備極強的形體感，在原本簡單的版面中使用的時候，它能夠快速賦予版面以形式感，讓單調(diào)的布局快速地豐富起來，即使使用的元素不多，也可以讓整個版式快速搭配出新鮮感和愉悅感，不復(fù)雜卻很出效果。

4、增加裝飾，點綴并豐富邊角

色條本身就有著強烈的裝飾性，有著豐富的色彩和樣式效果可供選擇。無論是在輔助文本和其他元素來展示，還是單獨地作為一種設(shè)計組件來使用，純粹用作版面裝飾，都可以很好地發(fā)揮作用。

1、通透有趣的透明色條

在去年年底，我們之前注意到「玻璃擬物化」的悄然流行，這種應(yīng)用在 UI 中的設(shè)計趨勢其實在平面設(shè)計中早就有過不少應(yīng)用：

將半透明的色條和色帶疊加在前景文字和背景圖案之間，這種設(shè)計方式，不僅增加了一個用來分隔的信息層級，同時，還借用半透明乃至于近乎亞克力板和毛玻璃的質(zhì)感，營造出一種富有通透感的設(shè)計。

這種通透的設(shè)計兼顧了層次和視覺美感，趣味十足，只是在設(shè)計過程中需要多花心思在對比度控制上：

2、扎實分明的實底色條

不過，相比于透明色條，我們在實際的設(shè)計中用得更多的，是用來劃分版面區(qū)塊的實底色條。相比之前的透明色條而言，實底色條只要選對顏色，通常對比度是不會存在太大的問題，不過想要在版面和視覺上出彩，設(shè)計師需要在選擇色條的色彩、位置、字體的配色和樣式上，花費更多的心思。

很多設(shè)計當(dāng)中，設(shè)計師會選擇橫跨版面的色條，位于版面中心的色條可以和其他視覺元素相互穿插，增加視覺趣味：

也可以巧妙地運用留白，借助色條營造出疏密對比的節(jié)奏感：

此外，還能把色條和切割、錯位等效果組合使用：

3、俏皮錯落的傾斜色條

使用傾斜的色條也是相當(dāng)有意思的選擇，這屬于一種最順手的打破規(guī)則的設(shè)計——通過角度變化消減橫平豎直的嚴肅感，讓版面顯得趣味橫生。另外，傾斜的色帶上放置文字能夠營造出一種有趣的傾向感，尤其是當(dāng)傾斜方向一致的時候。

傾斜色條可以在版面中和圖片、視覺元素保持平行，制造出統(tǒng)一的感覺，也可以相反甚至錯開，構(gòu)建出沖突感，這取決于你想達到的設(shè)計目標和想要呈現(xiàn)的氣質(zhì)：

4、創(chuàng)意十足的異形色條

色條是否全都得是矩形（或者菱形）呢？當(dāng)然不一定，你可以選擇形狀更加不規(guī)則的，異形的色條。這個時候的設(shè)計，可以根據(jù)版面靈活地選擇。最方便的方式，就是將色條拼接成各種不同的形制，也可以微調(diào)外觀輪廓，制造別致的造型：

下面的范例，就是將色條微調(diào)造型，制造出別具一格的外輪廓：

5、雅致巧妙的鏤空色條

如果上面的選擇都無法達到你想要的別致設(shè)計，那不妨試試鏤空色條的設(shè)計。這同樣是一個關(guān)乎信息層級表現(xiàn)的游戲，借助剪貼蒙版效果，來制造出鏤空的視覺效果，這種穿透式的排版技巧活用了正負形，看起來是2層，卻能給人不落俗套的感覺，有著強烈的印刷品一般的真實感。

只不過在處理鏤空色條的時候，同樣是要注意前景色條和背景圖片之間的色彩對比度，如果背景變化幅度太大，內(nèi)容元素太砸，可能會讓前景的鏤空輪廓看起來沒有那么清晰，這個就要小心了。

6、靈活豐富的分塊色條

除了使用單個色條來承載文本，還可以使用多個色條，來承載短句這樣的文本，進一步強化段落和句子的體塊感。這種分塊色條最大的優(yōu)勢在于靈活性，它不一定要作為主視覺，也可以用在小塊的次要文本內(nèi)容 上，機動性極強。

如果單一顏色的色條對于你太過單調(diào)，那么使用不同的色條來承載不同的文本，來進行拼接，你甚至不需要添加額外的視覺元素，就可以構(gòu)建出頗為豐富的版面了。只不過，在這一的設(shè)計當(dāng)中，整個版面的可讀性是較差的，文本和色條共通構(gòu)成了裝飾性較強的視覺元素：

7、錦上添花的裝飾色條

當(dāng)你純粹將色條當(dāng)作裝飾性元素來使用的時候，花樣就更多了。最常見的是直接用點綴的小段色條，也可以讓它橫跨版面，做成出血的效果。這種設(shè)計方式相對比較自由，可以結(jié)合版面的圖片和視覺主體來進行選擇，你完全無需讓它來承載文本，而單純地讓色條去和版面中其他的元素進行「互動」：

在色條上，還可以加入肌理和圖案，玩出更多花樣，這個具體就要根據(jù)你的需求來進行選擇了：

更多排版文章：