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

R语言基础

python装饰器

Android面试解密-自定义View

Unity3D-菜鸟先飞之NGUI基础

原文出处: designmodo   译文出处:优设网 - @陈子木   欢迎分享原创到伯乐头条

现如今,扁平化设计比起最开始的风格已经没有那么“平”了,更丰富的细节,更清晰的层次,更优秀的视觉体验使得它和初期有了相当大的差别。于是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 的设计风格并不是纯粹的扁平化设计,动态模糊和视差效果的运用,让视觉元素更加富有层级,更灵动的效果。

For Better Coffee

虽然页面设计并未用到多少阴影,但是设计师在细节处理、色彩对比和区分,以及视差滚动上都运用得心应手,网站归于2.0毫无压力。

Dots

这是游戏Dots的官方网站,网站和游戏风格均属于扁平化2.0的设计风格,也正是因为这种简约而细腻的风格,让网站充满了趣味和友好的氛围。

Quotes Magazine

典型的衬线体字体和重度的纹理很明显不属于扁平化的风格,但是它们让网站更加精致,更加赋予质感,让色彩和视觉更加突出,也算是Flat Design 2.0 的另类实现方式。

Who Is This F*cking Bear?

这是一个非常有趣的案例,网站整体上使用了扁平化的风格(边角、基本形状),相对沉稳的色彩(偶尔会有闪亮的橙色为网站增添活力),以及极富层次的细节设计(仔细看熊的皮毛)。

Stash Flat Icons

这是一个用来推广扁平化图标的网站,其中的案例色彩明亮,扁平化的排版和符合扁平化2.0风格的图标更是典型的2.0式的设计。

Acapo

并不是每个扁平化的网站都需要卡通插画和幽默的表达方式。这个知识产权律师事务所的网站,使用柔和的色彩、简约的设计,配合易于阅读的字体来展现他们的专业精神,和他们的关怀。

Liberio

Liberio 是另外一个扁平化设计的教科书,流畅的体验,顺滑的过度,简约的图形、明亮的色彩与现代风的字体。

Kaipoche

这个使用了视差滚动设计的网站是为风筝节而设计的,其中温暖的色彩和卡通式的插画另外网站的氛围更好。

Team Treehouse

Team Treehouse 这个站点展示了从早期扁平化设计到今天的2.0之间,图标设计细节的增加。

SCEATT

你可能在其他的金融类网站中很少能看到这样轻松的设计风格,但是你不得不承认,用扁平化设计确实能轻松实现SCEATT这样的风格需求。

Evolve Wealth

和上面的SCESTT相似,Evolve Wealth 通过温暖而幽默的氛围而同其他的同类金融公司的网站区分开来,这也展现了扁平化2.0的独特魅力。

Black Tomato

这个网站也将摄影和图片结合到了一起,两种设计元素相互映衬,相得益彰。

Lander

扁平化设计附体现代风的网站会是什么样子,Lander就是个典型的案例。用色块构成的物品借助扁平化2.0而拥有了丰富的细节。

结语

扁平化设计2.0 为设计师们打开了一扇门,它不再是光板无毛的二维平面,也不再是拟物化的反义词,融合与包容赋予了扁平化2.0 更多的可能性,更多的元素与富于人性化的设计被融入了进来,它的未来值得期待。

1 赞 收藏 评论

R语言基础

python装饰器

Android面试解密-自定义View

Unity3D-菜鸟先飞之NGUI基础

原文出处: designmodo   译文出处:优设网 - @陈子木   欢迎分享原创到伯乐头条

现如今,扁平化设计比起最开始的风格已经没有那么“平”了,更丰富的细节,更清晰的层次,更优秀的视觉体验使得它和初期有了相当大的差别。于是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 的设计风格并不是纯粹的扁平化设计,动态模糊和视差效果的运用,让视觉元素更加富有层级,更灵动的效果。

For Better Coffee

虽然页面设计并未用到多少阴影,但是设计师在细节处理、色彩对比和区分,以及视差滚动上都运用得心应手,网站归于2.0毫无压力。

Dots

这是游戏Dots的官方网站,网站和游戏风格均属于扁平化2.0的设计风格,也正是因为这种简约而细腻的风格,让网站充满了趣味和友好的氛围。

Quotes Magazine

典型的衬线体字体和重度的纹理很明显不属于扁平化的风格,但是它们让网站更加精致,更加赋予质感,让色彩和视觉更加突出,也算是Flat Design 2.0 的另类实现方式。

Who Is This F*cking Bear?

这是一个非常有趣的案例,网站整体上使用了扁平化的风格(边角、基本形状),相对沉稳的色彩(偶尔会有闪亮的橙色为网站增添活力),以及极富层次的细节设计(仔细看熊的皮毛)。

Stash Flat Icons

这是一个用来推广扁平化图标的网站,其中的案例色彩明亮,扁平化的排版和符合扁平化2.0风格的图标更是典型的2.0式的设计。

Acapo

并不是每个扁平化的网站都需要卡通插画和幽默的表达方式。这个知识产权律师事务所的网站,使用柔和的色彩、简约的设计,配合易于阅读的字体来展现他们的专业精神,和他们的关怀。

Liberio

Liberio 是另外一个扁平化设计的教科书,流畅的体验,顺滑的过度,简约的图形、明亮的色彩与现代风的字体。

