1、增加层级，重新规整内容

和将信息整个平铺在页面上不同，色条遮盖能在前景的文本和背景之间增加一个视觉层级，通过有明显不同的色彩对比，将原本零散的文本规整出边界，就像 UI 设计中的卡片一样成为前景文本的载体。

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

在主要的视觉元素（诸如图片和团）和用来传递含义的文本之间，灵活地插入使用色条衬底，将含义、功能接近的文本收纳到一起 ，整合成视觉易于消化的意群，穿插在版面中进行使用。这种信息整合的方式最大的特征是层级的清晰性和灵活度，可以良好地兼容不同层级的文本。

3、强化视觉，消减单调的布局

色条本身的几何形体本身就具备极强的形体感，在原本简单的版面中使用的时候，它能够快速赋予版面以形式感，让单调的布局快速地丰富起来，即使使用的元素不多，也可以让整个版式快速搭配出新鲜感和愉悦感，不复杂却很出效果。

4、增加装饰，点缀并丰富边角

色条本身就有着强烈的装饰性，有着丰富的色彩和样式效果可供选择。无论是在辅助文本和其他元素来展示，还是单独地作为一种设计组件来使用，纯粹用作版面装饰，都可以很好地发挥作用。

5、通透有趣的透明色条

在去年年底，我们之前注意到「玻璃拟物化」的悄然流行，这种应用在 UI 中的设计趋势其实在平面设计中早就有过不少应用：

将半透明的色条和色带叠加在前景文字和背景图案之间，这种设计方式，不仅增加了一个用来分隔的信息层级，同时，还借用半透明乃至于近乎亚克力板和毛玻璃的质感，营造出一种富有通透感的设计。

这种通透的设计兼顾了层次和视觉美感，趣味十足，只是在设计过程中需要多花心思在对比度控制上

6、扎实分明的实底色条

不过，相比于透明色条，我们在实际的设计中用得更多的，是用来划分版面区块的实底色条。相比之前的透明色条而言，实底色条只要选对颜色，通常对比度是不会存在太大的问题，不过想要在版面和视觉上出彩，设计师需要在选择色条的色彩、位置、字体的配色和样式上，花费更多的心思。

很多设计当中，设计师会选择横跨版面的色条，位于版面中心的色条可以和其他视觉元素相互穿插，增加视觉趣味：也可以巧妙地运用留白，借助色条营造出疏密对比的节奏感

7、俏皮错落的倾斜色条

使用倾斜的色条也是相当有意思的选择，这属于一种最顺手的打破规则的设计——通过角度变化消减横平竖直的严肃感，让版面显得趣味横生。另外，倾斜的色带上放置文字能够营造出一种有趣的倾向感，尤其是当倾斜方向一致的时候。

倾斜色条可以在版面中和图片、视觉元素保持平行，制造出统一的感觉，也可以相反甚至错开，构建出冲突感，这取决于你想达到的设计目标和想要呈现的气质：

8、创意十足的异形色条

色条是否全都得是矩形（或者菱形）呢？当然不一定，你可以选择形状更加不规则的，异形的色条。这个时候的设计，可以根据版面灵活地选择。最方便的方式，就是将色条拼接成各种不同的形制，也可以微调外观轮廓，制造别致的造型：

下面的范例，就是将色条微调造型，制造出别具一格的外轮廓：

9、雅致巧妙的镂空色条

如果上面的选择都无法达到你想要的别致设计，那不妨试试镂空色条的设计。这同样是一个关乎信息层级表现的游戏，借助剪贴蒙版效果，来制造出镂空的视觉效果，这种穿透式的排版技巧活用了正负形，看起来是2层，却能给人不落俗套的感觉，有着强烈的印刷品一般的真实感。

只不过在处理镂空色条的时候，同样是要注意前景色条和背景图片之间的色彩对比度，如果背景变化幅度太大，内容元素太砸，可能会让前景的镂空轮廓看起来没有那么清晰，这个就要小心了。

10、灵活丰富的分块色条

除了使用单个色条来承载文本，还可以使用多个色条，来承载短句这样的文本，进一步强化段落和句子的体块感。这种分块色条最大的优势在于灵活性，它不一定要作为主视觉，也可以用在小块的次要文本内容 上，机动性极强。

​如果单一颜色的色条对于你太过单调，那么使用不同的色条来承载不同的文本，来进行拼接，你甚至不需要添加额外的视觉元素，就可以构建出颇为丰富的版面了。只不过，在这一的设计当中，整个版面的可读性是较差的，文本和色条共通构成了装饰性较强的视觉元素：

11、锦上添花的装饰色条

当你纯粹将色条当作装饰性元素来使用的时候，花样就更多了。最常见的是直接用点缀的小段色条，也可以让它横跨版面，做成出血的效果。这种设计方式相对比较自由，可以结合版面的图片和视觉主体来进行选择，你完全无需让它来承载文本，而单纯地让色条去和版面中其他的元素进行「互动」：

在色条上，还可以加入肌理和图案，玩出更多花样，这个具体就要根据你的需求来进行选择了：