潮流趋势总是默默中酝酿而生，因而我们很容易忽略。
当你去调研数以百计的网站时，你会看到一些可能会错过的流行样式。其中之一便是彩带和标签的频繁使用。
这些一夜爆红的样式正在日益潮流。本文一起介绍这两个元素，因为它们总是经常搭配着使用的。
彩带是怎么样自不必多言，至于标签，我们所指的是在网页顶部垂挂下来的仿造便签——就像T恤上的标签。
那些使用这些元素的网站真是品质卓越。使用这些元素，要做一个华丽的展示橱窗就轻而易举。一些趋势是这样的：人们总是穷极例子来寻找最称心如意的一个。
为什么使用彩带和标签？
标签的使用是因为它通过深度的错觉而吸引用户的目光。标签会突出内容之外呈现给用户。标签通常带有压印的风格，通过3D或者大胆的对比色。
这些元素一般用来标记重要的信息：logo，导航，动作指引。正如下面的图例中可以看到。当然，在网站上使用这些的时候你还需要评估一下。
彩带同样也有这些效果，这也是为什么总是和标签一起出现的原因。它引人注目，是放置重要信息的好地方。彩带的形状也是来自于标签，两端的箭头指向之间的内容，巧妙的引起用户的关注。
一系列风格
标签和彩带往往在网站上同时出现的另一个原因是他们都是布料纹理的图片。这毫不奇怪，在下面的网站中你会看到其他布料相关的元素，包括细微考究的拼接，纹理以及其他有机元素。
彩带
Letter Learner
彩带这样的风格很适合名字Letter Learner. 网页为单列布局，配以彩带的标题很好的鼓励用户从这里开始学习课程。
Ribot
Ribot的彩带很微妙。带双字标语的华丽装饰活跃了页面，完美的解析了公司的业务，因为公司名字看不出来。
Alex Pierce
Alex Pierce的页面在文字上做这么大的文章，必须有一个足够强的元素来平衡。在这情况下，用彩带作为页面头部显然很恰如其分。我还喜欢彩带中间折叠起来的折叠层，突出了设计师的名字。
Rockaholic!
Rockaholic非同寻常，彩带大大吸引用户目光，充分利用了屏幕垂直滚动的特性，很好引导用户到内容。
Paris Jones
精彩红色丝带让 Paris Jones的名字跃然纸上。即使文字处理相当微妙，而丝带的样式让你不由自主的关注。
Blog en Bois
在Blog en Bois,丝带的箭头效果很具视觉冲击力，很大程度上由于黄色呈现于黑色背景之上。我忍不住对logo看了又看。显然这是加深用户品牌印象的一个有效方法。
HTML5 Boilerplate
流行网站HTML5 Boilerplate页面的重要链接使用了丝带来吸引注意。我喜欢这些丝带，无需告诉用户“这里下载”，标签和丝带便很好的引导了用户到下载资源。
Cantilever Fish & Chips
Cantilever Fish & Chips使用丝带的目的不是很明确。“一周7天营业”的细节看似不甚相关，但这应该是餐厅的一个特色吧。
Wells Riley
Wells Riley是服务领域使用丝带的一个极好的例子，系带在页面上成了焦点，十分惹目。
Dhiraj Singh Karki
我一直都喜欢与众不同的设计。Dhiraj Singh Karki的UI设计师就是这样一个网站。在这里，使丝带用的相当巧妙，而丝毫不输于其他网站视觉冲击。跟页面完美融合，而保留足够的风格，避免设计过于简单。
Chipmunk
Chipmunk 是处理好丝带和原生元素关系的很好例子。围绕丝带的导航条跟下面丰富的插图完全配合，从而避免了表现力强大艺术作品前失去导航。
Ryan M. Stryker
再次体现丝带在引人注意方面的潜力。居住位置，强对比，保证你不会错过Ryan M. Stryker这个名字。
标签
Ennea
鉴于 Ennea 是一个服饰品牌，带有logo和品牌名字的标签出现这里显然是理所当然。有时候，简单就是最好的。
Philip Meissner Design
Philip Meissner Design的标签包括了导航。通常寻找这样设置的链接我会有所迟钝，但是这里的颜色和布置让人轻而易举的找到链接。
Tinkering Monkey
在一个购物网站上还有什么比引导用户买单更重要？Tinkering Monkey的标签在这方面很好的帮助引导用户。
Parkbud
智能手机的应用遍地皆是，优秀者当然要标榜自己的特别之处。Parkbud是免费的，醒目的红色标签不容你错过。标签被优雅的卷起，但还是毫无悬念的出现在你眼角，提醒你这些优秀应用是免费的。
Lense
在标签搭配布料纹理方面，Lense是一个很好的例子。首先是牛仔纹理的背景，然后导航条下面的边线也十分的“布质”。
Coreymade
虽然只是一个小细节，我还真的很喜欢Coreymade手写字体的标签，感觉它更像在一件衬衫而不是网页上。3D效果使得标签在视觉上栩栩如生的浮现。
Netastica
Netastica上的标签看起来十分俊秀，而它还包含了重要信息和指引用户的链接。
Ryan Havoc Taylor
Ryan Havoc Taylor网站的标签位置显而易见，因而无需什么强烈的对比。跟网站很搭配，也充分发挥其应有的作用。
丝带和标签搭配
最后，我们来看看标签和丝带的组合使用。
ClearSpan Media
ClearSpan Media的.丝带和标签搭配得很到位，这里你还会发现一些布料纹理，微妙的针织风格。顶部的两个标签和底部的丝带吸引了用户的兴趣。
Krichevtsova Alexandra
虽然Krichevtsova Alexandra网站内容还欠缺，标签和色使得关键要素增添了生活气息。即使你不知道网站是什么人做的，你也不由自主的喜欢了。
Wes Bos
上面提到的大多数网站的丝带都比较大，Wes Bos则不一样。他的要小得多，这给了我们很好的提醒，这些元素要发挥其功能并不需要支配整个设计
结论
鉴于以上这些优秀网站的设计师并没有故意追求“时髦”，而是出于需要而设置的，而这些需求催生了这些高效的视觉元素，用于吸引眼球，突出关键信息以及指引重要的动作链接。
如果你要在网站上使用纯CSS丝带，3-D Ribbon Generator 网站是很方便的工具。
Patrick 是一位自由作家，开发工程师和设计师。他专注于网页设计，网络开发培训以及网站建设。Patrick对网页设计的趋势和潮流的热情可以在他的书中体现，该书TheWebDesignersIdeaBook.com有售。
编译：Arsui
文章评论