2020-5-8 資深UI設(shè)計者
最近正火的新擬物化風格(Neumorphism)在 2019 年底,設(shè)計師 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不僅被選為 2020 年界面趨勢,又稱為 soft UI。但這種風格在真實世界落地時,可視性上受到許多爭議。
確實,新擬物化風格它算是一種風格,但又不是只有視覺上的風格這么簡單,它延伸出來的議題,其實是扁平化跟擬物化之間的戰(zhàn)爭。
擬物化是 Apple 在早期設(shè)計中大量使用在界面上呈現(xiàn)對象屬性、材質(zhì)的方式。然而在 2013 年 ios7 發(fā)布時,Apple 開始為了畫面簡潔大量將界面元素扁平化,緊接著 Google 在 2015 年發(fā)布了 Material Design,宣示扁平化在 UI 設(shè)計中扮演著主導趨勢的角色。2020 年真是百家爭鳴的一年,首先是 BMW 發(fā)表的扁平化新 logo,接著是這一波新擬物化的反擊。究竟代表新擬物化可能奪回界面風格主導權(quán)?或僅是 2020 年曇花一現(xiàn)的視覺風格呢?
我認為新擬物化的概念其實是融合扁平化與擬物化的集大成,它建立在扁平化風格之上,又將組件帶入了擬物化的元素,提高用戶的判斷力。不過在糾結(jié)于扁平化與擬物化哪個比較好時,有五個議題是可以讓 UI、UX 設(shè)計師去思考的。
大家身邊一定都有那種已經(jīng)把 Line 操作得滾瓜爛熟,但是每次要用 Line 加好友時,還是不知道怎么操作的長輩。最早期當人類還沒進入屏幕時代前,我們所使用的界面大多是實體產(chǎn)品上的控制界面,而這些界面上的每個開關(guān)、按鈕,都只有一個輸入源,對應到一個功能(一對一),我們因此就這樣與產(chǎn)品進行簡單的交互動作。然而在屏幕上這個簡單的交互模式被改變了,像是用鍵盤跟鼠標可以輔助我們,在系統(tǒng)中進行抽象與復雜的無限多任務(wù)(一對多)。
△ 你偏好用哪個微波爐加熱咖啡呢?Image credit:Bence Mózer
讓我們再來看看對長輩最重要的 Line 加好友功能,我們先不論這個功能在整個 APP 中被埋得多深,因為找到加好友的入口真的對長輩來說是看緣分~
在我引導長輩找出二維碼畫面的經(jīng)驗中,發(fā)現(xiàn)他們都是用死記的方式,把下一步要按哪個鍵、在畫面的哪一個角落,記下來。但由于加好友功能并不是每天都會操作的,因此在學習上的效果,就像是高中時沒有把課文理解、吸收就硬死背下來一樣困難。
我們來看看「顯示行動條碼」在掃描二維碼畫面中,是否真的具有可以被點選的暗示。在掃描畫面背景單純的時候(如下圖情況 1),「顯示行動條碼」的 button 底色是有透明度的黑、扁平化后沒有陰影提供可以按的暗示,不過因為有大圓角的造型,勉強還是可以誘使人點點看;但一般情況下,掃面畫面背景不會那么理想的無其他干擾(如下圖情況2),button 原本的透明黑完全融入了后面的背景,這時候只剩下「顯示行動條碼」的文字,已經(jīng)不具備可以被點選的提示。
△ 情況 2 中,顯示行動條碼的 button 看起來可以按嗎?
掃描畫面中的外框有一定的透明度,在可操作暗示(affordance)上已經(jīng)不具有實體的特征,如果又放上有透明度的 button 在上面,讓人充滿不確定性,年長者無法將這樣的情況與現(xiàn)實生活中的經(jīng)驗聯(lián)想在一起。
你知道同一個顏色,每個人看起來會不一樣嗎?而不同顏色在不同環(huán)境下,卻又能看起來像同一個顏色嗎?
不同意新擬物化設(shè)計的人中,有人主張運用顏色的引導用戶操作界面的色彩元素不能從界面設(shè)計中抽離。但事實上,不同年齡、性別,視覺錐細胞中的活躍程度不一樣。同一個顏色,不同人看,明度跟彩度會有差異。基于種種現(xiàn)實,由色彩的引導是好還是壞呢?
例子1:關(guān)于人類的視覺錐細胞
同一個顏色,不同人居然會看成不同顏色?
為什么阿嬤喜歡買大紅大紫的衣服?這個偏好除了受到個人喜好影響外,也關(guān)系到阿嬤視覺錐細胞的活躍度。老年人在上了年紀后,部分視覺錐細胞開始退化,因此對于藍色、綠色這類冷色系的顏色,老年人會開始接受不到這個區(qū)段的光帶來的刺激。因為視覺錐細胞對冷色系的刺激降低,導致阿嬤在菜市場逛街時會被偏暖色系的物品吸引。所以會買熱情系服飾不是阿嬤本人的意圖,而是老化的錐細胞在作祟。
例子2:關(guān)于學習觀察顏色這件事
不同顏色居然看成同一個顏色?
不同顏色卻看起來很像,有可能是光線造成,也有可能是使用者必須學習去觀察才知道的。日本的 JR 跟 Metro 系統(tǒng),有著完整且細膩的視覺辨識系統(tǒng)。設(shè)計師理想中的情況是,我們將每條路線定義成不同顏色,可以讓使用者更容易學習辨識路線。
但實地走訪過東京的地下鐵跟 JR,常常會發(fā)現(xiàn)跟錯指示,才發(fā)現(xiàn)是潛意識辨認錯文字或是顏色。我自己遇到過的經(jīng)驗是,在新宿站想要找都營大江戶線時,因為在改札口看到了同樣粉紅色的標志,原本已經(jīng)要嗶卡進去,才發(fā)現(xiàn)那是京王新線的 IC 入口標志。
△ 新宿駛的改札口前,有兩個同為粉紅色的引導指標
所以說,高齡者或是天生視覺錐細胞有缺陷的人對于顏色無法清楚辨認外;大部分人可以借由學習來增強色彩辨識,除了可以對相似顏色進行更細節(jié)的判別外,也可以學著辨認不同光線(暖光、冷光)下造成的色彩差異。
但是,當我們在設(shè)計中,迫使用戶學習、習慣我們制定顏色的意義??赡軙谛率?onboarding 時造成適應上的負擔,也有可能讓他們在使用別的系統(tǒng)造成錯亂。
在不同文化之下,對于色彩的觀察與運用也不一樣,舉個大家可能都有發(fā)現(xiàn)的例子,當你在不同城市旅游的時候,有沒有發(fā)現(xiàn)不同城市的優(yōu)先座顏色不一樣?你能猜得出來,哪一個是臺北捷運上優(yōu)先座的顏色嗎?
△ Image credit:wikipedia.org
當顏色在不同約定成俗下,有不一樣的意義,又剛好缺乏文字或圖像引導的時候,可能會讓使用者解讀成不同的意義。例如:紅色具有熱情、喜氣、帶來財運的意涵,但同時又具有危險的警示意義。
當設(shè)計師覺得紅色可以引起使用者的注意,而把 button 設(shè)計為紅色時,卻可能讓沒看清楚文字的用戶,認為按下這個 button 是危險的舉動。
△ Image credit:photoAC
新擬物化設(shè)計中假設(shè)了人在使用界面時,會運用與生俱來能判斷光影效果的能力。這是真的嗎?讓我們來做個小實驗:
為什么在臺北車大廳席地而坐的人,會選擇坐在黑色的棋盤格上呢?如果根據(jù)人類從大自然中所得到的可操作暗示來說,有陰影的地方可以提供人類休憩的功能,例如樹陰下的陰影處。
△ Image credit:中央社、wikipedia.org
如果這樣說得通的話,代表光亮的區(qū)域?qū)θ藖碚f是可以行走、活動的地方;而陰影處則是休息與暫停處。
根據(jù)以上的推測,我們做個小實驗,把車站中的 2 個不同區(qū)域的地面上分別涂上白色與黑色,來讓受測者選出哪些區(qū)域可以暫停,哪些區(qū)域可以走動:
問題A:假設(shè)你要在車站的大廳等朋友,你會選擇站在哪里等他呢?
假設(shè):受測者會選 2,因黑色區(qū)域(影子)讓人覺得可以暫停、休憩。
結(jié)果:符合假設(shè)
1:白色柱子前的白地面 32.5%; 2:白色柱子前的黑地面 67.5%
問題B:哪一邊的樓梯是往上的方向呢?
假設(shè):大家會選 1,因為黑色區(qū)域(影子)讓人覺得可以踩上去。
結(jié)果:符合假設(shè)
1:白色立面+黑色地面 61.3%;2:黑色立面+白色地面 37.8%
由實驗A、B可得證,雖然實驗結(jié)果符合先前假設(shè),大多數(shù)的受測者可從陰影判斷要走哪條路,但還是有不少(30%以上)的受測者不認同。所以在用使用光亮陰影的設(shè)計暗示時,還是會遇到使用者感知的不同的問題。
新擬物化設(shè)計中,將界面組件以類 3D 的方式呈現(xiàn),使用戶在操作界面時必須去感知界面組件的遠近以判斷重要性,而在深度認知上有障礙的用戶此時就會受到挑戰(zhàn)。用戶可能會遇到,不知道哪個組件才是浮在最上面、最重要的;若界面中的組件有三種以上的陰影深淺,會讓用戶在判斷時要更花腦力判定物件在立體空間中的深淺。
新擬物化風格中的光影表現(xiàn)提供了使用者人類最原始的操作意圖:可操作暗示,是一個好的出發(fā)點,然而必須針對 APP 性質(zhì)的不同而有所改良。在設(shè)計較走生活風格理念,而操作界面不復雜的 APP 時,非常適合用新擬物化風格來詮釋:例如電子書服務(wù)、音樂軟件;但在設(shè)計功能導向,且有大量信息化圖表的界面,例如:移動網(wǎng)銀,還是需要以扁平化的界面為主要信息架構(gòu),新擬物風格可能會是極少量界面元素中,拿來呈現(xiàn)生活中真實物的質(zhì)感(例如:用戶的信用卡)、或是作為亮點(例如:優(yōu)惠卡片)的呈現(xiàn)方式,此類型 APP 中最重要的卡片與圖表對于此種風格,一定要謹慎使用,必定三思三思再三思。
文章來源:優(yōu)設(shè) 作者:Muse Chang
藍藍設(shè)計的小編 http://m.sillybuy.com