“互聯(lián)網(wǎng)+”時(shí)代下的UI設(shè)計(jì)發(fā)展趨勢(shì)

徐亞非

摘 要：隨著移動(dòng)互聯(lián)網(wǎng)的普及，終端屏幕分辨率和用戶人機(jī)互動(dòng)習(xí)慣的變遷，Web設(shè)計(jì)的流行趨勢(shì)正在發(fā)生重大的范型轉(zhuǎn)移。對(duì)于各行各業(yè)移動(dòng)APP開(kāi)發(fā)者來(lái)說(shuō)，除了抓住用戶的剛需、痛點(diǎn)、高頻之外，還要讓前端和后端技術(shù)、用戶體驗(yàn)、業(yè)務(wù)流程優(yōu)化變成不可分割的整體。所以對(duì)“互聯(lián)網(wǎng)+”時(shí)代下的UI設(shè)計(jì)發(fā)展趨勢(shì)的把控顯得尤為重要。

關(guān)鍵詞：“互聯(lián)網(wǎng)+”；UI設(shè)計(jì)；交互設(shè)計(jì)；扁平化風(fēng)格；情感化交互；動(dòng)態(tài)交互

“互聯(lián)網(wǎng)+”在2015年兩會(huì)上被強(qiáng)勢(shì)推出之后，僅6月份就有26家傳統(tǒng)行業(yè)涉足互聯(lián)網(wǎng)。上市互聯(lián)網(wǎng)企業(yè)總市值達(dá)到4.2萬(wàn)億元，比去年增長(zhǎng)6%，當(dāng)前互聯(lián)網(wǎng)業(yè)務(wù)已經(jīng)成為拉動(dòng)信息通信業(yè)持續(xù)增長(zhǎng)的重要引擎?！盎ヂ?lián)網(wǎng)+”正在成為一股強(qiáng)勁的風(fēng)潮引領(lǐng)各行各業(yè)。同年4月，在“流量開(kāi)放合作大會(huì)”上，工信部表示中國(guó)移動(dòng)電話用戶累計(jì)達(dá)12.9億戶，4G用戶數(shù)目達(dá)1.78億。4G互聯(lián)網(wǎng)的寬帶性、多媒體性、實(shí)時(shí)性、易用性、交互性、個(gè)性、安全性、方便性等特性促使移動(dòng)互聯(lián)網(wǎng)占據(jù)用戶大量的上網(wǎng)時(shí)間。以至于連傳統(tǒng)行業(yè)都不敢輕易放棄移動(dòng)互聯(lián)網(wǎng)終端業(yè)務(wù)。所以UI設(shè)計(jì)的優(yōu)化和未來(lái)UI設(shè)計(jì)的發(fā)展趨勢(shì)也被自然而然地推向風(fēng)口浪尖?？偨Y(jié)“互聯(lián)網(wǎng)+”時(shí)代下的UI設(shè)計(jì)的發(fā)展趨勢(shì)有以下幾點(diǎn)：

1 延續(xù)扁平化風(fēng)格特點(diǎn)

扁平化設(shè)計(jì)即無(wú)過(guò)多的裝飾效果和無(wú)用元素，邊界自然干凈利落。扁平化通常顏色飽和、界面美觀、簡(jiǎn)潔、降低功耗、提高運(yùn)算速度、方便用戶操作，使用戶迅速定位到目標(biāo)功能，從而減少認(rèn)知上的障礙。簡(jiǎn)而言之，扁平化是利用最簡(jiǎn)單有效的方式來(lái)展示和創(chuàng)造平面功能性的最大值。

