新擬態(tài)設(shè)計風(fēng)格下平面視覺元素的分析與研究

■楊 力

（廣東茂名幼兒師范?？茖W(xué)校，廣東 茂名 525011）

擬態(tài)，從字面上可以分為兩個層次，第一層次是模擬、模仿，第二層次是“態(tài)”。其實質(zhì)上就是效仿模擬的原始基本樣態(tài)，其不僅包括自然界中各生物所具備的某種結(jié)構(gòu)與功能，還將其創(chuàng)造物所表現(xiàn)出的外部樣態(tài)囊括其中。新擬態(tài)設(shè)計并不是一種簡易式的模仿行為，其間接地傳遞出現(xiàn)代設(shè)計手法多元化發(fā)展傾向這一理念。在平面設(shè)計中合理應(yīng)用新擬態(tài)設(shè)計手法，通過模擬自然形式或者表象等，形成展現(xiàn)的形態(tài)，創(chuàng)造出一種特殊的體驗。

一、新擬態(tài)設(shè)計風(fēng)格的介紹

新擬態(tài)設(shè)計作為新時期的一種全新的擬物化設(shè)計風(fēng)格，其質(zhì)感處于全擬物與扁平化兩者之間，不僅能對擬物化設(shè)計質(zhì)感以及空間感起到一定延續(xù)特征，還具備了扁平設(shè)計抽象化、留白及模糊化陰影的屬性。在平面設(shè)計領(lǐng)域中采用這種設(shè)計手法，等同于仿照真實世界內(nèi)物品的樣態(tài)，采用仿真度較高的紋理，規(guī)劃設(shè)計出與造型高度相似的平面圖形，這樣用戶即便是在不熟悉操作方法時，也能通過觀察圖形的樣式，明確其功能與常規(guī)使用方法。以上這種設(shè)計模式下能生成極為逼真的仿真成效，其高度重視對元素的精細(xì)化、層次化處理，科學(xué)應(yīng)用各類特效。

蘋果公司IOS系統(tǒng)在發(fā)布之前，將很多擬物化設(shè)計風(fēng)格融合至IOS界面設(shè)計領(lǐng)域中，形成栩栩欲活的質(zhì)感、靜脈的外形細(xì)節(jié)與靠近現(xiàn)實的動態(tài)特效，創(chuàng)造出了極為良好的能供性[1]。比如，Windows 7系統(tǒng)內(nèi)水晶質(zhì)感的“開始”鍵、iOS系統(tǒng)內(nèi)和現(xiàn)實書架實物體沒有區(qū)別的iBooks工具，擬物化設(shè)計采用模仿、擬化實物體基本屬性的方法，賦予廣大用戶操作、控制的本能，引領(lǐng)廣大用戶在虛擬界面內(nèi)合理應(yīng)用既往實踐經(jīng)驗。進(jìn)入新世紀(jì)以來，智能觸屏手機的普及，擬物化設(shè)計利用自身特有的能供性與可學(xué)性，協(xié)助越來越多的新用戶在短時間內(nèi)了解界面元素的基本功能，掌握常規(guī)操作技巧，消除掉主觀上對新科技形成的畏難不良情緒。

近些年中，新擬態(tài)設(shè)計逐漸朝著更簡單、抽象的扁平化風(fēng)格范圍轉(zhuǎn)型，主動棄除了模仿真實質(zhì)感的操作行為，具備了大色塊、線條化、抽象化符號的扁平化設(shè)計特色，成為視覺設(shè)計領(lǐng)域特別是交互式設(shè)計范圍中的主流，其追求形成極為簡潔的視覺成效，嘗試將虛擬手動能供性移除，對其實用功能形成深刻的影響。

二、在平面設(shè)計中新擬態(tài)設(shè)計風(fēng)格的應(yīng)用

（一）科學(xué)提煉設(shè)計元素

盡管近些年智能手機的屏幕尺寸有持續(xù)擴大趨勢，但歸根到底其是一個十分有效的信息輸出空間，面對承載著龐大信息輸出量的現(xiàn)實需求，通過合理化的設(shè)計過程，滿足技術(shù)發(fā)展及廣大用戶的現(xiàn)實使用需求，這是廣大界面設(shè)計師急需解除的一項共同問題。

