20个案例告诉你着陆页设计趋势
小编：作为设计师每天都会看到各种图，除了走马观花的看，你学会了分析了吗？还是只是进你杂乱的夹，嘘，也许你看了假图。今天继续跟随@UISTAR来学习下如何思考和分析你看到的优秀的图们。
作为设计师的我们，每天都会去各大设计网站寻找灵感，比如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、箭头等元素会左右移动，鼠标处在的页面会高亮显示。
最后总结：
我们常说设计师成长就是要多看多想，但怎么看怎么想呢？上面都是一些我自己个人的想法，平时看到好的作品也会多问问自己，为什么它好，好在哪里？也不用想的特别细，大概的方向就行，如此积累，坚持几个月我相信大家会有不少收获。
这篇文章也就是抛砖引玉，大家也可以分享下自己的想法，平时是怎么分析好作品的，我也希望跟大家互相交流，取长补短共同进步！
UISTAR（公众号）