從2017年開始，扁平化風(fēng)格網(wǎng)站設(shè)計(jì)美學(xué)正在發(fā)生潤物無聲的細(xì)微變化，微陰影、幽靈按鈕、雙色調(diào)設(shè)計(jì)、低調(diào)漸變等等，今天海淘科技帶你全面認(rèn)識(shí)這2017年扁平化風(fēng)格網(wǎng)站設(shè)計(jì)最新趨勢(shì)，歡迎來到扁平化2.0時(shí)代。

時(shí)至今日，扁平化風(fēng)格已不再是流行一時(shí)的設(shè)計(jì)風(fēng)潮，而是一種美學(xué)風(fēng)格。扁平化大膽的用色，簡(jiǎn)潔明快的界面風(fēng)格一度讓大家耳目一新，當(dāng)它對(duì)元素效果拋棄的如此徹底之際，它又將效果撿起來，改裝成另一番模樣，使得扁平化進(jìn)化為扁平化2.0。

扁平化風(fēng)格網(wǎng)站設(shè)計(jì)是一個(gè)大的范疇。它既包含了極簡(jiǎn)設(shè)計(jì)風(fēng)格和Material Design、微軟的metro風(fēng)格。是相對(duì)之前的蘋果擬物化設(shè)計(jì)風(fēng)格發(fā)展至今的。去除冗余、厚重和繁雜的裝飾效果。而具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來。同時(shí)在設(shè)計(jì)元素上，則強(qiáng)調(diào)了抽象、極簡(jiǎn)和符號(hào)化。更少的按鈕和選項(xiàng)，這樣使得UI界面變得更加干凈整齊，使用起來格外簡(jiǎn)潔，從而帶給用戶更加良好的操作體驗(yàn)。

扁平化設(shè)計(jì)特質(zhì)

扁平化所追隨的細(xì)節(jié)依然不變，然而這些“規(guī)范”開始松懈了。隨著扁平化進(jìn)化到2.0時(shí)代，我們?cè)賮砜纯?017年，有哪些是扁平化設(shè)計(jì)以前從未有的。

為了避免純粹的扁平化設(shè)計(jì)，一些細(xì)微的效果逐漸被運(yùn)用其中。

扁平化歷來被人所詬病的方面即交互不夠明顯，按鈕難以找到等。現(xiàn)在這些問題都可以通過增加一些小小的效果而得以解決。但這些效果的運(yùn)用也是符合扁平化的簡(jiǎn)潔美學(xué)的。

優(yōu)點(diǎn)

1、界面美觀、簡(jiǎn)約大方、條理清晰

2、設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡(jiǎn)、符號(hào)化，去除冗余的裝飾效果突顯App的文字圖片等信息內(nèi)容。

3、完美兼容pc網(wǎng)站、安卓、ios等不同系統(tǒng)的平臺(tái)和不同屏幕分辨率的設(shè)備，適應(yīng)性強(qiáng)。

一、動(dòng)態(tài)要素

更多的視頻和動(dòng)畫特效的運(yùn)用，使得扁平化更加生動(dòng)活潑。然而這些讓網(wǎng)頁看起來更生動(dòng)的手段，無一獨(dú)立于整體頁面的風(fēng)格而獨(dú)立存在。它們依然是簡(jiǎn)潔的，符合網(wǎng)站整體的審美方向的。

與其把新趨勢(shì)看作是一種方向，不如將其視為過程。扁平化的未來還需要在此基礎(chǔ)上不斷發(fā)展新的創(chuàng)意。

二、雙色搭配

早期的扁平化配色是非常鮮艷大膽的，它可以在高飽和度中挑選六到七種顏色進(jìn)行搭配。如今，扁平化設(shè)計(jì)的配色選擇雖然仍然朝明亮大膽的方向走，但只局限于有限的顏色選擇，雙色調(diào)配色是目前逐漸流行起來的另一種配色方向。

大家都知道通過配圖來強(qiáng)調(diào)配色。最初的扁平化的設(shè)計(jì)，只有十分有限的素材資源，因此色彩的選擇相對(duì)也有限。近來，扁平化項(xiàng)目包含了大量的影像。由于這一轉(zhuǎn)變，就能從眾多明亮或鮮艷的色系中進(jìn)行選擇配色。

三、幽靈按鈕

