淺析移動(dòng)界面中擬物化設(shè)計(jì)

龔忱，吳旭敏

（武漢理工大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院，湖北武漢430070）

淺析移動(dòng)界面中擬物化設(shè)計(jì)

龔忱，吳旭敏

（武漢理工大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院，湖北武漢430070）

目的為分析“擬物化”理念在移動(dòng)界面設(shè)計(jì)中的應(yīng)用，研究并論述其視覺風(fēng)格特點(diǎn)，引導(dǎo)設(shè)計(jì)師在界面視覺特征及信息結(jié)構(gòu)特征上進(jìn)行整體把握。方法為對(duì)擬物化設(shè)計(jì)在移動(dòng)界面各個(gè)使用場(chǎng)景、用戶功能需求、用戶使用行為這3個(gè)方面進(jìn)行應(yīng)用分析和論證。結(jié)論為擬物化設(shè)計(jì)用以體現(xiàn)設(shè)計(jì)品質(zhì)，因此需要設(shè)計(jì)師善于觀察生活，積累設(shè)計(jì)素材，再將其轉(zhuǎn)化到實(shí)際的產(chǎn)品設(shè)計(jì)之中。只有這樣，才能設(shè)計(jì)出用戶體驗(yàn)良好的移動(dòng)界面。

移動(dòng)界面；擬物化設(shè)計(jì)；使用場(chǎng)景；功能需求

擬物化設(shè)計(jì)就是要通過用戶對(duì)該物品的認(rèn)知來幫助他們無障礙地學(xué)會(huì)如何使用軟件，它是從一個(gè)對(duì)象到另一對(duì)象的視覺線索的應(yīng)用，具有其無與倫比的視覺美感，當(dāng)應(yīng)用中的可視化對(duì)象和操作按照現(xiàn)實(shí)世界中的對(duì)象與操作仿造時(shí)，用戶就能快速領(lǐng)會(huì)如何使用它。同時(shí)，擬物化也不應(yīng)該只是為了擬物而擬物，它是設(shè)計(jì)師將實(shí)物的一些特性加入到設(shè)計(jì)中，并融入用戶對(duì)功能的需求而產(chǎn)生的一種設(shè)計(jì)方式。本文主要以錘子手機(jī)Smartisan OS和網(wǎng)易云音樂這兩個(gè)目前來說十分優(yōu)秀的擬物化設(shè)計(jì)作品為代表，主要探討目前主流的設(shè)計(jì)風(fēng)格在扁平化趨勢(shì)下，其擬物化設(shè)計(jì)風(fēng)格如何通過在移動(dòng)界面各個(gè)使用場(chǎng)景、用戶功能需求、用戶使用行為這3個(gè)方面的運(yùn)用，從而改變用戶對(duì)它的認(rèn)識(shí)，促進(jìn)其自身的發(fā)展和完善。

1 擬物化設(shè)計(jì)

“擬物化設(shè)計(jì)”這個(gè)詞源于希臘語中的「skeuos」（意為器具或工具）和「morphe」（意為形狀）。它通過模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等效果對(duì)實(shí)物進(jìn)行再現(xiàn)，也可適當(dāng)程度地變形和夸張，界面模擬真實(shí)物體。擬物設(shè)計(jì)會(huì)讓你第一眼就認(rèn)出這是個(gè)什么東西，交互方式也模擬現(xiàn)實(shí)生活的交互方式。擬物化風(fēng)格在20世紀(jì)80年代開始出現(xiàn)，1984年蘋果公司將擬物化設(shè)計(jì)應(yīng)用到首款商用用戶GUI中，圖標(biāo)和界面模仿了現(xiàn)實(shí)中的實(shí)物進(jìn)行創(chuàng)作，展示出的豐富的視覺效果是人們?cè)谄渌僮飨到y(tǒng)中從未見過的[1]。擬物化設(shè)計(jì)是一條連接過去與未來的紐帶，在適應(yīng)新設(shè)備時(shí)起到了重要作用，其更是一種產(chǎn)品設(shè)計(jì)的元素或風(fēng)格，它以新的外觀讓人感覺熟悉和親切，同時(shí)它更像一個(gè)富有情感的事物，會(huì)讓用戶使用起來感覺到十分親切。

