扁平化風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中的應(yīng)用探討

摘 要：在以往的網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)者們更青睞于利用各種藝術(shù)效果來(lái)裝飾網(wǎng)頁(yè)，以求吸引用戶的注意力。但是隨著網(wǎng)站數(shù)量和種類的增加，紛繁復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格會(huì)讓用戶產(chǎn)生視覺(jué)疲勞，影響到用戶的操作體驗(yàn)。扁平化設(shè)計(jì)風(fēng)格強(qiáng)調(diào)網(wǎng)頁(yè)界面設(shè)計(jì)的簡(jiǎn)潔性，而且還能夠降低功耗，延長(zhǎng)待機(jī)時(shí)間和提高運(yùn)算速度，更加適用于移動(dòng)終端系統(tǒng)。文章首先闡述了扁平化風(fēng)格的設(shè)計(jì)特征，然后對(duì)扁平化設(shè)計(jì)風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中的應(yīng)用進(jìn)行分析，為提高網(wǎng)頁(yè)設(shè)計(jì)水平提供參考。

關(guān)鍵詞：扁平化;網(wǎng)頁(yè)設(shè)計(jì);簡(jiǎn)潔性;用戶體驗(yàn)

0 引言

隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展，人們利用網(wǎng)站的頻率大幅提升，無(wú)論是在工作中還是日常生活中，都會(huì)應(yīng)用到網(wǎng)站。在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，有些網(wǎng)站和應(yīng)用程序需要根據(jù)屏幕的尺寸和分辨率設(shè)計(jì)出不同的擬物化設(shè)計(jì)，而扁平化設(shè)計(jì)風(fēng)格能夠適用于所有尺寸的屏幕，具有較強(qiáng)的適應(yīng)性。尤其是在人們利用手機(jī)和平板等移動(dòng)終端越來(lái)越多的背景下，在有限的屏幕尺寸上，更希望能夠快速找到自己需要的信息，以提升瀏覽網(wǎng)頁(yè)的速度。較多的裝飾性效果不僅會(huì)影響到用戶的操作體驗(yàn)，同時(shí)還會(huì)占用一定的系統(tǒng)內(nèi)存，縮短設(shè)備的待機(jī)時(shí)間，影響系統(tǒng)的反應(yīng)速度。為了更好地解決用戶在使用移動(dòng)終端瀏覽網(wǎng)頁(yè)時(shí)遇到的問(wèn)題，采用扁平化設(shè)計(jì)風(fēng)格具有很強(qiáng)的實(shí)用性。扁平化設(shè)計(jì)去除了冗余、厚重和繁雜的裝飾效果，注重對(duì)核心信息的體現(xiàn)，有些甚至是以抽象、極簡(jiǎn)和符號(hào)化的方式來(lái)表達(dá)信息，界面更加簡(jiǎn)潔干凈，用戶操作起來(lái)會(huì)有良好的體驗(yàn)，所以扁平化設(shè)計(jì)風(fēng)格會(huì)成為網(wǎng)頁(yè)界面設(shè)計(jì)的發(fā)展趨勢(shì)。

1 扁平化風(fēng)格的設(shè)計(jì)特征

扁平化的設(shè)計(jì)風(fēng)格主要是以簡(jiǎn)潔大方為核心，減少了擬物化設(shè)計(jì)中的透視、紋理和陰影等效果，更加傾向于用圖標(biāo)、抽象和文字的方式來(lái)表現(xiàn)信息。隨著使用移動(dòng)終端進(jìn)行網(wǎng)頁(yè)瀏覽的用戶數(shù)量的增加，這種扁平化風(fēng)格更加適用于小尺寸屏幕的移動(dòng)終端。簡(jiǎn)約的設(shè)計(jì)風(fēng)格能夠在有限的屏幕上更加明確地呈現(xiàn)網(wǎng)頁(yè)信息，便于用戶更加快速地搜索信息。而在組織結(jié)構(gòu)上的扁平化設(shè)計(jì)，有利于減少用戶逐級(jí)深入地搜索信息，縮短傳播鏈，提高用戶瀏覽效率。扁平化設(shè)計(jì)風(fēng)格能夠適用于任何尺寸的屏幕，占用系統(tǒng)內(nèi)存少，有助于提高網(wǎng)頁(yè)運(yùn)行的流暢性，這會(huì)增加用戶使用移動(dòng)終端瀏覽網(wǎng)頁(yè)的便捷性。目前，扁平化風(fēng)格主要應(yīng)用于手機(jī)領(lǐng)域，在部分網(wǎng)站設(shè)計(jì)中也逐漸體現(xiàn)出扁平化的趨勢(shì)，這種簡(jiǎn)潔大方的風(fēng)格更具有現(xiàn)代氣息，但是在實(shí)際使用過(guò)程中，還是需要根據(jù)網(wǎng)站的功能、用戶群體特征、終端呈現(xiàn)方式等因素進(jìn)行綜合考量，最終確定適宜的設(shè)計(jì)風(fēng)格。

