論界面設(shè)計(jì)中的扁平化設(shè)計(jì)現(xiàn)象

熊 昭 （武漢工程大學(xué) 430000）

論界面設(shè)計(jì)中的扁平化設(shè)計(jì)現(xiàn)象

熊 昭 （武漢工程大學(xué) 430000）

“扁平化設(shè)計(jì)”一詞開(kāi)始在界面設(shè)計(jì)中頻繁出現(xiàn)，這種設(shè)計(jì)風(fēng)格更是逐漸被廣泛運(yùn)用。扁平化設(shè)計(jì)并不單單只是一種簡(jiǎn)單的設(shè)計(jì)風(fēng)格，它通過(guò)簡(jiǎn)潔理性的界面編排、扁平的界面層級(jí)、多運(yùn)用幾何造型元素以及溫和的平涂式色彩搭配，來(lái)達(dá)到操作更加簡(jiǎn)易、生動(dòng)、直觀的效果。用戶操作時(shí)軟件的功能性更夠得到更好的體現(xiàn)、使用過(guò)程更加簡(jiǎn)單流暢、操作反饋也更加清晰直接，極大的降低了用戶操作上的認(rèn)知學(xué)習(xí)成本，從而達(dá)到更好的用戶體驗(yàn)。正因?yàn)楸馄交O(shè)計(jì)的這些獨(dú)特優(yōu)勢(shì)和造型美感，使得它逐漸在交互設(shè)計(jì)中占據(jù)主導(dǎo)趨勢(shì)，成為界面設(shè)計(jì)中的主流設(shè)計(jì)風(fēng)格。

扁平化設(shè)計(jì)；界面設(shè)計(jì)；用戶體驗(yàn)；交互

扁平化設(shè)計(jì)是近年來(lái)視覺(jué)傳達(dá)設(shè)計(jì)領(lǐng)域中出現(xiàn)的一種新的設(shè)計(jì)風(fēng)格，在界面設(shè)計(jì)中更是被廣泛運(yùn)用，成為一種新的設(shè)計(jì)潮流。扁平化設(shè)計(jì)相比擬物化設(shè)計(jì)，除去了界面中一些繁瑣的設(shè)計(jì)因素，崇尚簡(jiǎn)約，平面化的表現(xiàn)形式，在現(xiàn)代快節(jié)奏生活中，更易被人們欣賞和接受。

一、對(duì)扁平化設(shè)計(jì)理念的認(rèn)識(shí)

過(guò)去界面設(shè)計(jì)就一直在強(qiáng)調(diào)交互的易操作性和優(yōu)質(zhì)的用戶體驗(yàn)，扁平化設(shè)計(jì)的出現(xiàn)，是對(duì)這些設(shè)計(jì)目標(biāo)的總體概括。它不僅是一種簡(jiǎn)約的設(shè)計(jì)風(fēng)格，更是一種設(shè)計(jì)理念：讓內(nèi)容能夠更加直接的呈現(xiàn)，以更低成本實(shí)現(xiàn)功能作用，同時(shí)讓用戶獲得更加良好的用戶體驗(yàn)。運(yùn)用簡(jiǎn)潔、直接的的方式將信息和事物的工作方式展示出來(lái)，減少用戶認(rèn)知障礙。扁平化的界面設(shè)計(jì)，是以用戶為中心的設(shè)計(jì)原則的必要要求，也是當(dāng)代主義的集中體現(xiàn)。

1.扁平化設(shè)計(jì)成為交互設(shè)計(jì)主流風(fēng)格的原因

扁平化對(duì)于互聯(lián)網(wǎng)而言意味著兩個(gè)詞：快速，突出。時(shí)間就是金錢，快速同時(shí)代表更低成本的運(yùn)作。扁平化設(shè)計(jì)的界面,能夠在短時(shí)間內(nèi)完成更新，也方便再更新。其次在大數(shù)據(jù)時(shí)代下，信息突出是網(wǎng)站取勝的關(guān)鍵。扁平化的界面設(shè)計(jì)通過(guò)把重要的信息放在首要位置，弱化其他次要元素，讓用戶的注意力能夠集中放在產(chǎn)品和重要信息上，而不會(huì)被網(wǎng)站界面上的其他設(shè)計(jì)元素干擾。達(dá)到突出核心信息和操作的目的，網(wǎng)站的易用性和可用性大大增強(qiáng)。