這不是指一個(gè)幽靈形狀的按鈕。恰恰相反，這類按鈕的形狀非常簡(jiǎn)單，僅僅是一個(gè)矩形或一個(gè)圓角矩形的邊框，內(nèi)部為透明?？瓷先ト粲腥魺o，類似于幽靈的出沒方式。

也許你已經(jīng)在很多扁平化設(shè)計(jì)風(fēng)格中見過它們了。它們通常會(huì)設(shè)計(jì)得比普通的按鈕略大，浮動(dòng)于大圖背景、視頻的上方。你可以在飽覽整張圖片或整個(gè)視頻的同時(shí)也能看到它的存在，為了讓它獲得聚焦，通常它位于比較顯眼的位置，例如屏幕的中間。

幽靈按鈕的顏色通常為黑或白，這是因?yàn)樗枰椭車h(huán)境所協(xié)調(diào)。如果可以，試試別的色彩也未嘗不可。例如無色的黑白圖片搭配有色的幽靈按鈕。

同時(shí)，也需要注意，與幽靈按鈕搭配的也多半是無襯線的字體，中文也是細(xì)黑等類似的字體。這樣就讓按鈕和其字體都在外觀上取得一致性。

四、微陰影

微陰影，就是極其微弱的投影，這是一種幾乎不被人所立刻察覺的投影，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意。但在使用這一效果時(shí)候需要注意，要讓它保持柔和感和隱蔽性。

利用元素的形狀，使其從背景中獨(dú)立出來。即使元素與背景有著同樣的顏色，依然可以通過微陰影加以區(qū)分，而視覺上還能保持色調(diào)一致的簡(jiǎn)潔性。

有人這時(shí)會(huì)提到長陰影，但長陰影通常運(yùn)用的地方只是在LOGO、圖標(biāo)等元素的內(nèi)部，它是扁平化的一種設(shè)計(jì)風(fēng)格的延伸。

五、低調(diào)漸變

談到避免極端的扁平主義，漸變的運(yùn)用就有回暖之勢(shì)。而新的漸變不同以往，它往往是以更為低調(diào)的姿態(tài)出現(xiàn)的，比如只用于背景色或氛圍色，不再喧兵奪主，并且只在兩種顏色之間漸變過渡。下面是雙色漸變的實(shí)例。

可以看出這一案例中，網(wǎng)頁已經(jīng)讓漸變成為了一種設(shè)計(jì)元素。霸占整個(gè)屏幕的圖片充滿震撼，而讓其也參與到過度的漸變中，讓圖片散發(fā)出霓虹燈一樣的效果，搭配幽靈按鈕，這幾乎是信手拈來的絕佳創(chuàng)意。

六、圓形

毫無疑問，扁平化設(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)用了。扁平化中圓形的元素越來越多，可以說圓形在移動(dòng)端的優(yōu)勢(shì)是特別明顯的。由于圓形很好的模擬了手指印，因此一個(gè)圓的存在看似就是一個(gè)可觸的地方。這對(duì)于喚起用戶的操作發(fā)揮了極大的作用。

由于圓形本身的特殊性，使它極易從背景中分離出來，因此將重要的元素設(shè)計(jì)為圓形也是心機(jī)滿滿。例如下面這家餐廳的網(wǎng)頁設(shè)計(jì)，圓形本身具有一種親和感，非常契合餐廳這類溫馨休閑的品牌氛圍。

七、無形的設(shè)計(jì)

刪除不必要的風(fēng)格，實(shí)踐“無形設(shè)計(jì)”更好的方式，就是選擇你的用戶無法察覺的設(shè)計(jì)。因?yàn)槊棵坑脩粼皆陉P(guān)注設(shè)計(jì)上花費(fèi)時(shí)間，那就越會(huì)降低用戶的沉浸式體驗(yàn)。你的目標(biāo)就是幫助用戶快速而簡(jiǎn)單地理解特定操作和信息。因此，你的設(shè)計(jì)應(yīng)該卸下視覺元素，去暴露出他們必要的功能性。

八、鮮艷的顏色

顏色是凸顯扁平化設(shè)計(jì)效果的主要部分，顏色占了扁平化設(shè)計(jì)的很大比重，它基本上奠定了你的頁面或是應(yīng)用的整個(gè)基調(diào)。扁平化設(shè)計(jì)的調(diào)色板通常更加明亮，也比其他應(yīng)用或是頁面更加多彩。

