智能手機(jī)圖形界面的扁平化視覺(jué)設(shè)計(jì)

【摘 要】 文章分析了智能手機(jī)圖形界面平面化視覺(jué)設(shè)計(jì)的現(xiàn)狀、特性與扁平化視覺(jué)設(shè)計(jì)的優(yōu)勢(shì)，認(rèn)為智能手機(jī)圖形界面的扁平化視覺(jué)設(shè)計(jì)原則是極簡(jiǎn)化、抽象化和愉悅感，并從文字、色彩及圖形三個(gè)方面探索了智能手機(jī)扁平化設(shè)計(jì)的視覺(jué)元素，以期為業(yè)界提供一些參考。

【關(guān) 鍵 詞】智能手機(jī)；圖形界面；扁平化設(shè)計(jì)

【作者單位】王青嵩，聊城大學(xué)美術(shù)學(xué)院。

扁平化視覺(jué)設(shè)計(jì)最初的概念是由Google提出的，英文名為“flat design”。扁平化概念是去除冗余、厚重和繁雜的裝飾效果，在圖形界面設(shè)計(jì)中，以符號(hào)化、抽象化和極簡(jiǎn)化的圖形為主，去除如陰影、漸變及紋理等用于裝飾作用的部分，使視覺(jué)效果更直觀，更干凈利落，同時(shí)能夠快速傳達(dá)信息。目前，扁平化視覺(jué)設(shè)計(jì)運(yùn)用得最成熟、最系統(tǒng)的是微軟公司的windows8界面與蘋(píng)果公司ios7.0以上的系統(tǒng)界面。除此之外，網(wǎng)頁(yè)設(shè)計(jì)、多媒體電子書(shū)、手機(jī)及其他的界面設(shè)計(jì)也大多開(kāi)始采用扁平化視覺(jué)設(shè)計(jì)?，F(xiàn)階段，扁平化視覺(jué)設(shè)計(jì)的理念在智能手機(jī)圖形界面中的使用還沒(méi)有得到充分的開(kāi)發(fā)，本文針對(duì)智能手機(jī)圖形界面中扁平化視覺(jué)設(shè)計(jì)進(jìn)行探討應(yīng)該具有一定的創(chuàng)新意義。

一、當(dāng)代智能手機(jī)圖形界面中扁平化視覺(jué)設(shè)計(jì)的發(fā)展?fàn)顩r

日常生活中我們經(jīng)常會(huì)聽(tīng)到“扁平化設(shè)計(jì)”這個(gè)詞。在電腦網(wǎng)頁(yè)和移動(dòng)設(shè)備終端中常會(huì)采用扁平化設(shè)計(jì)風(fēng)格，如網(wǎng)頁(yè)設(shè)計(jì)、板式設(shè)計(jì)和logo設(shè)計(jì)等。在智能手機(jī)圖形界面中，扁平化視覺(jué)設(shè)計(jì)相對(duì)成熟的是Aandroid系統(tǒng)和蘋(píng)果公司的ios7.0以上系統(tǒng)界面，其整潔有序、風(fēng)格統(tǒng)一的界面設(shè)計(jì)得到了用戶(hù)的一致好評(píng)。不過(guò)，在智能手機(jī)圖形界面設(shè)計(jì)中也出現(xiàn)了大量濫用扁平化設(shè)計(jì)的狀況，為了達(dá)到扁平化的視覺(jué)美觀而忽略了用戶(hù)體驗(yàn)的現(xiàn)象屢見(jiàn)不鮮，因此導(dǎo)致智能手機(jī)操作不便與交互困難的情況時(shí)有出現(xiàn)。針對(duì)扁平化視覺(jué)設(shè)計(jì)的認(rèn)識(shí)和理解，無(wú)論是學(xué)術(shù)界還是設(shè)計(jì)界都存在很大的爭(zhēng)議，網(wǎng)絡(luò)上對(duì)于扁平化視覺(jué)設(shè)計(jì)的討論也非常激烈，但觀點(diǎn)都是從自身體驗(yàn)或是單一的角度去理解，缺乏系統(tǒng)論述。擺脫對(duì)扁平化視覺(jué)設(shè)計(jì)的偏見(jiàn)，理解扁平化視覺(jué)設(shè)計(jì)的精髓，靈活運(yùn)用扁平化視覺(jué)設(shè)計(jì)的元素語(yǔ)言，是當(dāng)今設(shè)計(jì)實(shí)踐與學(xué)術(shù)理論十分重要的一個(gè)問(wèn)題。

