APP界面設(shè)計(jì)中扁平化設(shè)計(jì)的運(yùn)用

王煜 劉丹

摘 ? ?要：隨著社會(huì)經(jīng)濟(jì)的快速發(fā)展，互聯(lián)網(wǎng)普及程度越來越廣泛，我國手機(jī)的交互設(shè)計(jì)水平已經(jīng)取得進(jìn)一步的發(fā)展。與此同時(shí)，隨著用戶的增多，要滿足更多的受眾的需求，移動(dòng)端APP的界面設(shè)計(jì)已經(jīng)轉(zhuǎn)變成扁平化設(shè)計(jì)風(fēng)格。扁平化設(shè)計(jì)在設(shè)計(jì)理念上有著更符合當(dāng)下用戶的需求的優(yōu)勢(shì)，在視覺感官上更為直接，化繁為簡，將信息作為核心直接面對(duì)用戶，讓用戶可以最快的獲取信息。本文重點(diǎn)探討了《武漢軍運(yùn)會(huì)》APP設(shè)計(jì)中扁平化設(shè)計(jì)在理論和實(shí)際運(yùn)用，希望通過本APP的設(shè)計(jì)，能夠?yàn)楸馄交L(fēng)格的APP界面設(shè)計(jì)者提供幫助。

關(guān)鍵詞：互聯(lián)網(wǎng)+;第七屆世界軍人運(yùn)動(dòng)會(huì);界面設(shè)計(jì);扁平化設(shè)計(jì)

扁平化設(shè)計(jì)起源于北歐風(fēng)格與極簡主義設(shè)計(jì)，將“信息”作為主要核心的表達(dá)，減輕視覺上的繁瑣設(shè)計(jì)，強(qiáng)調(diào)用戶體驗(yàn)感。這些設(shè)計(jì)理念極大的符合如今數(shù)字世界的設(shè)計(jì)需求，滿足了如今快節(jié)奏生活秩序下的用戶的需求，并逐漸成為設(shè)計(jì)領(lǐng)域的設(shè)計(jì)趨勢(shì)，也對(duì)如今的移動(dòng)端APP設(shè)計(jì)產(chǎn)生了極大的影響。

一、互聯(lián)網(wǎng)+背景下APP界面設(shè)計(jì)發(fā)展前景

1近年來，互聯(lián)網(wǎng)生態(tài)發(fā)生了巨大的變革，向著連接性，開發(fā)性，網(wǎng)站，移動(dòng)中心，APP，位置基點(diǎn)，社會(huì)化網(wǎng)絡(luò)等七個(gè)方向進(jìn)行變革。這就意味著傳統(tǒng)互聯(lián)網(wǎng)開始了向新的移動(dòng)互聯(lián)網(wǎng)發(fā)展，具體體現(xiàn)就是移動(dòng)端用戶特別是手機(jī)用戶的指數(shù)級(jí)增長。

傳統(tǒng)連接互聯(lián)網(wǎng)的電腦發(fā)展成了現(xiàn)在手機(jī)APP應(yīng)用的形態(tài)，未來互聯(lián)網(wǎng)服務(wù)會(huì)變成APP應(yīng)用和WEB的聯(lián)合服務(wù)，APP應(yīng)用將成為人們?cè)谏钪修D(zhuǎn)遞信息的主要工具。而從現(xiàn)在移動(dòng)互聯(lián)網(wǎng)不斷增長的用戶數(shù)量和巨大額商業(yè)價(jià)值，不難看出未來移動(dòng)互聯(lián)網(wǎng)會(huì)有更大的發(fā)展。在這其中，智能手機(jī) 作為移動(dòng)終端的代表物，必然會(huì)帶動(dòng)APP應(yīng)用的設(shè)計(jì)與發(fā)展。現(xiàn)在，APP應(yīng)用已經(jīng)是移動(dòng)互聯(lián)網(wǎng)的重要部分，在未來，互聯(lián)網(wǎng)生態(tài)中，APP應(yīng)用將會(huì)成為其核心部分之一。

二、互聯(lián)網(wǎng)+背景下APP界面設(shè)計(jì)發(fā)展趨勢(shì)

