基于用戶體驗的扁平化風格設計方法探討

俞璋凌，趙雅，鐘華

基于用戶體驗的扁平化風格設計方法探討

俞璋凌，趙雅，鐘華

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

扁平化風格；設計方法；“少即是多”；包豪斯風格；瑞士風格

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

一、扁平化風格的歷史變遷

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

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

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

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

（二）瑞士風格

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

圖2 瑞士風格平面設計作品

（三）極簡主義

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

圖3 極簡主義界面風格

（四）扁平化設計在網(wǎng)絡新媒體領域的盛行

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

圖4 微軟的Metro Design

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

二、用戶體驗設計方法

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

（一）戰(zhàn)略層設計方法：滿足用戶目標與用戶需求

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

（二）框架層設計方法：信息架構與信息設計

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

（三）行為層設計方法：交互設計

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

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

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

三、扁平化風格應用于用戶體驗（UX）設計

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

（一）少即是多：讀圖時代的UX設計風格

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

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

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

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

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

最后給出基于用戶體驗的扁平化風格設計的邏輯思維圖（如圖7所示）。

圖7 UX中扁平化風格設計邏輯思維圖

四、結語

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

[1]唐納德A諾曼.設計心理學3：情感設計[M].北京：中信出版社，2012：52.

[2]夏穎翀.數(shù)字產(chǎn)品界面中樸素的設計和冗余的設計[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]魯曉波，劉月林.具身交互：基于日常技能而設計[J].裝飾，2013（3）.

[6]辛向陽.交互設計：從物理邏輯到行為邏輯[J].裝飾，2015（1）.

（編輯：文汝）

J511

A

1673-1999（2016）11-0093-04

俞璋凌（1983-），女，碩士，安徽大學藝術與傳媒學院（安徽合肥230011）美術設計系講師，研究方向為交互設計、新媒體設計；趙雅（1982-），女，碩士，安徽新華學院（安徽合肥230088）工業(yè)設計系講師，研究方向為產(chǎn)品形態(tài)設計、計算機輔助設計；鐘華（1981-），女，碩士，安徽藝術職業(yè)學院（安徽合肥230009）美術系講師，研究方向為公共藝術設計。

2016-07-11

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