俞璋凌，趙雅，鐘華

基于用戶體驗(yàn)的扁平化風(fēng)格設(shè)計(jì)方法探討

俞璋凌，趙雅，鐘華

“互聯(lián)網(wǎng)+”時(shí)代，網(wǎng)絡(luò)資訊信息量大、更新速度快，大大降低了用戶體驗(yàn)的友好度，“少即是多”的扁平化風(fēng)格順應(yīng)了時(shí)代發(fā)展，成為了設(shè)計(jì)界的新寵。通過對(duì)“包豪斯風(fēng)格”“瑞士風(fēng)格”和極簡(jiǎn)主義等現(xiàn)代設(shè)計(jì)風(fēng)格的追根溯源，探討了扁平化風(fēng)格流行的根源及其在新媒體領(lǐng)域中的應(yīng)用；并通過研究用戶體驗(yàn)的設(shè)計(jì)方法，探討了扁平化風(fēng)格應(yīng)用于用戶體驗(yàn)設(shè)計(jì)中的具體設(shè)計(jì)原則、設(shè)計(jì)邏輯和設(shè)計(jì)方法。

扁平化風(fēng)格；設(shè)計(jì)方法；“少即是多”；包豪斯風(fēng)格；瑞士風(fēng)格

扁平化風(fēng)格是一種新的設(shè)計(jì)風(fēng)格，提倡“少即是多”的美學(xué)理念。相比傳統(tǒng)的用戶界面設(shè)計(jì)，扁平化風(fēng)格更簡(jiǎn)約，更具有國(guó)際主義風(fēng)格，也更適合運(yùn)用在如今信息量日益繁多的網(wǎng)絡(luò)新媒體上。網(wǎng)絡(luò)新媒體的最大特點(diǎn)就是信息量大、更新速度快，在界面設(shè)計(jì)上要求主次信息區(qū)分明確，正確引導(dǎo)用戶瀏覽。而扁平化設(shè)計(jì)的目的明確、功能指向性強(qiáng)、信息層級(jí)少的特點(diǎn)高度符合網(wǎng)絡(luò)新媒體界面的設(shè)計(jì)要求。二者的結(jié)合可以為眾多的互聯(lián)網(wǎng)用戶提供良好的交互體驗(yàn)，提升用戶對(duì)交互媒介的好感度，增強(qiáng)用戶黏度，將成為未來(lái)“互聯(lián)網(wǎng)+”時(shí)代發(fā)展的必然趨勢(shì)。

一、扁平化風(fēng)格的歷史變遷

伴隨信息化社會(huì)帶來(lái)的快節(jié)奏生活狀態(tài)，人們獲取信息的方式從固定終端逐步走向移動(dòng)終端，使用習(xí)慣從坐在電腦前到隨時(shí)移動(dòng)攜帶的平板電腦和智能手機(jī)，由大屏幕進(jìn)入小屏幕的掌上生活時(shí)代。扁平化風(fēng)格順勢(shì)而為，影響空前，引起了很大的爭(zhēng)議，有些人認(rèn)為是信息大爆炸時(shí)代的產(chǎn)物，這種平庸、毫無(wú)風(fēng)格可言的設(shè)計(jì)是對(duì)大數(shù)據(jù)環(huán)境下信息技術(shù)的一種妥協(xié)。然而，扁平化風(fēng)格并非橫空出世，它淵源于很多經(jīng)典的設(shè)計(jì)，如包豪斯現(xiàn)代主義、瑞士風(fēng)格、極簡(jiǎn)主義。扁平化風(fēng)格也正是在復(fù)古風(fēng)大行其道的時(shí)代的一種繼承和發(fā)展。

（一）包豪斯現(xiàn)代主義

