新擬物化設(shè)計(jì)只是一種風(fēng)格嗎？

最近正火的新擬物化風(fēng)格（Neumorphism）在 2019 年底，設(shè)計(jì)師 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不僅被選為 2020 年界面趨勢，又稱為 soft UI。但這種風(fēng)格在真實(shí)世界落地時(shí)，可視性上受到許多爭議。

確實(shí)，新擬物化風(fēng)格它算是一種風(fēng)格，但又不是只有視覺上的風(fēng)格這么簡單，它延伸出來的議題，其實(shí)是扁平化跟擬物化之間的戰(zhàn)爭。

擬物化與扁平化的瑜亮情結(jié)

擬物化是 Apple 在早期設(shè)計(jì)中大量使用在界面上呈現(xiàn)對象屬性、材質(zhì)的方式。然而在 2013 年 ios7 發(fā)布時(shí)，Apple 開始為了畫面簡潔大量將界面元素扁平化，緊接著 Google 在 2015 年發(fā)布了 Material Design，宣示扁平化在 UI 設(shè)計(jì)中扮演著主導(dǎo)趨勢的角色。2020 年真是百家爭鳴的一年，首先是 BMW 發(fā)表的扁平化新 logo，接著是這一波新擬物化的反擊。究竟代表新擬物化可能奪回界面風(fēng)格主導(dǎo)權(quán)？或僅是 2020 年曇花一現(xiàn)的視覺風(fēng)格呢？

扁平化VS 擬物化，我們可以思考的五件事

我認(rèn)為新擬物化的概念其實(shí)是融合扁平化與擬物化的集大成，它建立在扁平化風(fēng)格之上，又將組件帶入了擬物化的元素，提高用戶的判斷力。不過在糾結(jié)于扁平化與擬物化哪個比較好時(shí)，有五個議題是可以讓 UI、UX 設(shè)計(jì)師去思考的。

1. 多數(shù)年長者對于扁平化界面提供的視覺元素暗示無法理解。

大家身邊一定都有那種已經(jīng)把 Line 操作得滾瓜爛熟，但是每次要用 Line 加好友時(shí)，還是不知道怎么操作的長輩。最早期當(dāng)人類還沒進(jìn)入屏幕時(shí)代前，我們所使用的界面大多是實(shí)體產(chǎn)品上的控制界面，而這些界面上的每個開關(guān)、按鈕，都只有一個輸入源，對應(yīng)到一個功能（一對一），我們因此就這樣與產(chǎn)品進(jìn)行簡單的交互動作。然而在屏幕上這個簡單的交互模式被改變了，像是用鍵盤跟鼠標(biāo)可以輔助我們，在系統(tǒng)中進(jìn)行抽象與復(fù)雜的無限多任務(wù)（一對多）。

△ 你偏好用哪個微波爐加熱咖啡呢？Image credit:Bence Mózer

讓我們再來看看對長輩最重要的 Line 加好友功能，我們先不論這個功能在整個 APP 中被埋得多深，因?yàn)檎业郊雍糜训娜肟谡娴膶﹂L輩來說是看緣分～

在我引導(dǎo)長輩找出二維碼畫面的經(jīng)驗(yàn)中，發(fā)現(xiàn)他們都是用死記的方式，把下一步要按哪個鍵、在畫面的哪一個角落，記下來。但由于加好友功能并不是每天都會操作的，因此在學(xué)習(xí)上的效果，就像是高中時(shí)沒有把課文理解、吸收就硬死背下來一樣困難。

我們來看看「顯示行動條碼」在掃描二維碼畫面中，是否真的具有可以被點(diǎn)選的暗示。在掃描畫面背景單純的時(shí)候（如下圖情況 1），「顯示行動條碼」的 button 底色是有透明度的黑、扁平化后沒有陰影提供可以按的暗示，不過因?yàn)橛写髨A角的造型，勉強(qiáng)還是可以誘使人點(diǎn)點(diǎn)看；但一般情況下，掃面畫面背景不會那么理想的無其他干擾（如下圖情況2），button 原本的透明黑完全融入了后面的背景，這時(shí)候只剩下「顯示行動條碼」的文字，已經(jīng)不具備可以被點(diǎn)選的提示。

△ 情況 2 中，顯示行動條碼的 button 看起來可以按嗎？

