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

金健浩 李立

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

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

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

伴隨著智能手機(jī)的普及，手機(jī)外觀設(shè)計(jì)越來越趨于同質(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)，通過對比分析擬物化風(fēng)格與扁平化風(fēng)格，可以使我們更加深刻的理解兩種風(fēng)格之間的聯(lián)系與區(qū)別，對未來UI設(shè)計(jì)風(fēng)格的發(fā)展提供相應(yīng)的理論參考與指導(dǎo)意見。

一、手機(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é)合，顛覆了人們對手機(jī)界面的認(rèn)知。

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

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

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

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

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

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

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

（三）視覺效果對比分析

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

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

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

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

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

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

長期的扁平化風(fēng)格也讓界面越來越缺乏趣味性，近觀近些年各種APP的引導(dǎo)頁及大型電商的節(jié)日活動(dòng)頁，不難發(fā)現(xiàn)未來UI設(shè)計(jì)的趨勢是增加更多立體三維效果的動(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ì)也趨勢也越來越注重品牌調(diào)性的提升，不同定位的APP在其產(chǎn)品的設(shè)計(jì)上也融入不同的設(shè)計(jì)元素，讓用戶對其產(chǎn)品有一定的識別度。從色彩搭配上來看，針對年輕用戶為主的APP未來更多的會(huì)使用漸變色，這種漸變色的搭配并非與擬物化時(shí)期一樣為了凸顯質(zhì)感，而是為了視覺美感、產(chǎn)品本身空間所做的大撞色漸變，這樣的色彩搭配運(yùn)用為產(chǎn)品營造活潑、年輕、時(shí)尚的印象起到質(zhì)感重要的作用（如圖三）。從排版上看，未來深入閱讀類、金融工具類APP產(chǎn)品，將向大標(biāo)題、大字體、大間距排版上發(fā)展，放大文字字號和間距的處理，可以使頁面更簡潔，減少用戶閱讀、使用的視覺干擾，降低用戶的錯(cuò)誤操作，營造安靜、安全的界面印象，從而傳遞出產(chǎn)品的品牌調(diào)性（如圖四）。

四、結(jié)束語

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

參考文獻(xiàn)：

[1]孫驍莉，賀鵬.UI設(shè)計(jì)中的扁平化與擬物化視覺傳達(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.