淺析移動(dòng)應(yīng)用中界面設(shè)計(jì)的風(fēng)格化應(yīng)用

張華佳　錢學(xué)　田申辰

摘要：隨著時(shí)代的發(fā)展，我們的生活早已離不開移動(dòng)應(yīng)用。越來越多的用戶在追求移動(dòng)應(yīng)用的設(shè)計(jì)界面美觀度、愉悅的交互感的同時(shí)，又需要體現(xiàn)個(gè)人獨(dú)特而又鮮明的風(fēng)格。本文首先闡述了移動(dòng)應(yīng)用中界面設(shè)計(jì)的風(fēng)格演變，其次從文字、圖標(biāo)、色彩三方面分析了界面中視覺語言的設(shè)計(jì)與應(yīng)用，最后總結(jié)界面設(shè)計(jì)的風(fēng)格化是如何在移動(dòng)應(yīng)用中扮演著重要的角色。

關(guān)鍵詞：界面設(shè)計(jì);風(fēng)格;視覺;用戶

界面設(shè)計(jì)從英文直譯過來就是指用戶與信息交互的媒介。隨著互聯(lián)網(wǎng)的高速發(fā)展、技術(shù)設(shè)備的革新，界面設(shè)計(jì)經(jīng)歷了從最開始用鍵盤輸出命令執(zhí)行交互的命令行界面，總體是黑白像素風(fēng)格;到更直觀的用圖片形式執(zhí)行人機(jī)交互的圖形用戶界面，大體是彩色像素風(fēng)格;到運(yùn)用三維動(dòng)畫、影片等動(dòng)態(tài)方式執(zhí)行人機(jī)交互的多媒體用戶界面，大體是擬物風(fēng)格;到通過視覺、聽覺、觸覺、嗅覺等多方向執(zhí)行人機(jī)交互的多通道界面，大體是簡(jiǎn)單的3D立體風(fēng)格;到運(yùn)用圖形VR技術(shù)和圖像全景技術(shù)執(zhí)行實(shí)時(shí)三維交互的虛擬現(xiàn)實(shí)用戶界面等發(fā)展階段。隨之，界面設(shè)計(jì)的風(fēng)格也在變化，從最開始的單色數(shù)碼風(fēng)的二維風(fēng)格;逐漸變成彩色擬物風(fēng)格，隨著時(shí)間的推移擬物風(fēng)格逐漸減少控件上裝飾細(xì)節(jié)的表現(xiàn)，追求類似剪影的簡(jiǎn)潔式擬物;后來扁平風(fēng)格（圖1）開始流行。順應(yīng)當(dāng)下信息大爆炸的時(shí)代背景，人們對(duì)界面設(shè)計(jì)中視覺設(shè)計(jì)的部分要求越來越高，要求追求極簡(jiǎn)風(fēng)格，減少裝飾性的元素、減少高明度的色彩等。

在通訊高度發(fā)達(dá)的時(shí)代，手機(jī)作為連接人與互聯(lián)網(wǎng)的最便攜產(chǎn)品勢(shì)必會(huì)成為日常生活中的必需品，同時(shí)人們也需要手機(jī)具有更高效的操作系統(tǒng)和更符合審美的操作界面。伴隨著用戶基數(shù)的增大，技術(shù)的日趨成熟，界面設(shè)計(jì)風(fēng)格總體會(huì)趨于多元化。近年來界面設(shè)計(jì)中有非常多色彩艷麗且生動(dòng)充滿活力的元素，用戶容易產(chǎn)生視覺疲勞，因此，使用簡(jiǎn)單細(xì)線和黑白灰插圖的無色界面設(shè)計(jì)會(huì)受到一波歡迎。將極簡(jiǎn)主義美學(xué)大量運(yùn)用到界面設(shè)計(jì)中，表現(xiàn)出界面的干凈清新，極大的保留界面的可讀性，使用戶盡可能簡(jiǎn)單、高效地與產(chǎn)品交互。不僅如此，未來界面設(shè)計(jì)中的3D元素和動(dòng)畫插圖也會(huì)增加，其相比平面更加吸引用戶，也能幫助用戶理解更復(fù)雜的頁面和概念，同時(shí)，3D也會(huì)作為主視覺和IP形象被廣泛應(yīng)用到宣傳動(dòng)畫中，便于凸顯品牌特色。另外，夜間模式的深色主題設(shè)計(jì)風(fēng)格也會(huì)繼續(xù)流行，視覺上看，夜間模式的界面設(shè)計(jì)看起來更時(shí)尚，元素更潮流，同時(shí)還能緩解用眼過度的疲勞。將包豪斯風(fēng)格運(yùn)用到界面設(shè)計(jì)中，注重平衡的形式和抽象的形狀，去除裝飾性，簡(jiǎn)潔明了的表現(xiàn)界面的功能。此外，玻璃擬態(tài)風(fēng)格、新擬態(tài)風(fēng)格等改良的新興風(fēng)格也會(huì)掀起一波新浪潮。