既往采用的擬物化設(shè)計，細(xì)節(jié)過于冗雜，多數(shù)設(shè)計師會將大部分精力與時間投放在怎樣提升界面內(nèi)元素細(xì)節(jié)的精致度、逼真性方面。長期沿用以上這種繁瑣的設(shè)計模式，會使廣大用戶產(chǎn)生審美疲勞，也滋生出一個問題，即過度復(fù)雜的裝飾，可能會分散用戶接收信息的注意力，提高接收信息的時間成本，而新擬態(tài)設(shè)計階段通過科學(xué)提煉設(shè)計元素，能較好地解除如上幾項問題。

1.明確提煉的主要內(nèi)容

具體是要對內(nèi)容進(jìn)行提煉、簡化處理，畢加索的《?！繁闶且粋€經(jīng)典實例（見圖1）[2]。由最初始的寫實風(fēng)格，發(fā)展到最后只應(yīng)用簡單線條，以上過程歷經(jīng)了數(shù)次簡化處理，畢加索不僅對裝飾逐步進(jìn)行簡化，更重要的一點是其自身對牛這一物種有極為深入的認(rèn)知，明確利用應(yīng)該去掉及保留的內(nèi)容。

圖1 畢加索的作品《?！?/p>

本文以蘋果手機IOS7系統(tǒng)為實例分析圖標(biāo)的設(shè)計問題，多數(shù)圖標(biāo)絕不是單純剔除初有圖標(biāo)的陰影等特效即可，而提取了可以更簡單傳送信息的內(nèi)容，借此方式使圖標(biāo)無論是從視覺層面還是信息傳送形式方面，均更能表現(xiàn)出扁平化特性。

2.合理剔除特效裝飾

在傳統(tǒng)的擬物化設(shè)計階段，特效、裝飾均扮演著主角，其作用主要是將按鈕、圖標(biāo)等制作成與現(xiàn)實生活中實物外部形態(tài)高度相似的構(gòu)造。對特效、裝飾逼真性過度追求，通常會耗用設(shè)計師大量的時間和精力，但客觀上分析，其在完善產(chǎn)品功能方面做出的功能是微不足道的，所以有些多余。故而在當(dāng)下的新擬態(tài)設(shè)計，最重要的操作之一就是剔除這些冗余的裝飾，為界面營造出一個清爽、潔凈、利落的“呼吸環(huán)境”。

對電子產(chǎn)品界面進(jìn)行分析，尺寸、功能有差異的按鈕是其重要構(gòu)成。無論是智能手機或者是平板電腦等，下傳各個命令或傳送信息數(shù)據(jù)，均是基于按鈕去實現(xiàn)的。對按鈕進(jìn)行設(shè)計，剔除那些不必要的裝飾內(nèi)容，便已經(jīng)是整個界面設(shè)計朝向扁平化領(lǐng)域邁進(jìn)一大步的重要表現(xiàn)形式[3]。比如剔除漸變、陰影、紋理等元素，僅留存線條及干凈利落、簡潔的分界線，這樣能為存留信息創(chuàng)造更大的空間，此時廣大用戶不會耗用較大的時間成本去判斷按鈕外形的美觀度、逼真性等，這樣便能將更多的注意力聚集在按鈕自身功能方面，掌握按鈕可以傳送指令信息的類型、數(shù)量。

合理剔除特效和裝飾以后，整個界面顯現(xiàn)出扁平化的狀態(tài)，沒有形成任何前后關(guān)系區(qū)別。但若能合理應(yīng)用色彩這一要素，科學(xué)部署信息面積，主要信息便能一覽無余了。

3.圖形的幾何、符號化

