扁平化設計風格帶給受眾的是一種干凈、簡潔的設計情緒。這樣的一種設計風格在扁平化風格出現之前其實已經被大量應用，只是在設計手法上沒有扁平化的設計更加極致。例如下面這個案例，是一個典型的扁平化時代之前的設計，但整體的設計風格與扁平化的風格類似，都是簡潔、干凈的設計風格。其實，如果我們將這個設計中導航條、搜索框等元素中的高光、陰影去除掉，將其中的圖標元素更換為非擬物化的圖標的話，在版式上再變化一下的話，這個設計馬上就可以變為扁平化的設計。

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

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

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

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

根據網站目的和訴求梳理網站信息，這是無論做哪種風格的網站設計都要做的步工作。信息梳理的工作非常重要，它直接關系到一個網站的目標能否達成，佛山網站建設覺得：想想重要的信息由于缺乏整理沒有在頁面的重要位置和視覺方面體現出重要性，無論設計的再美觀，也是無用的。但我們經常所看到的情況卻相反，一個網站的頁被重要不重要的信息塞的滿滿當當，每一個子頁面的內容都要在頁上占據一個位置，什么產品展示、新聞資訊、常見問題、專題活動都出現在頁上，這樣做的結果就是讓次要的信息沖淡了重要信息的比重，信息的主次得不到體現，訪問者瀏覽過網站后似乎什么都看到了，但卻沒有留下深刻的印象。時刻要記住，設計不是為了漂亮，更不是為了炫技，而是為了便捷信息的溝通。信息的梳理工作在扁平化的設計中顯得更加重要，因為扁平化的設計就是要體現簡潔、干凈的特點，頁面上的信息太多，就不太容易做出這樣的視覺風格來。

拿上面HTC手機頁面中的信息來舉例，Logo和導航的內容不用多說，導航作為網站信息組織結構的體現是非常重要的一個元素。HTC是一個生產和銷售手機的企業，那么可想而知，頁上重要的信息當然是新產品的展示，其次是新的專題活動以及特色產品的展示，其他的例如企業新聞、產品支持服務搜索等內容大可不必在頁中出現，因為這些信息相較于前面提到的信息來說，沒有那么重要，完全可以在內頁中體現即可。

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

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

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

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

再往下是頁腳導航和版權信息，這部分的信息不是頁面的重點，只要做到契合整體頁面的設計即可。下圖是我們重新設計后的頁面，對比改版之前的設計，我們就能對扁平化的設計方法有一個大概的了解。

網頁題目：扁平化設計怎么做
轉載源于：http://m.newbst.com/news29/215429.html

成都網站建設公司_創新互聯，為您提供企業建站、品牌網站建設、網頁設計公司、服務器托管、做網站、自適應網站

廣告

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