手機(jī)UI設(shè)計(jì)風(fēng)格發(fā)展及趨勢(shì)研究

金健浩 李立

摘 要：隨著電子科技的日新月異，手機(jī)在我們?nèi)粘Ｉ钪性絹?lái)越重要，從最初只滿足單一的通信功能演變到當(dāng)前智能手機(jī)，其本身的意義及價(jià)值不言而喻。它的發(fā)展也伴隨著UI設(shè)計(jì)風(fēng)格的不斷變化，更注重用戶偏好及習(xí)慣。本文將通過(guò)分析手機(jī)UI設(shè)計(jì)風(fēng)格發(fā)展的歷程及不同風(fēng)格的優(yōu)缺點(diǎn)，對(duì)未來(lái)手機(jī)UI設(shè)計(jì)風(fēng)格發(fā)展趨勢(shì)做一些展望。

關(guān)鍵詞：UI設(shè)計(jì);交互設(shè)計(jì);扁平化;擬物化;后扁平化

中圖分類號(hào)：TB472文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：2096-0905（2020）23-00-02

伴隨著智能手機(jī)的普及，手機(jī)外觀設(shè)計(jì)越來(lái)越趨于同質(zhì)化，UI界面的設(shè)計(jì)已成為當(dāng)今手機(jī)軟實(shí)力的一種重要體現(xiàn)。UI設(shè)計(jì)風(fēng)格也由擬物化風(fēng)格為主導(dǎo)轉(zhuǎn)變?yōu)槿缃癖馄交L(fēng)格為主導(dǎo)，通過(guò)對(duì)比分析擬物化風(fēng)格與扁平化風(fēng)格，可以使我們更加深刻的理解兩種風(fēng)格之間的聯(lián)系與區(qū)別，對(duì)未來(lái)UI設(shè)計(jì)風(fēng)格的發(fā)展提供相應(yīng)的理論參考與指導(dǎo)意見(jiàn)。

一、手機(jī)UI設(shè)計(jì)的發(fā)展歷程

提及智能手機(jī)UI設(shè)計(jì)的發(fā)展，我們可以追溯到20世紀(jì)末摩托羅拉天拓手機(jī)的發(fā)布，它將UI設(shè)計(jì)劃分為兩個(gè)方向，一種為sysbian系統(tǒng)為主導(dǎo)的手機(jī)九宮格界面，另一種為window mobile系統(tǒng)為主導(dǎo)類似PC風(fēng)格的界面;而智能手機(jī)UI設(shè)計(jì)的轉(zhuǎn)折點(diǎn)則是在2007年ios1.0系統(tǒng)的推出，將擬物化的風(fēng)格的圖標(biāo)與觸摸電容屏的結(jié)合，顛覆了人們對(duì)手機(jī)界面的認(rèn)知。

從ios1到ios6這六年時(shí)間里，擬物化成為手機(jī)UI設(shè)計(jì)的主流設(shè)計(jì)風(fēng)格，通過(guò)模擬現(xiàn)實(shí)生活中的場(chǎng)景、聲音、外觀造型，利用光感、空間、肌理、材質(zhì)、陰影的表現(xiàn)，形象地表達(dá)出手機(jī)界面每個(gè)圖標(biāo)的不同功能用途，擬物化的圖標(biāo)降低用戶的學(xué)習(xí)成本，也給人一種親切、華麗精致的感覺(jué)。

而從ios7開(kāi)始，手機(jī)UI設(shè)計(jì)轉(zhuǎn)變?yōu)楸馄交O(shè)計(jì)風(fēng)格，通過(guò)六代的系統(tǒng)迭代，已經(jīng)習(xí)慣和培養(yǎng)了操作界面的用戶習(xí)慣，此時(shí)的UI設(shè)計(jì)拋棄了過(guò)度的裝飾、立體效果，使設(shè)計(jì)上趨于簡(jiǎn)化，視覺(jué)上更加簡(jiǎn)潔清晰明了，減少用戶的視覺(jué)負(fù)擔(dān)，使用戶更加注重在內(nèi)容本身上。這一轉(zhuǎn)變也符合現(xiàn)代主義所追捧的設(shè)計(jì)哲學(xué)“l(fā)ess is more”。

二、扁平化風(fēng)格與擬物化風(fēng)格對(duì)比分析

（一）從開(kāi)發(fā)設(shè)計(jì)分析