界面設(shè)計(jì)與日常說的藝術(shù)不同，在藝術(shù)領(lǐng)域，藝術(shù)家的作品與觀眾的交流只是單向的，要求觀眾主動(dòng)理解藝術(shù)家表達(dá)的信息。但在界面設(shè)計(jì)中用戶和設(shè)計(jì)者之間的交流是雙向的，設(shè)計(jì)師必須做到讓用戶準(zhǔn)確地明白自己所傳達(dá)的信息，而且設(shè)計(jì)者往往需要突出設(shè)計(jì)的主題效果，體現(xiàn)設(shè)計(jì)的獨(dú)特風(fēng)格來吸引用戶的注意，留住目標(biāo)用戶。因此，界面設(shè)計(jì)一般會(huì)采用既能準(zhǔn)確快速地傳達(dá)信息又能吸引用戶的視覺語言，例如文字、圖標(biāo)、色彩等視覺符號(hào)，來增加界面視覺語言的靈活性和生動(dòng)性，在吸引用戶的同時(shí)實(shí)現(xiàn)信息傳遞的高效性。

文字是廣泛應(yīng)用于界面設(shè)計(jì)中的重要的視覺符號(hào)之一。當(dāng)語言所傳達(dá)的信息轉(zhuǎn)換成了文字的形式，它就從一個(gè)容易消散、遺忘的事物轉(zhuǎn)變成了一種長(zhǎng)時(shí)間的、視覺上的事物，用戶可以通過閱讀直接了當(dāng)?shù)氐牧私馑鶄鬟_(dá)的信息。這樣既保證了傳遞信息的穩(wěn)定性，也保證了傳遞大量信息的準(zhǔn)確性。需要注意的是，雖然文字能夠增強(qiáng)信息的傳遞性和穩(wěn)定性，但也存在著一定的局限性，同一界面內(nèi)，過于繁雜或排列單調(diào)的文字會(huì)使用戶產(chǎn)生視覺疲勞、無聊感和輕微的厭惡心理?，F(xiàn)今用戶審美逐步提高，對(duì)使用軟件時(shí)的體驗(yàn)感也有更高的要求。以往的界面設(shè)計(jì)普遍存在著文字排版過于緊湊，甚至不符合閱讀習(xí)慣;整體形狀雜亂無序，個(gè)體大小不一等問題，其大大阻礙了用戶對(duì)信息的識(shí)別。因此，設(shè)計(jì)者在排列文字時(shí)，應(yīng)注意文字設(shè)計(jì)的規(guī)范性和整體性。從文字的規(guī)范性上來說，文字的大小、間距的排版設(shè)計(jì)首先要符合用戶的閱讀習(xí)慣，使文字容易閱讀，便于用戶識(shí)別、記憶。在此前提下，可以將文字信息與圖標(biāo)搭配來完善界面設(shè)計(jì)，通過圍繞圖標(biāo)改變文字的排列方式，減少文字的數(shù)量，或?qū)⑽淖肿中闻c圖標(biāo)結(jié)合等，這樣豐富多樣且有設(shè)計(jì)感的設(shè)計(jì)，更易滿足用戶對(duì)信息快速讀取和審美需求，也便于界面整體的設(shè)計(jì)風(fēng)格統(tǒng)一。