當(dāng)需要選擇你的扁平化風(fēng)格設(shè)計(jì)時(shí)，最好使用輕微低飽和的顏色，因?yàn)樗麄儠?huì)提升你頁面的審美，而不會(huì)讓你的用戶因?yàn)轫撁孢^亮而視覺疲勞。柔軟的色彩可以給你的頁面帶來有風(fēng)格的視覺元素，同時(shí)不會(huì)奪走頁面本身需要傳遞的信息。明亮的顏色可以在柔和沉穩(wěn)的背景中起到腔調(diào)作用。往往暗色背景下的明亮圖片可以給人以意想不到的印象。

同時(shí)，保證你UI中的顏色對(duì)于你的用戶來說是可以察覺的，這是一個(gè)優(yōu)秀執(zhí)行的視覺設(shè)計(jì)中很重要的一部分。測(cè)試你的調(diào)色盤，來保證你有足夠的色彩對(duì)比度。

九、關(guān)注排版設(shè)計(jì)

為焦點(diǎn)審美設(shè)計(jì)，字體需要告知用戶在頁面上什么是最重要的，以及怎樣使用這樣的設(shè)計(jì)。最好使用簡(jiǎn)單的字體，因?yàn)檫@能更簡(jiǎn)單的閱讀和載入，而不是張揚(yáng)一個(gè)極簡(jiǎn)主義風(fēng)格的重要性。簡(jiǎn)單的字體傳達(dá)著自信和條理。

小提示：

考慮一個(gè)有著大量變體和字重的簡(jiǎn)單的無襯線字體組，作為使用扁平化設(shè)計(jì)的頁面基礎(chǔ)排版。這樣的字體組可以帶來簡(jiǎn)潔、新鮮、前衛(wèi)的感覺。

字體的調(diào)性要適應(yīng)總體的設(shè)計(jì)規(guī)范。一個(gè)簡(jiǎn)潔設(shè)計(jì)上使用一個(gè)高度美化的字體可能會(huì)看起來很怪

1、動(dòng)效

動(dòng)效讓扁平化設(shè)計(jì)更加以用戶為中心，扁平的視覺簡(jiǎn)潔性可以與動(dòng)效很好的作用。當(dāng)用戶與你的應(yīng)用或是站點(diǎn)互動(dòng)時(shí)，他們可能會(huì)提以下幾個(gè)問題

1. 這里什么是最重要的
2. 我接下來怎么知道該怎么做
3. 我應(yīng)該怎么指導(dǎo)我已經(jīng)完成了我的任務(wù)?

這樣的問題可能揭示了使用動(dòng)效去提升用戶體驗(yàn)的動(dòng)機(jī)。動(dòng)效充分利用了被感知的用戶體驗(yàn)，并回答了這些問題

1. 它吸引用戶的注意，如果用戶完成了某次點(diǎn)擊或者手勢(shì)，它會(huì)暗示接下來會(huì)發(fā)生什么。
2. 它幫助你在界面中定位用戶，并提供視圖間的引導(dǎo)焦點(diǎn)。
3. 它提供一個(gè)視覺的反饋

以動(dòng)效為基礎(chǔ)的設(shè)計(jì)元素可以以多種形式展現(xiàn)，包括變換，動(dòng)畫，甚至通過紋理來模擬3D深度。動(dòng)效讓我與交互過程更好的交流，讓用戶更好的理解他們

2、插圖

插圖是扁平化網(wǎng)站設(shè)計(jì)很棒的擴(kuò)充隨著扁平化設(shè)計(jì)風(fēng)格變得更加多層，它自然而然的就結(jié)合了更多的插圖圖片遠(yuǎn)比文字能夠訴說更多，同時(shí)讓體驗(yàn)更加快速。合理的插圖可以將晦澀的概念變?yōu)楹?jiǎn)單易懂的視覺。

總而言之，扁平化網(wǎng)站設(shè)計(jì)的元素與其演化的成果，全在于吸引注意力。無論是使用浮夸的背景或焦點(diǎn)圖等視覺元素，還是極力克制，只用文字或?qū)Ш教崾尽澈笏枷攵际窍嗤?。使用少量元素，按照極簡(jiǎn)方式排布，在頁面上創(chuàng)造出對(duì)比，正確引導(dǎo)用戶的注意力。

以上就是《2017年扁平化風(fēng)格網(wǎng)站設(shè)計(jì)最新趨勢(shì)》，更多精彩，點(diǎn)擊《優(yōu)秀的網(wǎng)頁設(shè)計(jì)/網(wǎng)頁界面設(shè)計(jì)欣賞》，了解更多。