loading请求处理中...
手机版 新型创意托付式服务平台 全国站
小商标成就大品牌×
当前位置: 首页 > 威客攻略 > 着陆页
免费发布需求,接收报价与方案

20个案例告诉你着陆页设计趋势

2018-05-17 11:27:37 阅读 10080次 0 标签: 着陆页 作者: a454466904

作为设计师的我们,每天都会去各大设计网站寻找灵感,比如Dribbble / Behance / Pinterest上面有大量的优秀作品,看到那些赏心悦目的作品会忍不住采集收藏下来,但是你有没有想过,你可以做的不只是让它们安静的待在收藏夹中长草。对这些优秀的作品进行理性的分析,会比你走马观花的看一遍收获更多,如果再进一步思考,甚至可以获取到当前网页设计的流行趋势。

下面是我选取Dribbble上面一些优秀的网页作品,我试着带大家从排版布局、色彩搭配、包装展示等方面一起来分析这些优秀的作品。

1.排版上左右对称的设计带给我们很强的信赖感,几何元素的加入使得头部深色背景充满活力,红黄蓝适中的饱和度也看起来很高级。

2.同色系配色加上浅灰色背景让头图整体看起来简约干净,配合柔和的大投影让右边的卡片得以突出,几何元素也再一次得到运用。

3.上面这个例子就是典型的Instagram风,主要通过去除多余颜色,使用超大留白,信息流尽量使用大图尺寸,通过降低信息密度来突出内容,配图也选择的是性冷淡风,整体让页面看起来极简高逼格。

4.黑色加金色耐看又安全,深色的头图让文案一目了然,加上两侧的数据折线图,不但丰富了画面层次,同时也把公司可以快速提升客户利润的特点传达出去。

5.自从Material Design发布以来,扁平化+卡片式的设计越来越流行,甚至在网页设计中,也被广泛的运用。配色上选择蓝色来契合商业公司的性质,绿色按钮既突出又不会刺眼,让整体非常干净。

6.抽象的晶格化点线,设计感十足,头部加粗的文案看起来也非常醒目,黑色加绿色对比强烈,只是我个人觉得这个绿色有点刺眼,可以再柔和一点看起来会更舒适。(右边图中也加入了几何元素)

7.自从去年Instagram发布新Logo以来,渐变再次回归,上面的例子就运用了多色渐变,不规则的形状加上精心搭配的多色渐变,使其具有液体的质感,设计感十足,配合视差交互,网页体验一定很棒。(自觉脑补中...)

8.视频背景在网页设计中也被运用的越来越广泛,因为不仅能直观的表达产品功能,动态的视频会让网页看起来非常高端,上面的例子肯定就是运用的视频做为背景,再加上深色遮罩,上面的白色文字也能很突出。

9.网页全屏的数据折线图,充分表达了产品功能,渐变的配色也摆脱了数据的枯燥,同时从Mac屏幕延伸出来的折线丰富了白色背景。下面的双色图标也增加了设计感。

10.我们常说设计上好的配图就成功了一半,上面的例子就充分说明了这点,选的配图质量都非常高,再搭配富有设计感的字体,逼格马上就出来了。同时排版上也打破常规,图片文字左右交错,配合蒙版和图片视差动画,效果出众!

11.上面的网页作品让我想到最近流行的3D元素,简单的背景加上摆拍的玩具,看起来很随意但却很好的增加了页面活力,仿佛带我们回到童年时光。同时这些小玩具也表达了该公司收集玩具的产品属性。

12.最近火爆的2.5D也被频繁的运用到网页设计中去,比如上面的例子就是两层带透视的代码界面。配色上都是偏高级灰的颜色,非常耐看。

13.虚拟现实也是接下来网页设计的一大趋势,如何在虚拟现实里交互目前还少有成熟的解决方案。单从设计上来说,上面的案例采用了单屏网页设计,所有的内容都在一屏内展示完,通过鼠标切换页面,同时左侧文案随之响应。页面上的线条和按钮不但起到了模块之间的分隔作用,也增强了设计感。

14.大面积的留白,大面积的浅灰色背景,给人安静沉稳的感觉。但是右侧红色圆球的加入又打破了背景的平静,可以说是点睛之笔,一静一动之间,对比强烈,效果非常赞!

15.在图片上叠加渐变最早应该是Spotify开始的,也是非常吸引眼球的设计方式,再配合加粗加大的文字,看起来非常棒。

16.全屏大图往往可以带给我们沉浸式的体验,因此选择高质量的大图作为背景,压暗后加上简单的文字和按钮效果就很出众。同时上面的案例还采用了卡片式布局,每张案例都是一张卡片,滚动鼠标从左到右可以切换卡片案例。

17.对于展示产品的网站来说,采用浅色背景是非常高效解决办法,因为可以让产品更加突出,比如上面的头图,还有四小一大的产品展示图,卡片式设计的加入也非常实用。

18.上面的例子是一个教练APP的着陆页,整体配色采用了绿茵场的绿色,带给我们身临其境的感觉,加上我们前面说到的单色线性图标、几何原色,曲线线条,整体设计感很强。

19.又是全屏大图+黑色遮罩+白色文字,这种设计非常容易出效果。下面图片加色块的结合也是很棒的方式,值得我们学习。

20.这其实是一个动图,因为太大传不上来。案例中用的是左右分屏的手法,把两个等级差不多的页面放在一起,配合鼠标Hover效果,页面的元素比如logo、箭头等元素会左右移动,鼠标处在的页面会高亮显示。

最后总结:

我们常说设计师成长就是要多看多想,但怎么看怎么想呢?上面都是一些我自己个人的想法,平时看到好的作品也会多问问自己,为什么它好,好在哪里?也不用想的特别细,大概的方向就行,如此积累,坚持几个月我相信大家会有不少收获。

这篇文章也就是抛砖引玉,大家也可以分享下自己的想法,平时是怎么分析好作品的,我也希望跟大家互相交流,取长补短共同进步!

买创意 买设计 上一品威客网

公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

相关文章

留言(0 展开评论

您需要注册登录才能发表言论

服务排行榜
SERVICE LIST 更多
全案VI设计 LOGO 名片 QQ...
价格面议 成交479
新萝卜-最实惠 QQ2108760...
【普通设计师】LOGO设计 2...
¥500元 /件 成交355
新萝卜-最实惠 QQ2108760...
【资深设计师】LOGO设计 2...
¥1500元 /件 成交319
新萝卜-最实惠 QQ2108760...
牛人设计总监 全网中标最...
¥3000元 /件 成交315
新萝卜-最实惠 QQ2108760...
logo设计
¥100元 /件 成交276
兰灵视觉
【久铭乐】商标、网站、企...
¥399元 /起 成交206
久铭乐广告传媒-QQ3491095...
专业硬件测试与咨询服务...
¥99元 /件 成交172
北京掌宇
logo设计 于德星logo设计 ...
¥1000元 /件 成交172
于德星科技
微信公众号推广微信推广微...
¥300元 /起 成交144
利宏营销策划
微信关注加粉微信朋友圈转...
¥15元 /起 成交143
梦启点旗舰店+微信zhaoyan...