“包豪斯風(fēng)格”又稱“現(xiàn)代主義風(fēng)格”，源于現(xiàn)代主義建筑設(shè)計(jì)，其并非是嚴(yán)格意義上的風(fēng)格，而是一種思潮，對(duì)世界現(xiàn)代設(shè)計(jì)的發(fā)展產(chǎn)生了深遠(yuǎn)的影響。包豪斯是創(chuàng)始人格羅佩斯于1919年在德國(guó)魏瑪所創(chuàng)辦的一所設(shè)計(jì)學(xué)校，在工業(yè)化大生產(chǎn)和大消費(fèi)背景下誕生的包豪斯設(shè)計(jì)體系倡導(dǎo)設(shè)計(jì)要樸素、經(jīng)濟(jì)、簡(jiǎn)約、務(wù)實(shí)并且有意義，用理性科學(xué)的思想代替藝術(shù)上的自我表現(xiàn)和浪漫主義。例如，圖1是典型的包豪斯現(xiàn)代主義風(fēng)格代表作，是由美國(guó)著名圖形設(shè)計(jì)大師蘭德·保羅為IBM公司設(shè)計(jì)的一款享譽(yù)世界的招貼作品。

圖1 包豪斯現(xiàn)代主義風(fēng)格招貼

（二）瑞士風(fēng)格

20世紀(jì)20年代源起于俄國(guó)、德國(guó)與荷蘭的“瑞士風(fēng)格”，是戰(zhàn)后最具影響力的設(shè)計(jì)風(fēng)格之一。瑞士風(fēng)格設(shè)計(jì)強(qiáng)調(diào)簡(jiǎn)約、可讀性和客觀性，喜用網(wǎng)格和無(wú)襯線字體，以便于國(guó)際化的友好交流和視覺形象的辨識(shí)與傳播，形成了一種典型的版式風(fēng)格，又被稱為國(guó)際主義平面設(shè)計(jì)風(fēng)格。如圖2所示為瑞士風(fēng)格設(shè)計(jì)的領(lǐng)軍人物艾米爾·魯?shù)聻樽约旱慕炭茣鳷ypographie所設(shè)計(jì)的一款封面，這種整潔、嚴(yán)謹(jǐn)、工整、理性化、標(biāo)準(zhǔn)化的數(shù)學(xué)方格網(wǎng)絡(luò)基礎(chǔ)構(gòu)圖的方式，是對(duì)“Helvetica”和“Univers”等無(wú)襯線字體的應(yīng)用研究與實(shí)踐。

圖2 瑞士風(fēng)格平面設(shè)計(jì)作品

（三）極簡(jiǎn)主義

極簡(jiǎn)主義萌芽于上世紀(jì)50年代的美國(guó)，是西方現(xiàn)代藝術(shù)流派之一，與其說(shuō)極簡(jiǎn)主義是一種藝術(shù)流派，倒不如說(shuō)它是一種審美方式和生活態(tài)度。極簡(jiǎn)主義以生活為出發(fā)點(diǎn)，設(shè)計(jì)直指人心，杜絕一切多余的裝飾，對(duì)造型進(jìn)行抽象概括，對(duì)元素進(jìn)行刪減提煉，形成了獨(dú)特、簡(jiǎn)明的視覺語(yǔ)言，幫助受眾理解作品的內(nèi)涵，彰顯出一種純粹簡(jiǎn)約、靜逸、舒適的藝術(shù)力量。極簡(jiǎn)主義設(shè)計(jì)主要代表人物是美國(guó)當(dāng)代景觀設(shè)計(jì)師彼得·沃克，他創(chuàng)作設(shè)計(jì)的哈佛大學(xué)唐納噴泉、加尼福尼亞圣迭戈兒童公園等景觀設(shè)計(jì)作品，受到大眾的認(rèn)可與喜歡。因此，極簡(jiǎn)主義風(fēng)格隨后影響到繪畫、雕塑、產(chǎn)品設(shè)計(jì)、服裝設(shè)計(jì)、平面設(shè)計(jì)等諸多領(lǐng)域。如圖3所示為被譽(yù)為最小化頁(yè)面設(shè)計(jì)先驅(qū)的Google，在互聯(lián)網(wǎng)受各種追求表面浮華的混亂頁(yè)面統(tǒng)治中，從上世紀(jì)90年代推出beta版本開始，一直體現(xiàn)與堅(jiān)守簡(jiǎn)潔而聚焦的設(shè)計(jì)思想。

圖3 極簡(jiǎn)主義界面風(fēng)格

（四）扁平化設(shè)計(jì)在網(wǎng)絡(luò)新媒體領(lǐng)域的盛行

