實(shí)例解析扁平化設(shè)計(jì)的要點(diǎn)

時(shí)間：2022-05-29 08:45:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-29 08:45:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

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

扁平化的設(shè)計(jì)似乎成為了有別于擬物化設(shè)計(jì)的一種全新的設(shè)計(jì)思維方式，完全顛覆了擬物化的設(shè)計(jì)風(fēng)格，開創(chuàng)了一個(gè)UI設(shè)計(jì)的新時(shí)代。

扁平化設(shè)計(jì)風(fēng)格帶給受眾的是一種干凈、簡(jiǎn)潔的設(shè)計(jì)情緒。這樣的一種設(shè)計(jì)風(fēng)格在扁平化風(fēng)格出現(xiàn)之前其實(shí)已經(jīng)被大量應(yīng)用，只是在設(shè)計(jì)手法上沒(méi)有扁平化的設(shè)計(jì)更加極致。

在我看來(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)手法。

1、設(shè)計(jì)之前的準(zhǔn)備

任何項(xiàng)目都一樣，第一步是先確保自己選定的樣式合理，在開始進(jìn)行扁平化設(shè)計(jì)之前，要先保證自己的設(shè)計(jì)符合目標(biāo)用戶的感覺(jué)以及目標(biāo)平臺(tái)、設(shè)備和應(yīng)用類型，如果不適合你的項(xiàng)目情況，那緊跟潮流也沒(méi)有意義。

不管你要采用哪種樣式風(fēng)格，遵循流程都是非常重要的，在億企邦看來(lái)，下面的幾個(gè)建議可以幫助你實(shí)現(xiàn)簡(jiǎn)約效果。

（1）、在設(shè)計(jì)最簡(jiǎn)化界面時(shí)，我一般會(huì)從PC機(jī)出現(xiàn)前的時(shí)代尋找靈感，那時(shí)的設(shè)計(jì)師和藝術(shù)家往往需要做到“多快好省”。接這個(gè)機(jī)會(huì)你可以重新探訪一下過(guò)去的很多優(yōu)秀設(shè)計(jì)，例如：Josef Müller-Brockmann和Wim Crouwel。另外，我還會(huì)看向Ellsworth Kelly等極簡(jiǎn)主義畫家，Mies van der Rohe等建筑家和Dieter Rams等工業(yè)設(shè)計(jì)師。

（2）、暫時(shí)脫離工作也很有幫助。扁平化和最簡(jiǎn)化設(shè)計(jì)的核心就在于細(xì)微之處，所以，短暫休息后帶著新的眼光重新回到工作中有時(shí)反而比一味苦心琢磨要更有效用。

（3）、將不同版本毗鄰比較也很有用。在將一條輸入線上下5個(gè)像素來(lái)回倒騰了20分鐘之后，我會(huì)保留下兩個(gè)不同版本進(jìn)行比較，這樣孰優(yōu)孰劣馬上見分曉。

（4）、由于物體的相對(duì)大小具有著非常關(guān)鍵的意義，因此你需要盡早開始在不同種類的設(shè)備上檢視設(shè)計(jì)理念，以便確定其是否合適。

（5）、在工作的同時(shí)，經(jīng)常自問(wèn)：“我是否真的需要這個(gè)?”人總是很容易對(duì)自己鐘意的東西念念不舍，但我們還必須頻繁地找出要砍掉或者簡(jiǎn)化的內(nèi)容，拋棄自己費(fèi)盡心思做出來(lái)的東西不容易，但編輯取舍也是必須的。

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

根據(jù)網(wǎng)站目的和訴求梳理網(wǎng)站信息，這是無(wú)論做哪種風(fēng)格的網(wǎng)站設(shè)計(jì)都要做的第一步工作。