2 扁平化設(shè)計(jì)風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中的應(yīng)用

2.1 扁平化風(fēng)格在網(wǎng)頁(yè)界面元素設(shè)計(jì)中的應(yīng)用

扁平化風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì)中體現(xiàn)得最為明顯的是界面設(shè)計(jì)，與復(fù)雜的界面相比，簡(jiǎn)潔的界面元素不僅能夠減少用戶的閱讀障礙，還更易于用戶接近事物的本質(zhì)，從而提升體驗(yàn)感。在傳統(tǒng)的擬物化設(shè)計(jì)中，界面元素的設(shè)計(jì)盡量與實(shí)際物體接近，以達(dá)到一種更加真實(shí)的效果，一般會(huì)通過(guò)添加陰影或者漸變等方式來(lái)實(shí)現(xiàn)。擬物化設(shè)計(jì)雖然能夠得到一部分用戶的喜愛(ài)，但同時(shí)也限制了用戶想象的空間，同時(shí)過(guò)于復(fù)雜的設(shè)計(jì)還會(huì)占用過(guò)多的時(shí)間。在網(wǎng)站數(shù)量和種類不斷增多的背景下，用戶對(duì)于復(fù)雜的界面設(shè)計(jì)，會(huì)形成信息提取費(fèi)時(shí)、視覺(jué)觀感疲勞等現(xiàn)象。而扁平化風(fēng)格的核心是簡(jiǎn)潔大方，去掉各種特效的渲染，以最為簡(jiǎn)約的界面風(fēng)格為用戶帶來(lái)最為舒適的操作體驗(yàn)^[1]。尤其是在當(dāng)下，人們使用手機(jī)的頻率快速增加，扁平化風(fēng)格更適用于手機(jī)的屏幕尺寸。簡(jiǎn)潔的界面設(shè)計(jì)能夠更加直觀地凸顯重要的信息，拉近用戶與網(wǎng)頁(yè)內(nèi)容之間的距離，能夠讓用戶快速檢索到自己想要的操作信息，有效提升用戶的操作體驗(yàn)。

2.2 扁平化風(fēng)格在網(wǎng)頁(yè)布局中的應(yīng)用

網(wǎng)頁(yè)的整體布局方式?jīng)Q定了信息的呈現(xiàn)效果以及用戶的操作體驗(yàn)，在擬物化設(shè)計(jì)中更加注重精美的排版和圖片效果，希望以這種方式來(lái)降低用戶的認(rèn)知成本，為用戶操作提供便捷。但是隨著數(shù)碼產(chǎn)品的普及以及人們使用網(wǎng)頁(yè)熟練度的提升，在長(zhǎng)時(shí)間瀏覽網(wǎng)頁(yè)的過(guò)程中，過(guò)于復(fù)雜的圖片反而會(huì)讓用戶產(chǎn)生視覺(jué)疲勞，并且增加了提取信息的難度。而扁平化風(fēng)格則更多地使用了文字、圖標(biāo)等方式，這種頁(yè)面布局方式更加簡(jiǎn)潔，呈現(xiàn)的信息也更加明確，用戶可以快速找到需要的信息進(jìn)行操作，縮短信息檢索的時(shí)間，并且在視覺(jué)觀感上也更加清晰透徹^[2]。此外，擬物化設(shè)計(jì)還無(wú)法適應(yīng)在不同尺寸和分辨率的屏幕間轉(zhuǎn)換，尤其是在小尺寸的手機(jī)屏幕上，可能會(huì)出現(xiàn)無(wú)法識(shí)別圖標(biāo)的現(xiàn)象，直接影響用戶的操作體驗(yàn)。而扁平化風(fēng)格能夠適用于任何尺寸的屏幕，尤其是其簡(jiǎn)約的布局方式更適用于小屏幕的手機(jī)網(wǎng)頁(yè)。因?yàn)楸馄交L(fēng)格不會(huì)受到屏幕尺寸的限制，所以給設(shè)計(jì)師提供了更大的設(shè)計(jì)空間，能夠更加完整且完美地呈現(xiàn)頁(yè)面布局。

