基于視覺交互機(jī)制的信息界面扁平化設(shè)計研究

劉恒媛

摘要：本文經(jīng)過對視覺交互機(jī)制在信息界面扁平化設(shè)計實踐中應(yīng)用的分析研究，介紹了信息界面設(shè)計中扁平化設(shè)計與交互設(shè)計的定義內(nèi)容，著重從信息界面色彩設(shè)計扁平化分析、信息界面版式設(shè)計扁平化分析、信息界面圖形設(shè)計扁平化分析三個方面探討了視覺交互機(jī)制下的信息界面扁平化設(shè)計，從而為扁平化信息界面設(shè)計的研究提供一點思考價值。

關(guān)鍵詞：視覺交互機(jī)制;信息界面設(shè)計;扁平化設(shè)計

中國分類號：J524 文獻(xiàn)標(biāo)識碼：A

文章編碼：1672-7053（2018）06-0087-02

2012年，微軟公司的windows8面世，采用了“化繁為簡”的UI界面和容控式的交互系統(tǒng)。2013年6月，蘋果公司發(fā)布了iOS7系統(tǒng)，這套全新的系統(tǒng)拋棄了蘋果有史以來經(jīng)典的“擬物化設(shè)計”，采用了圖形簡潔、色彩明快的扁平化設(shè)計，同年9月份，蘋果公司正式推送iOS7系統(tǒng)，這一舉動使扁平化設(shè)計真正成為主流設(shè)計風(fēng)格。通過近幾年的扎根發(fā)展，我們看到質(zhì)感厚重、圖層樣式繁多的信息界面越來越少，取而代之的是一目了然、質(zhì)感輕盈、創(chuàng)意新穎的界面設(shè)計。

1信息界面設(shè)計中扁平化設(shè)計的定義

在設(shè)計研究領(lǐng)域，界面是一種由色彩、文字、圖像、符號等視覺元素以及多媒體元素為主構(gòu)成的，以傳達(dá)特定信息和方便人機(jī)交流為目的的媒介，就是我們通常所說的圖形界面設(shè)計。信息界面設(shè)計是指信息產(chǎn)品中的界面設(shè)計從色彩、文字、符號等元素對信息進(jìn)行設(shè)計，以達(dá)到傳達(dá)信息和方便人機(jī)交流的目的。

扁平化設(shè)計概念于2008年由Google公司提出。它關(guān)注于簡單元素、排版和單一色彩的極簡化應(yīng)用。從以上描述中我們可以理解，擬物化設(shè)計是三維的，扁平化設(shè)計是二維的。通過三維立體的設(shè)計，設(shè)計師可以在設(shè)計中增加陰影、紋理、高光等元素，營造出一種信息界面的凹凸立體感，而扁平化設(shè)計則放棄了任何附加的效果，創(chuàng)建了一個完全的二維平面空間。扁平化設(shè)計的核心原則是去除冗余的裝飾效果，在扁平化設(shè)計中，沒有陰影效果，沒有浮雕和漸變等元素來使設(shè)計產(chǎn)生凹凸效果。雖然扁平化設(shè)計摒棄了高光、陰影等營造透視感的元素，但它通過抽象、簡潔、符號化等設(shè)計元素成功的形成了與眾不同信息界面設(shè)計風(fēng)格，界面設(shè)計簡潔抽象、頻繁使用色塊等，呈現(xiàn)出了十足的現(xiàn)代感。

2基于視覺交互機(jī)制的信息界面扁平化設(shè)計研究

2.1視覺交互機(jī)制的定義

交互機(jī)制概念由人機(jī)交互鼻祖Alan Cooper（美國的一位有25年IT經(jīng)驗，10年交互設(shè)計咨詢經(jīng)驗的卓越權(quán)威）在其所著的《軟件概念改革命》一書中正式提出。交互設(shè)計作為作為一門關(guān)注交互體驗的新興學(xué)科，在二十世紀(jì)八十年代就已經(jīng)產(chǎn)生了，它由比爾·摩格理吉（Bill Moggridge）在1984年的一次設(shè)計會議上提出，一開始比爾·摩格理吉（Bill Moggridge）將它命名為“軟面（Soft Face）”，由于當(dāng)時這個詞容易讓人聯(lián)想到一種名叫“椰菜娃娃（Cabbage Patch doll）"的流行玩具，所以，后來摩格理吉將它改名為”Interaction Design”，即交互設(shè)計。

2.2信息界面色彩設(shè)計扁平化分析