二、智能手機(jī)圖形界面的特性與扁平化視覺(jué)設(shè)計(jì)的優(yōu)勢(shì)分析

智能手機(jī)圖形界面設(shè)計(jì)相對(duì)于其他用戶(hù)界面的形式而言更具有自己的獨(dú)特性，設(shè)計(jì)者必須熟知智能手機(jī)圖形界面的特性，才能更快地去研究和開(kāi)發(fā)。通常而言，智能手機(jī)圖形界面有以下幾種特性。（1）數(shù)字技術(shù)化。智能手機(jī)圖形界面是利用二進(jìn)制進(jìn)行編碼從而實(shí)現(xiàn)數(shù)字技術(shù)化的，它將聲音、文字和動(dòng)畫(huà)等轉(zhuǎn)換為數(shù)字，由此進(jìn)行手機(jī)終端的信息傳輸。（2）信息圖形化。智能手機(jī)圖形界面將圖形、影像和聲音等視聽(tīng)元素以信息的方式反饋給用戶(hù)，圖形不受限制，多種形式的圖形信息交流使得人與人之間的交流更加便捷。（3）交流互動(dòng)性。《數(shù)字化生存》一書(shū)中將電子移動(dòng)設(shè)備稱(chēng)為“互動(dòng)的多媒體”，用戶(hù)通過(guò)單指或者多指操作而獲得智能手機(jī)圖形界面的反饋，還可以通過(guò)其他的命令按鈕去操作，達(dá)到一種良好的人機(jī)交互的效果。（4）直觀操作性。智能手機(jī)已經(jīng)擺脫了鍵盤(pán)而采用手指觸碰的設(shè)計(jì)，電容觸摸屏幕已經(jīng)成為智能手機(jī)的必備配置，用戶(hù)可以直接用手點(diǎn)擊屏幕操作，達(dá)到發(fā)布命令和接收信息的目的。

在網(wǎng)絡(luò)時(shí)代背景下，大眾對(duì)智能手機(jī)、平板界面的視覺(jué)設(shè)計(jì)提出了新的需求，對(duì)圖形的概括和識(shí)別的能力也在不斷提高，大眾對(duì)于圖形界面抽象化的審美需求也更加強(qiáng)烈。從這一點(diǎn)來(lái)說(shuō)，扁平化視覺(jué)設(shè)計(jì)在極簡(jiǎn)主義的模式下就很符合人的需求，能夠在短時(shí)間內(nèi)完成視覺(jué)體驗(yàn)與人機(jī)交互，更適合當(dāng)今快節(jié)奏的生活，同時(shí)也滿足了用戶(hù)準(zhǔn)確有效地瀏覽自己所需資源的要求。扁平化視覺(jué)設(shè)計(jì)在智能手機(jī)圖形界面中的運(yùn)用，呈現(xiàn)出自己獨(dú)特的優(yōu)勢(shì)。（1）良好的隱喻性。這里的隱喻性是指用一種物體來(lái)代替另一種物體的修飾方式。良好的隱喻性使得智能手機(jī)圖形界面在設(shè)計(jì)中得以簡(jiǎn)化一些流程，使其具有易于識(shí)別、易于記憶、易于跨文化理解、易于提升程序的運(yùn)行效率等作用。（2）方便用戶(hù)使用。扁平化視覺(jué)設(shè)計(jì)以方便客戶(hù)為主，設(shè)計(jì)時(shí)采用高強(qiáng)度的對(duì)比度方法與加大選項(xiàng)顏色或者字體的方法，給用戶(hù)更好的視覺(jué)體驗(yàn)。（3）符合用戶(hù)的心理需求。用戶(hù)可以通過(guò)界面提示的信息進(jìn)行操作，扁平化視覺(jué)設(shè)計(jì)師常在界面設(shè)計(jì)中構(gòu)造符合用戶(hù)的心理模型，加強(qiáng)了信息傳達(dá)的準(zhǔn)確性。（4）整體一致性。設(shè)計(jì)的整體性與一致性讓智能手機(jī)圖形界面設(shè)計(jì)中不同的圖形、模塊與文字等最大可能地保持了與外觀的一致性和整體的風(fēng)格，同時(shí)讓功能性與操作本身達(dá)成一致。