當(dāng)今是“互聯(lián)網(wǎng)+”時(shí)代，通過互聯(lián)網(wǎng)平臺(tái)將世界的距離縮短。連接互聯(lián)網(wǎng)的移動(dòng)終端——手機(jī)界面設(shè)計(jì)也發(fā)展的越來越快。微信、QQ、微博等各式各樣的手機(jī)APP也逐漸進(jìn)入到了我們的日常生活，與此同時(shí)，用戶對(duì)手機(jī)的界面設(shè)計(jì)需求也在不斷增加。一個(gè)好的界面設(shè)計(jì)可以讓一款A(yù)PP脫穎而出，讓用戶使用感到便捷與舒適。

設(shè)計(jì)師在設(shè)計(jì)時(shí)需要考慮用戶的操作習(xí)慣與應(yīng)用體驗(yàn)，對(duì)界面中的文字圖片進(jìn)行合理的整合排列，高效的傳遞重要信息，以達(dá)到美觀的視覺效果和信息傳遞的目的。在APP界面設(shè)計(jì)的初期，由于技術(shù)等各方面的原因，APP界面沒有受到人們的重視，但經(jīng)過長期的發(fā)展，APP的界面對(duì)用戶的影響越來越大，APP界面設(shè)計(jì)的風(fēng)格、方式月越來越豐富新穎。一個(gè)良好的APP界面設(shè)計(jì)可以給用戶輕松、愉快的體驗(yàn)。

三、選擇扁平化設(shè)計(jì)風(fēng)格的理由

（一）扁平化設(shè)計(jì)風(fēng)格的優(yōu)勢(shì)

當(dāng)下是一個(gè)信息爆炸的時(shí)代，生活在這樣的時(shí)代，會(huì)無時(shí)無刻接受到各種繁雜信息。路邊的廣告牌、電視劇植入的廣告、千篇一律的使用說明等等，這些重復(fù)無數(shù)遍的信息，會(huì)讓人們想不停追求新鮮的信息。各類手機(jī)APP通過互聯(lián)網(wǎng)即時(shí)更新的特性出現(xiàn)，滿足了人們這樣的需求，但大量APP提供實(shí)時(shí)更新的同時(shí)，也附帶了許多無用的信息，因此人們又開始追求極簡的設(shè)計(jì)。

《武漢軍運(yùn)會(huì)》是一款關(guān)于軍運(yùn)會(huì)新聞?lì)惖腁PP，針對(duì)軍運(yùn)會(huì)的政策、消息、工作以及活動(dòng)為主要內(nèi)容的手機(jī)應(yīng)用程序。

在移動(dòng)端中，顯示屏幕小，扁平化的設(shè)計(jì)更加適合，而且能夠彌補(bǔ)較小界面設(shè)計(jì)的信息容量不足。《武漢軍運(yùn)會(huì)》APP作為一款主要傳播信息的應(yīng)用程序，在使用中重點(diǎn)在信息上，這就要求在界面設(shè)計(jì)中既要有界面的美觀性，與此同時(shí)，又要避免不必要的信息與視覺，這與在扁平化設(shè)計(jì)中的清晰的交互模式和高效率的信息傳達(dá)相符合。

（二）與擬物化風(fēng)格的對(duì)比

與擬物化設(shè)計(jì)相比，扁平化設(shè)計(jì)舍棄了對(duì)實(shí)際物體的高度模仿，而是更多的關(guān)注設(shè)計(jì)與信息的自身。這種設(shè)計(jì)使得扁平化設(shè)計(jì)的色彩搭配相對(duì)直觀，以此來凸顯信息為主的配色要求。擬物化設(shè)計(jì)是對(duì)“物”的描述和刻畫，因此在復(fù)雜的物體標(biāo)繪中，必然會(huì)出現(xiàn)對(duì)物體的還原而限制了色彩的選擇和物體的繁雜裝飾，因此會(huì)帶來更多的視覺疲勞。扁平化設(shè)計(jì)舍棄不必要的元素，用顏色來表達(dá)層次與界限，這樣的特性使得其顏色的選擇范圍十分廣泛，并且不受實(shí)際物體的限制。扁平化設(shè)計(jì)擺脫了擬物化設(shè)計(jì)中對(duì)“形”的枷鎖后，色彩被釋放出它無限的可能，盡情發(fā)揮它的各層涵義，從而達(dá)到扁平化設(shè)計(jì)傳遞信息自身的特點(diǎn)。