信息梳理的工作非常重要，它直接關(guān)系到一個(gè)網(wǎng)站的目標(biāo)能否達(dá)成，想想最重要的信息由于缺乏整理沒(méi)有在頁(yè)面的重要位置和視覺(jué)方面體現(xiàn)出重要性，無(wú)論設(shè)計(jì)的再美觀，也是無(wú)用的。但我們經(jīng)常所看到的情況卻相反，一個(gè)網(wǎng)站的首頁(yè)被重要不重要的信息塞的滿滿當(dāng)當(dāng)，每一個(gè)子頁(yè)面的內(nèi)容都要在首頁(yè)上占據(jù)一個(gè)位置，什么產(chǎn)品展示、新聞資訊、常見問(wèn)題、專題活動(dòng)都出現(xiàn)在首頁(yè)上，這樣做的結(jié)果就是讓次要的信息沖淡了重要信息的比重，信息的主次得不到體現(xiàn)，訪問(wèn)者瀏覽過(guò)網(wǎng)站后似乎什么都看到了，但卻沒(méi)有留下深刻的印象。

例如上面這個(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ì)。

在此，億企邦提醒各位要時(shí)刻要記住，設(shè)計(jì)不是為了漂亮，更不是為了炫技，而是為了便捷信息的溝通。信息的梳理工作在扁平化的設(shè)計(jì)中顯得更加重要，因?yàn)楸馄交脑O(shè)計(jì)就是要體現(xiàn)簡(jiǎn)潔、干凈的特點(diǎn)，頁(yè)面上的信息太多，就不太容易做出這樣的視覺(jué)風(fēng)格來(lái)。

拿上面頁(yè)面中的信息來(lái)舉例，Logo和導(dǎo)航的內(nèi)容不用多說(shuō)，導(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)檫@些信息相較于前面提到的信息來(lái)說(shuō)，沒(méi)有那么重要，完全可以在內(nèi)頁(yè)中體現(xiàn)即可。

3、簡(jiǎn)約是金

雖然傳統(tǒng)的軟件開發(fā)商比較喜歡在產(chǎn)品中加入大量功能作為高售價(jià)的借口，但是朝著集中化微應(yīng)用轉(zhuǎn)變的風(fēng)潮卻更傾向于使用簡(jiǎn)單代替多樣化的功能組合，應(yīng)用越簡(jiǎn)單，界面也就越簡(jiǎn)單（具體可查看億企邦《如何使簡(jiǎn)單的設(shè)計(jì)變得更為簡(jiǎn)單》的相關(guān)介紹）。

4、內(nèi)容為王

每當(dāng)有新設(shè)備和技術(shù)進(jìn)入市場(chǎng)之時(shí)，其功能和推動(dòng)交互發(fā)展的程度總會(huì)讓我們?yōu)橹裕^界面所帶來(lái)的迷亂之后，我們一般都會(huì)將注意力重新集中到內(nèi)容上去。不論是文字、音頻還是視頻，對(duì)媒體內(nèi)容的攝入大概是我們使用設(shè)備時(shí)的最主要活動(dòng)，而在這種情況下，我們需要保證界面不會(huì)影響我們的攝入過(guò)程。

5、技術(shù)精通

隨著智能手機(jī)和平板快速普及各種用戶，業(yè)界對(duì)其控制方式顯見性的顧慮日漸消退，盡管一度曾經(jīng)擔(dān)心用戶會(huì)難以看見不顯眼的按鈕，但現(xiàn)在我們卻更愿意探索較為細(xì)微的交互內(nèi)容。


Fitbit的控制面板界面在視覺(jué)上表現(xiàn)明亮、大膽而且簡(jiǎn)單好用

Windows 8和Chrome for Android甚至還支持在沒(méi)有視覺(jué)提示的情況下通過(guò)觸摸命令點(diǎn)亮屏幕。

6、技術(shù)的影響

大部分軟件都會(huì)受限于所運(yùn)行的平臺(tái)，屏幕尺寸和像素密度是硬件方面的限制因素，較小的界面大大限制了設(shè)計(jì)調(diào)色板的范圍，也就意味著界面上的每個(gè)元素都要具有自己的表現(xiàn)力。

文字規(guī)模和字體大小將在很大程度上決定扁平化設(shè)計(jì)的美感和可用性。

如果你的目標(biāo)設(shè)備無(wú)法體現(xiàn)出細(xì)微到這種程度的差別，那算你運(yùn)氣好，隨著移動(dòng)設(shè)備的屏幕尺寸和像素密度不斷提高，以后更薄更小的設(shè)備將能實(shí)現(xiàn)更高的清晰度。

