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

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

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

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

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

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

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

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

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

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

讓我們?cè)賮?lái)看看對(duì)長(zhǎng)輩最重要的 Line 加好友功能，我們先不論這個(gè)功能在整個(gè) APP 中被埋得多深，因?yàn)檎业郊雍糜训娜肟谡娴膶?duì)長(zhǎng)輩來(lái)說(shuō)是看緣分～

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

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

△ 情況 2 中，顯示行動(dòng)條碼的 button 看起來(lái)可以按嗎？

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

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

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

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

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

同一個(gè)顏色，不同人居然會(huì)看成不同顏色？

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

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

不同顏色居然看成同一個(gè)顏色？

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

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

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

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

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

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

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

△ Image credit:wikipedia.org

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

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

△ Image credit:photoAC

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

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

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

△ Image credit:中央社、wikipedia.org

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

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

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

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

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

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

問(wèn)題Ｂ：哪一邊的樓梯是往上的方向呢？

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

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

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

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

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

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

總結(jié)

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

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