2 擬物化和扁平化的優(yōu)缺點(diǎn)分析

設(shè)計(jì)的本質(zhì)是解決生活、生產(chǎn)中的實(shí)際問題，可用性和用戶體驗(yàn)比外觀更重要。如何高效地幫助和指導(dǎo)用戶完成他們想做的事，是設(shè)計(jì)的根本。用戶看重的是完成任務(wù)流程的順暢程度和完成過程中的感受，而信息的組織性和展示方式在很大程度上決定了最終接收信息的效果。擬物化風(fēng)格為追求逼真和細(xì)節(jié)而帶來諸多視覺元素之間的復(fù)雜關(guān)系，扁平化設(shè)計(jì)風(fēng)格視覺元素簡(jiǎn)潔單純，更容易突出重點(diǎn)[2]。

擬物化設(shè)計(jì)對(duì)現(xiàn)實(shí)事物的模擬常常體現(xiàn)了一種人性化的回歸，它營(yíng)造出用戶熟悉且具有親切感的操作界面，能有效地減少認(rèn)知和操作的障礙，消除對(duì)新產(chǎn)品的恐懼和排斥，在冰冷的數(shù)字世界給人帶來更多的人情味。同時(shí)還能感知回饋，具有趣味性。這些現(xiàn)實(shí)化的模擬不僅表示一種信息的回饋，還增加了使用的趣味和與用戶的互動(dòng)。因此，擬物化設(shè)計(jì)優(yōu)點(diǎn)有以下2個(gè)：①認(rèn)知和學(xué)習(xí)成本低，幾歲的小孩也能看懂移動(dòng)界面幾乎所有原生應(yīng)用的圖標(biāo)；②各種按鈕的視覺質(zhì)感和按下去之后的交互效果，使用戶養(yǎng)成對(duì)這類“東西”的統(tǒng)一認(rèn)知和使用習(xí)慣。

擬物化相比扁平化的優(yōu)勢(shì)在于擬物化設(shè)計(jì)的圖標(biāo)，可以在視覺上更好地表現(xiàn)真實(shí)物體形態(tài)，模擬真實(shí)物體的材質(zhì)、質(zhì)感、細(xì)節(jié)、光亮等。這樣的設(shè)計(jì)如果描繪的是復(fù)古的物品，能使人們產(chǎn)生懷舊的感情；如果描繪的是在日常生活中比較常見的物品，人們會(huì)因先入為主的思想更容易對(duì)其產(chǎn)生好感。但任何事物都有兩面性，再好的設(shè)計(jì)也有它的缺點(diǎn)。

擬物化設(shè)計(jì)的缺點(diǎn)有以下幾點(diǎn)：①由于過于堅(jiān)持對(duì)實(shí)物的模仿而忽視了界面交互的特點(diǎn)，擬物化設(shè)計(jì)限制了功能和創(chuàng)造力；②擬物化設(shè)計(jì)要求精致的立體效果，這會(huì)與其他維度較少的設(shè)計(jì)元素產(chǎn)生不和諧的感覺；③擬物化設(shè)計(jì)很好看，不過也經(jīng)常占用界面上寶貴的面積；④擬物化設(shè)計(jì)有一定的排他性，跟其他風(fēng)格的設(shè)計(jì)放在一起就覺得非常奇怪。

但扁平化設(shè)計(jì)也有明顯的劣勢(shì)，比如傳達(dá)內(nèi)容的感情不豐富，甚至過于冰冷。然而我們發(fā)現(xiàn)，擬物化的優(yōu)點(diǎn)正是扁平化的缺點(diǎn)，那么作為設(shè)計(jì)師應(yīng)當(dāng)取二者之所長(zhǎng)，避其短進(jìn)行合理設(shè)計(jì)。擬物化設(shè)計(jì)圖形表意的明確性和扁平化設(shè)計(jì)信息傳達(dá)的便捷性相結(jié)合，與此同時(shí)，擬物化設(shè)計(jì)的嚴(yán)謹(jǐn)邏輯關(guān)系與扁平化設(shè)計(jì)的畫面簡(jiǎn)潔性相協(xié)調(diào)，以達(dá)到產(chǎn)品設(shè)計(jì)更人性化的目的。所以，應(yīng)當(dāng)將以情景、功能為基礎(chǔ)的擬物化與扁平化設(shè)計(jì)相融合，使其相互促進(jìn)、相互發(fā)展。