三、智能手機(jī)圖形界面的扁平化視覺(jué)設(shè)計(jì)原則

1.極簡(jiǎn)化

在扁平化視覺(jué)設(shè)計(jì)中最容易提起的就是“極簡(jiǎn)”一詞，指的是智能手機(jī)圖形界面設(shè)計(jì)中應(yīng)該采用最簡(jiǎn)潔的設(shè)計(jì)來(lái)表達(dá)出最多的信息，并且讓使用者在最短的時(shí)間內(nèi)尋找到自己所需要的目標(biāo)和資源。蘋(píng)果公司首席設(shè)計(jì)師很早就提出智能手機(jī)應(yīng)該使用極簡(jiǎn)的設(shè)計(jì)方法，而所謂的極簡(jiǎn)是拋棄冗余與繁雜的裝飾品，將復(fù)雜變成簡(jiǎn)單，將無(wú)序變成有序。設(shè)計(jì)師要清楚而明白地理解用戶(hù)的需求，能夠恰到好處地將不同的元素安排到合適的位置，突出信息的明確性，如此有助于加強(qiáng)用戶(hù)的體驗(yàn)性，讓用戶(hù)加快獲得所需的信息資源。

2.抽象化

扁平化視覺(jué)設(shè)計(jì)是以方便客戶(hù)的使用為主的，因此智能手機(jī)界面設(shè)計(jì)中應(yīng)該注重提高客戶(hù)的使用體驗(yàn)。扁平化視覺(jué)設(shè)計(jì)要求設(shè)計(jì)師不僅具有高度概括的能力，同時(shí)也應(yīng)當(dāng)具有處理圖形、色彩及文字之間關(guān)系的能力。優(yōu)秀的扁平化視覺(jué)設(shè)計(jì)作品即使在沒(méi)有裝飾效果的情況下依舊能達(dá)到良好的直覺(jué)導(dǎo)引作用和效果。在智能手機(jī)界面設(shè)計(jì)的過(guò)程中，應(yīng)該使界面設(shè)計(jì)上的質(zhì)感變得更抽象化，能夠?qū)⒐饩€、三維等基礎(chǔ)元素放在一邊，把客戶(hù)使用過(guò)程中所獲得的涉及虛擬與現(xiàn)實(shí)的體驗(yàn)進(jìn)行區(qū)分?？梢圆捎眉蠄D形，如圓形、正方形和三角形等，經(jīng)過(guò)加工變形后形成高度概括的抽象化圖形，給人一種扁平的視覺(jué)感受，而不是凸凹感與可觸感。也可以采用字體的抽象化，這種方法可以提高界面的趣味性和視覺(jué)辨識(shí)度，也可以增加界面的整體性和節(jié)奏感，同時(shí)通過(guò)字體的排版還能減少視覺(jué)疲勞感。

3.愉悅感