具體是在提煉圖標(biāo)內(nèi)容以后，基于扁平化圖標(biāo)設(shè)計過程實現(xiàn)幾何、符號化圖形的直觀性設(shè)計。通過采用以上方法，能夠形成一個簡潔性、概括性更強的圖標(biāo)，為廣大用戶創(chuàng)造一個更廣闊的聯(lián)想空間，當(dāng)然其帶有的信息量也是龐大的，功能也被充分地顯現(xiàn)出來。

（二）梳理平面的層級及信息結(jié)構(gòu)

盡量將層級數(shù)目調(diào)控在3個之下。新擬態(tài)設(shè)計風(fēng)格對平面結(jié)構(gòu)提出較高要求，需要相關(guān)人員明確層次結(jié)構(gòu)創(chuàng)建及信息劃分情況。鑒于以上情況，設(shè)計師們應(yīng)盡量減少單個界面內(nèi)的信息儲存量，留下充足的留白空間，建議配合使用引導(dǎo)性、邏輯性高的部署思維，比如“回”或“T”字型的界面。

（三）合理確定風(fēng)格配色

在局部裝飾效果被剔除、圖形科學(xué)簡化后，把元素統(tǒng)一安置于一個平面上，要凸顯出主要信息，配色是重要內(nèi)容，也是新擬態(tài)化設(shè)計過程的關(guān)鍵。基于比較色彩的色相、明度及純度，能夠使同一個平面上的多種元素之間有主次之分，富有層次感。

關(guān)于用色的選擇問題，不管是在明度還是色調(diào)方面，均有特殊之處，自從Windows 8系統(tǒng)采用了Metro風(fēng)格，多色系就在平面設(shè)計領(lǐng)域中廣泛應(yīng)用，部分情景下可能會選擇6～8個顏色。比如鮮亮的色彩形成了強烈的撞色，能夠使擬態(tài)化設(shè)計給用戶留下深刻印象，通常情況下，鮮亮顏色內(nèi)所含有的信息，便是所需傳送的主要信息，新擬態(tài)的視覺化設(shè)計和扁平化之間形成了交互體驗，最后實現(xiàn)融合[4]（見圖2）。淡色系用于新擬態(tài)設(shè)計風(fēng)格領(lǐng)域中，其蘊意是耐人尋味的。單色系，即在整個界面上僅選用一種顏色，也可以將同色相用于界面中，但要在純度、明度的同類色方面存在差異。從某種程度上分析，平面設(shè)計領(lǐng)域中，合理應(yīng)用單色系，能夠?qū)崿F(xiàn)界面視覺設(shè)計的最小化和裝飾元素的最精簡化。

圖2 亮、暗背景上鮮亮色彩呈現(xiàn)出的效果

而關(guān)于色塊的應(yīng)用，可以將其看成是梳理信息、規(guī)劃功能的支撐。在剔除所有裝飾、特效以后，無論是按鈕、圖標(biāo)或者說明書，均被統(tǒng)一安放在同個平面上，同個合理應(yīng)用色塊上，一方面能有效總結(jié)、整合各區(qū)域內(nèi)的信息，另一方面還能清晰地呈現(xiàn)出光標(biāo)所處的內(nèi)部部位（見圖3）。

圖3 應(yīng)用色塊區(qū)別功能區(qū)域

（四）繪制元素與視覺細(xì)節(jié)

大圓角矩形與圓形是新擬態(tài)設(shè)計風(fēng)格的優(yōu)選對象，很多新擬態(tài)設(shè)計應(yīng)用了很多圓形按鈕、大圓角矩形的卡片樣式。在新擬態(tài)設(shè)計階段，設(shè)計師們盡量少出現(xiàn)或不出現(xiàn)直角及銳角的圖形樣式，自覺確立使用曲線過渡樣式的主觀意識，進(jìn)而更好地契合全局氣氛。

