自從蘋果放棄擬物化設計，采用扁平化設計以來，扁平化設計的龍卷風就全面席卷了整個UI設計界，自此之后，無論是

在我看來，扁平化的設計如此的流行是因為它更加適應于移動終端設備的小尺寸屏幕。扁平化的設計風格更加適合在手機、平板電腦等小屏幕上進行操作。但把扁平化的這種優勢放大到能夠顛覆整個設計思維方式的話，無疑是夸大了它的影響。扁平化的設計也有它自身的缺陷，如果將其用在稍微復雜一點的界面中，扁平化設計會帶來很多困擾。因此無論它應用的再廣泛，扁平化也僅僅只是一種風格而已，在大尺寸的屏幕上，例如網頁方面的設計，沒有必要都采用扁平化的設計。

當然，這篇文章并非要對于扁平化與擬物化的設計孰優孰劣辯個是非，相反，作為一種設計風格，身為UI設計師，扁平化的設計風格如此流行，我們更加應該掌握這種設計風格的特點及表現手法。這篇文章我們就用上面HTC設計案例的改版來詳細分析一下扁平化設計風格的設計要素，掌握扁平化設計風格的設計方法。

那么扁平化的設計有哪些設計特點，我們又該如何動手將這個設計改版為流行的扁平化風格呢？我大概梳理了一下，基本的步驟應該包括以下幾個方面：

一、梳理網站信息，剔除非重要的信息。

根據網站目的和訴求梳理網站信息，這是無論做哪種風格的

二、確定設計方案，具體落實版式、色彩方案、字體、創意等內容。

網站的信息確定之后，我們就可以著手來制定更為詳細的設計方案。首先需要確定的是版式，也就是網站的布局。在扁平化風格的設計中，由于設計中常使用特別簡單的元素，所以排版就變得非常重要，成為了設計中出彩的地方。扁平化設計中常見的排版方法是用矩形來劃分頁面中不同的信息區域，例如下面的幾個案例所示，可以看到無論是整體頁面的劃分或者分欄信息的劃分，矩形在其中扮演了非常重要的角色。

以扁平化的設計風格來看，上面HTC首頁的設計導航部分的創意顯得過于復雜，將主要內容固定在一個寬度內的板式看上去也過于小氣，所以我們將目前已有的版式更改為通欄的布局方式。放棄目前導航的設計，將導航文字直接放置于通欄的導航條上，banner部分的設計也做同樣的處理，banner下方是最新的活動信息，各個活動信息區域用矩形劃分開來。

接著需要確定的是色彩方案。在扁平化的設計中，多采用純度低、亮度高的顏色。高亮色彩的使用讓整體的設計風格更加清新?？纯聪旅孢@些案例的設計：

我們取一下HTC的logo的顏色，發現這個純度偏低，亮度較高的綠色正符合扁平化的設計風格，所以直接拿來用就可以了。在這個設計中，我們依然采用前面設計中的配色方案，白色的背景色、logo中的綠色作為主角色，不同層次的灰色作為配角色進行設計。

在設計的質感上，毋庸置疑，我們需要去除掉所有之前設計中擬物化的表現方法。例如高光、陰影、紋理、等等。這也是扁平化設計的概念最核心的地方：去掉所有冗余的裝飾效果。讓“信息”本身重新作為核心被凸顯出來。字體選擇方面，為了契合簡潔、干凈的設計風格，我們采用非襯線字體，微軟雅黑作為正文字體，banner部分的設計可考慮嘗試更為纖細的字體，例如方正蘭亭超細黑簡體。

至此，我們基本可以確定整個頁面的感覺，初步做出來的設計應該和下圖類似：

接下來我們進一步細化設計方案。banner部分的設計是整個頁面設計的重點。它是整個頁面中最重要信息展示區域，就像我們在前面提到的，這部分區域應該用來展示最新的產品，所以在banner的創意上我們計劃將實實在在的產品展示出來。我們選擇了HTC的HTC One M9手機作為banner部分的視覺主元素。將其放置于banner區域，調整一下色相、亮度，然后再鍵入宣傳語，搭配上相應的按鈕和鏈接。

Banner下方的分欄信息部分，我們分別放置了手機配件、HTC如影攝像頭、免費更換服務三個信息欄目，為了讓分欄信息的排版不過于單調，我們將本來的四欄布局更改為三欄布局，將中間欄目的寬度放大，這樣在版式上有所變化，看上去更靈活一些。分欄信息的設計創意全部來自于HTC現有的網站，這里我們不做另外的創意。分欄信息部分的色彩我們通過調整圖片的顏色，保持了以綠色為主色調，輔以灰色搭配的方法，這符合我們本來在頁面色彩方案上的想法。

再往下是頁腳導航和版權信息，這部分的信息不是頁面的重點，只要做到契合整體頁面的設計即可。

下圖是我們重新設計后的頁面，對比改版之前的設計，我們就能對扁平化的設計方法有一個大概的了解。

分享名稱：實例講解網頁設計扁平化的步驟和要點
鏈接URL：http://m.2m8n56k.cn/news49/102099.html

成都網站建設公司_創新互聯，為您提供網站設計公司、小程序開發、網站策劃、企業網站制作、網站設計、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