當(dāng)前位置: 首頁 > 設(shè)計資訊 > 理論文摘 > 正文

擬物與扁平,不得不吐槽的對立

2014-06-18 11327 0
自從iOS7發(fā)布以來,擬物與扁平的爭論一直就在喋喋不休。早讀課精選兩篇對立的文章放在一起分享,希望可以讓你有所思考。理念與趨勢只不過是皇帝的新衣,你的產(chǎn)品應(yīng)該用哪種應(yīng)該自己來權(quán)衡。

文章一:為什么移動端更適合扁平化設(shè)計?

首先我們需要明白兩個概念:擬物化設(shè)計與扁平化設(shè)計。

擬物化設(shè)計:以前擬物化設(shè)計大多只會出現(xiàn)在視頻游戲中。為了保持游戲的帶入感,游戲設(shè)計師會使用木質(zhì)、金屬和石頭等材質(zhì)構(gòu)建的用戶界面。iOS的問世后,蘋果開始采用更多擬物化的設(shè)計,而且擬物化設(shè)計一直是喬老爺推崇的。蘋果之所以選擇擬物化設(shè)計首先是想讓應(yīng)用程序的外觀看起來與現(xiàn)實生活中的對應(yīng)物越接近,使用起來就越簡單,同時改善應(yīng)用程序的用戶體驗,此外,在人機交互方面也擬物化,模擬現(xiàn)實中的交互方式。

缺陷:首先應(yīng)用程序與現(xiàn)實中的實體物品有著顯著的不同,會導(dǎo)致用戶的誤解,從而降低用戶的體驗。比如,當(dāng)一個程序的界面幾乎完全模仿現(xiàn)實生活中對應(yīng)物的界面時,用戶會開始期望二者之間能有類似甚至對應(yīng)的行為方式,而在大多數(shù)情況下這樣的期待并不能得到滿足。同時擬物化設(shè)計會不可避免的分散用戶的注意力。

扁平化設(shè)計的崛起:扁平化設(shè)計2012年曾被認為未來最有可能改變設(shè)計行業(yè)的一項創(chuàng)新,但其發(fā)展也一直是不溫不火,直到最近iOS7采用扁平化設(shè)計而大發(fā)光芒。其中最突出最早的代表應(yīng)該是微軟的Metro風(fēng)格 ,與iOS應(yīng)用不同,沒有陰影、高光、漸變和紋理的修飾,取而代之的是平面化的色塊與突出的文字信息。

扁平化設(shè)計的核心在于功能本身的使用,所以去掉了冗余的界面和交互,而是使用更直接的設(shè)計來完成任務(wù)。而且對于移動端而言,其快速的設(shè)計,精簡的交互,特別是在手機屏幕尺寸的限制上,使得這一風(fēng)格在用戶體驗上更有優(yōu)勢,而且更少的按鈕和選項使得界面干凈整齊,用戶使用起來格外簡單。所以不難解釋扁平化設(shè)計為什么會受到大多App應(yīng)用和手機廠商的喜歡。

[Page: ]

但扁平化設(shè)計也有自身的一些缺陷。比如當(dāng)界面精簡到一定程度時,用戶會分不清楚白色方框到底是一個按鈕還是一個banner,所以這嚴重考驗著交互設(shè)計師的功力,比如按鈕上輕微漸變的設(shè)計,表單部分陰影的效果和導(dǎo)航欄的輕微懸浮等方面。扁平化設(shè)計最吸引用戶的地方在哪里?

1、精簡的文字

由于扁平化設(shè)計的使用特別簡單的元素,排版就成了很重要的一環(huán),排版好壞直接影響視覺效果,甚至可能間接影響用戶體驗,字體是排版中很重要的一部分。

2、簡單的組成元素:

扁平化設(shè)計通常采用許多簡單的用戶界面元素,諸如按鈕或者圖標之類。設(shè)計師們通常堅持使用簡單的外形(矩形或者圓形),并且盡量突出外形,這些元素一律為直角(極少的一些為圓角)。

3、畫面干凈整潔:

產(chǎn)品里的每一個細節(jié),無論是圖像、文字、按鈕還是導(dǎo)航欄,他們的邊緣都干脆簡潔的切斷聯(lián)系,而非平滑過渡,去除了陰影、斜角、浮雕、漸變等加深層次感的效果。

4、設(shè)計起來快,也更容易響應(yīng)。

5、扁平色塊,利用顏色鼓勵用戶去進行交互