完整的扁平化設(shè)計(jì)風(fēng)格可以追溯到windows8的windowsUI，被Android系統(tǒng)關(guān)注，被IOS系統(tǒng)普及。但是，扁平化風(fēng)格的根源可以追溯到瑞士國(guó)際平面主義風(fēng)格。瑞士國(guó)際平面主義大師艾米爾·路德認(rèn)為：視覺(jué)傳達(dá)設(shè)計(jì)應(yīng)該在功能與形式之間尋求平衡，文字與版式設(shè)計(jì)既要有傳達(dá)信息的功能，也要傳達(dá)視覺(jué)審美意義，達(dá)到功能與形式的高度統(tǒng)一。所以扁平化設(shè)計(jì)把具象的形態(tài)抽象化、符號(hào)化，大圖文、大色塊的方格磁貼式界面設(shè)計(jì)。它具有較強(qiáng)的視覺(jué)張力，其簡(jiǎn)潔明快的風(fēng)格大膽舍棄了重陰影、重描邊、重浮雕及3D的設(shè)計(jì)手法，徹底跳出過(guò)去對(duì)擬真仿物的戀戀不舍，體現(xiàn)了數(shù)字化的形式美感，集中精力于清爽的排版和網(wǎng)格化布局，使布局簡(jiǎn)潔、嚴(yán)謹(jǐn)，更能適應(yīng)視覺(jué)時(shí)代、讀圖時(shí)代的需求。

例如，一直受業(yè)界尊重和用戶信賴(lài)的蘋(píng)果和以蘋(píng)果公司為代表的扁平化設(shè)計(jì)。蘋(píng)果是時(shí)尚、高科技的產(chǎn)物，用戶一直追逐它的獨(dú)特性系統(tǒng)、簡(jiǎn)潔性設(shè)計(jì)語(yǔ)言。明亮的顏色搭配、清晰的對(duì)比度、規(guī)范化的線條、標(biāo)準(zhǔn)化字體、經(jīng)典顏色搭配和時(shí)尚優(yōu)雅，禪意十足的界面設(shè)計(jì)都在減輕用戶體驗(yàn)的負(fù)擔(dān)，同時(shí)滿足用戶的審美需求。蘋(píng)果在中國(guó)手機(jī)通信市場(chǎng)不斷上升的份額證明扁平化將繼續(xù)成為“互聯(lián)網(wǎng)+”時(shí)代的發(fā)展趨勢(shì)。

2 情感化交互設(shè)計(jì)增加

由于科技的迅猛發(fā)展，UI界面設(shè)計(jì)逐漸轉(zhuǎn)變?yōu)閷?duì)軟件的人機(jī)交互、操作邏輯、界面美觀和用戶體驗(yàn)的多重設(shè)計(jì)。[1]美國(guó)著名設(shè)計(jì)師普羅斯曾說(shuō)：“設(shè)計(jì)除具備美學(xué)、技術(shù)、經(jīng)濟(jì)三屬性之外，還包含第四個(gè)維度——人性”。[2]產(chǎn)品的美觀性、獨(dú)特性、交互性、“傻瓜操作”性、界面的美觀等都是設(shè)計(jì)應(yīng)該考慮的點(diǎn)。高科技下的高情感交互設(shè)計(jì)不但要從整體上把控，而且要從各個(gè)模塊、頁(yè)面、流程上把控。無(wú)論從何處著手，設(shè)計(jì)師都繞不開(kāi)用戶，真正的產(chǎn)品設(shè)計(jì)的過(guò)程是從用戶到用戶的過(guò)程。從用戶開(kāi)始，考慮用戶的使用場(chǎng)景，把握用戶的情感，分析用戶的操作流程，把握用戶的感情訴求，清楚用戶使用中和使用后的心情。在把握好這個(gè)問(wèn)題之后，下面要解決的就是怎么樣才能夠滿足上述的感情需求，產(chǎn)品中的哪些部分起了關(guān)鍵性的作用，哪些部分會(huì)違背和減弱情感需求，從而得出改進(jìn)產(chǎn)品的方案。

包豪斯著名設(shè)計(jì)師夢(mèng)合理·納基曾說(shuō)：“設(shè)計(jì)并不是對(duì)制品表面的裝飾，而是以某一目的為基礎(chǔ)，將社會(huì)的、經(jīng)濟(jì)的、技術(shù)的、藝術(shù)的、心理的多種因素綜合起來(lái)，使其能納入工業(yè)生產(chǎn)的軌道，對(duì)制品的這種構(gòu)思和計(jì)劃技術(shù)即設(shè)計(jì)?！盵3]這里所說(shuō)的工業(yè)生產(chǎn)同樣適用于“互聯(lián)網(wǎng)+”時(shí)代下的UI設(shè)計(jì)當(dāng)中。移動(dòng)互聯(lián)網(wǎng)的小屏幕迫使設(shè)計(jì)師去設(shè)計(jì)更大的控件來(lái)解決尋找按鈕的問(wèn)題或者通過(guò)滑動(dòng)交互的形式讓用戶快速定位到自己想要的內(nèi)容。

