扁平化設(shè)計(jì)趨勢下的擬物化設(shè)計(jì)探析

曹瑾+肖狄虎

摘 要：結(jié)合移動(dòng)互聯(lián)網(wǎng)的發(fā)展趨勢，闡述了擬物化以及扁平化設(shè)計(jì)的趨勢發(fā)展；重點(diǎn)基于用戶情感化需求，從視覺意向表現(xiàn)、功能以及用戶行為等方面，結(jié)合案例分析在扁平化設(shè)計(jì)發(fā)展趨勢下的擬物化設(shè)計(jì)發(fā)展，為實(shí)際的商業(yè)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品提供參考。

關(guān)鍵詞：擬物化設(shè)計(jì) 扁平化設(shè)計(jì) 用戶體驗(yàn)

檢 索：www.artdesign.org.cn

Abstract ：Combined with the trend of Mobile Internet， it discussed the Skeuomorphism and flat design trends. It focused on the emotional needs of the users， from the aspects of visual performance， features and user behavior， combined with case studies， analyzed the trends of skeuomorphism design under the trending of flat design， to provide a reference for the commercial products.

Keywords ：Skeuomorphism， Flat Design， User Experience

Internet ：www.artdesign.org.cn

隨著移動(dòng)互聯(lián)網(wǎng)的迅猛發(fā)展，不論是在iOS系統(tǒng)、安卓系統(tǒng)、或者是Window Phone系統(tǒng)，都涌現(xiàn)出了眾多的手機(jī)應(yīng)用。截至2013年12月，中國網(wǎng)民規(guī)模達(dá)6.18億，互聯(lián)網(wǎng)普及率為45.8%。其中，手機(jī)網(wǎng)民規(guī)模達(dá)5億，年增長率為19.1%，繼續(xù)保持上網(wǎng)第一大終端的地位。網(wǎng)民中使用手機(jī)上網(wǎng)的人群比例由2012年底的74.5%提升至81.0%，遠(yuǎn)高于其他設(shè)備上網(wǎng)的網(wǎng)民比例，手機(jī)依然是中國網(wǎng)民增長的主要驅(qū)動(dòng)力。手機(jī)網(wǎng)民規(guī)模的持續(xù)增長促進(jìn)了手機(jī)端各類應(yīng)用的發(fā)展，成為2013年中國互聯(lián)網(wǎng)發(fā)展的一大亮點(diǎn)。在3G、4G網(wǎng)絡(luò)進(jìn)一步普及、智能手機(jī)和無線網(wǎng)絡(luò)持續(xù)發(fā)展的背景下，視頻、音樂等高流量手機(jī)應(yīng)用擁有越來越多的用戶。截至2013年12月，我國手機(jī)端在線收看或下載視頻的用戶數(shù)為2.47億，與2012年底相比增長了1.12億，增長率高達(dá)83.8%，在手機(jī)類應(yīng)用用戶規(guī)模增長幅度統(tǒng)計(jì)中排名第一。[1]用戶上網(wǎng)設(shè)備向手機(jī)端轉(zhuǎn)移、使用基礎(chǔ)環(huán)境的改善和上網(wǎng)成本的下降三方面是手機(jī)端高流量應(yīng)用使用率激增的主要原因。那么如何設(shè)計(jì)一款優(yōu)秀的移動(dòng)互聯(lián)網(wǎng)應(yīng)用成了當(dāng)今的熱點(diǎn)話題。本文主要探討的是在扁平化設(shè)計(jì)風(fēng)格趨勢下，擬物化設(shè)計(jì)風(fēng)格的再現(xiàn)，及其基于交互層面的運(yùn)用。

一、擬物化設(shè)計(jì)、扁平化設(shè)計(jì)及當(dāng)下設(shè)計(jì)趨勢

（一）擬物化設(shè)計(jì)

維基百科上對擬物化設(shè)計(jì)（Skeuomorphism）的定義是，借用已有的實(shí)體，即使新設(shè)計(jì)中并不需要原來的功能，但使得新設(shè)計(jì)滿足一定的親和度需要。不僅僅像iOS 7之前的ibook中的木質(zhì)書架，就連照相軟件模擬機(jī)械相機(jī)快門的咔嚓聲都屬于這個(gè)范疇。

擬物化設(shè)計(jì)更像是一個(gè)富有情感的人，會(huì)讓用戶感覺到親切，iBooks琳瑯滿目的書架和細(xì)膩的翻頁效果讓用戶忘記了自己是在對一塊屏幕指指點(diǎn)點(diǎn)，無論是視覺上還是操作上，都像是一本真正的書籍。正如《iOS Human Interface Guidelines》里提到，“當(dāng)你應(yīng)用中的可視化對象和操作按照現(xiàn)實(shí)世界中的對象與操作仿造，用戶就能快速領(lǐng)會(huì)如何使用”。

