金健浩 李立

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

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

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

伴隨著智能手機的普及，手機外觀設(shè)計越來越趨于同質(zhì)化，UI界面的設(shè)計已成為當(dāng)今手機軟實力的一種重要體現(xiàn)。UI設(shè)計風(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è)計風(fēng)格的發(fā)展提供相應(yīng)的理論參考與指導(dǎo)意見。

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

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

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

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

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

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

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

（二）交互體驗對比分析

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

（三）視覺效果對比分析

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

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

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

（一）空間感增強

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

（二）三維動效增多

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

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

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

四、結(jié)束語

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

參考文獻：

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

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

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

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