從整體上把控情感化需求比局部抓住用戶的情感要簡(jiǎn)單。它只需要在準(zhǔn)備產(chǎn)品之前奠定好情感基調(diào)即可，在整個(gè)產(chǎn)品研發(fā)的過(guò)程中不斷地改進(jìn)以免發(fā)生偏離。從各個(gè)模塊、頁(yè)面、流程上的把控用戶需求比較復(fù)雜，需要注意的是各個(gè)模塊需求的總和大于整個(gè)產(chǎn)品情感化的需求。它不是簡(jiǎn)單的相加。例如，上網(wǎng)有上網(wǎng)的需求、閱讀有閱讀的需求、看視頻有看視頻的需求、訂閱有訂閱的需求、下載有下載的需求。每一個(gè)情感化的增加都要符合用戶的操作狀態(tài)和使用環(huán)境。當(dāng)我們還原用戶使用場(chǎng)景的時(shí)候要盡量做到開(kāi)放性的思路。不但考慮用戶在使用某一應(yīng)用時(shí)會(huì)出現(xiàn)什么樣的狀況，而且要考慮用戶在使用應(yīng)用之前是什么狀態(tài)?？紤]用戶是有目的的使用還是隨便瀏覽。對(duì)于某些產(chǎn)品來(lái)說(shuō)，從理清楚產(chǎn)品的需求到優(yōu)化設(shè)計(jì)到確定產(chǎn)品，這需要時(shí)間和交流，所以正確的交流也是很好地完成情感化設(shè)計(jì)的重要一環(huán)。

《原研哉的設(shè)計(jì)》一書(shū)中提到：“二十世紀(jì)是視覺(jué)時(shí)代，二十一世紀(jì)是觸覺(jué)時(shí)代”。越來(lái)越焦躁和懶惰的用戶沒(méi)有耐心在眾多的信息中不斷地點(diǎn)擊鼠標(biāo)，篩選自己想要的內(nèi)容信息。他們更希望通過(guò)移動(dòng)互聯(lián)網(wǎng)快速找到自己想要的內(nèi)容，定位到自己想要的目標(biāo)，并隨時(shí)隨地把自己的新鮮事分享出去。但是傳統(tǒng)的網(wǎng)頁(yè)分成無(wú)數(shù)個(gè)tag和頁(yè)面讓用戶點(diǎn)擊選擇的設(shè)計(jì)已經(jīng)滿足不了當(dāng)下的用戶。想要給用戶提供更流暢的上網(wǎng)體驗(yàn)，需要提供高清的圖片、顯眼的搜索條、熱門(mén)的新聞，并且隱藏相似的選項(xiàng)、給出推薦或查看相似選項(xiàng)等效果來(lái)猜測(cè)用戶在不同場(chǎng)景下的心理活動(dòng)。與隱蔽的按鈕和慢慢拖動(dòng)的滾動(dòng)條相比，用戶更喜歡用手勢(shì)和語(yǔ)言瀟灑的互動(dòng)。盡情地享受高科技帶來(lái)的快感，這就需要大量地分析用戶需求，并對(duì)用戶需求做出情感化的設(shè)計(jì)，以滿足用戶的體驗(yàn)。

3 動(dòng)態(tài)交互設(shè)計(jì)增加