3 探析移動(dòng)界面中擬物化設(shè)計(jì)

雖然目前扁平化設(shè)計(jì)成為當(dāng)下移動(dòng)界面設(shè)計(jì)的主流方向，但是用戶對(duì)軟件界面使用的便捷性、功能性、高效性等方面的需求是從未停止過的[3]。擬物化設(shè)計(jì)已經(jīng)開始有了新的自我轉(zhuǎn)變，設(shè)計(jì)者通過在交互方式、視覺布局設(shè)計(jì)、顏色搭配等方面不斷完善和進(jìn)步，也給使用者帶來與眾不同的使用體驗(yàn)。下面從3個(gè)層面來分析移動(dòng)界面中擬物化設(shè)計(jì)的表現(xiàn)方式。

3.1 基于用戶使用場(chǎng)景的擬物化設(shè)計(jì)

當(dāng)前是移動(dòng)互聯(lián)網(wǎng)時(shí)代，使用移動(dòng)設(shè)備的場(chǎng)景越來越多，作為設(shè)計(jì)者，需要考慮用戶的實(shí)際場(chǎng)景需求，可以通過調(diào)整優(yōu)化頁面布局、顏色搭配等方式來解決此類問題，以此來獲得其心理共鳴，也能給用戶帶來豐富的情感體驗(yàn)。例如在Smartisan OS中有一個(gè)錘子時(shí)鐘的APP，它是由4個(gè)單獨(dú)的小功能組成的，分別為世界時(shí)鐘、鬧鐘、秒表、計(jì)時(shí)器，其中，最有趣且最實(shí)用的是秒表和計(jì)時(shí)器這兩個(gè)小工具。首先從秒表的這個(gè)界面來看，它是完全依托現(xiàn)實(shí)中秒表的真實(shí)形態(tài)而設(shè)計(jì)的，由3個(gè)按鈕組成，即時(shí)間記錄、開始或暫停、復(fù)位，操作使用的體驗(yàn)幾乎與現(xiàn)實(shí)中使用秒表保持一致，并且還配有相應(yīng)的音效。它的使用體驗(yàn)十分有趣，那逼真的滴滴答答的倒計(jì)時(shí)相比秒表要更加悠閑，帶來一種一切盡在時(shí)間秩序的約束中的感覺，完全可以帶給用戶使用秒表的美妙感受，既愉悅了用戶的心情，又滿足了當(dāng)時(shí)使用場(chǎng)景的功能需求，設(shè)計(jì)得太巧妙了。具體見圖1和圖2.

圖1 Smartisan OS秒表打開狀態(tài)

圖2 Smartisan OS秒表使用狀態(tài)

其次是計(jì)時(shí)器功能，使用后整個(gè)界面只有3個(gè)功能按鈕，分別為暫停、重置、下拉計(jì)時(shí)皮條，十分簡(jiǎn)潔，易于操作使用，它也是基于用戶在比賽等使用場(chǎng)景的優(yōu)秀擬物化設(shè)計(jì)作品。使用時(shí)，只需下拉計(jì)時(shí)皮條，由用戶自由選擇計(jì)時(shí)的時(shí)間，并且在表盤的下方用飽和度較低的紅色顯示剩余時(shí)間，同時(shí)配以時(shí)針走的音效，其中，特效的聲音長(zhǎng)短也都不一樣，帶給用戶好似在真實(shí)環(huán)境中使用的體驗(yàn)。在使用期間，如果想更改計(jì)時(shí)的時(shí)間，只需向上拉動(dòng)即可，操作簡(jiǎn)單、高效、便捷。具體見圖3和圖4.

圖3 Smartisan OS計(jì)時(shí)器打開狀態(tài)

圖4 Smartisan OS計(jì)時(shí)器使用狀態(tài)