色彩設(shè)計是信息界面設(shè)計中視覺交互設(shè)計的一個重要組成部分。在扁平化設(shè)計中，用平涂的色塊或者單色的線條來區(qū)分信息界面的模塊是其一大特色。對信息界面上的色彩來說，與普通的物體色彩有很大不同。普通物體的色彩是由反射光所呈現(xiàn)，而信息界面大部分的載體是電子顯示屏，因此，它的色彩是作為直射光而被人所見。顯示屏上顯示的是加色，是一種直接射入人眼的顏色，所呈現(xiàn)出的色彩由不同波長的色光的樣式、強(qiáng)弱等決定。我們通常所見的生活場景是由不同波長的色光，通過反射，映入人眼，在人眼中所產(chǎn)生的視覺效應(yīng)。色彩識別細(xì)胞主要集中在人眼球的中心，實際上，事業(yè)周圍的色彩我們并未真正的看清，而是大腦用已有的認(rèn)知補(bǔ)全了那部分模糊的色彩。對于設(shè)計師來說，色彩設(shè)計并不是簡單的疊加色彩，而是能夠控制色彩。大部分情況下，信息界面設(shè)計師會用RGB色彩空間來進(jìn)行色彩設(shè)計。通常，色彩可以分為三個基本要素：色調(diào)（H）、明度（V）、飽和度（S）。根據(jù)孟塞爾顏色系統(tǒng)，色彩可以通過色相、透明度以及純度這三個維度描述。

在信息界面設(shè)計上，界面上色彩設(shè)計的改變，可以改變?nèi)藗儗臻g的認(rèn)知，造成遠(yuǎn)近、高低、大小的錯覺。扁平化設(shè)計通過也可以通過色彩在整體構(gòu)圖中達(dá)到凸顯某個元素的作用。

在扁平化得界面設(shè)計中，經(jīng)常采用單色漸變配色。單色漸變式將這一種色相通過明度和純度的改變來營造界面的色彩層次感。因為同一色相會相對單調(diào)，所以在信息界面的扁平化設(shè)計中，通常采用單色漸變并搭配某個明度的灰色作為基底色，或者采用別的色彩，來達(dá)到冷暖或者明度上對比的效果。單色一般會呈現(xiàn)在信息界面中最關(guān)鍵的元素或者文字上。單色配色的信息界面相對于多色配色界面，在視覺上會更加簡潔與統(tǒng)一，給人單純、柔和、平靜以及秩序感。

扁平化風(fēng)格的信息界面色彩設(shè)計中，設(shè)計師也習(xí)慣于選取相同明度、純度的不同色彩搭配在一起，這樣會給人營造一種和諧之感。通常有兩種做法，一種是沒有特定形狀的色彩，由于沒有強(qiáng)烈的背景色村托，這些色彩顯得迷幻而飄渺。第二種是采用相同明度與純度的色彩搭配更亮或者更暗的背景色，會產(chǎn)生強(qiáng)烈的扁平感。因為明度相似，所以就失去了明暗對比產(chǎn)生的空間感。各種色彩元素在界面上就呈現(xiàn)出“平”的狀態(tài)，如果使用多種明度相似的色彩，雖然在視覺上呈現(xiàn)扁平化，但是界面卻會因此顯得活潑、豐富。

扁平化的界面色彩設(shè)計中，設(shè)計師場采用選用“互補(bǔ)色”，即色相環(huán)中兩極相對的顏色。把互補(bǔ)色放在一起回產(chǎn)生強(qiáng)烈的色相對比，極易吸引入的眼球。當(dāng)互補(bǔ)色出現(xiàn)在同一界面中時，能增強(qiáng)相互在畫面中的強(qiáng)度，即便是暗淡的灰色系，在加入它的補(bǔ)色后，也會綻放光彩。對比色的應(yīng)用可以在灰色調(diào)的信息界面中，凸顯重要元素，增加畫面的層次感，避免單調(diào)，解決視覺疲勞的問題。

2.3信息界面版式設(shè)計扁平化分析

扁平化風(fēng)格的信息界面設(shè)計中，版式設(shè)計是另外一整個重要影響因素。版式設(shè)計通常要遵循用戶視覺運(yùn)動軌跡。2016年美國著名網(wǎng)站設(shè)計杰柯柏·尼爾森發(fā)表了《眼球軌跡的研究》報告，報告中發(fā)現(xiàn)，用戶在閱讀信息界面時，其視覺運(yùn)動軌跡通常呈“F”狀。他使用眼動儀作為實驗器材，對不同的用戶在不同的界面上進(jìn)行測試，得出了三張熱點圖。圖中用紅、藍(lán)、灰三種顏色代表視線聚集的熱度，紅色代表最熱，藍(lán)色為較熱，灰色則代表了幾乎不關(guān)注。

網(wǎng)格作為輔助工具，常常出現(xiàn)在扁平化設(shè)計中。從美學(xué)或者整齊方面來說，網(wǎng)格布局有利于界面平衡。網(wǎng)格可以規(guī)劃布局，使設(shè)計的版式排布具有很強(qiáng)的秩序感，能增強(qiáng)界面上元素的識別性，后期用戶在使用過程中能有效的減少因信息排布不合理而出現(xiàn)的錯誤。網(wǎng)格布局方式能提高信息傳達(dá)的效率，展現(xiàn)清晰的信息層級，帶給用戶完美無瑕的信息界面設(shè)計。