對(duì)于用戶而言在一個(gè)布局簡(jiǎn)潔邏輯清晰扁平化設(shè)計(jì)網(wǎng)站里，能夠快速完成自己的需求，自然也就能夠得到良好的用戶體驗(yàn)。越復(fù)雜的界面設(shè)計(jì)，提取信息的時(shí)間就越長(zhǎng)，用戶的注意力會(huì)被繁瑣的交互形式分散，華麗的界面元素過(guò)多也會(huì)造成用戶的閱讀和使用障礙。而使用清晰直觀的扁平化界面，大腦提取和轉(zhuǎn)換信息所用的時(shí)間會(huì)大大減少。

二、扁平化界面設(shè)計(jì)的特點(diǎn)

實(shí)現(xiàn)扁平化界面的可用性，首先需要清楚了解整個(gè)交互層級(jí)之間的結(jié)構(gòu)，在用戶能夠快速又準(zhǔn)確的找到交互對(duì)象的前提下，再去實(shí)現(xiàn)界面的美觀性。所以扁平化界面設(shè)計(jì)不僅只是界面設(shè)計(jì)風(fēng)格上的變化，更是一種思維邏輯層面的提升。

1.形式結(jié)構(gòu)簡(jiǎn)易化

整個(gè)交互過(guò)程中，最重要的就是界面的結(jié)構(gòu)設(shè)計(jì)，可以界面結(jié)構(gòu)就是交互的基礎(chǔ)。而界面布局和界面層級(jí)是界面結(jié)構(gòu)的基本，可以看做界面結(jié)構(gòu)中縱橫的兩個(gè)層面，這兩者之間的邏輯是否合理，直接影響著用戶的操作。所以簡(jiǎn)易化界面層級(jí)之間的形式結(jié)構(gòu)，讓用戶能夠更加直接的進(jìn)行操作，降低用戶操作中的錯(cuò)誤率，這是扁平化設(shè)計(jì)最核心的目標(biāo)。

2.界面布局簡(jiǎn)潔化

界面中的布局指的是將界面中的各種設(shè)計(jì)元素，根據(jù)需求及其之間的聯(lián)系進(jìn)行合理的排列組織。扁平化界面的基本是布局簡(jiǎn)潔，同時(shí)定位好元素之間的主從關(guān)系，這樣界面中的重要功能能夠直接凸顯，以便于用戶能夠更迅速準(zhǔn)確的獲得信息。

3.界面層級(jí)扁淺

為了是用戶能夠快速完成需求，扁平化界面設(shè)計(jì)中應(yīng)盡量避免界面之間不必要的切換。盡可能的把低層級(jí)信息合并上移，減少不必要的界面層級(jí)的劃分。只有層級(jí)越少，用戶才會(huì)覺(jué)得是方便的好用的。這就要求在一個(gè)層級(jí)中需要顯示更多的內(nèi)容，所以核心功能一定要著重突出，這樣界面才更加針對(duì)性也更加便捷。

4.功能表達(dá)簡(jiǎn)便化

互聯(lián)網(wǎng)技術(shù)發(fā)展的同時(shí)界面上也誕生了更多的功能，五花八門的功能讓用戶難以直接判斷其真實(shí)作用，我們稱這種現(xiàn)象為“認(rèn)知摩擦”。好的界面設(shè)計(jì)一定要最大程度減少認(rèn)知摩擦，讓用戶可以直觀準(zhǔn)確的了解界面中不同功能的作用，節(jié)省操作時(shí)間。所以，扁平化的界面設(shè)計(jì)要根據(jù)用戶的慣性去設(shè)計(jì)功能，從用戶行為模式出發(fā)做設(shè)計(jì)，同時(shí)操作方式要簡(jiǎn)易。

5.操作反饋明晰化

用戶在APP或者網(wǎng)頁(yè)上操作時(shí)反饋一定要及時(shí)并清晰。這是用戶衡量自己操作的標(biāo)準(zhǔn)。及時(shí)，正面的反饋信息可以幫助用戶更加合理的操作，例如可以防止用戶錯(cuò)誤或無(wú)意刪除一些他們本身不想刪除想內(nèi)容。如果反饋不夠及時(shí)，那么及時(shí)這個(gè)網(wǎng)站或者APP的界面設(shè)計(jì)多美觀，動(dòng)效多生動(dòng)，功能多強(qiáng)大，也還是會(huì)造成不好的用戶體驗(yàn)。以至用戶粘性降低，最終造成用戶的流失。因?yàn)榍逦皶r(shí)的反饋信息在整個(gè)交互設(shè)計(jì)里都是至關(guān)重要的。

