文章2:用戶界面的扁平化設(shè)計(jì)?小心為妙!
我不是扁平化設(shè)計(jì)的反對(duì)者,也不是擬物化設(shè)計(jì)的擁護(hù)者,只是認(rèn)為,在不同場合、不同需求的情況下,應(yīng)該用不同的設(shè)計(jì)手法,比如用戶界面就不適宜大量使用扁平化設(shè)計(jì)。
先說我女兒。在她兩歲的時(shí)候,我就分別把 iPad 和 Nexus 7 給她玩。她會(huì)很主動(dòng)地伸手去點(diǎn) iPad 界面上突出來的按鈕,她能夠區(qū)分清楚什么是能夠點(diǎn)擊的,哪些區(qū)域是不會(huì)有反應(yīng)的;換了 Nexus 7 她就變得不知道該怎么做了,對(duì)什么地方都亂摁一通。她的認(rèn)知水平還搞不清楚某些文字+色塊其實(shí)就是一個(gè)按鈕,經(jīng)過多次嘗試后才知道哪些能夠點(diǎn)擊,哪些區(qū)域點(diǎn)擊無效。一旦換了另一個(gè) App,她對(duì)扁平化界面的響應(yīng)區(qū)域又要重新探索,如此反復(fù)。
再說我老爸,70歲,數(shù)獨(dú)迷,不會(huì)玩電腦,不會(huì)上網(wǎng)。我不玩數(shù)獨(dú),不知道哪些數(shù)獨(dú)游戲好,于是就在 iPad 上裝了 n 個(gè)數(shù)獨(dú)游戲,讓他老人家自己選,不好玩的我再刪掉。大家不用猜,擬物化取勝,扁平化都被刪了,因?yàn)槔先思抑滥男┓綁K可以移動(dòng),哪些地方可以把數(shù)字填進(jìn)去,鉛筆、木紋、紙張、橡皮擦,對(duì)他來說也很親切,引用原話就是“跟玩真的一樣”。
反駁者會(huì)說:“懂科技的年輕人才是智能手機(jī)的主流用戶,并且教育用戶的時(shí)期已經(jīng)過去了,人們已經(jīng)接受并會(huì)用扁平化設(shè)計(jì)的界面!蹦敲矗堊鲆粋(gè)實(shí)驗(yàn),同一個(gè) App 設(shè)計(jì)擬物化和扁平化兩套界面,讓熟悉科技產(chǎn)品的年輕人分成兩組,讓他們完成一系列指定操作,看看哪個(gè)組別完成操作的反應(yīng)時(shí)間更快?
人類有尋求平衡的原始意識(shí),看見凹進(jìn)去的表面就想往里面填東西,看見凸出來的表面就想把它摁平,這就是為什么讓用戶填的表單要做成凹進(jìn)去的效果,而提交表單的按鈕要做成凸出來讓用戶去點(diǎn)擊,這里面都含有心理暗示。
目前很多人都認(rèn)同的理解是:擬物化設(shè)計(jì)是對(duì)真實(shí)事物的模仿,用戶對(duì)界面的理解源于對(duì)真實(shí)世界的經(jīng)驗(yàn)和認(rèn)知,大大降低用戶心理接受門檻和學(xué)習(xí)成本。
還有一個(gè)觀點(diǎn)是我專門針對(duì) iOS 說的:iPhone、iPad 的產(chǎn)品設(shè)計(jì)都是扁平化的,拿著冰冷的金屬邊框,在一塊平滑的玻璃上點(diǎn)擊一個(gè)不凸出的按鈕是非常不帶感的。如何把真實(shí)世界的感覺呈現(xiàn)出來,有生活氣色,讓人們不會(huì)對(duì)生冷的科技產(chǎn)生抗拒?親切的、有溫度的擬物化設(shè)計(jì)就是答案。
這就是老喬為什么堅(jiān)持在 iOS 上用擬物化設(shè)計(jì)的原因。
扁平化設(shè)計(jì)是 2D 的,只有 X 軸、Y 軸、顏色、形狀、布局;擬物化設(shè)計(jì)是有深度的,多出一個(gè) Z 軸,還多出一個(gè)紋理和質(zhì)感。豐富的設(shè)計(jì)語言給予設(shè)計(jì)師豐富的表達(dá)能力,扁平化設(shè)計(jì)就像是說話時(shí)不允許使用比喻一樣乏味,于是有些地方要讓人“意會(huì)”就非常難以表達(dá)。對(duì)于用戶交互界面來說,豐富的表達(dá)能力尤為重要。
有人說精簡后的設(shè)計(jì)語言如何作出表達(dá)是能力問題,那請問世間有幾個(gè)人是設(shè)計(jì)大師?如果你雇得起,那就請大膽使用扁平化設(shè)計(jì)界面!
less is more 新解:前面偷懶,后面的麻煩就越多。
有人把扁平化設(shè)計(jì)放到藝術(shù)的角度,去反問“畫得像才是畫得好嗎?”在藝術(shù)界,即使沒人知道你畫的是一棵樹,也沒有問題;但在用戶界面,用戶不知道你設(shè)計(jì)的是一棵樹,就有很大問題!用戶界面設(shè)計(jì)需要多一點(diǎn)實(shí)用主義,用普通用戶的心態(tài)去做設(shè)計(jì),而不是用大師的心態(tài)去傲視凡人。
縫紉線、真皮紋理、鉚釘、裂痕……去掉多余的擬物細(xì)節(jié)就可以,iOS 6 的擬物化過于累贅,而 iOS 7 的扁平化則顯得激進(jìn),過猶不及。個(gè)人認(rèn)為 MIUI 就在擬物化和扁平化之間找到了平衡點(diǎn)。
平面設(shè)計(jì)
工業(yè)設(shè)計(jì)
CG插畫
UI交互
室內(nèi)設(shè)計(jì)
建筑環(huán)境