25个细致微妙的扁平化2.0风格网页设计

   现如今,扁平化设计 比起最开始的风格已经没有那么“平”了,更丰富的细节,更清晰的层次,更优秀的视觉体验使得它和初期有了相当大的差别。于是Ryan Allen 在为 Dapper Gentlemen 撰文的时候将现在的扁平化设计 称为“Flat Design 2.0”,这篇文章中,他阐述了最初的扁平风和今天的扁平化设计的差别,甚至还简单分析了一下这种演进的原因。

  扁平化设计依然占据主流,从某种程度上而言,是因为它同响应式设计有着极高的契合度,这也是在过去几年间的逐步变化而造就的结果。


  正如同 Ryan Allen在插画中所表现的,原本的扁平化设计和现在的2.0的主要差别都体现在细节上,高光、渐变、阴影依次回归,轻量地加持在扁平化的视觉元素上,让整个设计的信息量更加丰厚。扁平化设计不再是拟物化设计的对立面了。

  当然,扁平化设计最初的一些基本特征依然在2.0中保留了下来。简约和现代的风格保持不变,不过细节的增加使得简约的程度有所下降;明亮和有趣的色彩运用依然是扁平化设计的主流配色趋势;追求清晰和保持素雅也是扁平化排版的主要特征。当然,探讨差异并不是今天文章的目标,在下面的25个案例中摸索扁平化2.0 的特色才是今天的主题。

  Cybeer Bar


  Cybeer Bar 是一个不错的入门案例:他们忠于扁平化的设计规则,简约的风格,但是设计师将细节和层次推到了极致,清晰分明,色彩的层次让整个设计充满了一种别样的真实感。

  Christmas with Joy


  流行与世界不同地方的的圣诞人物角色被制作成扁平化的插画,值得注意的是其中顺滑的图形运用和独特的阴影处理。

  Dropbox Guidelines


  Dropbox 使用指南一直是以其漂亮的插画设计而著称,足够简单的图形和明亮的色彩结合到一起,加上典型的扁平化的排版设计,也算是扁平化2.0 的典范了。

  450 GSM


  450 GSM 更接近于早期的扁平化设计,视觉元素的阴影用得非常微妙。

  Intercom


  明亮的蓝色背景,风格化的图标,沉稳而不晃眼的字体,图标的圆角和柔和的细节,整个网站的设计扁平化,令人愉悦。

  Agency Survival Kit


  网站极简主义的风格和复古的红色色调都符合扁平化的特征,而阴影和质感的加入则让网站符合2.0的设计风尚。

  Hell‘o Baby


  尽管网站的字体元素走的是浮华的路线,但是网站的色彩、边角处理、图标设计都非常符合扁平化设计2.0的设计风格。

  Helbak


  如果你仔细观察,你会注意到其中柔和的阴影效果。这位斯堪地那维亚的陶艺师的作品带有典型的扁平化风格,而他的这个网站自然而然地用到了扁平化设计。

  Paye Ton Caps


  这款法国的在线游戏的页面使用了典型的扁平化2.0 的设计风格,风格柔和亲切。

  CSS Conference EU


  网站的配色方案使用的是典型的扁平化配色,但是设计师为网站加入了大量华丽的细节,使得它更符合2.0的设计。

  Take It


  照片和扁平化的网站风格结合到一起,毫无违和感。

  Google Santa Tracker


  很显然,扁平化的设计风格和圣诞主题可以完美地结合到一起。Google Santa Tracker 的设计风格并不是纯粹的扁平化设计,动态模糊和视差效果的运用,让视觉元素更加富有层级,更灵动的效果。

时间: 2024-11-01 09:00:45

25个细致微妙的扁平化2.0风格网页设计的相关文章

illustrator绘制扁平化太空流星风格海报教程

给各位illustrator软件的使用者们来详细的解析分享一下绘制扁平化太空流星风格海报的教程. 教程分享: 百叶窗的基底 STEP 01 百叶窗算是一种窗帘吗?就算吧,你一定记得这种水平横条带来的遮光革命.先保留一点记忆,再打开AI,文档大家可以参考我的参数.绘制一个矩形的蓝紫色背景.这里的蓝紫色是为了契合太空的主题,你也可以选用其它的颜色作为背景.   STEP 02 先从绘制一个圆形开始,这里我们绘制一个红色的圆形,关闭掉描边.然后再绘制一个矩形.矩形也同圆形一样颜色.   STEP 03