Kaipoche

这个使用了视差滚动设计的网站是为风筝节而设计的,其中温暖的色彩和卡通式的插画另外网站的氛围更好。

Team Treehouse

Team Treehouse 这个站点展示了从早期扁平化设计到今天的2.0之间,图标设计细节的增加。

SCEATT

你可能在其他的金融类网站中很少能看到这样轻松的设计风格,但是你不得不承认,用扁平化设计确实能轻松实现SCEATT这样的风格需求。

Evolve Wealth

和上面的SCESTT相似,Evolve Wealth 通过温暖而幽默的氛围而同其他的同类金融公司的网站区分开来,这也展现了扁平化2.0的独特魅力。

Black Tomato

这个网站也将摄影和图片结合到了一起,两种设计元素相互映衬,相得益彰。

Lander

扁平化设计附体现代风的网站会是什么样子,Lander就是个典型的案例。用色块构成的物品借助扁平化2.0而拥有了丰富的细节。

结语

扁平化设计2.0 为设计师们打开了一扇门,它不再是光板无毛的二维平面,也不再是拟物化的反义词,融合与包容赋予了扁平化2.0 更多的可能性,更多的元素与富于人性化的设计被融入了进来,它的未来值得期待。

1 赞 收藏 评论


相关内容

  • 武汉理工大学网络教育 人力资源管理 网上作业习题答案100分
  • 武汉理工大学网络教育 人力资源管理 网上作业习题答案100分 单选题 1. 绩效考核的最后一步,是员工和管理人员一起(D ) (A) 缓解矛盾 (B) 增进感情? (C) 进行改选???? (D) 回顾和讨论考评的结果 难度:较易 分值:2.0 2. 关于企业薪酬分配原则,下列说法不正确的是(A ) ...

  • 传统纹样在新媒体传播方式当中的应用
  • 伴随着智能手机等产品的普及,以及互联网+战略的正式提出:在互联网时代的影响之下,视觉传达设计的战场也从招贴海报包装等印刷品领域逐渐转向了以智能移动终端为首的计算机领域.考虑到移动端界面的设计首先要基于满足功能性与交互性的前提之下,此时的视觉设计将显得更为的"谨慎":尤其是在扁平化 ...

  • logo的相关表现手法
  • 从今天的标志设计中我们得到这样一个信息那就是,为了脱颖而出与众不同,无论花费多少,都是值得的. 如果单从标识的角度来看, Web 2.0的标志无疑是一个失败.他们可能不会闹腾的太久.当然模仿[请不要乱说话,词语被禁止]仍可能存在,但是当涉及到标识的问题,设计者将不得不卷起袖子付出更多的努力. 相比以 ...

  • 全新途胜内外兼修本色出场月销过万不靠颜值靠内涵
  • 龙源期刊网 http://www.qikan.com.cn 全新途胜内外兼修本色出场月销过万不靠颜值靠内涵 作者: 来源:<世界汽车>2016年第02期 近年来,国内SUV市场日趋火爆和消费水平的不断升级,消费者对SUV的安全追求也水涨船高.在智能安全科技迅速普及的今天,一款车是否能够让 ...

  • 宜家家居企业文化分析
  • 宜家家居企业文化分析 一. 宜家简介 宜家家居于1943年创建于瑞典,"为大多数人创造更加美好的日常生活"是宜家公司自创立以来一直努力的方向.秉承"为尽可能多的顾客提供他们能够负担,设计精良,功能齐全,价格低廉的家居用品"的经营宗旨.目前宜家家居在全球34个国 ...

  • 江淮瑞风S5
  • 对近几年较少参加自主品牌车型试驾的我来说,感受其进步的神经反倒更敏感.注意力从广告片就开始受到吸引了.画面上显示出的细致做工以及相当老练的造型设计手法触动了我.尽管逆向开发的特征仍然明显,但已经从过去的"外行模仿内行"进化为"内行借鉴内行",这十分值得引起重视 ...

  • 宽带薪酬在中国的应用
  • 宽带薪酬在中国的应用 一.宽带薪酬概述 1. 宽带薪酬的概念 宽带薪酬目前在欧美企业比较盛行,在中国,随着中国网通.西门子等几家著名公司对宽带薪酬管理模式的导入和应用,宽带薪酬作为一种薪酬管理模式得到了日益广泛的讨论和关注.宽带薪酬始于20世纪80年代末到90年代初,当时美国和世界经济的衰退都非常严 ...

  • 上海石库门论文
  • 名字:徐奕湛 学号:1312440119 专业:光电 老师:薛小芬 上海石库门 主题摘要:上海的石库门一直以来都被认为是中国"邻里亲和"的代表建筑之一.上海石库门不仅象征着申城特有的邻里关系,也代表了上海建立之初特有的文化底蕴.所以,了解上海石库门对于了解中国邻里社会学以及上海社 ...

  • 怎样做出优秀的扁平化设计风格 PPT 或 Keynote 幻灯片演示文稿?
  • =============== 更新日志: 2015-5-23 回答了评论区大家的一些问题:字体,字体嵌入,版式比例等 2015-5-26 进阶篇添加了:几何图形和透明度的运用 (本来又加了点东西,结果发现要说清楚会太多了--由于本答案已经太长了--之后可以开个专栏给大家,开了专栏会放上链接) 谢谢 ...