時(shí)至今日,扁平化已不再是流行一時(shí)的設(shè)計(jì)風(fēng)潮,而是一種美學(xué)風(fēng)格。扁平化大膽的用色,簡(jiǎn)潔明快的界面風(fēng)格一度讓大家耳目一新,當(dāng)它對(duì)元素效果拋棄的如此徹底之際,它又將" />
您的位置:首頁(yè) > 新聞資訊 > 行業(yè)百科 > 行業(yè)動(dòng)態(tài)
時(shí)至今日,扁平化已不再是流行一時(shí)的設(shè)計(jì)風(fēng)潮,而是一種美學(xué)風(fēng)格。扁平化大膽的用色,簡(jiǎn)潔明快的界面風(fēng)格一度讓大家耳目一新,當(dāng)它對(duì)元素效果拋棄的如此徹底之際,它又將效果撿起來(lái),改裝成另一番模樣,使得扁平化進(jìn)化為扁平化2.0。
對(duì)于扁平化的定義,依然沒(méi)有一個(gè)固定范式,但概括起來(lái)有下面四個(gè)特征:
1)沒(méi)有多余的效果,例如投影、凹凸或漸變等
2)使用簡(jiǎn)潔風(fēng)格的元素和圖標(biāo)
3)大膽豐富且明亮的配色風(fēng)格
4)盡量減少裝飾的極簡(jiǎn)設(shè)計(jì)
扁平化所追隨的細(xì)節(jié)依然不變,然而這些“規(guī)范”開(kāi)始松懈了。隨著扁平化進(jìn)化到2.0時(shí)代,我們?cè)賮?lái)看看2016年,有哪些是扁平化設(shè)計(jì)以前從未有的。
為了避免純粹的扁平化設(shè)計(jì),一些細(xì)微的效果逐漸被運(yùn)用其中。
扁平化歷來(lái)被人所詬病的方面即交互不夠明顯,按鈕難以找到等。現(xiàn)在這些問(wèn)題都可以通過(guò)增加一些小小的效果而得以解決。但這些效果的運(yùn)用也是符合扁平化的簡(jiǎn)潔美學(xué)的。
微陰影,就是極其微弱的投影,這是一種幾乎不被人所立刻察覺(jué)的投影,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意。但在使用這一效果時(shí)候需要注意,要讓它保持柔和感和隱蔽性。
利用元素的形狀,使其從背景中獨(dú)立出來(lái)。即使元素與背景有著同樣的顏色,依然可以通過(guò)微陰影加以區(qū)分,而視覺(jué)上還能保持色調(diào)一致的簡(jiǎn)潔性。
有人這時(shí)會(huì)提到長(zhǎng)陰影,但長(zhǎng)陰影通常運(yùn)用的地方只是在LOGO、圖標(biāo)等元素的內(nèi)部,它是扁平化的一種設(shè)計(jì)風(fēng)格的延伸。
這不是指一個(gè)幽靈形狀的按鈕。恰恰相反,這類按鈕的形狀非常簡(jiǎn)單,僅僅是一個(gè)矩形或一個(gè)圓角矩形的邊框,內(nèi)部為透明。看上去若有若無(wú),類似于幽靈的出沒(méi)方式。
也許你已經(jīng)在很多扁平化設(shè)計(jì)風(fēng)格中見(jiàn)過(guò)它們了。它們通常會(huì)設(shè)計(jì)得比普通的按鈕略大,浮動(dòng)于大圖背景、視頻的上方。你可以在飽覽整張圖片或整個(gè)視頻的同時(shí)也能看到它的存在,為了讓它獲得聚焦,通常它位于比較顯眼的位置,例如屏幕的中間。
幽靈按鈕的顏色通常為黑或白,這是因?yàn)樗枰椭車h(huán)境所協(xié)調(diào)。如果可以,試試別的色彩也未嘗不可。例如無(wú)色的黑白圖片搭配有色的幽靈按鈕。
同時(shí),也需要注意,與幽靈按鈕搭配的也多半是無(wú)襯線的字體,中文也是細(xì)黑等類似的字體。這樣就讓按鈕和其字體都在外觀上取得一致性。
談到避免極端的扁平主義,漸變的運(yùn)用就有回暖之勢(shì)。而新的漸變不同以往,它往往是以更為低調(diào)的姿態(tài)出現(xiàn)的,比如只用于背景色或氛圍色,不再喧兵奪主,并且只在兩種顏色之間漸變過(guò)渡。下面是雙色漸變的實(shí)例。
可以看出這一案例中,網(wǎng)頁(yè)已經(jīng)讓漸變成為了一種設(shè)計(jì)元素。霸占整個(gè)屏幕的圖片充滿震撼,而讓其也參與到過(guò)度的漸變中,讓圖片散發(fā)出霓虹燈一樣的效果,搭配幽靈按鈕,這幾乎是信手拈來(lái)的絕佳創(chuàng)意。
毫無(wú)疑問(wèn),扁平化設(shè)計(jì)就是Google的Material Design的前身,這在Material Design的設(shè)計(jì)風(fēng)格中可以看出扁平化的影子,但后者不但繼承其簡(jiǎn)潔的優(yōu)勢(shì),還進(jìn)一步在用戶體驗(yàn)上得以發(fā)揮。
最明顯的是,除了模擬現(xiàn)實(shí)環(huán)境里紙質(zhì)重疊的微投影,那恐怕就要數(shù)圓的運(yùn)用了。扁平化中圓形的元素越來(lái)越多,可以說(shuō)圓形在移動(dòng)端的優(yōu)勢(shì)是特別明顯的。由于圓形很好的模擬了手指印,因此一個(gè)圓的存在看似就是一個(gè)可觸的地方。這對(duì)于喚起用戶的操作發(fā)揮了極大的作用。
由于圓形本身的特殊性,使它極易從背景中分離出來(lái),因此將重要的元素設(shè)計(jì)為圓形也是心機(jī)滿滿。例如下面這家餐廳的網(wǎng)頁(yè)設(shè)計(jì),圓形本身具有一種親和感,非常契合餐廳這類溫馨休閑的品牌氛圍。
早期的扁平化配色是非常鮮艷大膽的,它可以在高飽和度中挑選六到七種顏色進(jìn)行搭配。如今,扁平化設(shè)計(jì)的配色選擇雖然仍然朝明亮大膽的方向走,但只局限于有限的顏色選擇,雙色調(diào)配色是目前逐漸流行起來(lái)的另一種配色方向。
大家都知道通過(guò)配圖來(lái)強(qiáng)調(diào)配色。最初的扁平化的設(shè)計(jì),只有十分有限的素材資源,因此色彩的選擇相對(duì)也有限。近來(lái),扁平化項(xiàng)目包含了大量的影像。由于這一轉(zhuǎn)變,就能從眾多明亮或鮮艷的色系中進(jìn)行選擇配色。
更多的視頻和動(dòng)畫(huà)特效的運(yùn)用,使得扁平化更加生動(dòng)活潑。然而這些讓網(wǎng)頁(yè)看起來(lái)更生動(dòng)的手段,無(wú)一獨(dú)立于整體頁(yè)面的風(fēng)格而獨(dú)立存在。它們依然是簡(jiǎn)潔的,符合網(wǎng)站整體的審美方向的。
與其把新趨勢(shì)看作是一種方向,不如將其視為過(guò)程。扁平化的未來(lái)還需要在此基礎(chǔ)上不斷發(fā)展新的創(chuàng)意。
最新動(dòng)態(tài)
常見(jiàn)問(wèn)題百寶箱
A2014,有位學(xué)妹不顧家人反對(duì),在上海這個(gè)國(guó)際化大都市謀了一個(gè)公眾號(hào)助理的職位。斗志昂揚(yáng)地奮斗了 3 年,我眼看著她的內(nèi)容駕馭能力突飛猛進(jìn),內(nèi)容質(zhì)量從三流到一流,職位
A文章主要分析了不同的視覺(jué)設(shè)計(jì)元素是如何影響網(wǎng)站用戶體驗(yàn),希望通過(guò)文章的解讀能夠?qū)δ愕漠a(chǎn)品設(shè)計(jì)帶來(lái)些啟發(fā)。 也許是因?yàn)槲以谝曈X(jué)設(shè)計(jì)上沒(méi)有太多經(jīng)驗(yàn),我發(fā)現(xiàn)
A雙贏系統(tǒng)建站系統(tǒng),三網(wǎng)同步,建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng),三網(wǎng)同步,建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng),三網(wǎng)同步,建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng),三網(wǎng)同步,建站推
027-89992189
掃一掃關(guān)注微信
Copyright 2013-2020 All Rights Reserved 武漢互贏網(wǎng)絡(luò)科技股份有限公司 鄂ICP備19027860號(hào)