三、如何在界面設(shè)計(jì)中合理運(yùn)用扁平化設(shè)計(jì)

一些偉大的設(shè)計(jì)中所運(yùn)用的“形式跟隨功能”和“少即是多”的理念依然是我們今天還在談?wù)摵蛯W(xué)習(xí)的。扁平化設(shè)計(jì)要求設(shè)計(jì)師必須清楚的知道設(shè)計(jì)對(duì)象最本質(zhì)，最重要的功能。然后在設(shè)計(jì)里去合理的體現(xiàn)這點(diǎn)。

扁平化界面設(shè)計(jì)的前提是好的界面排版。排版是界面信息的具體展現(xiàn)方式，這就要求界面排版要具有視覺(jué)導(dǎo)向性，能夠更加有效地清晰地傳達(dá)信息。而扁平化界面設(shè)計(jì)的核心是交互層級(jí)，所以，優(yōu)秀的界面設(shè)計(jì)，既要做到層級(jí)扁淺有邏輯，還要做到頁(yè)面布局美觀功能設(shè)計(jì)合理。不能僅僅是為了簡(jiǎn)單而扁平化，而是為了更優(yōu)質(zhì)的用戶體驗(yàn)而扁平化。

所以優(yōu)秀的扁平化界面設(shè)計(jì)，界面的排版布局一定不能忽略，也就是要協(xié)調(diào)好界面中的圖形、色彩、文字等內(nèi)容，只有合理分配好它們，整個(gè)界面布局才能做到既簡(jiǎn)潔美觀，同時(shí)還具有一定的視覺(jué)導(dǎo)向性。做到扁平化的視覺(jué)和交互設(shè)計(jì)相融合。

1.色彩

“色彩一定要酷點(diǎn)再酷點(diǎn)”。扁平化設(shè)計(jì)幾乎都是平涂色彩，沒(méi)有光影的立體效果。因?yàn)樯倭诵┵|(zhì)感，所以顏色的運(yùn)用變得更加重要。而色彩之間是否和諧在扁平化界面設(shè)計(jì)中尤為重要，扁平化設(shè)計(jì)中的色彩大多給人鮮亮、強(qiáng)撞色的印象。高飽和度的色彩，往往更容易吸引人，給用戶強(qiáng)烈的視覺(jué)沖擊。同時(shí)不管在什么樣的背景前，高飽和、鮮艷明亮的色彩都能不被背景掩蓋。也正是因?yàn)槿绱?，在扁平化界面中通常鮮亮的色彩中所包含的信息或代表的功能，就是界面要傳遞的主要信息和主要功能。

2.圖形

在扁平化界面設(shè)計(jì)中，通常使用基本形簡(jiǎn)單明確的圖形，取代以往的具有仿真效果的有機(jī)圖形。這些基本形多由幾何形、曲直線條等組合形成。在圖標(biāo)設(shè)計(jì)上也采用更加精簡(jiǎn)的方式表現(xiàn)，將圖形進(jìn)行概括提煉，用以簡(jiǎn)潔的線條來(lái)展示，幾乎不具備裝飾性。這樣的表現(xiàn)形式去除或減少了多余的修飾，直接突出主題，用戶能夠更加關(guān)注內(nèi)容本身，而不被裝飾所打擾，視覺(jué)效果直接，功能清晰直觀，減少了用戶接受、適應(yīng)信息時(shí)花費(fèi)的時(shí)間和精力。

3.文字

扁平化界面設(shè)計(jì)中的重要元素之一就是文字，合理使用能夠讓界面整體的編排更加簡(jiǎn)潔。扁平化的界面在編排過(guò)程中，應(yīng)最多使用兩個(gè)系列的字體，通過(guò)改變文字的大小、粗細(xì)以及形態(tài)來(lái)區(qū)分內(nèi)容的主次，例如大小字號(hào)、段落以及文字特別的排列組合等，使頁(yè)面主次信息一目了然，同時(shí)兼具節(jié)奏感。正因?yàn)槲淖值倪@些特性，在扁平化設(shè)計(jì)中使用基本的設(shè)計(jì)手法就可起到保持頁(yè)面的簡(jiǎn)潔和準(zhǔn)確傳遞頁(yè)面信息的作用。

4.具體案例分析

