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

使用Illustrator的设计者们都十分熟悉的贝氏曲线技术，不仅用於插画上，波纹曲线网站设计出现得越来越频繁。相对於硬朗的直线、方框、视窗而言，波纹曲线更加柔和，能让页面显得更加轻盈，还可以灵活地同其他各种风格的元素搭配，有助於协调网站的整体美感。今天iWare带你们一起来看看波纹曲线在网站中，有哪些作用以及对应的具体实例吧！

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

从上面的一些具体实例中，我们可以看出波纹曲线有平衡设计、调节氛围、传递情感等作用，能让网站在视觉上更显柔和。可以说，在大多数网站设计项目中，波纹曲线都有用武之地。当然，在网站中使用什麽样的设计元素最主要还是要根据自己网站的行业特徵、目标受众的喜好等来确定。