（二）扁平化設(shè)計(jì)

以微軟的Metro UI為代表的扁平化設(shè)計(jì)可以通俗的理解為：使用簡單特效，或者無特效來創(chuàng)建的設(shè)計(jì)方案，它不包含三維屬性，諸如投影、斜面、浮雕、漸變等特效都不會(huì)在設(shè)計(jì)中使用。簡單、直接、友好的特性是它廣受移動(dòng)界面設(shè)計(jì)青睞的根本原因。但是扁平化也有其不足之處，例如：需要一定的學(xué)習(xí)成本，且傳達(dá)的感情不豐富，甚至過于冰冷。

（三）當(dāng)下移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)趨勢

2010年微軟推出Metro UI，Windows Phone起初并不被看好，當(dāng)時(shí)，人們還是更加熱衷于精致的擬物化設(shè)計(jì)的蘋果iOS系統(tǒng)；2011年安卓4.0系統(tǒng)開始趨于扁平化設(shè)計(jì)；2013年iOS7開始采用扁平化設(shè)計(jì)，愈發(fā)促進(jìn)了扁平化設(shè)計(jì)審美的蓬勃發(fā)展，頓時(shí)扁平化設(shè)計(jì)成為了新的潮流。

隨著智能手機(jī)的普及以移動(dòng)互聯(lián)網(wǎng)的迅猛發(fā)展，人們開始越發(fā)的熟悉手機(jī)應(yīng)用的基本操作規(guī)范，對于新的手機(jī)應(yīng)用也能較快的得心應(yīng)手；再就是華麗的擬物化設(shè)計(jì)風(fēng)格對于設(shè)計(jì)開發(fā)的成本較高，人們開始逐漸的傾向于簡潔的扁平化設(shè)計(jì)風(fēng)格；同時(shí)，隨著移動(dòng)可穿戴設(shè)備的進(jìn)一步發(fā)展Glanceable UI的功能性極簡風(fēng)格也逐步浮出水面。

二、扁平化視覺風(fēng)格下的擬物化交互方式探析

雖然扁平化設(shè)計(jì)成為當(dāng)下的設(shè)計(jì)趨勢，但是人們對于人機(jī)操作的可用性以及情感化的需求是從未停止的。擬物化從原來的界面上的擬物（例如圖標(biāo)的極度寫真，完全模仿實(shí)物等）開始有了新的轉(zhuǎn)變，那就是在扁平化視覺風(fēng)格下的擬物化設(shè)計(jì)。

（一）基于情境的擬物化設(shè)計(jì)

對于扁平化設(shè)計(jì)風(fēng)格，它簡潔明了，但是卻給用戶陌生與冷冰的情感體驗(yàn)。設(shè)計(jì)師通過對人們記憶中的情境重組加工，創(chuàng)造舊有經(jīng)歷與新體驗(yàn)的聯(lián)系，[2]獲得心理共鳴，為用戶帶來豐富的情感體驗(yàn)。

例如旅行手機(jī)應(yīng)用“蟬游記”。在展現(xiàn)游記內(nèi)容的方式上，模擬了古代“清明上河圖”的畫卷形式。將人們閱讀游記的情境比喻為欣賞一幅長長的畫卷（圖1）。蟬游記是做旅行游記，而游記幾乎是最復(fù)雜的重內(nèi)容，有行程、時(shí)間、地點(diǎn)、天氣、交通、美食、購物、感想、攻略等等，市面上的旅行網(wǎng)站對游記基本都只有兩種處理辦法：（1）像帖子一樣簡單，一個(gè)編輯器讓用戶隨便寫；（2）像網(wǎng)站后臺(tái)一樣復(fù)雜，把所有的信息都拆分成無數(shù)個(gè)表單和控件，要用戶按照復(fù)雜的模版來填。而前者用戶寫著方便，但對瀏覽者大大不利；后者用戶查詢檢索方便，但沒有人會(huì)能忍耐這么復(fù)雜的表單去寫游記。但是蟬游記用一個(gè)巧妙的方式解決了這個(gè)問題：把游記當(dāng)成相冊，附帶簡要的信息，最終用“旅行畫卷”的方式呈現(xiàn)。endprint

基于用戶需求，旅行必定會(huì)拍照，拍照就需要整理，整理的過程中，把照片描述和時(shí)間以及一些感想摘要穿插進(jìn)去，一篇游記就完成了。而“畫卷”這一意向，很好的滿足了功能以及用戶心理需求。

（二）基于功能的擬物化設(shè)計(jì)

不同的手機(jī)應(yīng)用對應(yīng)著不同的目標(biāo)用戶以及產(chǎn)品功能，通過擬物化的方式展現(xiàn)產(chǎn)品功能，能夠更好的幫助用戶快速理解應(yīng)用并獲得良好的用戶體驗(yàn)。相較于傳統(tǒng)直接的方式，采用更具特色以及創(chuàng)意的交互方式將更易在眾多的類似功能應(yīng)用中脫穎而出。