2010年末，微軟公司正式發(fā)布了Windows Phone系統(tǒng)的首個(gè)版本W(wǎng)indows Phone7（簡(jiǎn)稱WP7），伴隨著WP7而誕生的則是微軟首創(chuàng)的metro UI進(jìn)行了扁平化設(shè)計(jì)的先驅(qū)嘗試（如圖4所示）；2011年，谷歌公司開發(fā)了Android4.0平臺(tái)（如圖5所示），統(tǒng)一了全新的設(shè)計(jì)語(yǔ)言，特別是新加入的Roboto字體就是一個(gè)有力的見證；2014年初，蘋果公司發(fā)布了iOS7.0版操作系統(tǒng)（如圖6所示），用扁平化的圖標(biāo)設(shè)計(jì)取代喬布斯時(shí)代標(biāo)志性的“擬物”設(shè)計(jì)，完全顛覆了用戶對(duì)iOS的印象。然而，此扁平化設(shè)計(jì)風(fēng)格的全新界面的交互系統(tǒng)不但沒有受到廣大用戶的排斥和抵制，反而贊譽(yù)如潮、大受追捧，據(jù)蘋果官方媒體統(tǒng)計(jì)，iOS7.0的占有率高達(dá)78%，成為如今交互設(shè)計(jì)的主流。作為目前較為前沿的圖形圖像藝術(shù)表達(dá)類型，“扁平化風(fēng)格”迅速崛起，其非常適應(yīng)新媒體環(huán)境下的媒體互動(dòng)性強(qiáng)、快速反饋的溝通文化。

圖4 微軟的Metro Design

圖5 Android4.0操作系統(tǒng)

二、用戶體驗(yàn)設(shè)計(jì)方法

隨著“互聯(lián)網(wǎng)+”和大數(shù)據(jù)時(shí)代的到來(lái)，人們的工作和生活方式都發(fā)生了巨大的變化，越來(lái)越離不開科技和網(wǎng)絡(luò)。最初，人們對(duì)用戶體驗(yàn)的理解更傾向于產(chǎn)品體驗(yàn)；逐漸，產(chǎn)品的差異化越來(lái)越小，人們也更加注重“以身體之，以心驗(yàn)之”的高層次審美需求和情感共鳴。視覺設(shè)計(jì)也從單純的滿足產(chǎn)品需求上升到服務(wù)于用戶設(shè)計(jì)的高度，產(chǎn)品體驗(yàn)也上升到更為廣闊的創(chuàng)新體驗(yàn)。下面分別從戰(zhàn)略層、框架層、行為層、表現(xiàn)層4個(gè)層面分析用戶體驗(yàn)設(shè)計(jì)的方法。

（一）戰(zhàn)略層設(shè)計(jì)方法：滿足用戶目標(biāo)與用戶需求

成功的用戶體驗(yàn)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”。知道用戶體驗(yàn)過程中對(duì)交互設(shè)計(jì)的信息符號(hào)、思維、過程、認(rèn)知的期許和目標(biāo)，借鑒心理學(xué)、行為學(xué)、人機(jī)工程學(xué)、計(jì)算機(jī)圖形學(xué)等相關(guān)領(lǐng)域的科學(xué)方法，在傳統(tǒng)方法和適應(yīng)性方法中獲取數(shù)據(jù)和信息，利用意象尺度、感性工學(xué)、風(fēng)格設(shè)計(jì)等創(chuàng)新性方法，突出整體戰(zhàn)略性設(shè)計(jì)方法的科學(xué)性、合理性和邏輯性，開展對(duì)用戶體驗(yàn)過程中戰(zhàn)略層這一綜合設(shè)計(jì)過程的研究。

（二）框架層設(shè)計(jì)方法：信息架構(gòu)與信息設(shè)計(jì)

