您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 視覺設(shè)計 >> 瀏覽設(shè)計教程

擬真設(shè)計與扁平化設(shè)計

2013年的WWDC全球開發(fā)者大會上,萬眾期待的蘋果ios7系統(tǒng)解開了神秘的面紗,就如同當年蘋果ios主管Scott Forstall離職前大家所猜測的那樣,曾經(jīng)在蘋果的設(shè)計中主導(dǎo)了近三十年的擬真設(shè)計(Skeuomorphism)終于告別了用戶的眼睛,取而代之的是風格上更為接近扁平化設(shè)計(flat design)的界面風格。雖然被廣大用戶吐槽ios7是五味雜陳的混合體,但是舍棄了擬真設(shè)計的思路卻是非常明顯,接下來就讓我們一起來看看兩種設(shè)計思路的差異。

根據(jù)維基百科上對擬真設(shè)計(Skeuomorphism)的定義,這個復(fù)雜的單詞所指的是借用已有的實體,即使新設(shè)計中并不需要原來的功能,但使得新設(shè)計滿足一定的親和度需要。不僅僅ibook中的木質(zhì)書架,就連照相軟件模擬機械相機快門的咔嚓聲都屬于這個范疇。

而擬真設(shè)計真正開始被眾人所關(guān)注是要歸功于iphone,數(shù)年前iphone界面中出現(xiàn)的高質(zhì)感材質(zhì)按鈕打動了人們,從此擬真設(shè)計的風潮便開始盛行起來。

而實際上,擬真設(shè)計的觀念早在1984年的Mac電腦就已經(jīng)有了雛形:計算器,磁盤,垃圾箱幾個主功能已經(jīng)被并不豐富的畫面描繪了出來。想當年圖形界面系統(tǒng)還是個新鮮玩意,為了讓用戶更好理解和熟悉軟件的功能,蘋果的設(shè)計師們想到了擬真,并且把這個觀念一直延續(xù)至今。

Mac電腦中的計算器

早期蘋果系統(tǒng)的圖形界面

那么擬真設(shè)計到底好在什么地方,能夠一度讓蘋果的設(shè)計按照這個思路走了這么長的時間,而且之前ios上幾乎所有的應(yīng)用都不同程度的使用了擬真設(shè)計,無論是按鈕還是翻頁,甚至是快門聲音和搖色子的動作。

其實如果從擬真設(shè)計里面提取一些關(guān)鍵成分的話,那么最重要的可能就是擬真設(shè)計更像是一個富有情感的人,會讓用戶感覺到親切,iBooks琳瑯滿目的書架和細膩的翻頁效果讓用戶忘記了自己是在對一塊屏幕指指點點,無論是視覺上還是操作上,都像是一本真正的書籍。這種讓用戶舒適的親切感大大降低了用戶對陌生軟件的學(xué)習成本,因為一切都和現(xiàn)實中的那么接近。

iBooks琳瑯滿目的書架

ibooks圖形界面

但是正是因為這樣,擬真設(shè)計的盛行也塑造除了用戶的一個壞毛病,那就是“以貌取人”。相信絕大多數(shù)用戶在瀏覽App store的時候都是在看哪些圖標設(shè)計的即漂亮又精致,漂亮的圖標還有按鈕總會吸引人去點一點,即便后來發(fā)現(xiàn)實際應(yīng)用的功能并不好,甚至有些應(yīng)用僅僅是把背景進行了仿真的處理,而使用方法還是同樣的啰嗦和繁復(fù)。

也正是在人們開始對擬真設(shè)計迷戀的熱度開始下降的時候,一種新的圖形界面設(shè)計思路出現(xiàn)在人們的眼前,這就是以微軟的Metro UI為代表的扁平化設(shè)計。

Metro UI

              windows RT圖形界面

同擬真設(shè)計一樣,其實扁平化設(shè)計早已出現(xiàn)在大家的身邊,最早可以追溯到源于Swiss設(shè)計,雖然Swiss設(shè)計一貫的強調(diào)版設(shè)的工整和畫面的精簡,但是在僅僅依靠印刷品傳播的年代,是無法達到微軟的影響力的。

Swiss設(shè)計

                瑞士版式設(shè)計

扁平化設(shè)計追求純粹的視覺體驗,通過簡單的形狀和色彩來替代紋理和光影的效果,這也使得鐘情于簡約設(shè)計理念的設(shè)計者心中引起了不少共鳴,Antoine de Saint-Exupery指出:要實現(xiàn)完美境界,不在于能否包羅萬象無所不有,而在于每一個有限的組成部分,都是不可取代的精華。

而這樣的設(shè)計思路實際上是基于用戶認知的一種升華。說來有趣,當年微軟的圖形界面正是“借鑒”了蘋果的圖形界面才問世并發(fā)揚光大,那么扁平化設(shè)計所表現(xiàn)出的簡約實際上是對信息的高度整合,在用戶理解上的難度其實是要更高一些,要知道還是有很多用戶沒有見過xbox的手柄,甚至不知道xbox是什么。

不過扁平化設(shè)計的興起的確影響了很多的設(shè)計者,漸漸讓設(shè)計者意識到PS中渲染出的各種質(zhì)感和光感雖然自我感覺不錯,但卻不能完美的應(yīng)用在每一個地方。而App store中的應(yīng)用,也開始出現(xiàn)以簡約造型為主題的圖標了。

相對的,扁平化設(shè)計也不是完美無缺的設(shè)計思路,由于在視覺效果上的極簡化,很多設(shè)計細節(jié)被摒棄,使得所有的視覺元素都被展現(xiàn)同一個平面上,用戶很可能搞不清楚按鈕和橫幅廣告的區(qū)別,更不用說預(yù)想點擊后的相應(yīng)效果了。

總的來說,無論是擬真設(shè)計還是扁平化設(shè)計,都是設(shè)計思路向前推進可選的道路之一,更何況設(shè)計思路的進步從來都是與技術(shù)水平的發(fā)展緊密結(jié)合的,無論是retina屏幕的出現(xiàn)還是響應(yīng)式網(wǎng)站的流行,都必將影響著設(shè)計思路的應(yīng)用,而選擇合適恰當?shù)脑O(shè)計思路去表現(xiàn)才能讓設(shè)計思路發(fā)揮出最完美的效果。

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/ui1695.html
如何選擇你自己的配色方案
【VC教程】人物背景柔和術(shù)
圖趣網(wǎng)微信
建議反饋
×