曹瑾+肖狄虎
摘 要:結合移動互聯網的發展趨勢,闡述了擬物化以及扁平化設計的趨勢發展;重點基于用戶情感化需求,從視覺意向表現、功能以及用戶行為等方面,結合案例分析在扁平化設計發展趨勢下的擬物化設計發展,為實際的商業移動互聯網產品提供參考。
關鍵詞:擬物化設計 扁平化設計 用戶體驗
檢 索: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
隨著移動互聯網的迅猛發展,不論是在iOS系統、安卓系統、或者是Window Phone系統,都涌現出了眾多的手機應用。截至2013年12月,中國網民規模達6.18億,互聯網普及率為45.8%。其中,手機網民規模達5億,年增長率為19.1%,繼續保持上網第一大終端的地位。網民中使用手機上網的人群比例由2012年底的74.5%提升至81.0%,遠高于其他設備上網的網民比例,手機依然是中國網民增長的主要驅動力。手機網民規模的持續增長促進了手機端各類應用的發展,成為2013年中國互聯網發展的一大亮點。在3G、4G網絡進一步普及、智能手機和無線網絡持續發展的背景下,視頻、音樂等高流量手機應用擁有越來越多的用戶。截至2013年12月,我國手機端在線收看或下載視頻的用戶數為2.47億,與2012年底相比增長了1.12億,增長率高達83.8%,在手機類應用用戶規模增長幅度統計中排名第一。[1]用戶上網設備向手機端轉移、使用基礎環境的改善和上網成本的下降三方面是手機端高流量應用使用率激增的主要原因。那么如何設計一款優秀的移動互聯網應用成了當今的熱點話題。本文主要探討的是在扁平化設計風格趨勢下,擬物化設計風格的再現,及其基于交互層面的運用。
一、擬物化設計、扁平化設計及當下設計趨勢
(一)擬物化設計
維基百科上對擬物化設計(Skeuomorphism)的定義是,借用已有的實體,即使新設計中并不需要原來的功能,但使得新設計滿足一定的親和度需要。不僅僅像iOS 7之前的ibook中的木質書架,就連照相軟件模擬機械相機快門的咔嚓聲都屬于這個范疇。
擬物化設計更像是一個富有情感的人,會讓用戶感覺到親切,iBooks琳瑯滿目的書架和細膩的翻頁效果讓用戶忘記了自己是在對一塊屏幕指指點點,無論是視覺上還是操作上,都像是一本真正的書籍。正如《iOS Human Interface Guidelines》里提到,“當你應用中的可視化對象和操作按照現實世界中的對象與操作仿造,用戶就能快速領會如何使用”。
(二)扁平化設計
以微軟的Metro UI為代表的扁平化設計可以通俗的理解為:使用簡單特效,或者無特效來創建的設計方案,它不包含三維屬性,諸如投影、斜面、浮雕、漸變等特效都不會在設計中使用。簡單、直接、友好的特性是它廣受移動界面設計青睞的根本原因。但是扁平化也有其不足之處,例如:需要一定的學習成本,且傳達的感情不豐富,甚至過于冰冷。
(三)當下移動互聯網設計趨勢
2010年微軟推出Metro UI,Windows Phone起初并不被看好,當時,人們還是更加熱衷于精致的擬物化設計的蘋果iOS系統;2011年安卓4.0系統開始趨于扁平化設計;2013年iOS7開始采用扁平化設計,愈發促進了扁平化設計審美的蓬勃發展,頓時扁平化設計成為了新的潮流。
隨著智能手機的普及以移動互聯網的迅猛發展,人們開始越發的熟悉手機應用的基本操作規范,對于新的手機應用也能較快的得心應手;再就是華麗的擬物化設計風格對于設計開發的成本較高,人們開始逐漸的傾向于簡潔的扁平化設計風格;同時,隨著移動可穿戴設備的進一步發展Glanceable UI的功能性極簡風格也逐步浮出水面。
二、扁平化視覺風格下的擬物化交互方式探析
雖然扁平化設計成為當下的設計趨勢,但是人們對于人機操作的可用性以及情感化的需求是從未停止的。擬物化從原來的界面上的擬物(例如圖標的極度寫真,完全模仿實物等)開始有了新的轉變,那就是在扁平化視覺風格下的擬物化設計。
(一)基于情境的擬物化設計
對于扁平化設計風格,它簡潔明了,但是卻給用戶陌生與冷冰的情感體驗。設計師通過對人們記憶中的情境重組加工,創造舊有經歷與新體驗的聯系,[2]獲得心理共鳴,為用戶帶來豐富的情感體驗。
例如旅行手機應用“蟬游記”。在展現游記內容的方式上,模擬了古代“清明上河圖”的畫卷形式。將人們閱讀游記的情境比喻為欣賞一幅長長的畫卷(圖1)。蟬游記是做旅行游記,而游記幾乎是最復雜的重內容,有行程、時間、地點、天氣、交通、美食、購物、感想、攻略等等,市面上的旅行網站對游記基本都只有兩種處理辦法:(1)像帖子一樣簡單,一個編輯器讓用戶隨便寫;(2)像網站后臺一樣復雜,把所有的信息都拆分成無數個表單和控件,要用戶按照復雜的模版來填。而前者用戶寫著方便,但對瀏覽者大大不利;后者用戶查詢檢索方便,但沒有人會能忍耐這么復雜的表單去寫游記。但是蟬游記用一個巧妙的方式解決了這個問題:把游記當成相冊,附帶簡要的信息,最終用“旅行畫卷”的方式呈現。endprint
基于用戶需求,旅行必定會拍照,拍照就需要整理,整理的過程中,把照片描述和時間以及一些感想摘要穿插進去,一篇游記就完成了。而“畫卷”這一意向,很好的滿足了功能以及用戶心理需求。
(二)基于功能的擬物化設計
不同的手機應用對應著不同的目標用戶以及產品功能,通過擬物化的方式展現產品功能,能夠更好的幫助用戶快速理解應用并獲得良好的用戶體驗。相較于傳統直接的方式,采用更具特色以及創意的交互方式將更易在眾多的類似功能應用中脫穎而出。
例如,音樂播放器Bloom.FM(圖2)。該產品的主要功能是尋找用戶感興趣的音樂,然后在本地播放。它采用了扁平化的界面設計風格,但是其交互方式以及精美的動畫效果都采用了擬物化的設計。
其創新性地采用了“小蜜蜂采蜜”的方式來進一步挖掘了用戶尋找音樂的過程,例如:每一種音樂流派就是一類花朵,小蜜蜂每天辛苦采蜜,采回來的一滴滴蜜就是一首首動人的歌曲,將這些成果小心保存在自己六邊形的蜂巢里,組成甜蜜、誘人的音樂蜂蜜。
該應用在視覺上采用了黃、黑、白、灰四色為主色調,簡潔清晰,并且使用圓形、六邊形為主要元素,小蜜蜂的造型也是采用了扁平化的極簡設計。所以,在視覺上是典型的扁平化風格。但是,在產品整體的交互上以及動畫效果上采用了擬物化設計,給予了用戶趣味化的體驗效果,讓枯燥的找尋音樂的過程變成一次次花朵的綻放,用戶也如同一只小蜜蜂一樣,在花海中徜徉,盡情的享受音樂帶來的樂趣以及豐富的視聽盛宴。讓用戶在使用過程中,除了音樂帶來的美妙,手機應用本身也帶來了趣味化的體驗。
(三)基于行為的擬物化設計
行為習慣是人們長期習得的行為方式。交互設計采用與目標用戶行為習慣相關的啟示性信息,縮小與人們認知的差距。[2]對于用戶而言,將日常生活的點點滴滴逐漸轉移到移動設備的屏幕上已成為常態。對于移動互聯網擬物化的界面設計,針對到有著較多經驗的移動設備使用經驗的用戶來說反而是一種累贅,而行為操作上的擬物設計才是真正的關鍵所在。
例如,大受好評的日程管理應用Any-do,筆者認為最值得稱道的是它對于用戶日常行為習慣的擬物化,當我們把寫在本子上的行程完成時,我們一般會劃去,而在此應用中,正是采用了這一交互方式,簡潔而又明了。(圖3)
對于用戶日常行為的擬物化,不僅很好的解決了用戶學習的困難,而且不禁讓使用者會心一笑,這樣獨特的交互體驗也正是未來擬物化設計的趨勢。
三、結語
擬物化設計或者是扁平化設計并非對立存在,而是在不同的情況下做出的不同設計風格的選擇。并且兩者相互促進相互發展,共存才是真正為用戶打來良好的體驗的關鍵。過多裝飾性的擬物化設計或許已經沒落,但是人們對于情感化的需求卻是永恒的,在扁平化視覺風格下的深層次擬物化設計才是滿足用戶需求的關鍵所在。
注釋:
[1] 中國互聯網絡信息中心.全國互聯網發展統計報告[R].北京:中國互聯網信息中心.
[2] 付婕,趙江洪,譚浩.基于潛意識和行為習慣的交互設計啟示性[J].包裝工程,2013,34(2):52.
參考文獻:
1 NORMAN D A. The Psychology of Everyday Things [M]. Beijing:Citic Press Corporation,1990.
2 趙江洪.設計心理學[M].北京:北京理工大學出版社,2004.
3 COOPER A,REIMANN R,CRONIN D.交互設計精髓3[M].劉松濤,譯.北京:電子工業出版社,2008.
4 約翰遜.認知與設計——理解UI設計準則[M].北京:人民郵電出版社,2011.endprint