2.3 扁平化風(fēng)格在網(wǎng)頁(yè)信息組織結(jié)構(gòu)中的應(yīng)用

從某種程度上講，扁平化風(fēng)格是和擬物化設(shè)計(jì)進(jìn)行的對(duì)比，其在組織結(jié)構(gòu)上的體現(xiàn)更加明顯。擬物化設(shè)計(jì)主要是以層級(jí)化結(jié)構(gòu)為主，以金字塔的形式進(jìn)行信息的展示。一般金字塔結(jié)構(gòu)方式所包含的信息量較大，無(wú)法在同一級(jí)中完全展示出來(lái)，所以需要通過(guò)增加層級(jí)的方式來(lái)延長(zhǎng)傳播的路徑，以確保呈現(xiàn)信息存在完整的邏輯性。但是這種方式會(huì)耗費(fèi)用戶很多的時(shí)間，因?yàn)樯钊氲膶蛹?jí)越多，返回時(shí)也需要經(jīng)歷同樣的層級(jí)，無(wú)疑會(huì)增加閱讀的時(shí)間。而扁平化風(fēng)格相當(dāng)于壓扁的金字塔，以最大限度地減少組織結(jié)構(gòu)的層級(jí)、增加橫向信息的方式來(lái)減少用戶搜索信息的時(shí)間成本，有助于用戶快速進(jìn)行信息的瀏覽。在使用扁平化風(fēng)格的組織結(jié)構(gòu)時(shí)，一個(gè)層級(jí)所呈現(xiàn)的信息內(nèi)容量會(huì)增加，傳播路徑大大減少，但是這種方式僅適用于信息量較少的網(wǎng)頁(yè)，如果單層信息量過(guò)大，反而會(huì)增加用戶檢索信息的難度。所以在組織結(jié)構(gòu)設(shè)計(jì)時(shí)，應(yīng)該根據(jù)網(wǎng)頁(yè)包含的信息量而選擇適宜的風(fēng)格，避免盲目地跟風(fēng)而產(chǎn)生負(fù)面效應(yīng)^[3]。

2.4 扁平化風(fēng)格在網(wǎng)頁(yè)交互方式中的應(yīng)用

交互性是網(wǎng)頁(yè)設(shè)計(jì)時(shí)的重要元素，網(wǎng)頁(yè)所呈現(xiàn)出來(lái)的內(nèi)容，并不只是簡(jiǎn)單對(duì)內(nèi)容排版布局，而是更應(yīng)該從用戶的使用體驗(yàn)入手，從用戶的視角出發(fā)進(jìn)行頁(yè)面設(shè)計(jì)，以提高網(wǎng)頁(yè)和用戶之間的交互性。良好的交互性是提高用戶體驗(yàn)的重要方式，也是增加網(wǎng)頁(yè)瀏覽量的重要途徑，所以通過(guò)交互性設(shè)計(jì)能夠?yàn)橛脩魩?lái)良好的視覺(jué)體驗(yàn)和心理體驗(yàn)。其中動(dòng)畫或動(dòng)態(tài)圖的扁平化設(shè)計(jì)能夠更好地吸引用戶的注意，與靜態(tài)圖相比，動(dòng)態(tài)圖和動(dòng)畫不僅能夠滿足用戶的審美需求，還能夠提高用戶搜集信息的效果。比如當(dāng)用戶的鼠標(biāo)停留在某一視頻或圖片上時(shí)，視頻或圖片中的信息就能夠及時(shí)地顯示出來(lái)，從而提升用戶的信息瀏覽效率。在采用交互式動(dòng)畫的扁平化設(shè)計(jì)時(shí)，還應(yīng)對(duì)用戶群體進(jìn)行細(xì)分，了解用戶群體的操作習(xí)慣，然后有針對(duì)性地進(jìn)行交互性設(shè)計(jì)，以提高用戶對(duì)網(wǎng)頁(yè)的使用效率^[4]。

2.5 扁平化風(fēng)格在網(wǎng)頁(yè)其他元素設(shè)計(jì)中的應(yīng)用