7、響應(yīng)式設(shè)計(jì)

隨著各種尺寸可聯(lián)網(wǎng)設(shè)備的普及，UI受大勢(shì)所趨而務(wù)求更加流暢，而與之相應(yīng)的，就是響應(yīng)式設(shè)計(jì)風(fēng)潮。盡管響應(yīng)式設(shè)計(jì)不需要特別的美學(xué)，但也可以說(shuō)扁平化UI相比其他風(fēng)格來(lái)說(shuō)能夠更易于輔助響應(yīng)式設(shè)計(jì)的美觀。

最簡(jiǎn)化設(shè)計(jì)的另一優(yōu)勢(shì)在于能夠降低頁(yè)面重量從而減少加載時(shí)間（具體可查看億企邦《響應(yīng)式設(shè)計(jì)時(shí)代該如何進(jìn)行網(wǎng)站設(shè)計(jì)》的相關(guān)介紹）。

8、網(wǎng)格

網(wǎng)格在界面設(shè)計(jì)中扮演著非常關(guān)鍵的角色，絕無(wú)例外，在你拿著一套受限制的視覺(jué)元素，努力想確定其各自順序并讓使用方式更加直觀時(shí)，網(wǎng)格能夠帶來(lái)很大幫助。

網(wǎng)格所確定的，不僅僅是視覺(jué)順序，你還可以用它來(lái)界定內(nèi)容和功能組，有時(shí)候要將一組物體分組不一定非要用到線條或者方框，簡(jiǎn)單的對(duì)其和空間調(diào)整往往能幫助用戶理解界面的結(jié)構(gòu)。

你也可以嘗試使用具有特定重要意義的元素打破網(wǎng)格來(lái)吸引用戶的注意力。


Live School Rossul Design 開發(fā)的iPad應(yīng)用

嘗試使用一下密度比較高的網(wǎng)格，在大幅簡(jiǎn)化視覺(jué)調(diào)色板時(shí)，你可能會(huì)發(fā)現(xiàn)你的設(shè)計(jì)能夠支持更為復(fù)雜的結(jié)構(gòu)，同時(shí)看起來(lái)也不會(huì)顯得凌亂，你也可以試試看僅通過(guò)位置調(diào)整能夠傳達(dá)出哪些額外的訊息。

9、色彩

顏色毫無(wú)疑問(wèn)是視覺(jué)設(shè)計(jì)中的一個(gè)關(guān)鍵組成部分，對(duì)于最簡(jiǎn)化界面來(lái)說(shuō)，其所具有的意義更加關(guān)鍵（具體可查看億企邦《基于網(wǎng)站色彩設(shè)計(jì)對(duì)用戶體驗(yàn)影響的研究》的相關(guān)介紹）。

考慮更為寬泛的調(diào)色板，個(gè)人來(lái)說(shuō)，我覺(jué)得范圍比較窄小的調(diào)色板通常能創(chuàng)造出比較功能化的界面，想創(chuàng)造出讓人眼花繚亂的繽紛色彩非常簡(jiǎn)單，但通過(guò)下面這種方法，你可以大大拓展一下選擇范圍，而且，考慮到待設(shè)計(jì)元素的數(shù)量很少，擴(kuò)展調(diào)色板還能給你帶來(lái)很良好的感覺(jué)。


TriplAgent 的視覺(jué)設(shè)計(jì)采用了絕妙的配色方案

在設(shè)定調(diào)色板時(shí)，可以在一個(gè)比較寬泛的色值范圍內(nèi)對(duì)選定的色調(diào)進(jìn)行測(cè)試，并確保其在亮色和暗色下表現(xiàn)都合適。

對(duì)此，億企邦建議分別試驗(yàn)一下同系配色及鮮明對(duì)比，早期對(duì)調(diào)色板進(jìn)行試驗(yàn)將保證你在接下來(lái)能夠掌握微妙和強(qiáng)對(duì)比元素所需的全部配色范圍。

10、文字

在扁平化內(nèi)容驅(qū)動(dòng)網(wǎng)站上，文字是主角。