智能手機(jī)界面是機(jī)器與用戶(hù)之間交互的最直接的層面，界面設(shè)計(jì)的好壞直接影響了用戶(hù)對(duì)手機(jī)的第一印象，而且良好的扁平化視覺(jué)設(shè)計(jì)的界面能夠給予用戶(hù)一定的指引作用，引導(dǎo)用戶(hù)完成相應(yīng)的操作?？梢哉f(shuō)界面如同人的面孔一樣，具有吸引用戶(hù)的直接優(yōu)勢(shì)。設(shè)計(jì)合理的界面能夠給使用者帶來(lái)愉悅的心情和成功的喜悅，反之則會(huì)令使用者產(chǎn)生厭煩感，甚至?xí)a(chǎn)生挫敗感?？导{德·諾曼在《情感化設(shè)計(jì)》中說(shuō)：“美麗、樂(lè)趣和快樂(lè)共同作用會(huì)產(chǎn)生愉悅的感覺(jué)，愉悅是一種積極的情感狀態(tài)?！边@說(shuō)明在智能手機(jī)圖形界面中，扁平化視覺(jué)設(shè)計(jì)不能僅將功能設(shè)計(jì)作為焦點(diǎn)，還要考慮到用戶(hù)在使用過(guò)程中的心理體驗(yàn)，因?yàn)閮?yōu)秀的設(shè)計(jì)能夠使用戶(hù)產(chǎn)生愉悅的感受。人性化的交互設(shè)計(jì)在于人在使用機(jī)器時(shí)能夠產(chǎn)生愉悅、輕松的感覺(jué)，并且能夠直觀與有效地獲得信息。如今客戶(hù)越來(lái)越重視個(gè)性化與自我風(fēng)格，故而智能手機(jī)界面設(shè)計(jì)應(yīng)主要體現(xiàn)出圖形界面設(shè)計(jì)的細(xì)膩性和豐富性。

四、智能手機(jī)圖形界面中扁平化視覺(jué)設(shè)計(jì)的視覺(jué)元素

隨著智能手機(jī)圖形界面設(shè)計(jì)越來(lái)越復(fù)雜多變，設(shè)計(jì)者也會(huì)根據(jù)產(chǎn)品定位與市場(chǎng)需要推出不同的設(shè)計(jì)風(fēng)格。扁平化視覺(jué)設(shè)計(jì)在智能手機(jī)圖形界面中可謂是大行其道，越來(lái)越多的設(shè)計(jì)者也開(kāi)始使用這種設(shè)計(jì)方法。智能手機(jī)的視覺(jué)效果可以通過(guò)文字、色彩及圖形的設(shè)計(jì)來(lái)決定，這些元素的組合搭配又可以稱(chēng)之為“版式設(shè)計(jì)”。優(yōu)秀的版式設(shè)計(jì)是扁平化視覺(jué)設(shè)計(jì)的前提，同時(shí)也是展示智能手機(jī)信息的重要表現(xiàn)形式。優(yōu)秀的扁平化視覺(jué)設(shè)計(jì)不僅具有視覺(jué)的指導(dǎo)性，而且也能有效地傳達(dá)信息。在智能手機(jī)圖形界面設(shè)計(jì)中只有將文字、色彩及圖形合理地搭配起來(lái)，才能實(shí)現(xiàn)功能美與形式美的統(tǒng)一，才能生產(chǎn)出令人舒適而愉悅的產(chǎn)品。

1.扁平化視覺(jué)設(shè)計(jì)中的文字元素

（1）文字符號(hào)化

文字不僅是人類(lèi)在生活中用于信息傳達(dá)和交流的最普遍的視覺(jué)識(shí)別符號(hào)，而且也是智能手機(jī)圖形界面設(shè)計(jì)中實(shí)現(xiàn)視覺(jué)傳播的最直觀最有力的手段。作為一種信息傳達(dá)的符號(hào)，文字所傳達(dá)的語(yǔ)義信息非常直觀而且容易被人認(rèn)識(shí)和理解。文字元素在設(shè)計(jì)中的首要功能就是表達(dá)，即將信息內(nèi)容傳遞給使用者。不過(guò)，由于使用者對(duì)文字信息十分熟悉，因而如果是單純的文字形式，會(huì)讓使用者降低對(duì)文字的注意力，從而影響了文字信息的傳達(dá)。因此，文字元素作為造型設(shè)計(jì)中的一個(gè)極其重要的組成部分，尤其是在智能手機(jī)圖形界面中扁平化的視覺(jué)設(shè)計(jì)中，除了讓文字表達(dá)字本身的意義和輔助說(shuō)明，更多的應(yīng)當(dāng)是將不同文字的個(gè)體和文字的組合形式作為視覺(jué)形象設(shè)計(jì)傳達(dá)出來(lái)。文字在技術(shù)層面和語(yǔ)義層面具有相輔相成的關(guān)系，在智能手機(jī)界面設(shè)計(jì)中，文字的字體及排版，相當(dāng)于文字的輔助信息傳達(dá)方式，這能夠使得信息更加有效地傳達(dá)給客戶(hù)。

