新擬態——國外設計師分析的全新UI趨勢
相信最近很多小伙伴在逛Dribbble時候,發現最近流行一波新的設計風格,和以往不同的是,這次趨勢又回到之前擬物化了,但它與純擬物化還是有區別的,現在它有一個流行詞語叫“新擬態”,今天就和大家分享下國外一位設計師對這個趨勢的看法!
譯文如下:
一、擬態化是什么?
雖然UI以各種擬態化的形式存在(例如,您的桌面OS垃圾桶),現在這種風格的趨勢更加明顯。正如卡米爾·法拉納(Kamil Falana)指出的那樣,從無生命的“表達”到現實主義的過渡開始出現。
不久前,我們還觀察到,這種變化開始在我們身邊發生,蘋果(iOS13系統)就是一個很好的例子。向最小化設計和輕擬物化發展,最終帶來了無紋理3D視覺感官。受到了大家的喜歡,來看一張高清圖。
Apple Pencil
二、?擬物化風格的回歸,會更好嗎?
如下圖設計風格,在dribbble上獲得認可度比較高!
Dribbble用戶alexplyuto的作品獲得了四千多次贊,并帶動了這一趨勢。
這種設計引發了一波設計潮流趨勢,盡管其中的有部分并沒有實際意義(可滑動的后退箭頭?),但這使我們對UI 再次產生濃厚的興趣!
備注:可看出目前扁平化設計過于雷同,用戶審美疲勞。偶爾出現新設計趨勢風格,反而更個給各位設計師們帶來新鮮感!
三、新風格的特征點
由于按鈕的視覺表現看著變化不大(因為小了一些,不直觀),因此我們將重點放在實際的卡片概念上,以使這種視覺表現更能直觀感受出來。
擬態化卡片(左圖)、現代材料卡片(右圖)
如現代材料(升級版)卡片,通常是在畫布中以浮層的形式出現,厚度更加明顯。陰影既可以增加深度,也可以在很多情況下定義形狀本身,因為陰影通常是無邊界的。
擬態化卡片從背景中突出。它是由與背景顏色完全相同的卡片制成的凸起形狀。當我們從側面看時,它不會浮起來。
通過調節兩個陰影,一個陰影為負值,另一個陰影為正值,很容易實現此效果。但是要使其正常顯示,我們的背景不能是全黑或全白。它至少需要一點色調,以便可見“深色”和“淺色”陰影。您可以使用任何色調作為背景,以便根據您的選擇將其變暖或變冷。但是必須能看到深色或者淺色投影。
這是例子,根據您的喜好進行調整:
四、優缺點
這種風格的主要好處是“新鮮”(至少持續很長時間)。它為界面帶來了“新感覺”,并使其脫穎而出。它也可以與其他樣式混合使用,這樣就避免很呆板整個畫面變成這種柔軟凸起的效果。
到目前為止,有一些問題需要解決。我們發現了兩個主要問題:
- 可見性
- 易用性
1. 可見性
圖形與背景對比度的主要問題是,當它們都是相同的顏色時,就沒有可測量的對比度;客觀上存在陰影,因此我們可以近似并嘗試測量其外部的第一個像素。
在上面的示例中,我們得出了這些對比度值:
如您所見,現代材料卡片和新擬態化卡片的對比度都非常低。并且卡片本身并不用于主要的操作控件上(只是一個背景),只要我們保持按鈕突出并具有足夠高的對比度,就可以了。
兩者之間的差異很小,如果我們想為卡片使用更好的對比度,我們就必須這樣做:
而且由于幾乎沒有人會嘗試使用如此強烈的陰影,這意味著其余UI元素必須可訪問。這種假設得出的結論是,如果我們通過版式,相近度和與重要元素的對比來進行正確的層次劃分,那么這些卡片/凸起的塑料卡片并不那么重要。
尚未對此進行測試(我將嘗試找到時間做這件事),但現在我們假設下面元素的兩個“版本”均為“確定”。即使有些人看不到陰影,也有足夠的對比度讓他們看到圖標并“使用它”。
2. 易用性
盡管“按鈕”看起來像按鈕,但是如果圖標本身與背景形成鮮明對比,它將仍然有效。因此,這里要記住的主要事情是,如果要使用這種樣式,請以足夠高的對比度保留所有重要元素。
畢竟,大多數“現代材料”卡片視圖也不會通過陰影來做對比。
五、僅僅是卡片嗎?
但是,如果我們決定將組件用作按鈕而不是卡片,則會出現可訪問性的主要問題。
我們可以像下面的示例一樣輕松創建帶有內部陰影的按下狀態。
對比度測試
這里的問題實際上很大。
此按下狀態的對比度太小,不足以表示差異。是否可以通過改變的其余部分來表達按鈕的狀態,這里有一些想法,例如使用輪廓和填充圖標,下劃線或甚至用顏色填充按下狀態。
嘗試各種想法,但狀態必須立即被識別。
六、開發
開發實現其實它比我們認為的在CSS中實現“軟陰影”外觀要容易。我們尚未研究Swift和Kotlin,但我認為這不應該成為問題。
https://neumorphism.io/#55b9f3(實現新擬態效果CSS代碼)
七、其他影響
剛才說的形狀只是一方面。這種設計新樣式還帶有更多的按鈕和圖標。通常情況下,我們只需要回到“過去的美好時光”并使用位圖。這似乎是一種回歸,不必擔心-這是沒有必要的。
您可以輕松地將可開發的設計與這些卡片形狀組合在一起(新擬態卡片),從而獲得很好的效果。
作者練習的稿子(還未發布,還在設計中)
八、我們真的需要這些嗎?
盡管這一新趨勢影響了許多設計師,但對比以前使用的卡片組件可訪問性問題相比,它的問題并不那么嚴重。
所以去瘋狂的順應這一趨勢,并對其進行調整以使其成為您的趨勢。UI設計師的工作就是需要不斷來回挑戰自我,探索最新潮流,以符合產品審美。如果沒有這種不斷的探索的精神,所有產品將再次看起來相同,同質化嚴重。
但也要記住,每個新趨勢都帶有不可抗拒性因素,如果要使用,必須精心的設計探索,?驗證后才拿去面對用戶。
九、個人感悟
本篇文章,作者通過對新擬態設計趨勢分析,在文中提及“新擬態”和以前材料卡片的區別,同時證實了新擬態風格優勢!但也存在一定的弊端!如何去權衡與設計的把控,需要設計師們多去研究探索!
就我個人而言,我認為目前新擬態設計風格,其實更適合像車機那種偏實體硬件的HMI設計又或者智能硬件平臺,智能櫥窗,智能鏡等,但是如果在移動端去使用,那么需要去適當做簡化。如何去簡化以適應新趨勢,這需要不斷去嘗試。
最后作者也說了新擬態設計風格,需要注意的是對比度問題,需要將該效果應用到合適的位置,如果是操作組件上,那么它的反饋態和常態都需要有明顯的對比。
這一趨勢如果要盛行起來,需要大廠來引領,比如今年蘋果會出現的IOS14或者Google材料3.0到來。扁平化是蘋果帶來的,材料設計師google帶來的。
如今新擬態才初出茅廬,還未被廣泛使用,需要有先驅者引領。畢竟國內的環境大家都不敢冒險去嘗試運用到線上!
原文:https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
作者:Michal Malewicz
編譯作者:Tony,微信公眾號:功夫UX,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經驗,擅長產品體驗設計。
本文由@Tony 翻譯發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
- 目前還沒評論,等你發揮!