6、界面整齊簡單

在手機上,因為屏幕的限制,使得這一風(fēng)格在用戶體驗上更有優(yōu)勢,更少的按鈕和選項使得界面干凈整齊,使用起來格外簡單。

[Page: ]



文章2:用戶界面的扁平化設(shè)計?小心為妙!

我不是扁平化設(shè)計的反對者,也不是擬物化設(shè)計的擁護者,只是認為,在不同場合、不同需求的情況下,應(yīng)該用不同的設(shè)計手法,比如用戶界面就不適宜大量使用扁平化設(shè)計。

從用戶體驗的角度

先說我女兒。在她兩歲的時候,我就分別把 iPad 和 Nexus 7 給她玩。她會很主動地伸手去點 iPad 界面上突出來的按鈕,她能夠區(qū)分清楚什么是能夠點擊的,哪些區(qū)域是不會有反應(yīng)的;換了 Nexus 7 她就變得不知道該怎么做了,對什么地方都亂摁一通。她的認知水平還搞不清楚某些文字+色塊其實就是一個按鈕,經(jīng)過多次嘗試后才知道哪些能夠點擊,哪些區(qū)域點擊無效。一旦換了另一個 App,她對扁平化界面的響應(yīng)區(qū)域又要重新探索,如此反復(fù)。

再說我老爸,70歲,數(shù)獨迷,不會玩電腦,不會上網(wǎng)。我不玩數(shù)獨,不知道哪些數(shù)獨游戲好,于是就在 iPad 上裝了 n 個數(shù)獨游戲,讓他老人家自己選,不好玩的我再刪掉。大家不用猜,擬物化取勝,扁平化都被刪了,因為老人家知道哪些方塊可以移動,哪些地方可以把數(shù)字填進去,鉛筆、木紋、紙張、橡皮擦,對他來說也很親切,引用原話就是“跟玩真的一樣”。

反駁者會說:“懂科技的年輕人才是智能手機的主流用戶,并且教育用戶的時期已經(jīng)過去了,人們已經(jīng)接受并會用扁平化設(shè)計的界面。”那么,請做一個實驗,同一個 App 設(shè)計擬物化和扁平化兩套界面,讓熟悉科技產(chǎn)品的年輕人分成兩組,讓他們完成一系列指定操作,看看哪個組別完成操作的反應(yīng)時間更快?

人類有尋求平衡的原始意識,看見凹進去的表面就想往里面填東西,看見凸出來的表面就想把它摁平,這就是為什么讓用戶填的表單要做成凹進去的效果,而提交表單的按鈕要做成凸出來讓用戶去點擊,這里面都含有心理暗示。

目前很多人都認同的理解是:擬物化設(shè)計是對真實事物的模仿,用戶對界面的理解源于對真實世界的經(jīng)驗和認知,大大降低用戶心理接受門檻和學(xué)習(xí)成本。

還有一個觀點是我專門針對 iOS 說的:iPhone、iPad 的產(chǎn)品設(shè)計都是扁平化的,拿著冰冷的金屬邊框,在一塊平滑的玻璃上點擊一個不凸出的按鈕是非常不帶感的。如何把真實世界的感覺呈現(xiàn)出來,有生活氣色,讓人們不會對生冷的科技產(chǎn)生抗拒?親切的、有溫度的擬物化設(shè)計就是答案。

這就是老喬為什么堅持在 iOS 上用擬物化設(shè)計的原因。

從設(shè)計語言的角度

扁平化設(shè)計是 2D 的,只有 X 軸、Y 軸、顏色、形狀、布局;擬物化設(shè)計是有深度的,多出一個 Z 軸,還多出一個紋理和質(zhì)感。豐富的設(shè)計語言給予設(shè)計師豐富的表達能力,扁平化設(shè)計就像是說話時不允許使用比喻一樣乏味,于是有些地方要讓人“意會”就非常難以表達。對于用戶交互界面來說,豐富的表達能力尤為重要。

有人說精簡后的設(shè)計語言如何作出表達是能力問題,那請問世間有幾個人是設(shè)計大師?如果你雇得起,那就請大膽使用扁平化設(shè)計界面!

less is more 新解:前面偷懶,后面的麻煩就越多。

有人把扁平化設(shè)計放到藝術(shù)的角度,去反問“畫得像才是畫得好嗎?”在藝術(shù)界,即使沒人知道你畫的是一棵樹,也沒有問題;但在用戶界面,用戶不知道你設(shè)計的是一棵樹,就有很大問題!用戶界面設(shè)計需要多一點實用主義,用普通用戶的心態(tài)去做設(shè)計,而不是用大師的心態(tài)去傲視凡人。

