扁平化設(shè)計(jì)風(fēng)格帶給受眾的是一種干凈、簡(jiǎn)潔的設(shè)計(jì)情緒。這樣的一種設(shè)計(jì)風(fēng)格在扁平化風(fēng)格出現(xiàn)之前其實(shí)已經(jīng)被大量應(yīng)用，只是在設(shè)計(jì)手法上沒有扁平化的設(shè)計(jì)更加極致。例如下面這個(gè)案例，是一個(gè)典型的扁平化時(shí)代之前的設(shè)計(jì)，但整體的設(shè)計(jì)風(fēng)格與扁平化的風(fēng)格類似，都是簡(jiǎn)潔、干凈的設(shè)計(jì)風(fēng)格。其實(shí)，如果我們將這個(gè)設(shè)計(jì)中導(dǎo)航條、搜索框等元素中的高光、陰影去除掉，將其中的圖標(biāo)元素更換為非擬物化的圖標(biāo)的話，在版式上再變化一下的話，這個(gè)設(shè)計(jì)馬上就可以變?yōu)楸馄交脑O(shè)計(jì)。

在深圳網(wǎng)站建設(shè)云梯看來，扁平化的設(shè)計(jì)如此的流行是因?yàn)樗舆m應(yīng)于移動(dòng)終端設(shè)備的小尺寸屏幕。扁平化的設(shè)計(jì)風(fēng)格更加適合在手機(jī)、平板電腦等小屏幕上進(jìn)行操作。但把扁平化的這種優(yōu)勢(shì)放大到能夠顛覆整個(gè)設(shè)計(jì)思維方式的話，無疑是夸大了它的影響。扁平化的設(shè)計(jì)也有它自身的缺陷，如果將其用在稍微復(fù)雜一點(diǎn)的界面中，扁平化設(shè)計(jì)會(huì)帶來很多困擾。因此無論它應(yīng)用的再?gòu)V泛，扁平化也僅僅只是一種風(fēng)格而已，在大尺寸的屏幕上，例如網(wǎng)頁(yè)方面的設(shè)計(jì)，沒有必要都采用扁平化的設(shè)計(jì)。

當(dāng)然，這篇文章并非要對(duì)于扁平化與擬物化的設(shè)計(jì)孰優(yōu)孰劣辯個(gè)是非，相反，作為一種設(shè)計(jì)風(fēng)格，身為UI設(shè)計(jì)師，扁平化的設(shè)計(jì)風(fēng)格如此流行，我們更加應(yīng)該掌握這種設(shè)計(jì)風(fēng)格的特點(diǎn)及表現(xiàn)手法。這篇文章我們就用上面HTC設(shè)計(jì)案例的改版來詳細(xì)分析一下扁平化設(shè)計(jì)風(fēng)格的設(shè)計(jì)要素，掌握扁平化設(shè)計(jì)風(fēng)格的設(shè)計(jì)方法。

那么扁平化的設(shè)計(jì)有哪些設(shè)計(jì)特點(diǎn)，我們又該如何動(dòng)手將這個(gè)設(shè)計(jì)改版為流行的扁平化風(fēng)格呢？我大概梳理了一下，基本的步驟應(yīng)該包括以下幾個(gè)方面：

一、梳理網(wǎng)站信息，剔除非重要的信息。

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

拿上面HTC手機(jī)頁(yè)面中的信息來舉例，Logo和導(dǎo)航的內(nèi)容不用多說，導(dǎo)航作為網(wǎng)站信息組織結(jié)構(gòu)的體現(xiàn)是非常重要的一個(gè)元素。HTC是一個(gè)生產(chǎn)和銷售手機(jī)的企業(yè)，那么可想而知，頁(yè)上重要的信息當(dāng)然是新產(chǎn)品的展示，其次是新的專題活動(dòng)以及特色產(chǎn)品的展示，其他的例如企業(yè)新聞、產(chǎn)品支持服務(wù)搜索等內(nèi)容大可不必在頁(yè)中出現(xiàn)，因?yàn)檫@些信息相較于前面提到的信息來說，沒有那么重要，完全可以在內(nèi)頁(yè)中體現(xiàn)即可。

二、確定設(shè)計(jì)方案，具體落實(shí)版式、色彩方案、字體、創(chuàng)意等內(nèi)容。

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

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

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

再往下是頁(yè)腳導(dǎo)航和版權(quán)信息，這部分的信息不是頁(yè)面的重點(diǎn)，只要做到契合整體頁(yè)面的設(shè)計(jì)即可。下圖是我們重新設(shè)計(jì)后的頁(yè)面，對(duì)比改版之前的設(shè)計(jì)，我們就能對(duì)扁平化的設(shè)計(jì)方法有一個(gè)大概的了解。

http://ezekroy.com/jianzhanzhishi/7555.html 扁平化設(shè)計(jì)怎么做--深圳網(wǎng)站建設(shè)實(shí)際案列教你