業(yè)界對(duì)微軟Windows8操作系統(tǒng)全面采用Metro界面風(fēng)格的作法褒貶不一,但在一切還沒有定論之前,蘋果的iOS和Android 安卓系統(tǒng)卻立即跟進(jìn),一時(shí)間扁平化設(shè)計(jì)風(fēng)格風(fēng)靡全球。于是一夜之間,好像所有的東西都被拍扁了,網(wǎng)頁、軟件、海報(bào)等各種界面都刮起一陣扁平化的暴風(fēng)。實(shí)際上,扁平化風(fēng)格并不是什么新鮮的事物,早在幾十年前,設(shè)計(jì)界就有極簡風(fēng)格的流行。另外像傳統(tǒng)的平面媒體,比如交通、公共場所指示系統(tǒng)等,也一貫采用的是扁平化的設(shè)計(jì)風(fēng)格。對(duì)于設(shè)計(jì)師來說,其實(shí)扁平化風(fēng)格要比傳統(tǒng)的擬物化風(fēng)格更容易實(shí)現(xiàn),特別是更容易矢量化,這也是為什么當(dāng)前UI設(shè)計(jì)偏愛扁平化風(fēng)格的重要原因,因?yàn)檫@種風(fēng)格可以適應(yīng)在不同分辨率的屏幕之上。 注意下面這個(gè)布局,文字搭配插圖,下面是反向排版,形成了無形的格子系統(tǒng)。 icon+文字描述,形成了格子系統(tǒng),圖標(biāo)采用扁平化設(shè)計(jì)風(fēng)格 下面這個(gè)布局我很喜歡,原因在布局上,采用了左右結(jié)構(gòu),左邊的分類形成一個(gè)塊狀,平衡了左右。而右邊的塊狀陳列,在第二行第二個(gè)開始,做一個(gè)more,打破常規(guī)的一行四個(gè),第二行也是四個(gè)這種填滿的習(xí)慣性布局。 底下圖標(biāo)加文字,形成柵格化體系,有意思的是上面的廣告標(biāo)語,加上兩個(gè)協(xié)調(diào)的色塊,更加畫龍點(diǎn)睛。 跟logo呼應(yīng)得非常棒的格子化系統(tǒng) 注意圖標(biāo)加文字,還用一個(gè)純文字的鏤空白色作為間隔,讓格子更加靈動(dòng),不死板 用格子加字母作為點(diǎn)擊導(dǎo)航,有意思 右邊,由上而下評(píng)分平鋪,形成導(dǎo)航 喜歡這里的色塊搭配,一看就很時(shí)尚,愛死了。 橫向切割,很有意思,背景圖,背景色切割。 特別的色塊 扁平化圖標(biāo)加文字,形成格子系統(tǒng) 這種屏幕切割方式,很新銳 不規(guī)則布局,有意思 作為首頁引導(dǎo),覺得很棒 別小看這個(gè)布局,很有難度。能構(gòu)思出來的設(shè)計(jì)師都不一般。 喜歡這里的灰色,藍(lán)色,綠色搭配 喜歡色塊分布,很平衡 看人物,像日本風(fēng)格,格子切割很棒 歐美切割風(fēng)格,不錯(cuò) 下面欣賞兩個(gè)素馬設(shè)計(jì)的案例,很巧妙的使用了柵格化系統(tǒng)來做排版布局設(shè)計(jì)。 |
|