襯線體無(wú)疑是個(gè)辦法，但無(wú)襯線字體卻能讓人感到更為簡(jiǎn)潔。

你可以找一個(gè)粗細(xì)和樣式種類比較多的字體類型，雖然不一定全用的上，但比較寬泛的選擇范圍有助于更為鮮明地界定層次結(jié)構(gòu)，你也可能會(huì)發(fā)現(xiàn)某個(gè)粗細(xì)度在某個(gè)特定環(huán)境下效果更佳。


Siteleaf上清爽易讀的文字

不要怕使用大小粗細(xì)走極端的字體搭配來(lái)構(gòu)建視覺(jué)順序，嘗試使用超大超細(xì)的標(biāo)題字體搭配小號(hào)中等粗細(xì)的正文字體（具體可查看億企邦《基于頁(yè)面易讀性的文字編排設(shè)計(jì)要點(diǎn)》的相關(guān)介紹）。

注意字體是否易于辨認(rèn)閱讀。這一點(diǎn)雖然聽起來(lái)有點(diǎn)無(wú)厘頭，但你對(duì)自己所選定字體的依仗將是很強(qiáng)烈的，所以一定要保證其在任何尺寸小均易于辨認(rèn)。

11、交互

在扁平化UI中，要表現(xiàn)出哪些元素可交互是個(gè)有學(xué)問(wèn)的活，下面是我常用的一些方法。

對(duì)比如果布局內(nèi)容中大部分為白色，那可以給交互元素添加一定其他色彩。如果你的設(shè)計(jì)以文字為主，可以使用簡(jiǎn)單的圖標(biāo)表示交互；如果標(biāo)題比較大而且全部為小寫字母，那么鏈接部分可以做小一點(diǎn)并使用大寫字母。

常規(guī)的位置安放方法也能起到作用，比方說(shuō)你的后退箭頭使用細(xì)V形表示，可以將其放置到左上角，因?yàn)橛脩粢话銜?huì)到這個(gè)位置找后退按鈕。

隨著頁(yè)面上疊加內(nèi)容的增加，我們無(wú)法將所有可交互元素都做成按鈕的樣子，界面應(yīng)盡量直觀，但如果交互過(guò)程比較復(fù)雜或有違常規(guī)，則應(yīng)提供方便的錯(cuò)誤恢復(fù)方法。

下拉菜單、模擬窗口、彈出式窗口及其他層疊元素對(duì)于扁平化設(shè)計(jì)來(lái)說(shuō)操作起來(lái)比較麻煩，你可以采用鮮明的對(duì)比、邊框或著色區(qū)分不同的交互層級(jí)（具體可查看億企邦《基于交互體驗(yàn)的扁平化設(shè)計(jì)要點(diǎn)》的相關(guān)介紹）。

12、落實(shí)設(shè)計(jì)方案

網(wǎng)站的信息確定之后，我們就可以著手來(lái)制定更為詳細(xì)的設(shè)計(jì)方案，具體落實(shí)版式、色彩方案、字體、創(chuàng)意等內(nèi)容。

首先需要確定的是版式，也就是網(wǎng)站的布局。在扁平化風(fēng)格的設(shè)計(jì)中，由于設(shè)計(jì)中常使用特別簡(jiǎn)單的元素，所以排版就變得非常重要，成為了設(shè)計(jì)中出彩的地方。

扁平化設(shè)計(jì)中常見的排版方法是用矩形來(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ū)域用矩形劃分開來(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)我們進(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ì)即可。

億企邦點(diǎn)評(píng)：

在設(shè)計(jì)領(lǐng)域沒(méi)有一成不變的規(guī)范，在這個(gè)互聯(lián)互通、信息豐裕、功能豐富的數(shù)字時(shí)代，最簡(jiǎn)化設(shè)計(jì)廣泛的復(fù)興讓人眼前一亮，這自然不會(huì)是無(wú)所不能的解決方案，但只要經(jīng)過(guò)深思熟慮和恰當(dāng)?shù)膽?yīng)用，其能夠?qū)崿F(xiàn)既好用，有舒適的數(shù)字體驗(yàn)。