色條遮蓋應(yīng)該是在排版設(shè)計(jì)當(dāng)中最為常用的一個(gè)設(shè)計(jì)技巧之一，它的玩法有很多，可以用來(lái)作為承載文本和其他元素的襯底，可以用來(lái)裝飾，合理的選擇樣式，色條遮蓋能夠讓簡(jiǎn)單的版面快速變成出彩而又有趣的設(shè)計(jì)。在某種意義上，用來(lái)遮蓋和穿插的色塊/色條，就像 Ui 設(shè)計(jì)當(dāng)中的 「卡片式設(shè)計(jì)」一樣，是一個(gè)近乎「啥都可以往里裝」的容器，是一種通用的版式設(shè)計(jì)元素。
和將信息整個(gè)平鋪在頁(yè)面上不同，色條遮蓋能在前景的文本和背景之間增加一個(gè)視覺(jué)層級(jí)，通過(guò)有明顯不同的色彩對(duì)比，將原本零散的文本規(guī)整出邊界，就像 UI 設(shè)計(jì)中的卡片一樣成為前景文本的載體。
在主要的視覺(jué)元素（諸如圖片和團(tuán)）和用來(lái)傳遞含義的文本之間，靈活地插入使用色條襯底，將含義、功能接近的文本收納到一起 ，整合成視覺(jué)易于消化的意群，穿插在版面中進(jìn)行使用。這種信息整合的方式最大的特征是層級(jí)的清晰性和靈活度，可以良好地兼容不同層級(jí)的文本。
色條本身的幾何形體本身就具備極強(qiáng)的形體感，在原本簡(jiǎn)單的版面中使用的時(shí)候，它能夠快速賦予版面以形式感，讓單調(diào)的布局快速地豐富起來(lái)，即使使用的元素不多，也可以讓整個(gè)版式快速搭配出新鮮感和愉悅感，不復(fù)雜卻很出效果。
色條本身就有著強(qiáng)烈的裝飾性，有著豐富的色彩和樣式效果可供選擇。無(wú)論是在輔助文本和其他元素來(lái)展示，還是單獨(dú)地作為一種設(shè)計(jì)組件來(lái)使用，純粹用作版面裝飾，都可以很好地發(fā)揮作用。
在去年年底，我們之前注意到「玻璃擬物化」的悄然流行，這種應(yīng)用在 UI 中的設(shè)計(jì)趨勢(shì)其實(shí)在平面設(shè)計(jì)中早就有過(guò)不少應(yīng)用：
將半透明的色條和色帶疊加在前景文字和背景圖案之間，這種設(shè)計(jì)方式，不僅增加了一個(gè)用來(lái)分隔的信息層級(jí)，同時(shí)，還借用半透明乃至于近乎亞克力板和毛玻璃的質(zhì)感，營(yíng)造出一種富有通透感的設(shè)計(jì)。
這種通透的設(shè)計(jì)兼顧了層次和視覺(jué)美感，趣味十足，只是在設(shè)計(jì)過(guò)程中需要多花心思在對(duì)比度控制上：
不過(guò)，相比于透明色條，我們?cè)趯?shí)際的設(shè)計(jì)中用得更多的，是用來(lái)劃分版面區(qū)塊的實(shí)底色條。相比之前的透明色條而言，實(shí)底色條只要選對(duì)顏色，通常對(duì)比度是不會(huì)存在太大的問(wèn)題，不過(guò)想要在版面和視覺(jué)上出彩，設(shè)計(jì)師需要在選擇色條的色彩、位置、字體的配色和樣式上，花費(fèi)更多的心思。
很多設(shè)計(jì)當(dāng)中，設(shè)計(jì)師會(huì)選擇橫跨版面的色條，位于版面中心的色條可以和其他視覺(jué)元素相互穿插，增加視覺(jué)趣味：
也可以巧妙地運(yùn)用留白，借助色條營(yíng)造出疏密對(duì)比的節(jié)奏感：
此外，還能把色條和切割、錯(cuò)位等效果組合使用：
使用傾斜的色條也是相當(dāng)有意思的選擇，這屬于一種最順手的打破規(guī)則的設(shè)計(jì)——通過(guò)角度變化消減橫平豎直的嚴(yán)肅感，讓版面顯得趣味橫生。另外，傾斜的色帶上放置文字能夠營(yíng)造出一種有趣的傾向感，尤其是當(dāng)傾斜方向一致的時(shí)候。
傾斜色條可以在版面中和圖片、視覺(jué)元素保持平行，制造出統(tǒng)一的感覺(jué)，也可以相反甚至錯(cuò)開(kāi)，構(gòu)建出沖突感，這取決于你想達(dá)到的設(shè)計(jì)目標(biāo)和想要呈現(xiàn)的氣質(zhì)：
色條是否全都得是矩形（或者菱形）呢？當(dāng)然不一定，你可以選擇形狀更加不規(guī)則的，異形的色條。這個(gè)時(shí)候的設(shè)計(jì)，可以根據(jù)版面靈活地選擇。最方便的方式，就是將色條拼接成各種不同的形制，也可以微調(diào)外觀輪廓，制造別致的造型：
下面的范例，就是將色條微調(diào)造型，制造出別具一格的外輪廓：
如果上面的選擇都無(wú)法達(dá)到你想要的別致設(shè)計(jì)，那不妨試試鏤空色條的設(shè)計(jì)。這同樣是一個(gè)關(guān)乎信息層級(jí)表現(xiàn)的游戲，借助剪貼蒙版效果，來(lái)制造出鏤空的視覺(jué)效果，這種穿透式的排版技巧活用了正負(fù)形，看起來(lái)是2層，卻能給人不落俗套的感覺(jué)，有著強(qiáng)烈的印刷品一般的真實(shí)感。
只不過(guò)在處理鏤空色條的時(shí)候，同樣是要注意前景色條和背景圖片之間的色彩對(duì)比度，如果背景變化幅度太大，內(nèi)容元素太砸，可能會(huì)讓前景的鏤空輪廓看起來(lái)沒(méi)有那么清晰，這個(gè)就要小心了。
除了使用單個(gè)色條來(lái)承載文本，還可以使用多個(gè)色條，來(lái)承載短句這樣的文本，進(jìn)一步強(qiáng)化段落和句子的體塊感。這種分塊色條最大的優(yōu)勢(shì)在于靈活性，它不一定要作為主視覺(jué)，也可以用在小塊的次要文本內(nèi)容 上，機(jī)動(dòng)性極強(qiáng)。
如果單一顏色的色條對(duì)于你太過(guò)單調(diào)，那么使用不同的色條來(lái)承載不同的文本，來(lái)進(jìn)行拼接，你甚至不需要添加額外的視覺(jué)元素，就可以構(gòu)建出頗為豐富的版面了。只不過(guò)，在這一的設(shè)計(jì)當(dāng)中，整個(gè)版面的可讀性是較差的，文本和色條共通構(gòu)成了裝飾性較強(qiáng)的視覺(jué)元素：
當(dāng)你純粹將色條當(dāng)作裝飾性元素來(lái)使用的時(shí)候，花樣就更多了。最常見(jiàn)的是直接用點(diǎn)綴的小段色條，也可以讓它橫跨版面，做成出血的效果。這種設(shè)計(jì)方式相對(duì)比較自由，可以結(jié)合版面的圖片和視覺(jué)主體來(lái)進(jìn)行選擇，你完全無(wú)需讓它來(lái)承載文本，而單純地讓色條去和版面中其他的元素進(jìn)行「互動(dòng)」：
在色條上，還可以加入肌理和圖案，玩出更多花樣，這個(gè)具體就要根據(jù)你的需求來(lái)進(jìn)行選擇了：
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。