網(wǎng)頁(yè)設(shè)計(jì)包含多種要素，除了上述分析，還包括首頁(yè)設(shè)計(jì)、標(biāo)識(shí)設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、文本設(shè)計(jì)等，而要將扁平化風(fēng)格體現(xiàn)在這些要素中，還需要設(shè)計(jì)人員進(jìn)行全面的規(guī)劃。比如在顏色和字體上的設(shè)計(jì)，因?yàn)楸馄交非蠛?jiǎn)潔大方，不需要太多的裝飾，但是還要給用戶呈現(xiàn)更好的視覺(jué)體驗(yàn)，所以在色彩使用方面就需要合理搭配。因?yàn)檎w頁(yè)面已經(jīng)非常簡(jiǎn)約，所以顏色上應(yīng)該盡量避免單調(diào)，可以采用同類色搭配的形式呈現(xiàn)一種層次感，也可以采用對(duì)比色的方式來(lái)突出重要信息。所以扁平化風(fēng)格的使用，并不是簡(jiǎn)單的排列，也沒(méi)有降低設(shè)計(jì)人員的設(shè)計(jì)水平，相反還更加考驗(yàn)設(shè)計(jì)人員的能力，需要在簡(jiǎn)潔的頁(yè)面設(shè)計(jì)中給用戶創(chuàng)造更加舒適的操作體驗(yàn)和視覺(jué)體驗(yàn)。

3 結(jié)語(yǔ)

網(wǎng)頁(yè)設(shè)計(jì)的好壞直接影響到用戶的體驗(yàn)，進(jìn)而影響到網(wǎng)站的瀏覽量和企業(yè)的經(jīng)濟(jì)效益，所以網(wǎng)頁(yè)設(shè)計(jì)要根據(jù)用戶的體驗(yàn)來(lái)調(diào)整風(fēng)格，以適應(yīng)用戶的體驗(yàn)需求。在快節(jié)奏的工作和生活狀態(tài)下，人們更希望能夠在有限的時(shí)間內(nèi)提取更多有用的信息，所以對(duì)于過(guò)于復(fù)雜的頁(yè)面風(fēng)格會(huì)讓用戶感到疲勞，降低用戶的體驗(yàn)。扁平化風(fēng)格更適用于移動(dòng)終端，既減少了以往擬物化設(shè)計(jì)的次數(shù)，在占用系統(tǒng)內(nèi)存、運(yùn)行速度以及待機(jī)時(shí)間方面又更適用于移動(dòng)終端。扁平化風(fēng)格的極簡(jiǎn)性使得主題更加鮮明，更迎合現(xiàn)代用戶的體驗(yàn)需求，但同時(shí)也增加了設(shè)計(jì)人員的難度。簡(jiǎn)潔并不是簡(jiǎn)單，所以在簡(jiǎn)潔的基礎(chǔ)上還要具有一定的內(nèi)涵，能夠從更多的維度和更深的層次體現(xiàn)網(wǎng)頁(yè)的功能及其背后的意義。

[參考文獻(xiàn)]

[1]王啟賓.手機(jī)圖形界面扁平化集合設(shè)計(jì)研究[J].智庫(kù)時(shí)代，2019（5）：285-286.

[2]楊曄.扁平化風(fēng)格在網(wǎng)頁(yè)界面設(shè)計(jì)中的應(yīng)用[J].科技風(fēng)，2018（25）：97，100.

[3]馮貴蘭，李正楠.扁平化風(fēng)格在高校門戶網(wǎng)站設(shè)計(jì)中的應(yīng)用研究[J].現(xiàn)代計(jì)算機(jī)（專業(yè)版），2017（18）：49-51.

[4]宋雅麗.扁平化設(shè)計(jì)在網(wǎng)頁(yè)版式中的應(yīng)用探析[J].電腦編程技巧與維護(hù)，2016（17）：78-79.

（編輯?王永超）

Discussion of the application of flat style to web interface design

Sun Ruping

（Bayingol Vocational and Technical College， Korla 841000， China）

Abstract：In the past， designers prefer to use various artistic effects to decorate web pages in order to attract the attention of users. However， with the increase of the number and type of websites， the complicated design style of web pages will make users have visual fatigue and affect their operation experience. Flat design style emphasizes the simplicity of web interface design， and can reduce power consumption， prolong standby time and improve operation speed， which is more suitable for mobile terminal system. This paper first expounds the design characteristics of flat style， and then analyzes the application of flat design style in web interface design， which provides reference for improving the level of web design.

Key words：flat; web design; simplicity; user experience

作者簡(jiǎn)介：孫汝萍（1982—?），女，河南獲嘉人，講師，碩士;研究方向：計(jì)算機(jī)應(yīng)用教學(xué)。