Windows 8的主要界面風(fēng)格就是典型的扁平化界面設(shè)計(jì)，其實(shí)從2006年起，微軟的應(yīng)用軟件就以經(jīng)開(kāi)始使用這種設(shè)計(jì)風(fēng)格。相比之前的Windows7，不僅減少了頁(yè)面之間的跳轉(zhuǎn)，同時(shí)在主界面上直接添加了用戶經(jīng)常使用的工具，以更清爽的排版和突出重點(diǎn)來(lái)方便用戶使用。把這些工具全部集中擺放在開(kāi)始界面上，圖標(biāo)采用方形外輪廓，加以高度凝括的圖形和純色填充，給用戶直觀，醒目的視覺(jué)感受。用戶使用也更加方便快捷，直接通過(guò)開(kāi)始界面，就可以進(jìn)入到一些常用應(yīng)用，相比之前的版本減少了操作流程節(jié)約了時(shí)間，不在需要需要分別點(diǎn)開(kāi)不同的工具和子菜單才能看到。微軟的這一設(shè)計(jì)靈感源于美國(guó)華盛頓州的巴士站牌、機(jī)場(chǎng)和地鐵的指示牌設(shè)計(jì)，它采用大量醒目的字體，以次吸引受眾注意力。微軟認(rèn)為扁平化的設(shè)計(jì)原則應(yīng)該是“光滑、快、現(xiàn)代”。而這也正是當(dāng)下現(xiàn)代設(shè)計(jì)的一種趨勢(shì)。

如今的微軟產(chǎn)品，會(huì)越來(lái)越多的出現(xiàn)更多這種“扁平化”的設(shè)計(jì)風(fēng)格，而少見(jiàn)傳統(tǒng)的Windows視窗界面。其實(shí)不僅僅只是微軟，我們可以看到越來(lái)越多的界面設(shè)計(jì)、APP設(shè)計(jì)都在運(yùn)用扁平化的設(shè)計(jì)風(fēng)格，這種以文字為主的界面導(dǎo)航，功能圖標(biāo)高度凝括、摒棄多余裝飾的界面設(shè)計(jì)。

四、結(jié)語(yǔ)

扁平化設(shè)計(jì)用一種簡(jiǎn)潔明了，卻又十分吸引用戶注意的方式，實(shí)現(xiàn)了對(duì)界面設(shè)計(jì)的革新。扁平化的界面設(shè)計(jì)中，用戶能夠清楚直接的獲得信息，能夠快速的完成操作目標(biāo)，達(dá)到最優(yōu)質(zhì)的用戶體驗(yàn)。扁平化設(shè)計(jì)不單單只是做減法的設(shè)計(jì)，它傳遞的是一種“少即是多”的設(shè)計(jì)理念。在扁平化設(shè)計(jì)中，看似簡(jiǎn)單的圖形，單調(diào)的色彩，單一的字體加以組合設(shè)計(jì)，卻能夠比那些花哨的設(shè)計(jì)更具視覺(jué)沖擊和視覺(jué)導(dǎo)向性。這種設(shè)計(jì)的優(yōu)勢(shì)顯而易見(jiàn)，它能夠快速、準(zhǔn)確、清晰的完成用戶需求，實(shí)現(xiàn)界面設(shè)計(jì)為提升用戶體驗(yàn)而服務(wù)。

[1]開(kāi)源中國(guó).深入探討扁平化設(shè)計(jì)[EB/OL].（2013-07-10）[2014-03-07].

[2]馬娜娜.簡(jiǎn)潔而不乏味——淺談扁平化界面設(shè)計(jì)[J].大眾文藝，2013（16）：137—138.

[3]視覺(jué)中國(guó).扁平化設(shè)計(jì)的色彩選擇[EB/OL].（2013-04-28）[2014-03-07].

[4]張蕓.扁平化設(shè)計(jì)在網(wǎng)頁(yè)應(yīng)用上的優(yōu)勢(shì)[J].藝術(shù)科技，2013（6）：229.

[5]楊帆.基于扁平化的界面設(shè)計(jì)美學(xué)思想的探討[J].藝術(shù)科技，2014（1）：59.

熊昭（1995.07- )，女,湖北大冶人，民族：漢族，武漢工程大學(xué)藝術(shù)設(shè)計(jì)研究生在讀，學(xué)歷：研究生在讀，研究方向：數(shù)字媒體設(shè)計(jì)，作者單位:武漢工程大學(xué)。