在過去的幾年里，扁平化設計以其簡約的畫面、整潔的布局、流暢的加載速度、響應式設計等眾多優(yōu)勢俘虜了一大批粉絲，正逐漸成為網(wǎng)站設計趨勢的主流。這種設計趨勢為什么能極短的時間內迅速發(fā)展壯大?除了以上這些優(yōu)點，還有一項十分重要的因素，那就是扁平化設計一直與時俱進，不斷克服自身的弊端，努力跟上時代的步伐，滿足用戶的需求。早期的扁平化設計強調放棄一切裝飾效果如陰影、漸變、紋理等，重點突出信息本身，這使得網(wǎng)站的視覺效果很是單調，網(wǎng)站的配色方案也比較單一，但在后期發(fā)展過程中，扁平化設計開始突破原有的局限性，積極吸納一些新的、有用的設計元素，有關扁平化設計方面的想法和概念不斷豐富，扁平化設計也開始出現(xiàn)新的類型和分支。在今天，扁平化設計的呈現(xiàn)方式多種多樣，不管你想做一個什么樣的網(wǎng)站，總有幾款扁平化設計能讓你傾心。今天小飛就帶您看一下扁平化設計的發(fā)展歷程以及一些實例，快來一起感受扁平化設計的進擊之旅吧!
早期的扁平化設計 V1.0
在扁平化設計出現(xiàn)以前，人們一直很喜歡擬物化設計，通過逼真的紋理、多樣的漸變以及復雜的細節(jié)營造出3D效果，讓虛擬物更接近于實物，模仿真實事物的外觀。蘋果公司也曾是這種設計風格的忠實支持者之一，它的應用商店和各種設備上圖標都有使用擬物化設計(當然，后期也轉向于扁平化設計)。然而，在2010年，扁平化設計開始向超現(xiàn)實的擬物化設計發(fā)起沖擊。扁平化設計使用棱角分明的線條，讓信息和事物的工作方法以簡單直接的方式呈現(xiàn)出來，這更便于訪客理解。扁平化網(wǎng)站的設計方案也集中在高飽和度的色彩和排版上，而不是大量的圖像，這減少了網(wǎng)站不必要的加載時間。
這就是早期的扁平化設計，強調去除冗余、厚重和繁雜的裝飾效果，避免做出3D效果的元素，使用簡潔風格的圖標，聚焦于抽象、極簡和符號化。但它也有自己的不足。由于強調剝離細節(jié)設計，主要依靠信息本身，在用戶引導方面也并不總是那么順暢;單調的視覺效果和單一配色方案難以滿足大眾的口味。不過事實也證明絕大多數(shù)設計師還是喜歡這種設計趨勢的，這點從它的不斷發(fā)展中就可以看出來?？偠灾?，扁平化設計可能是過去十年里最偉大的和最具革命性的一種設計趨勢。
Material Design [1.0和2.0的中間時代]
Material Design是谷歌為其產(chǎn)品和軟件推出的一種視覺設計語言，是一套設計標準文檔的集合。它吸取了扁平化設計中最精華的部分，同時又添加一些微妙的擬物化元素，比如使用陰影顯示分層，使用動畫引起用戶交互，保證網(wǎng)站的可用性和用戶的互動性。它讓扁平化設計更加開放，一些規(guī)定也沒有早期那么苛刻。
扁平化設計發(fā)展如此迅速背后一個主要的推動力就是Material Design。雖然Material Design 的概念很明確，但它也隨著網(wǎng)站趨勢和用戶需求的改變不斷變化。它可以看作一種設計框架和模板，具有普遍適用性。從某種意義上來說，Material Design可以看做早期的扁平化設計和扁平化2.0的一個過渡，或者說它促進了扁平化設計的進一步演變。不過，Material design畢竟是與谷歌直接聯(lián)系在一起的，在創(chuàng)建一個獨特的網(wǎng)站上面沒有那么有效。
扁平化 2.0
接下來就是扁平化2.0的時代了。扁平化 2.0 這個概念最早來源于設計師 Ryan Allen。扁平化 2.0 是一種演變，而不是一場革命。扁平化2.0只是扁平化設計的一個分支，它給扁平化設計重新賦予了新的內涵，是這個概念沉淀之后逐漸成熟的標志。扁平化 2.0允許設計師打破其原有的強硬規(guī)定，帶來了一些微妙的元素和技巧，如高光強調、漸變、多種色調和色度、陰影效果、多種配色方案。在扁平化中使用微陰影可以增加元素深度，將重要內容從背景中獨立出來，有效傳遞信息;將低調的漸變用于背景色或氛圍色能夠實現(xiàn)元素的過渡，給網(wǎng)站籠罩一種和諧、朦朧感。當然，這些新元素的添加都是適度的，是符合扁平化的美學標準的。也因此，扁平化2.0在易用性和適用性更強，兼顧了設計的美觀和功能性，幾乎可以和任何其他概念一起結合使用，網(wǎng)站的用戶友好度大大提升，扁平化2.0受到很多設計師的歡迎，不少網(wǎng)站都應用了這一設計趨勢。另外，也有一些設計趨勢從扁平化2.0中衍生出來，最流行的可能要數(shù)卡片式設計和分屏式設計了，扁平化這棵大樹的枝干越來越多。
扁平化設計2017
在今天，不少設計師繼續(xù)進行有關扁平化設計的嘗試，在設計手法或細節(jié)處理中又融入了越來越多的想法。扁平化設計進入了一個新的發(fā)展階段，由于這個發(fā)展階段暫時還沒有人命名，小飛姑且稱它為扁平化設計2017，下面是當今扁平化網(wǎng)站中的一些共同特征，這些特征都與扁平化2.0的有所不同，標志著新的發(fā)展階段的到來。下面就一起來看看吧!
元素更趨扁平化
扁平化設計2.0中的按鈕風格和用戶界面元素在今天已經(jīng)不那么適用了?，F(xiàn)在，按鈕的樣式要比以往更加簡單，常常是方形或圓角邊緣的矩形框配以黑白色的文本，網(wǎng)站LOGO和圖標也都采用更加扁平化的風格。各種簡潔的元素再加上一個詳盡的主頁設計，這樣的網(wǎng)站才能脫穎而出。
精簡的導航菜單
由于扁平化設計要求簡潔大方的設計布局，網(wǎng)站的導航菜單也需要更加精簡，這也是為什么隱藏式菜單導航和漢堡圖標開始流行。它們幾乎已經(jīng)成為當前網(wǎng)站的標配，給訪客提供充足的自由，既方便操作也不影響信息的傳遞，還在不同大小的屏幕上也能夠得到很好的呈現(xiàn)。
更廣泛的配色方案
大膽明亮的配色一直是扁平化設計的"寵兒"。在早期扁平化設計中，人們經(jīng)常挑選高飽和度的顏色，而在扁平化2.0時期雙色調配色是比較流行的配色方向。但隨著扁平化設計的進一步發(fā)展，今天網(wǎng)站中使用的配色方案要更加豐富，網(wǎng)站設計師不僅使用明亮、鮮艷的顏色，也會應用暗色系的色彩，比如在主頁使用漸變的色調或疊加圖片等，網(wǎng)頁設計要比以往更加生動活潑。
極簡的主頁設計
以往扁平化設計強調的極簡主要在于網(wǎng)站中的各種元素、圖標等。在2017年，網(wǎng)站的主頁設計也遵循極簡主義。現(xiàn)在的網(wǎng)站主頁更傾向于強調單個行為引導，而不是復雜的元素堆疊。反過來說，就算主頁上的元素再多樣，單個的行為引導也會給訪客留下簡潔、干凈的印象。
精致的排版
當網(wǎng)站中不再使用復雜多樣的元素以后，網(wǎng)頁排版的重要性就凸顯出來了。前面在《巧妙利用排版和布局迅速提升網(wǎng)站顏值》中我們討論過網(wǎng)頁排版有助于強調視覺效果，提高網(wǎng)站可讀性和可用性，還能保持網(wǎng)站元素的一致性。在扁平化設計之中，網(wǎng)頁排版的好處可不僅僅這些，精致的網(wǎng)頁排版還能夠提升網(wǎng)站的設計美感，讓信息內容本身很好的展現(xiàn)。
更少的擬物特效
盡管在今年的扁平化設計之中，設計師確實有使用一些微妙的元素讓網(wǎng)站設計更加豐富，但這并不意味著擬物化設計的回歸。生動、有趣的網(wǎng)站并不總是與擬物化設計掛鉤的，他們與擬物效果有著本質的不同。相反，現(xiàn)在的扁平化設計中使用更少的擬物效果，盡量不營造逼真的效果。
動效與反饋
近些日子，隨著H5/CSS3技術的發(fā)展，動效又重新回歸大熒幕。而在扁平化設計之中，設計師常常將動效與反饋結合在一起，這能更好的引導用戶、同用戶溝通，是如今交互設計和UX設計的關鍵所在。
大量留白
隨著顯示屏幕越來越大(PC端和移動設備都是如此)，設計師在網(wǎng)站中使用大量留白以保持扁平化設計的極簡主義風。與此同時，留白還能夠有效突出網(wǎng)站的關鍵內容。當然咯，留白并不一定非得是白色。如果你對網(wǎng)站中留白手法比較感興趣，可以參閱《少即是多-怎樣在響應式網(wǎng)站中運用"留白"藝術》。
扁平化圖層
毫無裝飾的扁平化圖層看上去也很棒，而且還可以給用戶提供一些額外的信息，它們能成為不同元素的載體，或者單純的營造空間感。分層設計方法就是其中一個代表。
超大的設計元素
超大的字體，超大的圖片，甚至超大的按鈕和圖標，都已經(jīng)不是什么新鮮的設計手法了，它們借助過人的體積感和強有力的對比來制造視覺奇觀，是非常有用的設計技巧。這種設計手法在早期的扁平化設計就有了，只不過現(xiàn)在使用更加頻繁。
扁平化設計一直在不斷進擊，易讀性更高、可用性更強、視覺上更美觀，這也是為什么它能源源不斷迸發(fā)出蓬勃生機。我們在做網(wǎng)站時也是一樣，不要墨守成規(guī)，切實根據(jù)網(wǎng)站自身的特點，尋找符合的模板，運用有效的技巧，讓自己的網(wǎng)站更加出彩。扁平化設計還會一直發(fā)展下去，誰也不知道它最終會成為什么樣，是經(jīng)典不朽還是逐漸淘汰，但不可否認的是現(xiàn)在扁平化設計仍是大家比較擁護的設計趨勢之一。趕緊在自己的網(wǎng)站使用扁平化設計吧!
如果你沒什么想法，不妨來起飛頁看看吧!起飛頁自助建站平臺有不少扁平化設計的模板，這些模板都有著簡潔的元素、圖標，多樣的配色方案，足夠的留白?？靵砥痫w頁自助建站平臺（）做一個扁平化設計的網(wǎng)站吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