25例杂志风格网页设计

  不可否认,纸媒日渐衰微,力图转型为网络媒体. 而网络媒体,则"反其道而行之",采用纸媒的布局设计风格. 传统的力量不容忽视,约定的习俗也非常深入人心. 但纸媒(报纸.杂志)在内容呈递上有个不容忽视的缺点:布局太繁杂. 如何在呈递大量信息的基础上做到布局有序?如何利用纸媒的传统大标题更好的吸引用户注意?如何把缩略图排布的跟杂志中的图片一样?请看文本推荐的25个范例. This is Fake DIY Billboard Conde Nast The Next Web W Magazi

移动界面扁平化设计:扁平化的设计理念

文章描述:总而言之,拟物化有拟物化的优点,扁平化有扁平化的长处,只有两者相结合,才能使易用性与简洁性得到更好的体现. 如果UI 界面使用了拟物化的风格,看起来跟生活实物一模一样,你一定会有按下去的欲望;而扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想 当下 UI 设计的扁平化浪潮可谓如日中天,从微软的 Windows 8 开始,还有后来 Google 的 Android,到现在的苹果 iPhone 的 iOS,都采用了扁平化的设计理念.可是,你真的理解什么是扁平化吗?这不禁要画上一个

web设计发展趋势:深入学习扁平化设计

文章描述:扁平设计是根据平面的样式来定义的:通过移除额外的元素比如阴影,斜边,纹理和创建3D样式的梯度等等来简化界面. 扁平化设计或者说扁平化的UI风格,是今年最受关注的一个web和平面设计的发展趋势.而经常被拿来与扁平化做比较的是拟物化设计,两者的设计原则和设计风格完全相反. 设计师们或许会有疑惑,这究竟是一种能持续下去的设计趋势呢?还是只能是风行一时,昙花一现.暂且不谈未来和不管这些反对的声音,大多数设计师还是很想在自己的工作中尝试使用这一设计趋势.在这里,我们将深入了解什么是扁平化风格,追

今年六个全新的扁平化设计风格

  时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格.扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0. 扁平化设计特质 对于扁平化的定义,依然没有一个固定范式,但概括起来有下面四个特征: 1)没有多余的效果,例如投影.凹凸或渐变等 2)使用简洁风格的元素和图标 3)大胆丰富且明亮的配色风格 4)尽量减少装饰的极简设计 扁平化所追随的细节依然不变,然而这些"规范"开始松

从零开始教你打造优秀的扁平化PPT

  陌君:设计没有唯一和统一的答案,扁平化也只不过是万千设计形式中的一种.用的人多了,好像就变成了趋势.根据题主的疑问,我们或许可以试一试,将制作的过程呈现出来,以帮助理解. 现在,请点击Powerpoint,几秒的静默之后,一个空白的世界即将展开. 在动工之前我们得思考几个问题: 我要做啥?--也就是确定主题--一个扁平化的中文PPT; 内容呢?-- 跟制作扁平化的中文PPT相关的一切; 思路呢?-- 一条线顺下来,是否能够做到清晰明了? 色调呢?--暖?冷?黑白灰?五彩斑斓?主色?辅助色?

2016年的扁平化UI设计美学

  前言 时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格.扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0. 扁平化设计特质 对于扁平化的定义,依然没有一个固定范式,但概括起来有下面四个特征: 1)没有多余的效果,例如投影.凹凸或渐变等 2)使用简洁风格的元素和图标 3)大胆丰富且明亮的配色风格 4)尽量减少装饰的极简设计 扁平化所追随的细节依然不变,然而这些"规范"

由设计师来谈谈“扁平化”

[导读]本文是由 eico design 创意总监张卷益撰写的.他从设计师的角度,讨论了关于扁平化设计风潮的话题,而在 iOS 7 正式发布之前,这样的讨论其实很有意义.而在eico看来,扁平化设计的流行虽然时间还是短暂,但不能不说是有其必然性,比如因为移动设备的多样化.内容即界面的潮流等.而在未来,对界面设计思想的理解,将回归到如何去理解功能.内容和应用本身. "扁平化设计",至少不是一个听上去很美的词. 可能,还在几年之前很少会有人预料到,在未来的某天移动产品的界面设计,竟然也会像

爱奇艺移动端删繁就简 主打iOS7扁平化风格

虽然iPhone和iPad的全新操作系统iOS7还未正式发布,但爱奇艺已经先人一步开始尝试把这种删繁就简.直达目标的用户体验带到视频领域.本周,爱奇艺移动端"爱奇艺视频"进行了从页面图标设计到视频播放体验的全面改版升级.新版"爱奇艺视频"进一步强化了iOS7简洁直观的设计风格,并优化了视频启动速度和播放流畅度等产品性能.       iOS7的新风格对所有开发者都是一个相同的挑战,所有App都需要 重新设计,并且设计的 好坏会比之前iOS拟物化版本差距更大.这对 整