早在2013年iOS7發(fā)布以來，扁平化設(shè)計(jì)就轟動了互聯(lián)網(wǎng)世界。從那以后，它就持續(xù)發(fā)揚(yáng)光大，并且發(fā)展出數(shù)量驚人的變種。北京網(wǎng)站開發(fā)設(shè)計(jì)云智小編上次已經(jīng)發(fā)了一篇關(guān)于扁平化網(wǎng)站設(shè)計(jì)的文章，今天在來嘮叨嘮叨。
Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
隨著帶有扁平化色彩的Google Material design規(guī)范的推出、卡片式設(shè)計(jì)的廣泛采用、還有排山倒海的極簡化趨勢——似乎在可預(yù)見的未來，扁平化設(shè)計(jì)會成為主宰風(fēng)格。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
正如2015與2016年的網(wǎng)頁設(shè)計(jì)趨勢一書所描述的，扁平化設(shè)計(jì)正在進(jìn)化：Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
“初的扁平化設(shè)計(jì)是嚴(yán)格的扁平，極少有強(qiáng)調(diào)，注重極簡設(shè)計(jì)。近來我們則看到了更多吸引眼球的元素，例如陰影與著色的暗示。盡管純粹的扁平主義者會反對，但設(shè)計(jì)圈接納了它，它與其他流行的設(shè)計(jì)模式能夠有效結(jié)合。”Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
以往波瀾不興的風(fēng)格發(fā)生突變，引發(fā)了一連串有趣的問題。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
如果它是如此的流行，那如何與眾不同地將它運(yùn)用在自己作品中呢？你要的是扁平化設(shè)計(jì)，而不是平淡無奇。巧妙的運(yùn)用，與粗劣的復(fù)制，這之間有何區(qū)別？Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
本文講的正是這個(gè)。我們看看扁平化是如何進(jìn)化的，怎樣能使你的設(shè)計(jì)引領(lǐng)潮流。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
長投影Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
我們所談?wù)摰脑O(shè)計(jì)應(yīng)當(dāng)是扁平的，但陰影能產(chǎn)生縱深感，雖然這似乎有點(diǎn)違反直覺。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
但這些細(xì)微元素能為設(shè)計(jì)增添一絲情調(diào)，又不至于太引人注目。實(shí)際上，他們?nèi)匀豢梢运阕髁舭椎囊徊糠?，雖然他們從技術(shù)上說確實(shí)是一種視覺元素。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
畢竟，沒有光哪來陰影？Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
更重要的是，長投影為畫面增加了一種反差元素，使得整個(gè)視覺體驗(yàn)變得有吸引力。要達(dá)到想要的效果，甚至投影都不必那么長。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
請看：Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
圖片來源：Kikk.beQpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
柔和的色彩和短投影呈現(xiàn)出一種美妙的視覺元素，并不會搶了頁面導(dǎo)航和主要信息的風(fēng)頭。請留意這些陰影如何令畫面明亮起來。也使得圖像仿佛脫離了頁面。投影、扁平化的內(nèi)容區(qū)域、還有柔和色彩這三者的結(jié)合，與網(wǎng)站上的動畫元素融合得非常好。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
說到顏色，應(yīng)該很容易引出我們下一項(xiàng)扁平化特性。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
色彩運(yùn)用：鮮明色彩與輔助色Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
色彩是扁平化設(shè)計(jì)的重要能力之一。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
明亮、積極的色調(diào)，成就了許多扁平化的設(shè)計(jì)，用以彌補(bǔ)視覺表現(xiàn)力上的欠缺。扁平化設(shè)計(jì)中的投影裝飾，看起來躍然紙上，為設(shè)計(jì)增添了鮮活和動感。這與其他動態(tài)視覺元素能夠很好配合，例如視覺差滾動和CSS動畫。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
圖片來源：SpotifyQpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
而且，這些明亮的色彩能作為一種輔助色，用在柔和的背景上。這似乎成為了一種標(biāo)準(zhǔn)的未來趨勢。就像這樣：Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
圖片來源：TakeitQpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
深色背景上的亮色圖片絕對足夠給人留下深刻印象。強(qiáng)烈對比的視覺元素，更是與如今的扁平化趨勢形成完美的配合。通過簡單或夸張的手法來突出事物，其中也包括字體。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
簡單/夸張的字體Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
如今的“扁平”字體通常由單一字體組成，或者是兩種非常接近的字體。這一點(diǎn)造就了易讀、易辨識且默默無聞的字體。這正是關(guān)鍵所在。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
你不希望字體分散注意力。如果字母帶有過多的風(fēng)格與個(gè)性，就會阻礙用戶的閱讀流程。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
圖片來源：CienneQpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
好的做法是“隱形的設(shè)計(jì)”，換句話說，就是做出讓用戶不會注意到的設(shè)計(jì)。因?yàn)槊慨?dāng)他們留意設(shè)計(jì)，就會喪失沉浸式的體驗(yàn)。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
當(dāng)然，你也可以走另一個(gè)極端。在處理極簡式界面時(shí)，你得調(diào)整所加入的元素。在空白背景上使用大的粗體字，可以為界面的文案營造出獨(dú)特的語境。如果界面沒有其他任何視覺元素，你就必須呈現(xiàn)出某種美感，而且能用的也只有字體和顏色。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
圖片來源：TruthlabsQpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
幽靈按鈕Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
要做到漫不經(jīng)心——甚至如空氣般透明——那我們就得花點(diǎn)功夫來談?wù)動撵`按鈕。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
你能一眼就找出下圖中的幽靈按鈕嗎？它們并不顯眼，這正是關(guān)鍵。透明按鈕給用戶一種暗示，導(dǎo)航項(xiàng)未必會從下層的視覺重點(diǎn)上搶奪注意力。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
結(jié)論Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
總而言之，扁平化設(shè)計(jì)的元素與其演化的成果，全在于吸引注意力。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
無論是使用浮夸的背景或焦點(diǎn)圖等視覺元素，還是極力克制，只用文字或?qū)Ш教崾?amp;mdash;—背后思想都是相同的。使用少量元素，按照極簡方式排布，在頁面上創(chuàng)造出對比，正確引導(dǎo)用戶的注意力。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
扁平化是潮流中的先行者。究其原因，是因?yàn)樵O(shè)計(jì)師能夠通過各種方式，在簡單的界面內(nèi)體現(xiàn)多層次的復(fù)雜性。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
我預(yù)料扁平化設(shè)計(jì)會作為一種趨勢，求新求變，持續(xù)演進(jìn)。同時(shí)保持核心的簡潔，使它引領(lǐng)潮流。Qpl北京網(wǎng)站設(shè)計(jì)開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)
