實(shí)例講解扁平化設計的步驟和要點(diǎn)發(fā)布者：本站     時(shí)間：2020-06-20 14:06:29

自從蘋(píng)果放棄擬物化設計，采用扁平化設計以來(lái)，扁平化設計的龍卷風(fēng)就全面席卷了整個(gè)UI設計界，自此之后，無(wú)論是網(wǎng)頁(yè)還是APP的設計，首要考慮的就是采用扁平化的設計。扁平化的設計似乎成為了有別于擬物化設計的一種全新的設計思維方式，完全顛覆了擬物化的設計風(fēng)格，開(kāi)創(chuàng )了一個(gè)UI設計的新時(shí)代。

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

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

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

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

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

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

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

實(shí)例講解扁平化設計的步驟和要點(diǎn)
二、確定設計方案，具體落實(shí)版式、色彩方案、字體、創(chuàng )意等內容。

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