在互聯(lián)網(wǎng)剛剛興起的時(shí)候，網(wǎng)頁(yè)設(shè)計(jì)中充斥著擬物化效果和Flash動(dòng)畫(huà)。設(shè)計(jì)師和用戶都認(rèn)為擬物化的設(shè)計(jì)是美的設(shè)計(jì)。但是擬物化設(shè)計(jì)會(huì)增加網(wǎng)頁(yè)加載負(fù)擔(dān)，致使上網(wǎng)體驗(yàn)不佳。隨著人們壓力的變大，生活節(jié)奏的加快，我們?cè)絹?lái)越覺(jué)得效率是第一位的。所以扁平化風(fēng)格設(shè)計(jì)慢慢地取代了擬物化的設(shè)計(jì)，因?yàn)楸馄交脑O(shè)計(jì)占據(jù)更少的空間，加載的數(shù)據(jù)更少，用戶體驗(yàn)更流暢，所以會(huì)被更多人選擇。調(diào)查顯示：“網(wǎng)絡(luò)加載的速度和用戶放棄等待的數(shù)量是呈幾何增長(zhǎng)的”。即：速度越慢，放棄等待的人越多。扁平化風(fēng)格的界面設(shè)計(jì)適應(yīng)了上網(wǎng)的加載時(shí)間，但是扁平化風(fēng)格的靜態(tài)設(shè)計(jì)是枯燥的。這時(shí)需要?jiǎng)討B(tài)的設(shè)計(jì)來(lái)建構(gòu)一個(gè)良好的交互環(huán)境，讓用戶融入其中，身臨其境。靈動(dòng)的動(dòng)態(tài)交互提升了人與界面、人與信息、人與機(jī)、人與人的連接。除了視覺(jué)上給用戶放松之外，還能有效地引導(dǎo)用戶操作界面，實(shí)現(xiàn)完美的體驗(yàn)。

微軟Surface系列平板電腦的觸摸式操控更具有動(dòng)態(tài)交互的特質(zhì)，這使得微軟的設(shè)計(jì)團(tuán)隊(duì)將動(dòng)態(tài)體驗(yàn)作為設(shè)計(jì)的首要任務(wù)之一。20世紀(jì)美國(guó)最重要的平面設(shè)計(jì)大師之一索爾·巴斯將平面設(shè)計(jì)與電影結(jié)合，設(shè)計(jì)了多部電影片頭，被譽(yù)為動(dòng)態(tài)圖形設(shè)計(jì)的開(kāi)山鼻祖。微軟強(qiáng)烈的贊同索爾·巴斯的設(shè)計(jì)理念，讓動(dòng)態(tài)的交互體驗(yàn)融入靜態(tài)的UI設(shè)計(jì)之中。在這方面WindowsUI是最具創(chuàng)新性的，它促使我們仔細(xì)審視過(guò)去對(duì)UI設(shè)計(jì)的認(rèn)識(shí)。微軟對(duì)UI流行趨勢(shì)的判斷和把握一直走在整個(gè)UI設(shè)計(jì)行業(yè)的前列，它的設(shè)計(jì)理念和方法也是最具創(chuàng)新性的。增加動(dòng)效的方法就是增加視覺(jué)提示，快速一次性的動(dòng)效也很容易被用戶察覺(jué)。靜態(tài)的界面和隨時(shí)準(zhǔn)備響應(yīng)的動(dòng)態(tài)的交互形式給用戶帶來(lái)引人入勝的沉浸式交互體驗(yàn)，從而緩解嘈雜的頁(yè)面。這無(wú)疑不是“互聯(lián)網(wǎng)+”時(shí)代的發(fā)展趨勢(shì)。

4 目的性更強(qiáng)

360董事長(zhǎng)周鴻祎在創(chuàng)新研習(xí)社的演講中說(shuō)：“所有的戰(zhàn)略都要?dú)w結(jié)成從用戶角度出發(fā)，尋找一個(gè)需求，一定是中等以上的頻度、痛點(diǎn)、剛需。這個(gè)服務(wù)可以非常不起眼，但是它一定是對(duì)用戶有價(jià)值的”。[4]這就告訴我們將設(shè)計(jì)語(yǔ)言根植于中國(guó)傳統(tǒng)，要善用現(xiàn)代手法堆砌精髓進(jìn)行提煉和詮釋。所以設(shè)計(jì)的目的性就變得尤為重要。換句話說(shuō)設(shè)計(jì)的界面應(yīng)為內(nèi)容服務(wù)。一個(gè)優(yōu)秀的icon和優(yōu)秀的界面設(shè)計(jì)可以成功地吸引用戶下載并嘗試使用一個(gè)產(chǎn)品。但是沒(méi)有很好的內(nèi)容，用戶會(huì)毫不猶豫地卸載。但相反，如果用戶有意無(wú)意之間發(fā)現(xiàn)很一般的APP，下載之后發(fā)現(xiàn)很實(shí)用，是用戶當(dāng)前或?qū)?lái)必須使用的東西，那么用戶會(huì)遷就界面設(shè)計(jì)的不美觀或體驗(yàn)的不順暢。