用戶體驗(yàn)會(huì)讓用戶全身心傾注情感，只有投入的情感得以回報(bào)才能給用戶帶來(lái)更多的期望。所以，框架層設(shè)計(jì)方法要以“以用戶為中心的設(shè)計(jì)”為目標(biāo)，更好地將信息進(jìn)行準(zhǔn)確、清晰地傳達(dá)，不讓用戶產(chǎn)生挫敗感［1］。框架層的設(shè)計(jì)需要確定用什么功能和形式來(lái)實(shí)現(xiàn)，關(guān)注點(diǎn)在獨(dú)立的組件以及它們之間的相互關(guān)系上，保證內(nèi)容可被感知，保證內(nèi)容中組件的可操作性，保證內(nèi)容是可被理解的。設(shè)計(jì)的信息框架是一個(gè)統(tǒng)一化的信息平臺(tái)，首先要將所收集的用戶需求的相關(guān)信息進(jìn)行優(yōu)先級(jí)排序，對(duì)信息進(jìn)行進(jìn)一步提煉和概括；其次，框架層設(shè)計(jì)也是對(duì)設(shè)計(jì)過程中不同團(tuán)隊(duì)、不同背景的成員所完成的各種具有代表性信息的整合和歸納。信息模型框架有利于設(shè)計(jì)師在設(shè)計(jì)流程中組織和管理信息［2］。

（三）行為層設(shè)計(jì)方法：交互設(shè)計(jì)

用戶搜索、瀏覽、閱讀、跟帖、投票、玩游戲、買賣交易，這些看似簡(jiǎn)單點(diǎn)擊鼠標(biāo)方可實(shí)現(xiàn)的行為，專業(yè)地說(shuō)就是完成人機(jī)交互的過程。交互設(shè)計(jì)是一個(gè)輸入和輸出的過程，人通過人機(jī)界面向計(jì)算機(jī)輸入指令，計(jì)算機(jī)經(jīng)過處理后把輸出結(jié)果呈現(xiàn)給用戶［3］。交互設(shè)計(jì)的重要指標(biāo)是可用性設(shè)計(jì)，即從用戶角度衡量產(chǎn)品是否有效、易學(xué)、安全、高效、好記、少錯(cuò)?？捎眯允腔颈ＷC，除此之外還要考慮用戶體驗(yàn)，給用戶帶去驚喜、收獲和意想不到的感覺。

（四）表現(xiàn)層設(shè)計(jì)方法：視覺設(shè)計(jì)

視覺設(shè)計(jì)通過視覺語(yǔ)言將前面戰(zhàn)略層、框架層、行為層的信息表達(dá)出來(lái)，用于傳達(dá)正確的目標(biāo)導(dǎo)向、合理的產(chǎn)品思維、全面的設(shè)計(jì)規(guī)范、友好的用戶體驗(yàn)和一定的商業(yè)價(jià)值。好的視覺設(shè)計(jì)是將用戶信息、產(chǎn)品功能、審美文化融合統(tǒng)一，成為溝通現(xiàn)實(shí)與虛擬的媒介，在人機(jī)交互過程中使用戶輕松地理解交互的流程，消除用戶對(duì)于虛擬環(huán)境的陌生感與距離感，消除用戶心理上的消極心態(tài)，以達(dá)到更愉悅的體驗(yàn)狀態(tài)［4］。

三、扁平化風(fēng)格應(yīng)用于用戶體驗(yàn)（UX）設(shè)計(jì)

蘋果公司首席設(shè)計(jì)官喬納森·艾維在WWDC大會(huì)演講時(shí)曾提出這樣一種觀點(diǎn)：“設(shè)計(jì)不僅僅關(guān)乎外表，還要囊括一切，包括工作的方式等多個(gè)層面。設(shè)計(jì)會(huì)決定我們的客觀體驗(yàn)，我認(rèn)為簡(jiǎn)潔中體現(xiàn)了深邃、恒久的魅力。它為復(fù)雜的系統(tǒng)引入了秩序?！北馄交L(fēng)格設(shè)計(jì)并非意味著視覺上看似簡(jiǎn)單的剔除、簡(jiǎn)化，而是不斷提升和深度挖掘信息的內(nèi)涵，是對(duì)精致細(xì)節(jié)的無(wú)限苛求。

（一）少即是多：讀圖時(shí)代的UX設(shè)計(jì)風(fēng)格

