新擬物化設計 Neumorphism 讓 UIUX 設計師重新思考的 5 件事

Mar 29 · 10 min read

新擬物化設計只是一種風格嗎？

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

是，新擬物化風格它算是一種風格，但又不是只有視覺上的風格這麼簡單，它延伸出來的議題，其實是扁平化跟擬物化之間的戰爭。

延伸閱讀：2020 年最火的新拟物化设计趋势，快来了解下！、 Skeuomorphism / Neumorphism UI Trend

擬物化與扁平化的瑜亮情結

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

延伸閱讀：Why flat Design is not Anti-Skeuomortphism

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

我認為新擬物化的概念其實是融合扁平化與擬物化的集大成，它建立在扁平化風格之上，又將元件帶入了擬物化的元素，提高用戶的判斷力。不過在糾結於扁平化與擬物化哪個比較好時，有五個議題是可以讓UIUX設計師去思考的。

1.多數年長者對於扁平化介面提供的視覺元素暗示無法理解。

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

讓我們再來看看對長輩最重要的Line加好友功能，我們先不論這個功能在整個APP中被埋的多深，因為找到加好友的入口真的對長輩來說是看緣分～

在我引導長輩找出QR code畫面的經驗中，發現他們都是用死記的方式，把下一步要按哪個鍵、在畫面的哪一個角落，記下來。但由於加好友功能並不是每天都會操作的，因此在學習上的效果，就像是高中時沒有把課文理解、吸收就硬死背下來一樣困難。

我們來看看「顯示行動條碼」在掃描QR code畫面中，是否真的具有可以被點選的暗示。在掃描畫面背景單純的時候（如下圖情況1），「顯示行動條碼」的button底色是有透明度的黑、扁平化後沒有陰影提供可以按的暗示，不過因為有大圓角的造型，勉強還是可以誘使人點點看；但一般情況下，掃面畫面背景不會那麼理想的無其他干擾（如下圖情況2），button原本的透明黑完全融入了後面的背景，這時候只剩下「顯示行動條碼」的文字，已經不具可以被點選的提示。

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

2.以顏色做區別真的是最好的方法嗎？你知道同一個顏色，每個人看起來會不一樣嗎？而不同顏色在不同環境下，卻有能看起來像同一個顏色嗎？

不同意新擬物化設計的人中，有人主張運用顏色的引導使用者操作介面的色彩元素不能從介面設計中抽離。但事實上，不同年齡、性別，視覺錐細胞中的活躍程度不一樣。同一個顏色，不同人看，明度跟彩度會有差異。基於種種現實，藉由色彩的引導是好還是壞呢？

例子1：關於人類的視覺錐細胞

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

為什麼阿嬤喜歡買大紅大紫的衣服？這個偏好除了受到個人喜好影響外，也關係到阿嬤視覺錐細胞的活躍度。老年人在上了年紀後，部分視覺錐細胞開始退化，因此對於藍色、綠色這類寒色系的顏色，老年人會最先開始接受不到這個區段的光帶來的刺激。因為視覺細胞對寒色系的刺激降低，導致阿嬤在菜市場逛街時會被偏暖色系的物品吸引。所以會買熱情系服飾不是阿嬤本人的意圖，而是老化的錐細胞在作祟。

例子2：關於學習觀察顏色這件事

不同顏色居然看成同一個顏色?!

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

但實地走訪過東京的地下鐵跟JR，常常會發現跟錯指示走，才發現是潛意識變認錯文字資訊或是顏色。我自己遇到過的經驗是，在新宿站想要找都營大江戶線時，因為在改札口看到了同樣粉紅色的標誌，原本已經要嗶卡進去，才發現那是京王新線的IC入口標誌。

所以說，高齡者或是天生視覺細胞有缺陷的人對於顏色無法清楚辨認外；大部分人可以藉由學習來增強色彩辨識，除了可以對相似顏色進行更細節的判別外，也可以學著辨認不同光線（暖光、冷光）下造成的色彩差異。

但是，當我們在設計中，迫使用戶學習、習慣我們制定顏色的意義。可能會在新手onboarding時造成適應上的負擔，也有可能讓他們在使用別的系統造成錯亂。

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

在不同文化之下，對於色彩的觀察與運用也不一樣，舉個大家可能都有發現的例子，當你在不同國家旅遊的時候，有沒有發現不同國家的博愛座顏色不一樣？你能猜得出來，哪一個是台北捷運上博愛座的顏色嗎？

當顏色在不同約定成俗下，有不一樣的意義，又剛好缺乏文字或圖像引導的時候，可能會讓使用者解讀成不同的意義。例如：紅色具有熱情、喜氣、帶來財運的意涵，但同時又具有危險的警示意義。

當設計師覺得紅色可以引起使用者的注意，而把button設計為紅色時，卻可能讓沒看清楚文字的使用者，認為按下這個button是危險的舉動。

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

新擬物化設計中假設了人在使用介面時，會運用與生俱來能判斷光影效果的能力。這是真的嗎？讓我們來做個小實驗：

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

如果這樣說得通的話，代表光亮的區域對人來說是可以行走、活動的地方；而陰影處則是休息與暫停處。

根據以上的推測，我們做個小實驗，把車站中的2個不同區域的地面上分別塗上白色與黑色，來讓受測者選出哪些區域可以暫停，哪些區域可以走動：

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

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

結果：符合假設

1.白色柱子前的白地面 32.5％、 2.白色柱子前的黑地面 67.5％

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

假設：大家會選1，因為黑色區域（影子）讓人覺得可以踩上去。

結果：符合假設

1.白色立面＋黑色地面 61.3％ 、 2. 黑色立面＋白色地面 37.8％

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

5.深度認知不同是導致判斷物體距離的能力受影響，也就是所謂的視差。

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

總結

新擬物化風格中的光影表現提供了使用者人類最原始的操作意圖：可操作暗示，是一個好的出發點，然而必須針對APP性質的不同而有所改良。在設計較走生活風格理念，而操作介面不複雜的APP時，非常適合用新擬物化風格來詮釋：例如電子書服務、音樂串流軟體；但在設計功能導向，且有大量資訊化圖表的介面，例如：行動網銀，還是需要以扁平化的介面為主要資訊架構，新擬物風格可能會是極少量介面元素中，拿來呈現中真實物的質感（例如：用戶的信用卡）、或是作為亮點（例如：最新優惠卡片）的呈現方式，此類型APP中最重要的卡片與圖表對於此種風格，一定要謹慎服用，必定三思三思再三思。