圖標(biāo)是確定設(shè)計(jì)界面風(fēng)格基調(diào)的一個(gè)重要環(huán)節(jié)，圖標(biāo)作為最為直觀的視覺符號(hào)，一般會(huì)通過偏隱喻的方式來暗示所指的功能和操作，用戶可以通過圖標(biāo)快速地找到需要的功能。這樣做可以減少用戶的學(xué)習(xí)時(shí)間和成本，帶給用戶良好的使用體驗(yàn)。但需要注意的一點(diǎn)是，人們?cè)诶斫鈭D標(biāo)信息時(shí)，一般會(huì)憑借個(gè)人的性格、獨(dú)有的感受、生活經(jīng)歷等做出自己的理解。因此，設(shè)計(jì)圖標(biāo)時(shí)，應(yīng)該將廣大用戶認(rèn)知事物的經(jīng)驗(yàn)加以總結(jié)。設(shè)計(jì)者將其轉(zhuǎn)化為圖標(biāo)時(shí)，應(yīng)該使其更有指向性，、做到最高效地使用戶理解功能和所傳達(dá)的信息，提高向用戶傳遞信息的效率。圖標(biāo)設(shè)計(jì)還可以和文字配合使用，給枯燥無味的大段文字?jǐn)⑹鲈鎏砣の缎裕部梢院臀淖纸Y(jié)合成一個(gè)整體，讓界面內(nèi)容不再單調(diào)，富有豐富的情感層次。從色彩的方面來說，不同圖標(biāo)的色彩搭配設(shè)計(jì)，能增強(qiáng)視覺沖擊力，給用戶帶來多樣的視覺感受，進(jìn)而加深用戶對(duì)品牌文化的印象。圖標(biāo)本身還具備千變?nèi)f化，生動(dòng)靈活的形象特點(diǎn)，可以傳達(dá)豐富的感情，所以僅作為一個(gè)單獨(dú)的視覺符號(hào)，就可以很容易地傳遞信息和表達(dá)情感，讓整個(gè)界面風(fēng)格兼有藝術(shù)和設(shè)計(jì)意義上的表達(dá)。與此同時(shí)，在設(shè)計(jì)圖標(biāo)時(shí)仍然需要保證界面整體風(fēng)格的統(tǒng)一，與另外的視覺元素在設(shè)計(jì)語言上、用戶觀感和體驗(yàn)感上保持一致，建立一套完整的設(shè)計(jì)系統(tǒng)和規(guī)范，同時(shí)也需要在與整體界面和諧時(shí)稍微夸張化和突出化，保證其功能性，使其能夠在界面中引導(dǎo)用戶。

