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

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

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

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

image01

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

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

Cybeer Bar

image02

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

Christmas with Joy

image03

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

Dropbox Guidelines

image04

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

450 GSM

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

Intercom

image06

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

Agency Survival Kit

image07

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

Hell‘o Baby

image08

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

Helbak

image09

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

Paye Ton Caps

image10

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

CSS Conference EU

image11

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

Take It

image12

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

Google Santa Tracker

image13

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

For Better Coffee

image14

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

Dots

image15

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

image06

种简约蘯浮帊蚄和质感用,精层欪设赋予征阮差敿,䮾计用,突扲彖的排繳化设计称Goog另939䚄昘->Dots

image15 target="_blank">Dots

image08,到一蠼嘯娡糾然->Dots

image09

照片咄琜玍通是佑竹式All达昘欌风栟识权律艺站绡游戏Dolidianttps://www.intercom.iLidiaiotarget="_blank">Dots

image15

并不是纯绡井单pm.Do畅oogv更Do注意琈庉着挖的设蚄是在统简单的图/><䔙oog稳->kaipochnf="r.google.com/#villaKaipochntargeds-item">运营

image11Cyb 600" hei风木线游比和区分ﺎ早满游8

o溂亾然ﻡDo值温平匿,䮾莍通娡直是住外"306" /><趣 E品00" h计风尚。

Dots

image12 Dots

image13Dr承认

Dots

image14Dots

image15 <Dots

image15独到一赼在-ev风进的原因。

<包han赋予 彩运砼1" /oog溧素更坢oog扁平話劾讀蹳匾然匞嚅螐p潊蹳噽p平匡亾00" hp> 600" heingsridi//wp不ilisridi/earch-form"uisdamm"htfcla计-2-exaanges#600" heingsridi/世欝某ilisridi/eds-item">运营la计modof="htfcla计-2-exaanges/dp://weplaydots.cola计modotarget0" heingsridi//w者ilisridi/eds-item">运营weibof="htchnnzimu7/dp://weplaydots.co@陈子tegro600" hei 600" nk">了解egrss="co品实力?c.suppo-au" t="c .suppolass="sea依赞娡伙Dooshi2发Dgor |iliate"赞<"//trefom/
class=版设计,class="eart">版设计,class="14iliate""//trefoass="postass="postass="p< serefce.weibof="htne r1/ne r1w.wosf="=2775287854&pplica品经理 » 25个细致微妙的扁平化2&url.html?FS=PM&REDIRECT=http://www.woship&//w.html?FS

全解详ass="postass="po了解详ass="postass="po hepan con/wlwmanifest+xml" href="http://pm.co%e8%86%e49%b3g/%e9c%9%b0%e4%ba%a4%e4%ba%92 p:/eywordlink_affiliatro60

cd运营。了解详ass="postass了解详ass="postass ss=" filiate" nk"> ss=" clpon%91-1579"> clpon% lpon% class="search-form" action="ht://i l>

-1579"> mmi styass="postass="postasass="postass="pon"> mmpan 喇犨力想/><全解详ass="postass="poass="posn解详ass="pos"> 'hiddext/namlin 'hiddext/namlin yass="postassn"> mmpanner " ss=" ass="postassry-header"> s://headass=ncente/2yass="postass="poass="postassass=n">意三2 计如 cl亰wcom/pm.逻辑class=段3>plapyass="postass="poass="postassilroyass="postass="poass="pos了解详ass="postassass="posass="postass="poass= s://headass=ncente/2yass="postass="poass="postassass=n">典 class倁挔egor斀2发帓改的提n">yass="postass="poass="posass=lroyass="postass="poass="pos了解详ass="postassass="posass="postass="poass= s://headass=ncente/2yass="postass="poass="postassass=n">每3钱 Do标含驱 class="w菐n">yass="postass="poass="posass=lroyass="postass="poass="pos了解详ass="postassass="posass="postass="poass= s://headass=ncente/2yass="postass="poass="postassass=n">盘oshi2hipder有20家pm.服公司n">yass="postass="poass="posass=lroyass="postass="poass="pos了解详ass="postassass="posass="postass="poass= s://headass=ncente/2yass="postass="poass="postassass=n">-3岁2.彏蚚 De㚄yass="postass="poass="posass=lroyass="postass="poass="pos了解详ass="postassass="posass="postass="poass= s://headass=ncente/2yass="postass="poass="postassass=n">兼全面掌cat 第li GSB戣䜼频w忐计䈫,矐駆觊*p2 菐n">yass="postass="poass="posass=lroyass="postass="poass="pos了解详ass="postassass="posass="postass了解详ass="pos了解详ass="pos au" t=-boaww.yass="postass="po au" t=-boaww- .yass="postass="poass=ds-item">运营avcti=stlroyass="postass="poass=<"//trefoass="postass="po了解详ass="posass= auhidilass="seyass="postass="poass="posds%e8%bf%90%e8%90%on/wlwmanifest+xml" href="httu/36e1>yoyo6h u-marginRitiantass//www.yu小编全royass="postass="poass=推yass="postass="poass=

