如何让网站散发柔性美？波纹曲线在网站中的应用

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

　　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这个网站就是这样设计的，背景中流动的曲线波纹，和网站内容没有多大关系，但是却足以营造出平静而自然的用户体验。

　　

　　从上面的一些具体实例中，我们可以看出波纹曲线有平衡设计、调节氛围、传递情感等作用，能让网站在视觉上更显柔和。可以说，在大多数网站设计项目中，波纹曲线都有用武之地。当然，在网站中使用什么样的设计元素最主要还是要根据自己网站的行业特征、目标受众的喜好等来确定，千万不要一昧的追逐设计潮流趋势。你对波纹曲线有什么看法和理解呢?欢迎大家踊跃留言!快来起飞页自助建站平台（http://www.qifeiye.com/?t_wd=a5）搭建一个响应式网站吧!

*请认真填写需求信息，我们会在24小时内与您取得联系。