縫紉線、真皮紋理、鉚釘、裂痕……去掉多余的擬物細節(jié)就可以,iOS 6 的擬物化過于累贅,而 iOS 7 的扁平化則顯得激進,過猶不及。個人認為 MIUI 就在擬物化和扁平化之間找到了平衡點。

[Page: ]

從市場營銷的角度

擬物化之于應(yīng)用和角色化之于游戲在市場營銷上都有異曲同工之處:賦予真實感和靈魂。

給大家說一個真實的案例。一個朋友打算開發(fā)棋牌類游戲,于是在各大應(yīng)用市場做調(diào)查,研究了不下百個棋牌類游戲,發(fā)現(xiàn)一個規(guī)律:游戲里面只有棋牌的應(yīng)用下載量寥寥無幾;而有虛擬角色的、有對白的下載量往往是前者的數(shù)十倍乃至數(shù)百倍。朋友的結(jié)論是,有角色和情景模擬才能讓玩家置身其中。

回到 iOS 7 的系統(tǒng)應(yīng)用圖標設(shè)計,以前精致的細節(jié)沒有了,經(jīng)過抽象簡化成幾何形狀和大膽的撞色。這不是 Ive 的作品,這是時裝設(shè)計師的作品,在 T 臺上被模特演繹得非常養(yǎng)眼,但你老婆卻不會穿它們上街。(Ive 正在忙 iPhone 6 和大屏 iPhone,他真的沒時間管那么多細節(jié)。)

設(shè)計師把每個應(yīng)用圖標都當(dāng)成一個品牌的 logo 來設(shè)計,于是它們更抽象,都更像 logo 了,但同時問題也來了:用戶對應(yīng)用圖標和里面的功能按鈕分不清楚,因為兩者都是由簡單的幾何圖形構(gòu)成的。為什么會有這種怪怪的感覺?因為對用戶來說,應(yīng)用程序是一個產(chǎn)品而不是一個品牌。

品牌是無形的,logo 負責(zé)傳遞品牌的價值和理念,所以 logo 的設(shè)計適合高度抽象和簡化;產(chǎn)品是有形的,產(chǎn)品的外形需要幫助用戶去理解和使用,用戶從圖標打開一個應(yīng)用再看見具體界面,這個過程是連續(xù)的,跟你伸手拉開冰箱門再看見里面的蔬果飲料的感覺是一樣的。說白了,應(yīng)用圖標是產(chǎn)品的一部分,是產(chǎn)品的外形和入口,在應(yīng)用設(shè)計方面,應(yīng)用圖標的具象反而成了提高產(chǎn)品識別度的方法。

用戶有為應(yīng)用歸類的習(xí)慣,試想一下,如果 Music 文件夾里都是一堆不同顏色的音符,你能快速區(qū)分 QQ 音樂 和 Spotify 嗎?如果 Camera 文件夾里都是一堆不同大小的圓圈(被拍扁的鏡頭),你能快速區(qū)分 Instagram 和 Oggl 嗎?

再說 Windows Phone 的界面,它是扁平化設(shè)計的極致。一旦開發(fā)者跟隨了微軟這套設(shè)計標準,你就會發(fā)現(xiàn)無論什么應(yīng)用,從入口(圖標)到具體界面的識別度都被弱化了。隨便拿兩個 WP 應(yīng)用截屏,遮擋應(yīng)用名稱,你就無法從視覺上直接區(qū)分兩個應(yīng)用。說得禪一點,沒有設(shè)計就是最好的設(shè)計,內(nèi)容都被變成了設(shè)計的一部分;說得黑一點,這是微軟的陰謀,讓所有第三方應(yīng)用都弱化成 Windows 系統(tǒng)的一部分,用戶會有 Windows 的功能很豐富和強大的錯覺。第三方應(yīng)用在 VI 上被統(tǒng)一,沒有了個性和靈魂,識別度低,非常不利于傳播。

如今,只要把 iOS7 的圖標去掉圓角放進 Android 系統(tǒng)里顯得非常和諧,這是一個非常危險的信號。最后,跟大家打個賭,一旦大量第三方應(yīng)用都追隨扁平化設(shè)計,App Store 的應(yīng)用銷量將會出現(xiàn)負增長。


117
評論區(qū)(0)
正在加載評論...