繪制視覺細(xì)節(jié)階段，新擬態(tài)設(shè)計下產(chǎn)生的視覺成效基本是緊扣某單個光源形成的光源效果進(jìn)行操作的。本文以凸起效果為實例進(jìn)行分析，設(shè)計師可以嘗試以對角方位把亮、暗色模糊投影分別設(shè)置在凸起元素周邊，臨近、遠(yuǎn)離光源位置分別會形成亮色、暗色投影。以上兩個位置的投影x軸與y軸偏移量的絕對值理應(yīng)維持一致，借此方式使用戶產(chǎn)生平衡規(guī)整的視覺體驗。通過合理調(diào)整投影的色彩、不透明度及模糊層度等多種指標(biāo)，能夠創(chuàng)造出輕質(zhì)感的設(shè)計成效[5]。通常情況下，元素越厚層級越高時，其周邊形成的投影范圍就越大，投影顏色也就越發(fā)深邃。為進(jìn)一步增加厚度值及使細(xì)節(jié)更為豐富化，可以酌情添置對角漸變的描邊效果，描邊效果也要遵照單一光源下光影規(guī)律填充漸變色。針對平面內(nèi)的可辨識度較高的元素，比如圖標(biāo)等，可以將其制造成立體化的內(nèi)雕刻視覺成效，也有助于優(yōu)化平面設(shè)計效果。

（五）對版式進(jìn)行合理化設(shè)計

新擬態(tài)設(shè)計的最特別的功能便是使全部視覺圍繞中心運轉(zhuǎn)，在主要內(nèi)容、配色等元素均被扁平化、精簡化處理后，應(yīng)實現(xiàn)信息部署的合理化，這樣一來不僅能清晰劃分界面上的主次，還能使整個界面更富有邏輯性，對用戶視覺流程作出正確引導(dǎo)，短縮讀取信息的用時[6]。

1.網(wǎng)格系統(tǒng)

網(wǎng)格系統(tǒng)曾被用于瑞士風(fēng)格的海報版式設(shè)計范圍中。網(wǎng)格系統(tǒng)，實質(zhì)上就是將版面內(nèi)的文字作為目標(biāo)對象，通過合理方式將其整合成數(shù)個文字塊面，進(jìn)而更準(zhǔn)確地辨識差異化，總結(jié)、整合版面內(nèi)的各種元素。網(wǎng)格系統(tǒng)應(yīng)用階段，不是通過簡易方法排布、疊加不同局部空間，而在一個有限空間內(nèi)，通過規(guī)范調(diào)整不同設(shè)計元素的方位、尺寸等，在符合功能性設(shè)計要求的基礎(chǔ)上，在視覺層面上實現(xiàn)平衡。

網(wǎng)格系統(tǒng)還起到留白作用。伴隨各種信息的提煉、組合過程，界面中可能會空出較大時剩余空間。在擬態(tài)設(shè)計階段，留白蘊含著多層意思，比如簡化元素，使畫面更有呼吸感、劃分信息功能區(qū)等。通過留白，配合使用適宜的色塊，能夠協(xié)助用戶快速探尋到需表達(dá)的重點。

2.應(yīng)用大圖

在新擬態(tài)設(shè)計風(fēng)格中，時常會應(yīng)用一張鋪滿整個版面的畫面，也可能是占據(jù)大面積版面的大圖形，并會添加很少的文字信息。對以上設(shè)計的原因進(jìn)行分析，主要是由于當(dāng)畫面元素已抵達(dá)極精簡的層面上時，所要闡述的信息就受到了極大的限制。此時選用單張選材適宜的大圖形，便能較為順利地為畫面營造出極為配套的氣氛。當(dāng)然不管用戶身處何時何地，圖形、內(nèi)容、版式等元素之間都會存在著相輔相成的關(guān)系。

3.半透明

人們?yōu)榱四軌蛟谄矫嬷袆?chuàng)造出較多的層次感，通常會將半透明風(fēng)格滲透至新擬態(tài)設(shè)計過程中。自從推出蘋果IOS7系統(tǒng)以來，其帶有的半透明毛玻璃風(fēng)格就吸引了廣大群眾的眼光，在合理應(yīng)用半透明的基礎(chǔ)，蘋果公司還適度提升了系統(tǒng)智能感知客觀環(huán)境的靈敏度。當(dāng)?shù)讏D顏色出現(xiàn)變化時，調(diào)控中心配套的按鈕色彩也會隨之發(fā)生改變[7]。由此可見，在滿足IOS7系統(tǒng)功能應(yīng)用需求的基礎(chǔ)上，滲透了人性化設(shè)計理念，進(jìn)一步完善了廣大用戶的主觀體驗。

