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

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

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

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

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

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

Mac電腦中的計(jì)算器

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

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

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

iBooks琳瑯滿目的書架

ibooks圖形界面

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

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

Metro UI

              windows RT圖形界面

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

Swiss設(shè)計(jì)

                瑞士版式設(shè)計(jì)

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

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

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

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

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

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