当前位置:首页 >  站长 >  网站运营 >  正文

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

 2017-12-20 17:32  来源: A5企业专栏   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

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

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

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

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
起飞页建站

相关文章

  • 响应式网站中优化用户体验的7个关键点

    随着移动设备的不断兴起,响应式设计越来越受到大众的喜爱,站长们在搭建网站时也更加倾向于选择响应式网站。不过,大多数站长们都认为既然响应式网站可智能根据设备屏幕大小呈现不同的展示效果,那就不用再对移动端的网站进行手动调整了。其实这种看法是片面的,响应式网站虽然自身具备一定的特质,但有时PC端网站和移动

  • 盘点2017年最受欢迎的10个商城范例:我们从中可以得到哪些启示?

    在电商和线上购物快速发展的今天,拥有一个商城网站很是必要,关于试水独立商城的好处大家可以浏览《有了淘宝京东,为什么还要自建商城网站?》查看。但是,搭建商城网站并不简单,庆幸的是目前市面上涌现了不少建站平台,起飞页自助建站平台就是其中一个,各位商家可以借助起飞页轻松搭建出一个好看、实用的商城网站。不过

    标签:
    起飞页建站
  • 让首页背景动起来是怎样一种感觉?8张图告诉你真相!

    现在越来越多的设计师开始在网页中使用循环视频作为背景,这种现象的出现主要有两个原因。一方面,移动设备性能不断完善,网速越来越快,用户能够且有条件在移动设备上浏览视频背景的网站;另一方面,随着HTML5技术的发展,很多主流浏览器的视频标签都支持循环(Loop)属性,网页上单个或一系列视频短片的循环播放

    标签:
    起飞页建站
  • 缺乏灵感?给你8个值得每天学习的顶尖设计网站

    网站设计是一种艺术,它离不开灵感和创意。但灵感与创意的涌现是需要碰撞、需要时机的,大多数设计师都不可能每时每刻都灵感爆棚。当您缺乏设计灵感时,不妨看一看下面这些网站,它们都收录了丰富的素材,都有许多独立设计师上传的优质作品,没准这些设计就能让你眼前一亮,获得一些想法或启发。赶紧和小飞一起看看这8个值

    标签:
    起飞页建站
  • 目前为止用户体验度最好的表单:浮动标签式的表单

    在当今这个互联网时代,填写表单对用户来说就是家常便饭,在网站进行注册登录时、在网上购物时,都免不了填写表单这一环。表单是网页设计中重要的组成部分之一,在获取用户信息方面发挥着不可或缺的作用,它是用户和网站的一种互动形式,这种形式的互动越顺畅,网站的用户转化率就越高。这也是为什么许多站长们一直在研究如

热门排行

信息推荐