糖心香巧

小编:作为设计师每天都会看到各种图,除了走马观花的看,你学会了分析了吗?还是只是收藏进你杂乱的收藏夹,嘘,也许你看了假图。今天继续跟随@UISTAR来学习下如何思考和分析你看到的优秀的图们。

Landing page

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

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

1

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

 

2

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

 

3

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

 

4

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

 

5

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

 

6

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

 

7

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

 

8

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

 

9

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

 

10

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

 

11

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

 

12

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

 

13

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

 

14

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

 

15

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

 

16

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

 

17

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

 

18

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

 

19

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

 

20

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

 

最后总结:

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

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

901

原文地址:UISTAR(公众号)

 

转载请注明:学UI网—UI设计师学习教程平台 » 20个案例告诉你着陆页设计趋势

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
20个使用3D动画背景的网站欣赏20个使用3D动画背景的网站欣赏
浅谈立体书形式在设计中的应用浅谈立体书形式在设计中的应用
25个卡通型网站欣赏25个卡通型网站欣赏
20个基于网格布局的网站欣赏20个基于网格布局的网站欣赏
CDX滴滴创意设计部分H5作品欣赏CDX滴滴创意设计部分H5作品欣赏
25个食谱小部件UI设计25个食谱小部件UI设计
从这九张海报中探索纪念碑谷 2 的几何之美从这九张海报中探索纪念碑谷 2 的几何之美
一组酷炫动效设计的网站欣赏一组酷炫动效设计的网站欣赏
国外优秀网页设计精选国外优秀网页设计精选
30个天气小部件UI设计作品30个天气小部件UI设计作品
?