實(shí)例講解網(wǎng)頁(yè)設(shè)計(jì)扁平化的步驟和要點(diǎn)

自從蘋(píng)果放棄擬物化設(shè)計(jì)，采用扁平化設(shè)計(jì)以來(lái)，扁平化設(shè)計(jì)的龍卷風(fēng)就全面席卷了整個(gè)UI設(shè)計(jì)界，自此之后，無(wú)論是

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

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

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

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

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

我們?nèi)∫幌翲TC的logo的顏色，發(fā)現(xiàn)這個(gè)純度偏低，亮度較高的綠色正符合扁平化的設(shè)計(jì)風(fēng)格，所以直接拿來(lái)用就可以了。在這個(gè)設(shè)計(jì)中，我們依然采用前面設(shè)計(jì)中的配色方案，白色的背景色、logo中的綠色作為主角色，不同層次的灰色作為配角色進(jìn)行設(shè)計(jì)。

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

至此，我們基本可以確定整個(gè)頁(yè)面的感覺(jué)，初步做出來(lái)的設(shè)計(jì)應(yīng)該和下圖類(lèi)似：

接下來(lái)我們進(jìn)一步細(xì)化設(shè)計(jì)方案。banner部分的設(shè)計(jì)是整個(gè)頁(yè)面設(shè)計(jì)的重點(diǎn)。它是整個(gè)頁(yè)面中最重要信息展示區(qū)域，就像我們?cè)谇懊嫣岬降?，這部分區(qū)域應(yīng)該用來(lái)展示最新的產(chǎn)品，所以在banner的創(chuàng)意上我們計(jì)劃將實(shí)實(shí)在在的產(chǎn)品展示出來(lái)。我們選擇了HTC的HTC One M9手機(jī)作為banner部分的視覺(jué)主元素。將其放置于banner區(qū)域，調(diào)整一下色相、亮度，然后再鍵入宣傳語(yǔ)，搭配上相應(yīng)的按鈕和鏈接。

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

再往下是頁(yè)腳導(dǎo)航和版權(quán)信息，這部分的信息不是頁(yè)面的重點(diǎn)，只要做到契合整體頁(yè)面的設(shè)計(jì)即可。

下圖是我們重新設(shè)計(jì)后的頁(yè)面，對(duì)比改版之前的設(shè)計(jì)，我們就能對(duì)扁平化的設(shè)計(jì)方法有一個(gè)大概的了解。

文章名稱(chēng)：實(shí)例講解網(wǎng)頁(yè)設(shè)計(jì)扁平化的步驟和要點(diǎn)
文章源于：http://muchs.cn/news/102099.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、用戶體驗(yàn)、企業(yè)網(wǎng)站制作、微信小程序、企業(yè)建站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)