擬物化到扁平化的轉(zhuǎn)變實(shí)際上是手機(jī)UI設(shè)計(jì)發(fā)展的必然結(jié)果。擬物化風(fēng)格更注重對(duì)現(xiàn)實(shí)具象物品的刻畫(huà)，注重細(xì)節(jié)、光影、紋理、質(zhì)感的再現(xiàn)，在設(shè)計(jì)上缺乏藝術(shù)的提煉，久而久之會(huì)使用戶產(chǎn)生審美疲勞，其次精細(xì)刻畫(huà)的圖標(biāo)運(yùn)用了大量的圖層和裝飾，占用了更多的手機(jī)空間，使其加載速度和手機(jī)反應(yīng)速度緩慢[1]。扁平化風(fēng)格順應(yīng)了設(shè)計(jì)開(kāi)發(fā)的發(fā)展，為長(zhǎng)久的擬物化風(fēng)格增添抽象簡(jiǎn)約的藝術(shù)美感，提高了對(duì)設(shè)計(jì)師提煉圖標(biāo)符號(hào)以及色彩搭配運(yùn)用的能力，降低了開(kāi)發(fā)技術(shù)難度，節(jié)省手機(jī)空間資源。

（二）交互體驗(yàn)對(duì)比分析

在交互體驗(yàn)上，擬物化風(fēng)格相比扁平化風(fēng)格更具有表現(xiàn)力。擬物化風(fēng)格模擬現(xiàn)實(shí)生活物品使用的體驗(yàn)和邏輯，讓用戶更加直觀地聯(lián)想到生活中的使用方式，降低用戶的使用難度。例如ios6中的iBook軟件，利用木頭的紋理及陰影模仿出真實(shí)書(shū)架的質(zhì)感，在書(shū)本閱讀過(guò)程中也模擬出真實(shí)紙張的顆粒質(zhì)感和翻頁(yè)聲音及操作，讓用戶直觀地聯(lián)想到現(xiàn)實(shí)生活中的場(chǎng)景，這樣的設(shè)計(jì)給用戶帶來(lái)人性化的體貼（如圖一）。對(duì)于扁平化設(shè)計(jì)而言，減少細(xì)膩的細(xì)節(jié)設(shè)計(jì)，占用較少的系統(tǒng)運(yùn)行資源，讓用戶使用更加流暢，摒棄材質(zhì)、特效的應(yīng)用利于用戶更加沉浸式閱讀內(nèi)容[2]。

（三）視覺(jué)效果對(duì)比分析

從視覺(jué)效果上看，擬物化設(shè)計(jì)具有更高識(shí)別度，光影三維立體感的圖標(biāo)可以便于用戶習(xí)慣的引導(dǎo)與養(yǎng)成。而扁平化設(shè)計(jì)在空間表達(dá)上弱于擬物化，但在色彩搭配上、圖標(biāo)統(tǒng)一性上、內(nèi)容架構(gòu)層級(jí)框架上都優(yōu)越于擬物化。通過(guò)不同的色塊來(lái)劃分不同的功能，減少線條、邊框的使用，降低視覺(jué)干擾。用色塊的明暗關(guān)系來(lái)劃分空間感，暗色背景下亮色就具有前景感，在亮色背景下深色就具有前景感，空間的表達(dá)使用戶對(duì)內(nèi)容層級(jí)的劃分更加清晰，減少用戶的視覺(jué)疲勞，給人一種一目了然的感覺(jué)[3]。

三、未來(lái)手機(jī)UI設(shè)計(jì)風(fēng)格發(fā)展趨勢(shì)分析

縱觀當(dāng)下我們常用的APP軟件，我們可以直觀清晰的發(fā)現(xiàn)這些互聯(lián)網(wǎng)公司的產(chǎn)品UI已經(jīng)不再拘泥于單純的扁平化風(fēng)格，每個(gè)產(chǎn)品都通過(guò)各自的品牌個(gè)性對(duì)扁平化進(jìn)行細(xì)微的發(fā)展改進(jìn)，因此可以推斷出未來(lái)UI設(shè)計(jì)風(fēng)格將呈現(xiàn)多元化發(fā)展的趨勢(shì)。

（一）空間感增強(qiáng)