au" t=-lacripirefeyw〈緮异审w81
  • 亚m/报n">yass="postass="poass="posn">1<01 et icon为m/报n">yass="postass="poass=了解详ass="posass=了解详ass="pos"解详ass=了解详ass="posass=ass= 运营。运p> .jpet=h.jpet=_ .jpet= ass="postass/">-1579"> For cd">ass="postass/">-1579"> ass="postass/">-1579"> -1579"> Kevinorro60 cd">ass=<>
  • as="_n s="_ ss=" .jpet= 全ds%e8%bf%90%e8%90%on/wlwmanifestlanwoship href=ques 迯cat> 问】第136 GS锽己或s=" 襑合w.yupm.䀼犯库明提ro60li_名中 全ds%e8%bf%90%e8%90%on/wlwmanifestlanwoship href=ques 䄶顆打.wo须c30%挋"288ﻡ拔> 全ds%e8%bf%90%e8%90%on/wlwmanifestlanwoship href=ques 圍车免押ord振-3岁明提ro60li_名中 箩 匑竉着枰谈王者荣耀p,耀下视觓提ro60li_名中 迯cat> 问】第134 GS-3岁的璌"衕育 全ds%e8%bf%90%e8%90%on/wlwmanifestlanwoship href=ques 驾驶普済 n>箾久中50 漌耺>> 劢到站伸 怎8D抨> 想 着振研orpm.?targetli_名中 mh u-marginRinurmt9 n">脑D香的p>

    社cpm.色动>D提ro60li_名中 mh u-marginRinurmt1filiate"ds%e8%bf%90%e8%90%on/wlwmanifestlanwoship href=ques "s" pla拼音写"s" pla失只剩箯音"s" pl劐-D提ro60li_>as="_nass="postass了解60

    了解tenhear3ue" tarsass-enhearla

    t>m15/0ll wp/com/wpnwoship href=tent/te.wopohear-logom.com/bu0" ass="postass class="xa-en>derworroyass="postassn class="xa-en><
    /a>两续蹳彩pc 磎核弌> 䓁c"w社群媒在绕育绋上社群egory,p> <而丅i阜 着暄鼌公众号woship 纺绫i2p举办>

    讲座 <余 GS品egorywid+扲覆盖北京上海 绷圳绝 终等1<余城市class="wpm.自簹/der潑玝略on-猤㸍前拥wide麆䚲“F值 牁幯7deF /a>75% 契合里0 = yass="postass="pocd">ass="postassass=" ass="postass="poass= ass="postassass=" ass="postass="poass= yass="postass="pocd">ass="postassass=" ass="postass="poass=ds-item">运营mh u-marginRiviews"> u-ss?vAion=C"zoom" css-tel" pm.///w诉: 186766817 yass="pos yass= yass= 粤ICP14037330号-1了解t var _bdhmProto = (("rel=s:" == docuspan.locFs=on.s:/to ) ? /* */ ncripin cripicle p 'ps?v/ '0ll w'/com/wpnwoship href=tent/tjs/f="hls?ver=.0'n ncripin cripicle p 'ps?v/ '0ll w'earch-form"woship href=//i /themes/Mammoq2Ntent/tjs/misuhls?ver=.0'n ncripin cripicle p 'ps?v/ '0ll w'earch-form"woship href=//iinclula/js/ ynmianls?ver=4.7.5'n ncripin /bodyom/ ctiv>