让波纹曲线在网站中散发柔性美

　　最近，波纹曲线在网页外观中出现得越来越频繁。相对于硬朗的直线而言，波纹曲线更加柔美，能让页面显得更加轻盈，适合于灵活地同其他各种风格的元素搭配，轻易与协调网站的整体美感。也因此，波纹曲线的使用技巧很是多样，能够搭建出多种风格的网站。今天我们就一起来看看波纹曲线在网站中有哪些熏染以及对应的具体实例吧!

　　1. 提高设计特色

　　应用矩形和直线的网站实在是太多了，而且有时网站视觉中的某些情感是矩形和直线难以表达的，这时柔美的曲线就派上用场了，它的使用可以给网站增色不少。下图是 The Papillons de Nuit festival 网站的主页。虽然浅色的主页背景上使用了大量曲线元素，但在具体细节方面各有不同，很好的突出了活动中心。页面左上角的曲线是交叉互动的，中间的"Zapping"元素中使用了多条细长的波浪曲线，而右下角的曲线则是用来引诱用户前往社交链接网站。当你滚动页面时，这还会出现更多的波浪曲线，将照片与表演者一一对应起来。

　　确实，对于商城网站或金融机构网站来说，这种波纹曲线元素的设计或者显得随意。但对于活动中心或时尚网站来说，波纹曲线绝对最能调动气氛，让整个设计趣味，引人入胜，带来不少网站流量。

　　2. 设计引人注意的CTA按钮

　　就目前而言，极简主义和扁平化设计仍是网页外观的主潮流，而波纹曲线与这两者有着天生的契合，可以用在网站中引起用户对于特定区域的注意。这也是为什么不少网站使用波纹曲线让CTA按钮更突出。或者你会觉得使用箭头或三角形元素可以达到同样的目的，其实不然。波纹元素与前者相比有一点细微的不同，那就是它足够柔美，它在引起用户注意的同时不会让用户产生被压迫去做某事的感受。

　　Recruitz就在网站首页的下边缘中使用波纹曲线将CTA按钮和网站证书荣誉区别开来，这种轻柔的分割轻易与用户来回浏览，天然而然注意到CTA按钮。多层的波纹曲线还让网页有了层次，整个设计不会显得平淡无奇。当然，下图中CTA按钮能招引用户驻足，也要得益于明亮的渐变橙色的应用。

　　3. 波浪曲线和插画

　　尽管波浪曲线可以独立存在，用在背景中创造许多罕见有趣的效果(比如上面两个网站)，但它的应用场景可不仅于此，它适合于与插画结合使用。现在大量网站中使用的插画都采用扁平化设计，棱角分明，直线非常多，而在插画中加入波纹曲线可以起到柔美视觉的熏染，更轻易招引用户的可视范围。

　　Retrace Health网站在首页插画的天空中加入了一道柔美的曲线，这让整个插画出现了层次，上方的空白区域不再单调，但却依旧保证了留白的效果。网站的整个视觉感受得到提高，可见这微妙的转化恰到好处。

　　4. 平衡硬朗的直线

　　前面我们也说过波纹曲线可以同各种元素搭配使用，起协调、中和的熏染。即使你的网站线条太分明了，需要许多元素来平衡，这时不妨考虑考虑波纹曲线。

　　Ghafari这个网站就巧妙的运用了波纹曲线来协调整个网站。网站的首页被硬朗的直线划分为左右两半，不过这种划分看起来没有那么生硬。这很大程度上都要归功于网页上的波纹曲线。这些波纹曲线很是隐蔽，你需要仔细观察：左边浅灰色的曲线，以及右边图片底部绿色草地构成的曲线。虽然这些元素看起来很简练，却能改善网站的呈现效果，给用户带来不错的感受。这种设计技巧也比较轻易进阶，我们可以恰当地将它迁移到自己的设计中。

　　5. 达成分层或卡片式效果

　　并不是只有棱角分明的矩形、圆形才能创造出分层或卡片式的效果，波纹曲线同样也可以达成。除此以外，柔美的波纹曲线还有一个优点，那就是让分层或卡片式效果显得没有那么刻板、公式化。为了达成这一效果，波纹曲线常常需要和渐变色一起搭配使用。

　　Algolia这个网站就是一个经典栗子，它用曲线创造出分层的效果，结合曲线和渐变让网站更协调、罕见有趣。尽管这个网站上使用了许多渐变色、直线和曲线，它却完全没有给用户的浏览浏览造成负担，它是简练、易懂的。

　　6.创建动画效果

　　当人们提到波纹或波浪时，常会联想到大海。这种天然的关联回应到设计当中，也就成了我们今天所看到的波纹交叉互动。仔细想想，波纹曲线和动效的结合其实是很天然的。波纹动效常会临摹海浪的节奏和韵律，营造舒缓和谐的氛围。

　　Relativity of Time这个网站就是这样设计的，背景中流动的曲线波纹，和内容区块没有多大关系，但是却足以营造出平静而天然的用户感受。