例如，音樂播放器Bloom.FM（圖2）。該產(chǎn)品的主要功能是尋找用戶感興趣的音樂，然后在本地播放。它采用了扁平化的界面設(shè)計(jì)風(fēng)格，但是其交互方式以及精美的動(dòng)畫效果都采用了擬物化的設(shè)計(jì)。

其創(chuàng)新性地采用了“小蜜蜂采蜜”的方式來進(jìn)一步挖掘了用戶尋找音樂的過程，例如：每一種音樂流派就是一類花朵，小蜜蜂每天辛苦采蜜，采回來的一滴滴蜜就是一首首動(dòng)人的歌曲，將這些成果小心保存在自己六邊形的蜂巢里，組成甜蜜、誘人的音樂蜂蜜。

該應(yīng)用在視覺上采用了黃、黑、白、灰四色為主色調(diào)，簡潔清晰，并且使用圓形、六邊形為主要元素，小蜜蜂的造型也是采用了扁平化的極簡設(shè)計(jì)。所以，在視覺上是典型的扁平化風(fēng)格。但是，在產(chǎn)品整體的交互上以及動(dòng)畫效果上采用了擬物化設(shè)計(jì)，給予了用戶趣味化的體驗(yàn)效果，讓枯燥的找尋音樂的過程變成一次次花朵的綻放，用戶也如同一只小蜜蜂一樣，在花海中徜徉，盡情的享受音樂帶來的樂趣以及豐富的視聽盛宴。讓用戶在使用過程中，除了音樂帶來的美妙，手機(jī)應(yīng)用本身也帶來了趣味化的體驗(yàn)。

（三）基于行為的擬物化設(shè)計(jì)

行為習(xí)慣是人們長期習(xí)得的行為方式。交互設(shè)計(jì)采用與目標(biāo)用戶行為習(xí)慣相關(guān)的啟示性信息，縮小與人們認(rèn)知的差距。[2]對于用戶而言，將日常生活的點(diǎn)點(diǎn)滴滴逐漸轉(zhuǎn)移到移動(dòng)設(shè)備的屏幕上已成為常態(tài)。對于移動(dòng)互聯(lián)網(wǎng)擬物化的界面設(shè)計(jì)，針對到有著較多經(jīng)驗(yàn)的移動(dòng)設(shè)備使用經(jīng)驗(yàn)的用戶來說反而是一種累贅，而行為操作上的擬物設(shè)計(jì)才是真正的關(guān)鍵所在。

例如，大受好評(píng)的日程管理應(yīng)用Any-do，筆者認(rèn)為最值得稱道的是它對于用戶日常行為習(xí)慣的擬物化，當(dāng)我們把寫在本子上的行程完成時(shí)，我們一般會(huì)劃去，而在此應(yīng)用中，正是采用了這一交互方式，簡潔而又明了。（圖3）

對于用戶日常行為的擬物化，不僅很好的解決了用戶學(xué)習(xí)的困難，而且不禁讓使用者會(huì)心一笑，這樣獨(dú)特的交互體驗(yàn)也正是未來擬物化設(shè)計(jì)的趨勢。

三、結(jié)語

擬物化設(shè)計(jì)或者是扁平化設(shè)計(jì)并非對立存在，而是在不同的情況下做出的不同設(shè)計(jì)風(fēng)格的選擇。并且兩者相互促進(jìn)相互發(fā)展，共存才是真正為用戶打來良好的體驗(yàn)的關(guān)鍵。過多裝飾性的擬物化設(shè)計(jì)或許已經(jīng)沒落，但是人們對于情感化的需求卻是永恒的，在扁平化視覺風(fēng)格下的深層次擬物化設(shè)計(jì)才是滿足用戶需求的關(guān)鍵所在。

注釋：

[1] 中國互聯(lián)網(wǎng)絡(luò)信息中心.全國互聯(lián)網(wǎng)發(fā)展統(tǒng)計(jì)報(bào)告[R].北京：中國互聯(lián)網(wǎng)信息中心.

[2] 付婕，趙江洪，譚浩.基于潛意識(shí)和行為習(xí)慣的交互設(shè)計(jì)啟示性[J].包裝工程，2013，34（2）：52.

參考文獻(xiàn)：

1 NORMAN D A. The Psychology of Everyday Things [M]. Beijing：Citic Press Corporation，1990.

2 趙江洪.設(shè)計(jì)心理學(xué)[M].北京：北京理工大學(xué)出版社，2004.

3 COOPER A，REIMANN R，CRONIN D.交互設(shè)計(jì)精髓3[M].劉松濤，譯.北京：電子工業(yè)出版社，2008.

4 約翰遜.認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)準(zhǔn)則[M].北京：人民郵電出版社，2011.endprint