色彩構(gòu)成了我們這個(gè)絢麗燦爛、豐富多彩的世界，早已深刻地融入到我們的物質(zhì)生活和精神文化中。在當(dāng)今的信息時(shí)代，色彩作為一種較為典型的視覺要素，被廣泛運(yùn)用在移動(dòng)應(yīng)用的界面設(shè)計(jì)中。界面設(shè)計(jì)中的色彩應(yīng)用是視覺語言中除了文字和圖標(biāo)之外，最能給用戶帶來深刻心理體驗(yàn)的一種設(shè)計(jì)表現(xiàn)方式。在使用不同色彩時(shí)，首先要注意人們的心理情感因素在色彩中的應(yīng)用。人們?cè)诂F(xiàn)實(shí)生活中，對(duì)于不同的顏色刺激會(huì)產(chǎn)生不同的心理感受，色彩有色相、明度和純度三個(gè)基本屬性以及冷暖兩種色系，色彩設(shè)計(jì)應(yīng)用中普遍認(rèn)為暖色系的色彩常常會(huì)給用戶傳遞出一種歡樂、喜慶、熱烈的感覺;而冷色系的色彩卻會(huì)給用戶傳遞出一種冷靜、樸實(shí)、平和的感覺。在界面設(shè)計(jì)色彩應(yīng)用中常用的顏色有黑色、灰色、紅色、橙色、綠色和藍(lán)色。其中黑色常作為界面中的文字顏色;灰色則傳達(dá)出智能、仔細(xì)、沉著的感覺;紅色給人暖心、激烈、喜慶等感覺;橙色通過其很高的辨識(shí)度，給人親密爽朗、溫厚熱情的感覺;綠色容易使人聯(lián)想到大自然，是一種帶有希望和穩(wěn)定感的色調(diào)，而藍(lán)色則給人寧靜、憂郁、科技感的感覺。因此為了讓移動(dòng)端界面設(shè)計(jì)的色彩效果充分考慮到對(duì)人的心理暗示作用，主要會(huì)通過調(diào)節(jié)以上的色彩特性來進(jìn)行界面中的色彩應(yīng)用設(shè)計(jì)。例如在設(shè)計(jì)以閱讀功能為主的移動(dòng)界面應(yīng)用時(shí)應(yīng)盡量使用冷色系的顏色，以知乎為例（圖2）。反之在設(shè)計(jì)交互操作頻繁的移動(dòng)應(yīng)用時(shí)應(yīng)多使用暖色系的顏色，以購(gòu)物APP為例（圖3），其次要注意美學(xué)規(guī)律的因素在色彩中的應(yīng)用，它有著嚴(yán)格指導(dǎo)的作用。例如界面設(shè)計(jì)中盡量避免顏色亮度、飽和度過高的情況從而讓用戶產(chǎn)生視覺疲勞。如果設(shè)計(jì)的部分是需要指導(dǎo)用戶進(jìn)行交互操作時(shí)，設(shè)計(jì)則以簡(jiǎn)單的純色為主;如果是需要重點(diǎn)突出界面的視覺層次和吸引力，就可以增強(qiáng)或減弱整體色彩飽和度和明度，拉開色差以作區(qū)分。最后要注意色彩與文字以及圖標(biāo)的搭配和諧度，注意整體顏色的和諧統(tǒng)一性，避免使用過多顏色。例如在對(duì)文本進(jìn)行樣式控制中運(yùn)用色彩和字重來營(yíng)造對(duì)比效果（圖4）。每種顏色都有一個(gè)視覺權(quán)重，主要內(nèi)容使用深色，次要內(nèi)容使用灰色或降低透明度，需要強(qiáng)調(diào)的內(nèi)容使用界面主色調(diào)，并使用兩種不同的字重來營(yíng)造豐富的視覺層次感，突出視覺重點(diǎn)，增強(qiáng)用戶體驗(yàn)感。

隨著智能化技術(shù)的不斷進(jìn)步與發(fā)展，新興APP 遍地開花，用戶對(duì)產(chǎn)品的要求不再是最初的功能性，對(duì)使用時(shí)的易操作性、視覺舒適性等要求也在不斷提高，所以對(duì)界面設(shè)計(jì)的要求也在不斷提升?，F(xiàn)在，界面設(shè)計(jì)的風(fēng)格化在移動(dòng)應(yīng)用中扮演著重要的角色。界面視覺語言的風(fēng)格化并不是華而不實(shí)的粉飾場(chǎng)面，而是對(duì)界面視覺品質(zhì)和視覺吸引力的創(chuàng)造，主要目的是在界面美觀的同時(shí)能根據(jù)用戶的生活習(xí)慣，既滿足其功能訴求，又能滿足其心理需求，使用用戶盡可能簡(jiǎn)單、高效地與產(chǎn)品交互。

參考文獻(xiàn)

[1]徐孟瑾.基于極簡(jiǎn)主義視覺體驗(yàn)的APP界面設(shè)計(jì)研究[D].江南大學(xué)，2016.

[2]潘雅萌.移動(dòng)終端交互式界面的視覺語言情感化研究[D].青島大學(xué)，2019.

[3]吳宜桐.平面視覺語言在手機(jī)UI界面設(shè)計(jì)中的交互研究[D].東北電力大學(xué)，2018.

[4]楊超男.色彩的心理效應(yīng)在扁平化設(shè)計(jì)風(fēng)格界面中的研究與應(yīng)用[D].西安工程大學(xué)，2016.

[5]江亞妮.基于用戶體驗(yàn)的移動(dòng)應(yīng)用界面視覺設(shè)計(jì)的研究[D].東華大學(xué)，2016.

[6]朱南瑾，王佳惠.分析“扁平化設(shè)計(jì)”在手機(jī)界面設(shè)計(jì)中的應(yīng)用[J].藝術(shù)品鑒，2021（06）：84-85.

本文系南京工業(yè)大學(xué)浦江學(xué)院大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目資金資助，項(xiàng)目編號(hào)PJ20201390557。