網(wǎng)站建設中偏平化的五種方法發(fā)布者：本站     時(shí)間：2021-02-14 11:02:56

扁平化的浪潮似乎在一夜之間席卷了設計界，但其實(shí)扁平化并不是什么新鮮事物。對于網(wǎng)站設計而言，扁平化設計實(shí)用且好用。扁平化設計 2.0 中平衡了實(shí)用性與美觀(guān)性，其背后的設計哲學(xué)使其擁有長(cháng)久的生命力。

扁平化改變了什么？究竟有什么魔力？讓我們揭開(kāi)扁平化設計的神秘面紗，看看其卓越之處，分析其技術(shù)核心，并探討哪些技術(shù)將薪火相傳。

延伸閱讀：做好扁平化設計的5個(gè)技巧

扁平化設計最早可追溯到瑞士極簡(jiǎn)設計風(fēng)格（也叫國際主義平面設計風(fēng)格），網(wǎng)站建設中扁平化設計在保留了舊有范式的同時(shí)又創(chuàng )造出了新的東西。把扁平化設計的五個(gè)元素剝離出來(lái)，從這五方面我們可以看出扁平化的真正奧義。

1. 長(cháng)陰影
在按鍵等大多數 UI 設計元素中，長(cháng)陰影常常伴隨亮色調的控件出現。

55a38218f13f3

陰影常常比較寬，且以 45 度角傾斜，鋒利的邊角使其一眼可辨。對陰影恰到好處的應用可以起強調作用并使扁平的圖標更具立體感。

然而，這種長(cháng)陰影有逐漸被淡雅的陰影取代的趨勢。拭目以待更短的陰影效果在未來(lái)的表現。

2. 亮色調
有趣的是，扁平化設計的出現使得大膽靚麗的色彩運用得以重生。設計師們比以前更多地運用了有趣又充滿(mǎn)活力的顏色。

55a38219749a7

事實(shí)上，一些設計師們甚至建立了專(zhuān)門(mén)的網(wǎng)站用以展示他們獨特的配色方案。

3. 簡(jiǎn)化排版
說(shuō)到排版，扁平化的排版不僅僅是把字體替換成無(wú)襯線(xiàn)的 Helvetica 或黑體。

當然，扁平化的排版應采用簡(jiǎn)單易讀的字體，這意味著(zhù)無(wú)襯線(xiàn)和等寬字體稱(chēng)為必然選擇。最好的字體應該讓人將注意力集中到內容本身。

55a38219e404d

盡管字體設計也是藝術(shù)的一種，設計師們應該把可讀性放在第一位。扁平化設計使設計師們更加注重字體的選擇。甚至襯線(xiàn)字體也被簡(jiǎn)化。

4. 虛擬按鍵
透明且可點(diǎn)擊的虛擬按鍵，在提供了可視化的交互方塊的同時(shí)又不會(huì )遮擋住 UI 設計。

55a3821a669ca

虛擬按鍵由于透明，簡(jiǎn)潔的特性，并不會(huì )吸引太多注意力。起初，虛擬按鍵以擬物設計革命者的姿態(tài)出現，其后在形狀與細節等方面有了長(cháng)足的進(jìn)步。虛擬按鍵與扁平化設計相輔相成，構成了極簡(jiǎn)與抽象的設計風(fēng)格。

5. 極簡(jiǎn)與抽象
扁平化設計天生就是極簡(jiǎn)的。當設計的靈感并非來(lái)源于現實(shí)生活，擬物化的設計質(zhì)感就理所應當被拋棄。

那么，剩下的就是用顏色，漸變，陰影，形狀，和其他視覺(jué)細微之處的框架內容。扁平設計在本質(zhì)上，迫使設計師更具創(chuàng )造性 —— 設計服務(wù)于內容呈現，而不是真實(shí)感的呈現。

55a3821b2cb6e