風(fēng)格設(shè)計(jì)是一個(gè)不斷迭代和更新的過程。用戶體驗(yàn)設(shè)計(jì)同樣如此，不同用戶在特定環(huán)境中的體驗(yàn)也是有差異的。扁平化風(fēng)格提倡“少即是多”的設(shè)計(jì)理念，在讀圖時(shí)代的有限界面區(qū)域中，去掉了陰影、漸變、紋理、3D效果等圖形視覺修飾元素，按鈕不再有線框，文字本身即是按鈕。比如，在iOS7操作系統(tǒng)中需要將狀態(tài)欄與標(biāo)題欄一起考慮進(jìn)行設(shè)計(jì)。底部條上的操作按鈕，去除了漸變、高光的襯托，為了確保其可用性、提示性，將控件變得“隱形”，在其被需要的時(shí)候出現(xiàn)，不被需要時(shí)就隱藏起來(lái)。再如，運(yùn)用Safari瀏覽器瀏覽網(wǎng)頁(yè)的時(shí)候，搜索框中的地址欄即會(huì)縮小到網(wǎng)頁(yè)的上方，若打開iPhone轉(zhuǎn)換至橫屏模式按鈕，Safari瀏覽器還可以自動(dòng)轉(zhuǎn)為全屏模式。這一設(shè)計(jì)細(xì)節(jié)打動(dòng)了很多用戶，使網(wǎng)頁(yè)顯示區(qū)域擴(kuò)大，動(dòng)態(tài)過渡也十分自然，恰到好處，讓用戶體會(huì)到設(shè)計(jì)師的用心良苦。這樣走心的扁平化設(shè)計(jì)，對(duì)于視覺設(shè)計(jì)師而言不是減法，而是加法。設(shè)計(jì)師需要考慮如何有效地呈現(xiàn)設(shè)計(jì)元素，關(guān)注更多的是信息層級(jí)的突出，界面上所呈現(xiàn)的各個(gè)元素之間的關(guān)系。所以說(shuō)設(shè)計(jì)元素越簡(jiǎn)單，對(duì)設(shè)計(jì)師的要求也就越高。

（二）內(nèi)容為王：碎片化時(shí)代的UX設(shè)計(jì)思維

在技術(shù)進(jìn)化、器具演變和人類生存發(fā)展過程中，如今每個(gè)用戶都能夠以自我方式直接操作數(shù)字信息［5］。因此，個(gè)人的信息變得重要，社交、分享等功能變得強(qiáng)大。信息碎片化正是伴隨著信息網(wǎng)絡(luò)技術(shù)的發(fā)展應(yīng)運(yùn)而生的，是指通過網(wǎng)絡(luò)接觸到的快餐式的、條目式的、海量的信息。在此環(huán)境下，要使界面上的信息更有效地傳達(dá)，人們應(yīng)更重視信息內(nèi)容本身，而不是呈現(xiàn)信息的方式；更關(guān)注個(gè)人用戶和應(yīng)用的關(guān)系，創(chuàng)造出更優(yōu)的用戶體驗(yàn)，建立良好的用戶生態(tài)系統(tǒng)；適當(dāng)有選擇地在界面中添加平面標(biāo)簽和信息圖表，精簡(jiǎn)完成目標(biāo)任務(wù)所需的導(dǎo)航步驟，謹(jǐn)慎使用透視、陰影與紋理疊加技術(shù)等。這種扁平化風(fēng)格設(shè)計(jì)需要設(shè)計(jì)師更多的思考，建立統(tǒng)一的設(shè)計(jì)語(yǔ)言，幫助用戶降低認(rèn)知負(fù)荷。只有這樣才能提升用戶黏度，擁有更多屬于自己的用戶。

（三）協(xié)同共享：云時(shí)代的UX設(shè)計(jì)邏輯

互聯(lián)網(wǎng)的發(fā)展快速進(jìn)入了“云”時(shí)代，人們?nèi)粘５墓ぷ?、生活、娛樂等都漸漸擺脫了時(shí)間和空間的限制，這個(gè)變化也讓移動(dòng)媒體對(duì)傳統(tǒng)桌面系統(tǒng)產(chǎn)生了沖擊，使有限的屏幕能呈現(xiàn)更多精彩的內(nèi)容，成為了設(shè)計(jì)的主要課題。那么，界面需要強(qiáng)調(diào)的元素都在閱讀邏輯的規(guī)律下展現(xiàn)，研究設(shè)計(jì)邏輯也就是研究人的思維規(guī)律［6］。