半透明的益處可以做出如下闡釋：其能夠在不整體覆蓋底層的狀態(tài)下，不僅不會斷離和底圖之間的關(guān)聯(lián)性，也能清晰地觀察到另一層內(nèi)存儲的信息?；诿靼?、虛實比較過程，使關(guān)鍵信息由底層脫穎而出，縮短和用戶的視線距離。

三、預(yù)測新擬態(tài)設(shè)計風(fēng)格的應(yīng)用前景

在扁平化設(shè)計成為時代設(shè)計風(fēng)格主流的背景下，新擬態(tài)設(shè)計對人們主觀的設(shè)計審美形成了良性刺激。交互設(shè)計和視覺設(shè)計之間建設(shè)緊密的關(guān)聯(lián)性，設(shè)計師實踐中應(yīng)精確、合理整頓兩者的關(guān)系，確保具有良好的協(xié)調(diào)性。交互設(shè)計領(lǐng)域是新擬態(tài)設(shè)計風(fēng)格的始源地，其運用階段自身可訪問性不足是不能忽略的現(xiàn)實問題，對比度偏低的現(xiàn)狀長期得不到改善，很可能導(dǎo)致部分色盲、色弱者很難對信息進(jìn)行精確分區(qū)和層級區(qū)別，進(jìn)而出現(xiàn)信息混淆的情況。新擬態(tài)設(shè)計為一種全新的擬物風(fēng)格，承擔(dān)起部分?jǐn)M物化負(fù)擔(dān)是必然的事實，不僅要依靠現(xiàn)實事物創(chuàng)造出三維立體化效果，也需主動維持簡潔、干練的視覺體驗[8]。借此方式使新擬態(tài)設(shè)計出的單一界面能夠減少有效信息數(shù)量的承載量，降低信息的傳送效率。參照新擬態(tài)設(shè)計風(fēng)格自身帶有的優(yōu)勢和弊端，在界面設(shè)計領(lǐng)域中其對功能簡易型的界面更能表現(xiàn)出較高的適用性，比如工具類、智能家居界面，也包括那些信息量偏少的展示類界面，例如官網(wǎng)的介紹界面、產(chǎn)品呈現(xiàn)界面。

純視覺平面設(shè)計階段合理應(yīng)用新擬態(tài)風(fēng)格，能夠保留原始美感，使用戶能產(chǎn)生現(xiàn)代化、科技化、簡潔化的主觀體驗。例如，三星公司在2020年2月創(chuàng)辦的線上發(fā)布會海報，便是應(yīng)用了新擬態(tài)設(shè)計風(fēng)格的成功范例，這表明新擬態(tài)設(shè)計下的風(fēng)格已得到設(shè)計師的肯定與高度欣賞，并且會逐漸被用于多種設(shè)計領(lǐng)域內(nèi)。

新擬態(tài)設(shè)計風(fēng)格發(fā)展至今日，雖然其出現(xiàn)的時間不是很長久，但是已經(jīng)不能將其作為設(shè)計風(fēng)格領(lǐng)域中的“新人”了。從這一風(fēng)格在電腦、手機界面內(nèi)出現(xiàn)的早期，人們對其從批判、懷疑到維持中立態(tài)度至完全接納，高度肯定其散發(fā)出的風(fēng)格魅力，且其在平面設(shè)計領(lǐng)域的應(yīng)用有不斷拓展趨勢。通過了解新擬態(tài)設(shè)計內(nèi)的各種平面視覺元素，而后系統(tǒng)地了解這種設(shè)計風(fēng)格，發(fā)現(xiàn)其沒有好壞之分，只存在設(shè)計與產(chǎn)品合不合適的問題，在各平面設(shè)計領(lǐng)域中均表現(xiàn)出較高的適用性，以較好的成效去呈現(xiàn)產(chǎn)品。