IOS6的擬物化設(shè)計(jì)與IOS7的扁平化設(shè)計(jì)對(duì)比，IOS7的色彩更加豐富艷麗，能夠更加快速的吸引用戶的視線，并且能夠在短時(shí)間內(nèi)獲取所表達(dá)的信息。豐富的色彩搭配使用戶不易產(chǎn)生視覺疲勞，反而可以感受到鮮艷的色彩搭配所帶來的舒適感。反觀，擬物化設(shè)計(jì)執(zhí)著于復(fù)雜物體形態(tài)的描繪，一方面要盡量向?qū)嵨锏纳士拷硪环矫嬗捎趯?duì)物體形態(tài)的寫實(shí)，色彩的選用愈發(fā)狹窄，并且為了避免色彩混雜和形態(tài)重復(fù)而產(chǎn)生的視覺疲勞與重點(diǎn)分散，因此整體色彩的呈現(xiàn)感覺給人過于沉悶。

四、《武漢軍運(yùn)會(huì)》APP設(shè)計(jì)改造方案

本文以第七屆世界軍人運(yùn)動(dòng)官方APP為例，擬將APP的界面設(shè)計(jì)分為四個(gè)部分進(jìn)行分析改造設(shè)計(jì)。

（一）界面結(jié)構(gòu)設(shè)計(jì)

本APP改造采用板塊式布局，這種布局具有清晰整潔，識(shí)別度高的優(yōu)點(diǎn)。對(duì)于本APP而言，一方面其整潔舒適的視覺效果可以給用戶識(shí)別性高的觀感體驗(yàn);另一方面，又將主要信息進(jìn)行了合理排列整合，使用戶可以更加快捷的找到所需要的內(nèi)容，并協(xié)調(diào)了大量繁雜文字內(nèi)容所帶給用戶的閱讀疲勞感。

與此同時(shí)，還采用了扁平化的信息結(jié)構(gòu)組織方式與層級(jí)結(jié)構(gòu)，消減了繁瑣的路徑查找，使用戶可以直接在頂層界面就可以獲取其它界面層級(jí)，這樣大大減少了用戶的操作。采用了板塊布局后，將各主要信息合理分配在不同的板塊中，使各個(gè)板塊的功能明確，結(jié)合扁平化設(shè)計(jì)簡潔的特點(diǎn)，將各個(gè)入口整齊排列，用戶在使用時(shí)，通過不同的需求，來觀看不同的板塊，這樣用戶就可以不用承擔(dān)單層頁面信息負(fù)荷增大所帶來的問題，相反，可以更好的發(fā)揮出扁平化結(jié)構(gòu)的優(yōu)勢(shì)。

（二）色彩設(shè)計(jì)

色彩是界面設(shè)計(jì)中不可或缺的一部分。在扁平化設(shè)計(jì)中，顏色是主體之一，并經(jīng)常有多種顏色被用于信息的分層管理。使用不同的顏色來引導(dǎo)用戶進(jìn)行互動(dòng)，激發(fā)用戶探索并理解以不同的顏色信息，并且在美化視覺效果的同時(shí)又兼顧了功能的本身作用。《武漢軍運(yùn)會(huì)》APP的設(shè)計(jì)改造中，采用藍(lán)白主調(diào)與多種其他活潑的顏色組合。其中藍(lán)白主要用于大量文字部分，避免活潑顏色所帶來的視覺疲勞。在按鍵和主頁部分則采用的是活潑明亮的純色，來豐滿充實(shí)視覺感官。利用簡單的幾何色塊，通過色塊與色塊之間的相互關(guān)系來表現(xiàn)層級(jí)。這樣的色彩搭配形成鮮明的對(duì)比，突出了重點(diǎn)信息。

（三）文字呈現(xiàn)

在扁平化設(shè)計(jì)中，使用的設(shè)計(jì)元素一般非常抽象，重點(diǎn)在于對(duì)信息的表達(dá)和傳遞，通過高度的抽象化來提煉人們認(rèn)知中的視覺符號(hào)。因此，在扁平化風(fēng)格的《武漢軍運(yùn)會(huì)》APP界面設(shè)計(jì)中，文字的呈現(xiàn)也趨向于簡潔明晰，使用戶能夠第一時(shí)間認(rèn)清文字信息，并在此的指導(dǎo)下快捷的進(jìn)入所需要的內(nèi)容中。