扁平化設(shè)計中通常采用平涂的色塊來區(qū)分界面中的模塊。2013年7月，張蕓在《扁平化設(shè)計在網(wǎng)頁上應(yīng)用的優(yōu)勢》中也提出：扁平化設(shè)計中刪除了網(wǎng)格布局中多余的線條和邊框，使用單純的二維色塊對頁面進(jìn)行大膽的分割，色塊上使用大小不一的文字來標(biāo)示內(nèi)容中心或是使用多標(biāo)題圖片，都可容納更多的內(nèi)容，使每個國標(biāo)都有屬于自己的獨(dú)特風(fēng)格，同時內(nèi)容從一個邊緣流向另一個邊緣，在軸上進(jìn)行活動，增加了穩(wěn)定感。^[5]由于界面由色塊和線條分割為區(qū)域和欄，欄與欄，區(qū)域與區(qū)域之間的間隔為背景底色，整個界面有線條和色塊組成，視覺上具有矢量感。

扁平化設(shè)計中，常見的版式設(shè)計方式還有平鋪。信息界面設(shè)計中，常常見到這樣一種版式：圖片平鋪整個界面或者與界面同寬以作背景，圖形與文字則置于圖片之上。蘋果系統(tǒng)的桌面設(shè)計便是典型代表。好看的圖片能夠吸引用戶的注意力，提高用戶的點擊率，加上富有韻律的文字排版，能夠突出整個界面的主基調(diào)。平鋪版式設(shè)計的界面中，文字一般以居中對齊、置于界面中央的方式排版，使信息聚集，方便用戶閱讀。

2.4信息界面圖形設(shè)計扁平化分析

設(shè)計師習(xí)慣于將圖形運(yùn)用到信息界面設(shè)計中，譬如圖標(biāo)、按鈕等。通常設(shè)計師所使用的圖形都較為簡單，如圓形或者矩形這類幾何圖形，這些元素幾乎都是直角，盡量突出圖形，方便用戶點擊。扁平化風(fēng)格的界面設(shè)計中，無邊框圖標(biāo)設(shè)計是一大特色。無邊框圖標(biāo)幾乎去掉了所有的描邊線條，只用一些色塊來代表圖形的結(jié)構(gòu)。這些圖形通常作為國標(biāo)以及個性化元素應(yīng)用。在線條不能交代結(jié)構(gòu)關(guān)系時，色彩構(gòu)成通常就會被用作替代。色調(diào)確定以后，通過色彩的冷暖、明暗可以突出界面的層次感，色相的改變還可以區(qū)分不同的部位和物體。

扁平化風(fēng)格的信息界面設(shè)計中，線性圖標(biāo)通常出現(xiàn)在輸入框和按鈕等一些交互的控件中，或者在某些應(yīng)用中，線條更加簡化、纖細(xì)，且符號化更加顯著，經(jīng)常與單色背景搭配使用。線性圖標(biāo)一般不會單獨(dú)使用，通常會搭配相同形狀的單色圖形一起使用。當(dāng)用戶點擊線性圖標(biāo)的時候，相同形狀的單色圖形變會作為反饋代替線形圖形。

3結(jié)語

從興起到現(xiàn)在，扁平化設(shè)計風(fēng)格一直作為設(shè)計潮流中的主流設(shè)計，為眾多設(shè)計師所追捧。從視覺效果角度來說，去繁從簡的扁平化設(shè)計風(fēng)格只是眾多設(shè)計風(fēng)格中的一種，它的最終目的還是為了提高界面設(shè)計良好的交互操作體驗，在界面信息設(shè)計中，良好的交互體驗才是其核心。對于扁平化的信息界面設(shè)計來說，遵循視覺交互機(jī)制中的色彩設(shè)計、版式設(shè)計和圖形設(shè)計原則，更能夠滿足現(xiàn)今用戶的需求，提高用戶體驗的滿意度。

參考文獻(xiàn)

[1]王娟.基于用戶體驗的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計研究[D].浙江：浙江農(nóng)林大學(xué)，2012.

[2]中國社會科學(xué)院語言研究所詞典編輯室.現(xiàn)代漢語詞典[M].北京：商務(wù)印館，2002.

[3]孫鵬.以觸摸屏為例的界面交互機(jī)制研究[D].上海：同濟(jì)大學(xué)，2011.

[4]周黎鈴.基于用戶體驗的扁平化互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計研究[D].浙江工商大學(xué)，2014.

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

[6]原研哉.白[M].紀(jì)江紅，譯廣西：師范大學(xué)出版社，2012：21.