掃描畫面中的外框有一定的透明度，在可操作暗示（affordance）上已經(jīng)不具有實(shí)體的特征，如果又放上有透明度的 button 在上面，讓人充滿不確定性，年長者無法將這樣的情況與現(xiàn)實(shí)生活中的經(jīng)驗(yàn)聯(lián)想在一起。

2.以顏色做區(qū)別真的是最好的方法嗎？

你知道同一個顏色，每個人看起來會不一樣嗎？而不同顏色在不同環(huán)境下，卻又能看起來像同一個顏色嗎？

不同意新擬物化設(shè)計(jì)的人中，有人主張運(yùn)用顏色的引導(dǎo)用戶操作界面的色彩元素不能從界面設(shè)計(jì)中抽離。但事實(shí)上，不同年齡、性別，視覺錐細(xì)胞中的活躍程度不一樣。同一個顏色，不同人看，明度跟彩度會有差異?；诜N種現(xiàn)實(shí)，由色彩的引導(dǎo)是好還是壞呢？

例子1：關(guān)于人類的視覺錐細(xì)胞

同一個顏色，不同人居然會看成不同顏色？

為什么阿嬤喜歡買大紅大紫的衣服？這個偏好除了受到個人喜好影響外，也關(guān)系到阿嬤視覺錐細(xì)胞的活躍度。老年人在上了年紀(jì)后，部分視覺錐細(xì)胞開始退化，因此對于藍(lán)色、綠色這類冷色系的顏色，老年人會開始接受不到這個區(qū)段的光帶來的刺激。因?yàn)橐曈X錐細(xì)胞對冷色系的刺激降低，導(dǎo)致阿嬤在菜市場逛街時(shí)會被偏暖色系的物品吸引。所以會買熱情系服飾不是阿嬤本人的意圖，而是老化的錐細(xì)胞在作祟。

例子2：關(guān)于學(xué)習(xí)觀察顏色這件事

不同顏色居然看成同一個顏色？

不同顏色卻看起來很像，有可能是光線造成，也有可能是使用者必須學(xué)習(xí)去觀察才知道的。日本的 JR 跟 Metro 系統(tǒng)，有著完整且細(xì)膩的視覺辨識系統(tǒng)。設(shè)計(jì)師理想中的情況是，我們將每條路線定義成不同顏色，可以讓使用者更容易學(xué)習(xí)辨識路線。

但實(shí)地走訪過東京的地下鐵跟 JR，常常會發(fā)現(xiàn)跟錯指示，才發(fā)現(xiàn)是潛意識辨認(rèn)錯文字或是顏色。我自己遇到過的經(jīng)驗(yàn)是，在新宿站想要找都營大江戶線時(shí)，因?yàn)樵诟脑诳吹搅送瑯臃奂t色的標(biāo)志，原本已經(jīng)要嗶卡進(jìn)去，才發(fā)現(xiàn)那是京王新線的 IC 入口標(biāo)志。

△ 新宿駛的改札口前，有兩個同為粉紅色的引導(dǎo)指標(biāo)

所以說，高齡者或是天生視覺錐細(xì)胞有缺陷的人對于顏色無法清楚辨認(rèn)外；大部分人可以借由學(xué)習(xí)來增強(qiáng)色彩辨識，除了可以對相似顏色進(jìn)行更細(xì)節(jié)的判別外，也可以學(xué)著辨認(rèn)不同光線（暖光、冷光）下造成的色彩差異。

但是，當(dāng)我們在設(shè)計(jì)中，迫使用戶學(xué)習(xí)、習(xí)慣我們制定顏色的意義?？赡軙谛率?onboarding 時(shí)造成適應(yīng)上的負(fù)擔(dān)，也有可能讓他們在使用別的系統(tǒng)造成錯亂。

3. 對于顏色被定義的意義各個文化、區(qū)域、種族都相同嗎？

在不同文化之下，對于色彩的觀察與運(yùn)用也不一樣，舉個大家可能都有發(fā)現(xiàn)的例子，當(dāng)你在不同城市旅游的時(shí)候，有沒有發(fā)現(xiàn)不同城市的優(yōu)先座顏色不一樣？你能猜得出來，哪一個是臺北捷運(yùn)上優(yōu)先座的顏色嗎？

△ Image credit:wikipedia.org

當(dāng)顏色在不同約定成俗下，有不一樣的意義，又剛好缺乏文字或圖像引導(dǎo)的時(shí)候，可能會讓使用者解讀成不同的意義。例如：紅色具有熱情、喜氣、帶來財(cái)運(yùn)的意涵，但同時(shí)又具有危險(xiǎn)的警示意義。