極簡(jiǎn)主義的概念并不新鮮，但它因其潔凈美觀(guān)和網(wǎng)站的性能優(yōu)勢（如降低網(wǎng)頁(yè)加載時(shí)間）最近又開(kāi)始流行 。這隨著(zhù)扁平化設計重生，并使用了鮮艷的背景，簡(jiǎn)單的設計，并演變成大量留白的更簡(jiǎn)單的設計。

展望
扁平化設計最初的概念是用一個(gè)個(gè)沒(méi)有特征且清晰可辨的方塊呈現設計框架。但在與其他流行的設計語(yǔ)言融合之后，扁平化設計本身已經(jīng)發(fā)生了巨大改變。

扁平化設計一夜之間成為業(yè)界潮流，但它的發(fā)展成熟無(wú)疑還需要一些時(shí)日。扁平化設計的早期形式非常激進(jìn)的想要做出與擬物化渭涇分明的極簡(jiǎn)設計，但現在的扁平化設計逐漸加上了修飾與質(zhì)感。

讓我們看看出自設計師Ryan Allen的近乎扁平化設計(Almost Flat)或稱(chēng)扁平化設計2.0。

55a3825cc4a81

55a3825d484f8

大多數精美的近乎扁平化設計設計運用在網(wǎng)頁(yè)領(lǐng)域，運用“視差滾動(dòng)”可以在一個(gè)屏幕中顯示豐富的內容。

Canal TP 公司運用如字體與色調等簡(jiǎn)單的特色，與動(dòng)畫(huà)加上視差滾動(dòng)相結合，使兩種范式偉大結合。這種搭配有助于消除過(guò)分簡(jiǎn)單的扁平化帶來(lái)的副作用，使其更實(shí)用且適用于內容復雜的站點(diǎn)。

55a3829db174d

扁平化設計不會(huì )過(guò)快消失，只是會(huì )增加動(dòng)畫(huà)與交互設計，以適應更加復雜的網(wǎng)站。眾所周知，“設計追隨內容”，扁平化則是呈現內容的最佳設計范式。

55a3829e58eb5

網(wǎng)頁(yè)設計以實(shí)用為第一追求，每一個(gè)按鍵，點(diǎn)擊與滑動(dòng)都應該有明確功能與視覺(jué)反饋。最重要的是，UI 控件需要有統一的風(fēng)格，讓用戶(hù)忽略頁(yè)面與設備的差異。這些基礎控件將被提取出各自特點(diǎn)構成扁平化的圖標。

看看「漢堡包式菜單按鈕」的出現——無(wú)論你是否同意這種做法，無(wú)疑，現在其已經(jīng)成為司空見(jiàn)慣的導航符號。

55a382ea9ff65

扁平化設計也在漸漸加入其他細節。

許多扁平化設計或近乎扁平化設計的網(wǎng)站包含大量圖片，這在傳統網(wǎng)站上是很少見(jiàn)的。扁平化的配色及排版與圖片完美結合，這不需要對圖片有太多修飾就可以獲得現代化的風(fēng)格。

比如，有些網(wǎng)站運用近乎扁平化設計設計風(fēng)格，在網(wǎng)頁(yè)中采用深色背景圖片，扁平化的按鈕，導航及字體，令網(wǎng)站非常直觀(guān)簡(jiǎn)潔，現代且易用。

正如設計師Wells Riley所建議的，經(jīng)常審視你設計的實(shí)用性與易用性。美感只是設計的另一個(gè)維度，真正目的是解決用戶(hù)需求。

后記
扁平化設計實(shí)際上并沒(méi)有公認的量化標準。它作為設計元素的一種可以運用在各種更高層次的設計體系之中。將扁平化的設計元素嵌入各種設計之中常常有意想不到的驚喜，例如一個(gè)有過(guò)多內容的網(wǎng)站，可以適當運用扁平化設計元素以適應傳統的平面設計方案。