未來(lái)UI設(shè)計(jì)風(fēng)格還將以扁平化風(fēng)格為主導(dǎo)，對(duì)于空間感的設(shè)計(jì)將會(huì)增強(qiáng)，在空間感表達(dá)上我們可以融合擬物化風(fēng)格陰影、質(zhì)感等設(shè)計(jì)元素，其目的使扁平的像素具備海拔高度，對(duì)其同一頁(yè)面中不同重要度的內(nèi)容進(jìn)行合理化的區(qū)分。例如卡片、按鈕的設(shè)計(jì)，通過(guò)增加空間感的投影，使其具備懸浮感，從視覺(jué)上讓用戶感受到層級(jí)的不同劃分，卡片及按鈕是可點(diǎn)擊、可操作的、重要與其他扁平內(nèi)容的，對(duì)用戶操作及閱讀也是一種引導(dǎo)，降低用戶在接收信息過(guò)程中的視覺(jué)干擾（如圖二）。

（二）三維動(dòng)效增多

長(zhǎng)期的扁平化風(fēng)格也讓界面越來(lái)越缺乏趣味性，近觀近些年各種APP的引導(dǎo)頁(yè)及大型電商的節(jié)日活動(dòng)頁(yè)，不難發(fā)現(xiàn)未來(lái)UI設(shè)計(jì)的趨勢(shì)是增加更多立體三維效果的動(dòng)效表達(dá)。隨著C4D、HTML5在UI設(shè)計(jì)中的普及，使三維立體模型與動(dòng)效交互的實(shí)現(xiàn)變得輕松，據(jù)統(tǒng)計(jì)適當(dāng)?shù)丶尤肴S動(dòng)效可以提升用戶的交互體驗(yàn)感，讓用戶產(chǎn)生與二維效果不同的新鮮感，更好地參與到產(chǎn)品的體驗(yàn)中，增加用戶的參與感[4]。

（三）APP品牌調(diào)性的融入

當(dāng)前UI的設(shè)計(jì)也趨勢(shì)也越來(lái)越注重品牌調(diào)性的提升，不同定位的APP在其產(chǎn)品的設(shè)計(jì)上也融入不同的設(shè)計(jì)元素，讓用戶對(duì)其產(chǎn)品有一定的識(shí)別度。從色彩搭配上來(lái)看，針對(duì)年輕用戶為主的APP未來(lái)更多的會(huì)使用漸變色，這種漸變色的搭配并非與擬物化時(shí)期一樣為了凸顯質(zhì)感，而是為了視覺(jué)美感、產(chǎn)品本身空間所做的大撞色漸變，這樣的色彩搭配運(yùn)用為產(chǎn)品營(yíng)造活潑、年輕、時(shí)尚的印象起到質(zhì)感重要的作用（如圖三）。從排版上看，未來(lái)深入閱讀類、金融工具類APP產(chǎn)品，將向大標(biāo)題、大字體、大間距排版上發(fā)展，放大文字字號(hào)和間距的處理，可以使頁(yè)面更簡(jiǎn)潔，減少用戶閱讀、使用的視覺(jué)干擾，降低用戶的錯(cuò)誤操作，營(yíng)造安靜、安全的界面印象，從而傳遞出產(chǎn)品的品牌調(diào)性（如圖四）。

四、結(jié)束語(yǔ)

我們當(dāng)下是在一個(gè)扁平化UI的時(shí)代，認(rèn)為擬物化時(shí)代已經(jīng)逝去，但我們也可以從不同角度看到擬物化的影子，看到擬物化與扁平化各自的優(yōu)點(diǎn)。雖然未來(lái)UI設(shè)計(jì)發(fā)展充滿了許多不確定因素，但我們一定要做到形式服從內(nèi)容，不盲目追隨潮流趨勢(shì)，讓設(shè)計(jì)為解決用戶需求而存在。

參考文獻(xiàn)：

[1]孫驍莉，賀鵬.UI設(shè)計(jì)中的扁平化與擬物化視覺(jué)傳達(dá)解析[J].藝術(shù)科技，2019（07）：94-95.

[2]梁亮.UI設(shè)計(jì)中圖標(biāo)設(shè)計(jì)探索[J].美與時(shí)代，2016（06）：76-77.

[3]張劍.扁平化UI中的空間表達(dá)[J].藝術(shù)科技，2014（01）：61-63.

[4]胡臻靖.UI設(shè)計(jì)中“后”扁平化風(fēng)格的探討[J].設(shè)計(jì)，2019（07）：34-36.