因此需要采用與整體扁平化風(fēng)格相符合的字體，并且舍棄過度裝飾的字體，使用戶可以在識(shí)別時(shí)可以輕松舒適的獲得文字的內(nèi)容。最終，所采用的字體選擇為黑體字。這樣對(duì)于各個(gè)不同系統(tǒng)和平臺(tái)都可以完美配適，而更重要的是，黑體字清晰典雅，線條工整，是目前能夠最快捷傳遞文字內(nèi)容的字體之一。簡潔明了的字體，對(duì)于用戶有著較高的接受程度，這對(duì)用戶的使用粘連性起著決定性的影響。

（四）交互方式

扁平化設(shè)計(jì)的界面交互方式可以讓用戶的訪問過程更加方便，通過對(duì)多繁雜層級(jí)的精簡;讓用戶在界面頂層就能對(duì)子頁面信息進(jìn)行了解，從而對(duì)整個(gè)交互方式有了初步的了解。加入快捷懸浮按鈕，用戶自定義設(shè)置到達(dá)界面;這種快速訪問路徑的設(shè)計(jì)，打破了傳統(tǒng)組織層級(jí)結(jié)構(gòu)中的一級(jí)級(jí)單路徑訪問的弊端，讓信息可以更加方便的了解，使用戶可以對(duì)整個(gè)APP信息層級(jí)進(jìn)行總體把控。

《武漢軍運(yùn)會(huì)》APP的本身內(nèi)的容層級(jí)并不繁雜，采用了扁平化風(fēng)格的界面設(shè)計(jì)后，大部分主要內(nèi)容都可以整合在主要頁面中，極大的滿足了用戶對(duì)信息的需求，大大減少了獲取信息的效率。

結(jié)語

隨著互聯(lián)網(wǎng)在中國的發(fā)展，如今人們的生活節(jié)奏的加快，對(duì)于信息的傳遞要求變得更加精確，這與提倡“形式服務(wù)于功能（form follows function）”、“少即是多（less is more）”的設(shè)計(jì)理念的扁平化設(shè)計(jì)相符合，APP界面設(shè)計(jì)的扁平化風(fēng)格已是當(dāng)今的設(shè)計(jì)的趨勢(shì)，扁平化設(shè)計(jì)從清晰的信息架構(gòu)，簡潔的視覺效果和便捷的交互體驗(yàn)三點(diǎn)，提高了人們的操作效率，這樣的界面設(shè)計(jì)符合當(dāng)下人們的實(shí)際需求。扁平化設(shè)計(jì)的興起，帶來了新一輪的視覺革命，給人們帶來了全新的體驗(yàn)。

參考文獻(xiàn)：

[1]薛玲.“互聯(lián)網(wǎng)”背景下的品牌形象設(shè)計(jì)研究[D].天津工業(yè)大學(xué)，2017.

[2]方心怡.扁平化設(shè)計(jì)風(fēng)格下平面視覺元素的應(yīng)用研究[D].蘇州大學(xué)，2015.

[3]姜波.扁平化設(shè)計(jì)在智能手機(jī)界面中的研究[D].吉林建筑大學(xué)，2018.

作者簡介：王煜，學(xué)生。研究方向：動(dòng)畫。

劉丹，講師。研究方向：藝術(shù)設(shè)計(jì)、數(shù)字媒體藝術(shù)。

基金項(xiàng)目：本研究為2017年武漢市市屬高校教學(xué)研究項(xiàng)目“雙創(chuàng)”背景下的人才培養(yǎng)模式創(chuàng)新改革研究—以“藝術(shù)設(shè)計(jì)”專業(yè)為例（項(xiàng)目編號(hào)2017107）的階段性成果之一。

基金項(xiàng)目：本文系湖北省大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練項(xiàng)目“互聯(lián)網(wǎng)+背景下“世界軍人運(yùn)動(dòng)會(huì)”視覺系統(tǒng)及周邊產(chǎn)品設(shè)計(jì)的可行性研究”（項(xiàng)目編號(hào)201811654058）的階段性研究成果。）