以上這兩個(gè)小功能都是按照用戶的使用情境設(shè)計(jì)出的功能，這些都是在目前大多數(shù)同類別的APP中較少存在的。雖然這些不是使用頻次很高的功能，但讓用戶使用后覺得十分貼心，可以滿足一些特殊使用環(huán)境下的用戶需求。

在國(guó)內(nèi)優(yōu)秀的擬物化系統(tǒng)錘子手機(jī)的Smartisan OS中，也有較多基于情境的擬物化設(shè)計(jì)。例如，當(dāng)我們?cè)陂_會(huì)等需要將手機(jī)鈴聲模式調(diào)整為靜音時(shí)，大多數(shù)手機(jī)只有一個(gè)靜音按鈕，有時(shí)我們用完靜音模式后會(huì)忘記把鈴聲模式調(diào)整回來，這會(huì)使我們因?yàn)槁┙与娫挾⒄`重要事情。但在Smartisan OS中，卻有所不同，當(dāng)我們選擇將模式調(diào)整為靜音時(shí)，界面的右上方會(huì)多一個(gè)按鈕，這個(gè)就是定時(shí)靜音功能，點(diǎn)擊后會(huì)出現(xiàn)幾個(gè)靜音時(shí)間的選項(xiàng)，分別為“一直”“2小時(shí)”“4小時(shí)”“6小時(shí)”“8小時(shí)”，并且使用的是滑動(dòng)的操作方式，更加便于操作。倒計(jì)時(shí)結(jié)束后，手機(jī)會(huì)自動(dòng)恢復(fù)成響鈴狀態(tài)，具體的使用情境為，看一場(chǎng)電影時(shí)就可設(shè)為2小時(shí)，一個(gè)上午或者一個(gè)下午就可設(shè)為4小時(shí)，睡覺時(shí)可設(shè)為6小時(shí)或者8小時(shí)，充分考慮了用戶在使用靜音模式時(shí)的各種需求。通過這些特別的人性化設(shè)計(jì)較好地解決了相關(guān)問題，也說明了基于用戶使用場(chǎng)景的擬物化交互設(shè)計(jì)是十分有價(jià)值的一種設(shè)計(jì)思路和方法。具體見圖5和圖6.

除此之外，還有一個(gè)十分有趣而又實(shí)用的小功能，叫作“閃念膠囊”，激活閃念膠囊則更像是一個(gè)普通的語音備忘錄配上搜索功能。使用方式是長(zhǎng)按home健，錄入語音后會(huì)變成多條文字，這時(shí)在屏幕的右上角會(huì)出現(xiàn)一個(gè)浮動(dòng)窗口，顯示方式為列表式，我們點(diǎn)擊左右箭頭的按鈕就可展開查看剛才錄入的多條語音內(nèi)容，可再次修改內(nèi)容和調(diào)整順序。當(dāng)某一條內(nèi)容使用完畢后，我們也可直接左滑將其刪除，使用十分方便。不僅如此，這個(gè)懸浮窗口會(huì)一直顯示在最前面，可以有更多的使用場(chǎng)景，比如可將里面任何一條文字內(nèi)容復(fù)制、粘貼到便簽、微信、日歷中，形成新的代辦事項(xiàng)，這樣可以節(jié)省時(shí)間，帶給用戶高效、便捷的使用體驗(yàn)。與其他手機(jī)UI系統(tǒng)中的語音不同的是，除了以上內(nèi)容外，還有一些新增加的功能，上半部分顯示的是語音內(nèi)容，在這個(gè)界面中有幾個(gè)按鈕可以將語音內(nèi)容進(jìn)行分類標(biāo)明，其中，紅色感嘆號(hào)用來標(biāo)明重要事情，綠色的信息按鈕可以記錄普通信息，紫色的電燈泡按鈕可以記錄突然出現(xiàn)靈感的信息；下半部分為搜索功能區(qū)，可以方便地查找各種資料信息，同時(shí)也提供了有道翻譯詞典及百度百科的實(shí)用功能，這使得實(shí)用性大大增強(qiáng)了，讓用戶更愿意去使用。這些都是在目前大多數(shù)手機(jī)操作系統(tǒng)中很少存在的，但可以滿足我們?cè)谝恍┨厥馐褂铆h(huán)境中的需求，帶給我們獨(dú)特的情感體驗(yàn)，很好地解決了目前大多數(shù)便簽軟件不好用的使用難題。具體見圖7和圖8.

圖5 Smartisan OS靜音模式打開狀態(tài)

圖6 Smartisan OS靜音模式使用狀態(tài)

3.2 基于用戶功能需求的擬物化設(shè)計(jì)

現(xiàn)在大多數(shù)手機(jī)品牌都研發(fā)設(shè)計(jì)了相應(yīng)的移動(dòng)界面，里面的各個(gè)APP也對(duì)應(yīng)著不同的目標(biāo)用戶，同時(shí)它們也具有相應(yīng)的產(chǎn)品功能。這種通過基于滿足用戶功能需求而設(shè)計(jì)的方式相較于其他的設(shè)計(jì)方式，能更好地幫助用戶解決生活、工作中的實(shí)際困難，更有產(chǎn)品價(jià)值。例如在網(wǎng)易云音樂的播放器界面，有一個(gè)類似唱片機(jī)的擬物化設(shè)計(jì)，當(dāng)我們點(diǎn)擊底部中間的播放按鈕時(shí)，上部就會(huì)出現(xiàn)唱片機(jī)在打碟播放的動(dòng)畫效果，如果想讓音樂停下來，只需要用手指把打碟器移開，具有類似以前使用老式唱片機(jī)的使用體驗(yàn)，然而在其他的音樂APP中卻很少看到此類設(shè)計(jì)。該類擬物化設(shè)計(jì)增加了用戶在使用時(shí)的樂趣，愉悅了用戶心情。具體見圖9和圖10.

同時(shí)，在國(guó)內(nèi)優(yōu)秀的擬物化系統(tǒng)錘子手機(jī)的Smartisan OS中，也有一個(gè)叫作“One Sep”的特色功能，它很好地體現(xiàn)出基于功能的擬物化設(shè)計(jì)。它的打開方式十分簡(jiǎn)單，只用兩根手指一捏，便可呼出One Sep的功能區(qū)。它主要分為2個(gè)功能區(qū)，其中一個(gè)為屏幕上部的編輯區(qū)，包含近期圖片、近期文件、剪切板等使用頻率較高的功能。右側(cè)為手機(jī)APP的展示區(qū)，使用方法也十分簡(jiǎn)單，可以將文字、圖片、通信錄、數(shù)字等都通過右側(cè)的手機(jī)APP快捷地分享和發(fā)送給有需要的人。用戶還可以自定義排序及新增和刪除APP，這就簡(jiǎn)化了許多不必要的操作步驟，使得用戶能夠便捷、高效地在各個(gè)手機(jī)APP之間來回切換，為用戶節(jié)約大量的時(shí)間。這一功能得到了廣大用戶和網(wǎng)友們的一致好評(píng)。不僅如此，每個(gè)功能按鈕的圖標(biāo)都是采用擬物化設(shè)計(jì)，例如近期圖片按鈕的形狀好似一張實(shí)景照片，剪切板的按鈕外形像一把剪刀，近期文件采用了餅狀圖的表現(xiàn)形式，一眼就可以看出當(dāng)前文件的使用占比，十分生動(dòng)、形象，其他APP的圖片使用了立體化的設(shè)計(jì)，似乎要浮現(xiàn)出屏幕，很好地吸引了用戶，讓用戶愿意花更多的時(shí)間去使用它。具體見圖11和圖12.

圖7 Smartisan OS閃電膠囊打開狀態(tài)

圖8 Smartisan OS閃電膠囊使用狀態(tài)

圖9 網(wǎng)易云音樂播放器打開狀態(tài)

圖10 網(wǎng)易云音樂播放器使用狀態(tài)

3.3 基于用戶使用行為的擬物化設(shè)計(jì)

行為習(xí)慣是人們長(zhǎng)期積累的一種行為方式。在產(chǎn)品的交互設(shè)計(jì)中，設(shè)計(jì)師可以采用這種與用戶行為習(xí)慣相關(guān)的提醒式信息方式，縮短使用者認(rèn)知的差距，將平時(shí)生活中用戶們的各種需求合情合理地慢慢植入到移動(dòng)界面設(shè)計(jì)中，而基于用戶使用行為的擬物化交互設(shè)計(jì)可以較好地解決這一難題。例如在錘子手機(jī)的Smartisan OS中，有一個(gè)叫作“Big Bang”的功能，它將目前在大多數(shù)手機(jī)上很難操作的文字編輯變得十分方便和實(shí)用。

圖11 SmartisanOS OneSep功能打開狀態(tài)

圖12 SmartisanOS OneSep功能使用狀態(tài)

圖13 SmartisanOS BigBang功能打開狀態(tài)

圖14 SmartisanOS BigBang功能使用狀態(tài)

“Big Bang”被譯為“大爆炸”，主要的操作方式為按住某段文字內(nèi)容，將其炸開之后，單獨(dú)選擇文字內(nèi)容進(jìn)行二次編輯，之后再保存信息或者發(fā)送給其他人。這個(gè)功能是基于人們經(jīng)常要在手上編輯處理文字內(nèi)容的這種高頻次的行為而設(shè)計(jì)出來的，較好地解決了目前在大多數(shù)手機(jī)上編輯文字難，不方便、不快捷的難點(diǎn)，十分值得稱贊。這種基于用戶日常行為的擬物化設(shè)計(jì)，不僅很好地滿足了用戶使用需求，同時(shí)還讓使用者更加開心，滿足了用戶的心理需求，這樣獨(dú)特的交互體驗(yàn)也正是將來擬物化設(shè)計(jì)的發(fā)展趨勢(shì)。具體見圖13和圖14.

4 結(jié)束語

過多裝飾性的擬物化設(shè)計(jì)或許已經(jīng)沒落，但是人們對(duì)情感化的需求卻是永恒的，在擬物化設(shè)計(jì)視覺風(fēng)格下的深層次設(shè)計(jì)才是滿足用戶需求的關(guān)鍵所在。擬物化設(shè)計(jì)，其視覺美感無與倫比，給人一種帶入感，當(dāng)可視化對(duì)象和操作按照現(xiàn)實(shí)世界中的對(duì)象與操作仿造時(shí)，用戶就能快速領(lǐng)會(huì)如何使用它。它將實(shí)物的一些特性加入到設(shè)計(jì)中，即便這些特性并不具有任何功能性的需求。通過分析可以知道，擬物化設(shè)計(jì)的優(yōu)勢(shì)在于信息傳達(dá)的明確性和信息查詢的準(zhǔn)確性，體現(xiàn)出設(shè)計(jì)者個(gè)性、情感以及產(chǎn)品人性化的回歸?？偠灾?，擬物化設(shè)計(jì)體現(xiàn)的是設(shè)計(jì)品質(zhì)，因此需要設(shè)計(jì)師善于觀察生活，積累設(shè)計(jì)素材，再將其轉(zhuǎn)化到實(shí)際的產(chǎn)品設(shè)計(jì)之中[4]，這樣才能設(shè)計(jì)出用戶體驗(yàn)良好的移動(dòng)界面。

［1］嚴(yán)屏，韋錦城.探析現(xiàn)代數(shù)字界面中的擬物化風(fēng)格與扁平化風(fēng)格［J］.包裝工程，2014（22）：114-117.

［2］李佳.界面設(shè)計(jì)中的扁平化設(shè)計(jì)與擬物化設(shè)計(jì)之探議［J］.藝術(shù)與設(shè)計(jì)，2014（3）：55-57.

［3］曹瑾，肖狄虎.扁平化設(shè)計(jì)趨勢(shì)下的擬物化設(shè)計(jì)探析［J］.藝術(shù)與設(shè)計(jì)，2014（4）：105-107.

［4］王怡，趙鋼.移動(dòng)交互界面擬物化設(shè)計(jì)解讀［J］.包裝工程，2013，34（18）：58-61.

〔編輯：劉曉芳〕

TB47

A

10.15913/j.cnki.kjycx.2017.18.103

2095－6835（2017）18－0103－04