（2）文字圖形化

智能手機(jī)圖形界面扁平化視覺(jué)設(shè)計(jì)的主要目的是為了傳達(dá)信息，文字則是傳達(dá)信息的主要媒介。從文字的發(fā)展史中我們可以知道，文字發(fā)展的原始形態(tài)就是為了傳達(dá)信息的圖形符號(hào)，其本身就具有構(gòu)成和編排的特點(diǎn)，同時(shí)也可以將其看作圖形組成的一部分?！吨袊?guó)文字學(xué)》中指出：“文字本是自然地產(chǎn)生，古代的象形文字就是直接根據(jù)物體的外形加工而成的文字符號(hào)?！笨萍嫉陌l(fā)展改變了文字的書(shū)寫(xiě)與字體的規(guī)格，打破了文字原有的版式布局，從而使文字所具有的圖形化表現(xiàn)得更加多樣和突出。隨著讀圖時(shí)代的來(lái)臨， “讀”走向了“看”，文字傳遞信息已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)了原有的閱讀性，也遠(yuǎn)遠(yuǎn)超出了“信息”的范疇，文字被注入了新技術(shù)與新概念。因此，通過(guò)新的編排與構(gòu)造，可以使文字的內(nèi)涵和形式更加突出，最終實(shí)現(xiàn)信息的交流與傳遞。

2.扁平化視覺(jué)設(shè)計(jì)中的色彩元素

（1）色彩符號(hào)化

馬克思曾說(shuō)：“色彩是最大眾化的審美因素?！比说囊曈X(jué)器官對(duì)于色彩是最為敏感的，在界面設(shè)計(jì)中更是如此。色彩是圖形外形最為明顯的外部特征，它暗喻著某一手機(jī)、網(wǎng)站及軟件的內(nèi)容與性質(zhì)。在智能手機(jī)界面的設(shè)計(jì)過(guò)程中，色彩不僅能夠?qū)κ褂谜弋a(chǎn)生引導(dǎo)作用，而且也會(huì)影響用戶(hù)的心情和心理，因此，色彩運(yùn)用的好壞直接關(guān)系到界面設(shè)計(jì)的成與敗。色彩具有美化性和裝飾性，同時(shí)也積淀了感性與理性等多方面的因素。色彩的設(shè)計(jì)效果會(huì)引起用戶(hù)的聯(lián)想和記憶，也能引起他們情感上的共鳴。一般來(lái)說(shuō)，界面設(shè)計(jì)普遍傾向于純潔與優(yōu)雅的視覺(jué)效果，在色彩選擇上常常偏向于明度與飽和度較高的色彩，而在扁平化視覺(jué)設(shè)計(jì)中，設(shè)計(jì)師則更加趨于大膽，會(huì)利用不同的色彩撞擊給設(shè)計(jì)帶來(lái)無(wú)限可能，使界面設(shè)計(jì)更加具有愉悅性和趣味性。扁平化視覺(jué)設(shè)計(jì)中的色彩所具有的視覺(jué)敏感度，能夠引起用戶(hù)的注意，同時(shí)誘導(dǎo)智能手機(jī)用戶(hù)對(duì)其進(jìn)行選擇和使用。

（2）色彩構(gòu)成化