信息化時(shí)代的UI設(shè)計(jì)和傳統(tǒng)的UI設(shè)計(jì)相比，就像工藝美術(shù)運(yùn)動(dòng)和包豪斯追求的現(xiàn)代主義類(lèi)似。繁雜的設(shè)計(jì)元素堆疊，反而加重了對(duì)用戶體驗(yàn)的干擾。試想當(dāng)我們驚嘆一個(gè)APP界面設(shè)計(jì)的精美絕倫時(shí)，卻處于無(wú)限加載時(shí)的心情。用戶體驗(yàn)順暢是用戶對(duì)于產(chǎn)品最基本的客觀心理訴求。這就要求UI設(shè)計(jì)師必須認(rèn)真反思設(shè)計(jì)的初衷。我們發(fā)現(xiàn)用戶在使用產(chǎn)品時(shí)，其實(shí)就是獲取和處理各種信息。所以UI設(shè)計(jì)必須回歸到信息內(nèi)容上，以強(qiáng)調(diào)內(nèi)容為核心弱化次要元素，這樣用戶可以更快、更容易地獲取自己想要的信息，完全沉浸在內(nèi)容中而不是其他。包豪斯所倡導(dǎo)的現(xiàn)代主義運(yùn)動(dòng)是一種完全忽略情感化的設(shè)計(jì)，這一點(diǎn)在“互聯(lián)網(wǎng)+”時(shí)代下的UI設(shè)計(jì)中是行不通的。所以，只看內(nèi)容而不注重設(shè)計(jì)的產(chǎn)品也是失敗的產(chǎn)品。UI的美感和內(nèi)容是相輔相成，缺一不可的。

“互聯(lián)網(wǎng)+”時(shí)代下的UI設(shè)計(jì)除了簡(jiǎn)約的視覺(jué)架構(gòu)、情感化的用戶體驗(yàn)、流暢的動(dòng)態(tài)感受和強(qiáng)烈的目的性之外，還將全面開(kāi)啟響應(yīng)式布局，盡可能地用滑動(dòng)代替點(diǎn)擊，越來(lái)越注重人機(jī)交互的順暢體驗(yàn)，顏色上雖然與過(guò)去差別不是很大，但是更傾向于高保真色調(diào)。放大不失真的矢量圖形得到更廣泛的運(yùn)用，引導(dǎo)頁(yè)的溫情回歸也將繼續(xù)溫暖著每一個(gè)瀏覽新產(chǎn)品的用戶。

參考文獻(xiàn)：

[1] 設(shè)計(jì)對(duì)消費(fèi)者品牌認(rèn)知的影響——以蘋(píng)果手機(jī)為例[Z].百度文庫(kù).

[2] 李綱.非物質(zhì)界面設(shè)計(jì)[D].

[3] 黃娟.設(shè)計(jì)的反思——論實(shí)用原則在設(shè)計(jì)中的體現(xiàn)[J].美術(shù)大觀.

[4] 周鴻祎.剛需、痛點(diǎn)、高頻是一款好產(chǎn)品的六字真言；免費(fèi)模式絕不是忽悠，而是羊毛出在豬身上[Z].銳度—IT時(shí)代周刊.

[5] 李亞男. UI設(shè)計(jì)中體現(xiàn)的符號(hào)學(xué)原理[J].藝術(shù)天地，2015：152.

[6] 王正林. UI設(shè)計(jì)的理念和方向：以WindowsUI為例[J].裝飾，2015（2）：138.

[7] 白雪. UI設(shè)計(jì)在產(chǎn)品設(shè)計(jì)中的應(yīng)用研究[J].學(xué)研探索，2015：132.

[8] 林陽(yáng). UI設(shè)計(jì)中扁平化理念應(yīng)用研究——?jiǎng)?chuàng)造平面功能化[J].藝術(shù)科技，2015：267.

[9] 任懷琎，周著.視覺(jué)UI設(shè)計(jì)——漫談信息圖形化[J].科技視界，2015（14）.

[10] 周鴻祎.互聯(lián)網(wǎng)好產(chǎn)品六字法則——?jiǎng)傂?、痛點(diǎn)、高頻[DB/OL].品途網(wǎng)，2015-6-15.