最后給出基于用戶體驗(yàn)的扁平化風(fēng)格設(shè)計(jì)的邏輯思維圖（如圖7所示）。

圖7 UX中扁平化風(fēng)格設(shè)計(jì)邏輯思維圖

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

在信息大爆炸時(shí)代，用戶體驗(yàn)設(shè)計(jì)面臨不同情況下的功能訴求與情感訴求，需要面對(duì)不同的硬件類型以及不同的用戶群體。然而，不同用戶在特定環(huán)境中的體驗(yàn)也會(huì)產(chǎn)生差異，用戶體驗(yàn)本身具有動(dòng)態(tài)性、可變性特點(diǎn)。扁平化風(fēng)格具有以功能目標(biāo)為導(dǎo)向、以用戶為中心、以快速響應(yīng)式設(shè)計(jì)等特點(diǎn)，為適應(yīng)新媒體中很多不兼容、不確定的環(huán)境因素，通過精簡(jiǎn)目標(biāo)信息層級(jí)，去除圖形冗余、厚重和繁雜的裝飾效果，快速建立統(tǒng)一的設(shè)計(jì)語(yǔ)言，幫助用戶降低認(rèn)知負(fù)荷，減輕使用難度，達(dá)成友好交互，現(xiàn)已快速席卷界面設(shè)計(jì)、交互設(shè)計(jì)等新媒體行業(yè)，未來(lái)必將以其獨(dú)特的設(shè)計(jì)語(yǔ)言和設(shè)計(jì)風(fēng)格在其他設(shè)計(jì)領(lǐng)域大放光彩。

[1]唐納德A諾曼.設(shè)計(jì)心理學(xué)3：情感設(shè)計(jì)[M].北京：中信出版社，2012：52.

[2]夏穎翀.數(shù)字產(chǎn)品界面中樸素的設(shè)計(jì)和冗余的設(shè)計(jì)[J].裝飾，2013（5）.

[3]MARCUS A.The Past 100 Years of the Future：HCI and User-Experience Design in Science-Fiction Movies and Television[M]//Siggraph Asia.New York：ACM，2015：88-95.

[4]MARCUS A.Mobile Persuasion Design[M].Berlin：Springer，2012：37.

[5]魯曉波，劉月林.具身交互：基于日常技能而設(shè)計(jì)[J].裝飾，2013（3）.

[6]辛向陽(yáng).交互設(shè)計(jì)：從物理邏輯到行為邏輯[J].裝飾，2015（1）.

（編輯：文汝）

J511

A

1673-1999（2016）11-0093-04

俞璋凌（1983-），女，碩士，安徽大學(xué)藝術(shù)與傳媒學(xué)院（安徽合肥230011）美術(shù)設(shè)計(jì)系講師，研究方向?yàn)榻换ピO(shè)計(jì)、新媒體設(shè)計(jì)；趙雅（1982-），女，碩士，安徽新華學(xué)院（安徽合肥230088）工業(yè)設(shè)計(jì)系講師，研究方向?yàn)楫a(chǎn)品形態(tài)設(shè)計(jì)、計(jì)算機(jī)輔助設(shè)計(jì)；鐘華（1981-），女，碩士，安徽藝術(shù)職業(yè)學(xué)院（安徽合肥230009）美術(shù)系講師，研究方向?yàn)楣菜囆g(shù)設(shè)計(jì)。

2016-07-11

安徽省人文社科重點(diǎn)項(xiàng)目“基于扁平化風(fēng)格的新媒體藝術(shù)交互設(shè)計(jì)研究”（SK2015A265）；安徽省高校優(yōu)秀青年人才支持計(jì)劃重點(diǎn)項(xiàng)目“新媒體藝術(shù)交互設(shè)計(jì)研究”（gxyqZD2016379）；安徽大學(xué)青年人才項(xiàng)目“文化科技融合視野下的新媒體藝術(shù)展示應(yīng)用研究”（2014yjrc02）。