當(dāng)前位置:首頁(yè) > 新聞中心 > 互聯(lián)網(wǎng)動(dòng)態(tài)
扒一扒網(wǎng)站扁平化設(shè)計(jì)的進(jìn)化史責(zé)任編輯 :李飛    文章來(lái)源 :星翼創(chuàng)想(16qt59sf.cn)    發(fā)布時(shí)間 :2015-12-24    閱讀次數(shù):4892     專題 :網(wǎng)站設(shè)計(jì)

早在2013年iOS7發(fā)布以來(lái),扁平化設(shè)計(jì)就轟動(dòng)了互聯(lián)網(wǎng)世界。從那以后,它就持續(xù)發(fā)揚(yáng)光大,并且發(fā)展出數(shù)量驚人的變種。隨著帶有扁平化色彩的Google Material design規(guī)范的推出、卡片式設(shè)計(jì)的廣泛采用、還有排山倒海的極簡(jiǎn)化趨勢(shì)——似乎在可預(yù)見的未來(lái),扁平化設(shè)計(jì)會(huì)成為主宰風(fēng)格。

扁平化合計(jì)

正如2015與2016年的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)一書所描述的,扁平化設(shè)計(jì)正在進(jìn)化:

“最初的扁平化設(shè)計(jì)是嚴(yán)格的扁平,極少有強(qiáng)調(diào),注重極簡(jiǎn)設(shè)計(jì)。近來(lái)我們則看到了更多吸引眼球的元素,例如陰影與著色的暗示。盡管純粹的扁平主義者會(huì)反對(duì),但設(shè)計(jì)圈接納了它,它與其他流行的設(shè)計(jì)模式能夠有效結(jié)合?!?/span>

以往波瀾不興的風(fēng)格發(fā)生突變,引發(fā)了一連串有趣的問(wèn)題。

如果它是如此的流行,那如何與眾不同地將它運(yùn)用在自己作品中呢?你要的是扁平化設(shè)計(jì),而不是平淡無(wú)奇。巧妙的運(yùn)用,與粗劣的復(fù)制,這之間有何區(qū)別?

本文講的正是這個(gè)。我們看看扁平化是如何進(jìn)化的,怎樣能使你的設(shè)計(jì)引領(lǐng)潮流。

長(zhǎng)投影

我們所談?wù)摰脑O(shè)計(jì)應(yīng)當(dāng)是扁平的,但陰影能產(chǎn)生縱深感,雖然這似乎有點(diǎn)違反直覺。

但這些細(xì)微元素能為設(shè)計(jì)增添一絲情調(diào),又不至于太引人注目。實(shí)際上,他們?nèi)匀豢梢运阕髁舭椎囊徊糠郑m然他們從技術(shù)上說(shuō)確實(shí)是一種視覺元素。

畢竟,沒有光哪來(lái)陰影?

更重要的是,長(zhǎng)投影為畫面增加了一種反差元素,使得整個(gè)視覺體驗(yàn)變得有吸引力。要達(dá)到想要的效果,甚至投影都不必那么長(zhǎng)。

請(qǐng)看:

扁平化設(shè)計(jì) 網(wǎng)站設(shè)計(jì) MaterialDesign Materialdesign配色

圖片來(lái)源:Kikk.be

柔和的色彩和短投影呈現(xiàn)出一種美妙的視覺元素,并不會(huì)搶了頁(yè)面導(dǎo)航和主要信息的風(fēng)頭。請(qǐng)留意這些陰影如何令畫面明亮起來(lái)。也使得圖像仿佛脫離了頁(yè)面。投影、扁平化的內(nèi)容區(qū)域、還有柔和色彩這三者的結(jié)合,與網(wǎng)站上的動(dòng)畫元素融合得非常好。

說(shuō)到顏色,應(yīng)該很容易引出我們下一項(xiàng)扁平化特性。

色彩運(yùn)用:鮮明色彩與輔助色

色彩是扁平化設(shè)計(jì)的重要能力之一。

明亮、積極的色調(diào),成就了許多扁平化的設(shè)計(jì),用以彌補(bǔ)視覺表現(xiàn)力上的欠缺。扁平化設(shè)計(jì)中的投影裝飾,看起來(lái)躍然紙上,為設(shè)計(jì)增添了鮮活和動(dòng)感。這與其他動(dòng)態(tài)視覺元素能夠很好配合,例如視覺差滾動(dòng)和CSS動(dòng)畫。

扁平化設(shè)計(jì) 網(wǎng)站設(shè)計(jì) MaterialDesign Materialdesign配色

圖片來(lái)源:Spotify

而且,這些明亮的色彩能作為一種輔助色,用在柔和的背景上。這似乎成為了一種標(biāo)準(zhǔn)的未來(lái)趨勢(shì)。就像這樣:

扁平化設(shè)計(jì) 網(wǎng)站設(shè)計(jì) MaterialDesign Materialdesign配色

圖片來(lái)源:Takeit

深色背景上的亮色圖片絕對(duì)足夠給人留下深刻印象。強(qiáng)烈對(duì)比的視覺元素,更是與如今的扁平化趨勢(shì)形成完美的配合。通過(guò)簡(jiǎn)單或夸張的手法來(lái)突出事物,其中也包括字體。

扁平化設(shè)計(jì) 網(wǎng)站設(shè)計(jì) MaterialDesign Materialdesign配色

簡(jiǎn)單/夸張的字體

如今的“扁平”字體通常由單一字體組成,或者是兩種非常接近的字體。這一點(diǎn)造就了易讀、易辨識(shí)且默默無(wú)聞的字體。這正是關(guān)鍵所在。

你不希望字體分散注意力。如果字母帶有過(guò)多的風(fēng)格與個(gè)性,就會(huì)阻礙用戶的閱讀流程。

扁平化設(shè)計(jì) 網(wǎng)站設(shè)計(jì) MaterialDesign Materialdesign配色

圖片來(lái)源:Cienne

最好的做法是“隱形的設(shè)計(jì)”,換句話說(shuō),就是做出讓用戶不會(huì)注意到的設(shè)計(jì)。因?yàn)槊慨?dāng)他們留意設(shè)計(jì),就會(huì)喪失沉浸式的體驗(yàn)。

當(dāng)然,你也可以走另一個(gè)極端。在處理極簡(jiǎn)式界面時(shí),你得調(diào)整所加入的元素。在空白背景上使用大的粗體字,可以為界面的文案營(yíng)造出獨(dú)特的語(yǔ)境。如果界面沒有其他任何視覺元素,你就必須呈現(xiàn)出某種美感,而且能用的也只有字體和顏色。

扁平化設(shè)計(jì) 網(wǎng)站設(shè)計(jì) MaterialDesign Materialdesign配色

圖片來(lái)源:Truthlabs

幽靈按鈕

要做到漫不經(jīng)心——甚至如空氣般透明——那我們就得花點(diǎn)功夫來(lái)談?wù)動(dòng)撵`按鈕。

你能一眼就找出下圖中的幽靈按鈕嗎?它們并不顯眼,這正是關(guān)鍵。透明按鈕給用戶一種暗示,導(dǎo)航項(xiàng)未必會(huì)從下層的視覺重點(diǎn)上搶奪注意力。


文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址:http://16qt59sf.cn/news/industry/1605.html

掃碼添加微信
159 8667 8737
24小時(shí)電話

返回頂部