色彩的三個(gè)基本元素是明度、純度和色相。扁平化視覺(jué)設(shè)計(jì)中通常采用色彩的明度來(lái)呈現(xiàn)出信息的層析關(guān)系，用色相來(lái)表達(dá)信息的差別性，用純度來(lái)區(qū)別應(yīng)用程序與前后臺(tái)。色彩作為視覺(jué)設(shè)計(jì)中的基本元素，在扁平化視覺(jué)設(shè)計(jì)中更加強(qiáng)調(diào)的是通過(guò)色塊的面積大小及數(shù)量的多少來(lái)表現(xiàn)不同信息的主次關(guān)系。目前，扁平化視覺(jué)設(shè)計(jì)中以色彩明快、色調(diào)豐富為流行元素，而且并不局限于色調(diào)的固定化，它可以使用不同的色彩，但為了引導(dǎo)和吸引用戶(hù)對(duì)于界面的交互作用，設(shè)計(jì)師更加傾向于鮮艷的顏色。純色在智能手機(jī)界面設(shè)計(jì)中也是首選，因?yàn)榧兩軌蚺c明亮或者灰暗的背景形成鮮明的對(duì)比，可以提高視覺(jué)沖擊力。在扁平化視覺(jué)設(shè)計(jì)中，同類(lèi)色也成為當(dāng)下的流行趨勢(shì)，比如可以用一單一色搭配黑白來(lái)創(chuàng)造視覺(jué)層次的效果。

3.扁平化視覺(jué)設(shè)計(jì)中的圖形元素

（1）圖形指向性

在智能手機(jī)圖形界面扁平化視覺(jué)設(shè)計(jì)中，圖形具有非常強(qiáng)的指向性。在日常生活中經(jīng)常有這樣的經(jīng)驗(yàn)：高速公路上的指示牌基本上都采用扁平化視覺(jué)設(shè)計(jì)，當(dāng)視線落在設(shè)計(jì)上會(huì)使司機(jī)在短時(shí)間內(nèi)辨識(shí)指示牌所表達(dá)的內(nèi)容與信息。同樣，處于網(wǎng)絡(luò)信息的環(huán)境中，用戶(hù)也需要快速獲取和反饋信息。智能手機(jī)作為移動(dòng)網(wǎng)絡(luò)的端口，其圖形界面需要指向性的功能，而扁平化視覺(jué)設(shè)計(jì)則剛好具備了這一特性。

（2）圖形抽象化

圖形的抽象化能使信息表達(dá)得更清晰明了，讓用戶(hù)在較短的時(shí)間更加容易去識(shí)記和辨別。扁平化視覺(jué)設(shè)計(jì)中的抽象化是對(duì)事物外形輪廓的高度提煉與概括，抽象化并不是代表感性化，因?yàn)樵谥悄苁謾C(jī)圖形界面扁平化設(shè)計(jì)中還通常利用文字和數(shù)字的結(jié)合來(lái)傳遞信息。這里的抽象化對(duì)設(shè)計(jì)師的觀察和提煉的能力提出了新的要求——設(shè)計(jì)師既要了解對(duì)象外形的本質(zhì)，又要巧妙地利用線條進(jìn)行取舍，在外部輪廓與界線的強(qiáng)烈對(duì)比下，表現(xiàn)出物體本身的美感與對(duì)象傳達(dá)的信息。圖形的抽象化促使了圖形符號(hào)化的產(chǎn)生，漢字的發(fā)展史同樣經(jīng)過(guò)了從抽象化到符號(hào)化的過(guò)程。圖形符號(hào)本身是人類(lèi)的共同視覺(jué)語(yǔ)言，一個(gè)圖形符號(hào)能夠解決不同語(yǔ)言、不同國(guó)家的信息交流。如今，智能手機(jī)界面圖形已經(jīng)呈現(xiàn)出符號(hào)化的發(fā)展趨勢(shì)，相信通過(guò)優(yōu)秀的扁平化視覺(jué)設(shè)計(jì)，能讓圖形符號(hào)化獲得進(jìn)一步的統(tǒng)一和完善。

|參考文獻(xiàn)|

[1]伍凡凡. 以用戶(hù)體驗(yàn)為導(dǎo)向的智能手機(jī)應(yīng)用軟件界面設(shè)計(jì)研究[D].鄭州：河南大學(xué)，2007.

[2]胡明. 淺析電子雜志的界面設(shè)計(jì)[J]. 湖北美術(shù)學(xué)院學(xué)報(bào)，2008（2）.

[3]孫瑞. 智能設(shè)備中電子閱讀APP界面設(shè)計(jì)研究[J].出版廣角，2016（3）.