當(dāng)設(shè)計(jì)師覺得紅色可以引起使用者的注意，而把 button 設(shè)計(jì)為紅色時(shí)，卻可能讓沒看清楚文字的用戶，認(rèn)為按下這個 button 是危險(xiǎn)的舉動。

△ Image credit:photoAC

4. 光與影（明亮面跟陰暗面）給使用者的可操作暗示（affordance）一樣嗎？

新擬物化設(shè)計(jì)中假設(shè)了人在使用界面時(shí)，會運(yùn)用與生俱來能判斷光影效果的能力。這是真的嗎？讓我們來做個小實(shí)驗(yàn)：

為什么在臺北車大廳席地而坐的人，會選擇坐在黑色的棋盤格上呢？如果根據(jù)人類從大自然中所得到的可操作暗示來說，有陰影的地方可以提供人類休憩的功能，例如樹陰下的陰影處。

△ Image credit:中央社、wikipedia.org

如果這樣說得通的話，代表光亮的區(qū)域?qū)θ藖碚f是可以行走、活動的地方；而陰影處則是休息與暫停處。

根據(jù)以上的推測，我們做個小實(shí)驗(yàn)，把車站中的 2 個不同區(qū)域的地面上分別涂上白色與黑色，來讓受測者選出哪些區(qū)域可以暫停，哪些區(qū)域可以走動：

問題Ａ：假設(shè)你要在車站的大廳等朋友，你會選擇站在哪里等他呢？

假設(shè)：受測者會選 2，因黑色區(qū)域（影子）讓人覺得可以暫停、休憩。

結(jié)果：符合假設(shè)

1：白色柱子前的白地面 32.5％； 2：白色柱子前的黑地面 67.5％

問題Ｂ：哪一邊的樓梯是往上的方向呢？

假設(shè)：大家會選 1，因?yàn)楹谏珔^(qū)域（影子）讓人覺得可以踩上去。

結(jié)果：符合假設(shè)

1：白色立面＋黑色地面 61.3％；2：黑色立面＋白色地面 37.8％

由實(shí)驗(yàn)Ａ、Ｂ可得證，雖然實(shí)驗(yàn)結(jié)果符合先前假設(shè)，大多數(shù)的受測者可從陰影判斷要走哪條路，但還是有不少（30%以上）的受測者不認(rèn)同。所以在用使用光亮陰影的設(shè)計(jì)暗示時(shí)，還是會遇到使用者感知的不同的問題。

5. 深度認(rèn)知不同是導(dǎo)致判斷物體距離的能力受影響，也就是所謂的視差。

新擬物化設(shè)計(jì)中，將界面組件以類 3D 的方式呈現(xiàn)，使用戶在操作界面時(shí)必須去感知界面組件的遠(yuǎn)近以判斷重要性，而在深度認(rèn)知上有障礙的用戶此時(shí)就會受到挑戰(zhàn)。用戶可能會遇到，不知道哪個組件才是浮在最上面、最重要的；若界面中的組件有三種以上的陰影深淺，會讓用戶在判斷時(shí)要更花腦力判定物件在立體空間中的深淺。

總結(jié)

新擬物化風(fēng)格中的光影表現(xiàn)提供了使用者人類最原始的操作意圖：可操作暗示，是一個好的出發(fā)點(diǎn)，然而必須針對 APP 性質(zhì)的不同而有所改良。在設(shè)計(jì)較走生活風(fēng)格理念，而操作界面不復(fù)雜的 APP 時(shí)，非常適合用新擬物化風(fēng)格來詮釋：例如電子書服務(wù)、音樂軟件；但在設(shè)計(jì)功能導(dǎo)向，且有大量信息化圖表的界面，例如：移動網(wǎng)銀，還是需要以扁平化的界面為主要信息架構(gòu)，新擬物風(fēng)格可能會是極少量界面元素中，拿來呈現(xiàn)生活中真實(shí)物的質(zhì)感（例如：用戶的信用卡）、或是作為亮點(diǎn)（例如：優(yōu)惠卡片）的呈現(xiàn)方式，此類型 APP 中最重要的卡片與圖表對于此種風(fēng)格，一定要謹(jǐn)慎使用，必定三思三思再三思。

文章來源：優(yōu)設(shè)    作者：Muse Chang