手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

國外設(shè)計(jì)師分析的全新UI趨勢，原來是它~

2020-5-18    ui設(shè)計(jì)分享達(dá)人

分享火爆Dribbble和Ins的設(shè)計(jì)趨勢




相信最近很多小伙伴在逛Dribbble時(shí)候，發(fā)現(xiàn)最近流行一波新的設(shè)計(jì)風(fēng)格，和以往不同的是，這次趨勢又回到之前擬物化了，但它與純擬物化還是有區(qū)別的，現(xiàn)在它有一個(gè)流行詞語叫“新擬態(tài)”，今天就和大家分享下國外一位設(shè)計(jì)師對這個(gè)趨勢的看法！





擬態(tài)化是什么？

-

雖然UI以各種擬態(tài)化的形式存在（例如，您的桌面OS垃圾桶），現(xiàn)在這種風(fēng)格的趨勢更加明顯。正如卡米爾·法拉納（Kamil Falana）指出的那樣，從無生命的“表達(dá)”到現(xiàn)實(shí)主義的過渡開始出現(xiàn)。



不久前，我們還觀察到，這種變化開始在我們身邊發(fā)生，蘋果（IOS13系統(tǒng)）就是一個(gè)很好的例子。向最小化設(shè)計(jì)和輕擬物化發(fā)展，最終帶來了無紋理3d視覺感官。受到了大家的喜歡，來看一張高清圖。






擬物化風(fēng)格的回歸，會(huì)更好嗎？
-

如下圖設(shè)計(jì)風(fēng)格，在dribbble上獲得認(rèn)可度比較高！


Dribbble用戶alexplyuto的作品獲得了四千多次贊，并帶動(dòng)了這一趨勢。


這種設(shè)計(jì)引發(fā)了一波設(shè)計(jì)潮流趨勢，盡管其中的有部分并沒有實(shí)際意義（可滑動(dòng)的后退箭頭？），但這使我們對UI 再次產(chǎn)生濃厚的興趣！ 

備注：可看出目前扁平化設(shè)計(jì)過于雷同，用戶審美疲勞。偶爾出現(xiàn)新設(shè)計(jì)趨勢風(fēng)格，反而更個(gè)給各位設(shè)計(jì)師們帶來新鮮感！





新風(fēng)格的特征點(diǎn)

-

由于按鈕的視覺表現(xiàn)看著變化不大（因?yàn)樾×艘恍?，不直觀），因此我們將重點(diǎn)放在實(shí)際的卡片概念上，以使這種視覺表現(xiàn)更能直觀感受出來



- 現(xiàn)代材料卡片（右圖）
如現(xiàn)代材料（升級版）卡片，通常是在畫布中以浮層的形式出現(xiàn)，厚度更加明顯。陰影既可以增加深度，也可以在很多情況下定義形狀本身，因?yàn)殛幱巴ǔＪ菬o邊界的。 

- 擬態(tài)化卡片（左圖）
擬態(tài)化卡片從背景中突出。它是由與背景顏色完全相同的卡片制成的凸起形狀。當(dāng)我們從側(cè)面看時(shí)，它不會(huì)浮起來。 
通過調(diào)節(jié)兩個(gè)陰影， 一個(gè)陰影為負(fù)值，另一個(gè)陰影為正值，很容易實(shí)現(xiàn)此效果。 但是要使其正常顯示，我們的背景不能是全黑或全白。它至少需要一點(diǎn)色調(diào)，以便可見“深色”和“淺色”陰影。您可以使用任何色調(diào)作為背景，以便根據(jù)您的選擇將其變暖或變冷。但是必須能看到深色或者淺色投影。 


這是例子，根據(jù)您的喜好進(jìn)行調(diào)整：






優(yōu)缺點(diǎn)

-

這種風(fēng)格的主要好處是“新鮮”（至少持續(xù)很長時(shí)間）。它為界面帶來了“新感覺”，并使其脫穎而出。它也可以與其他樣式混合使用，這樣就避免很呆板整個(gè)畫面變成這種柔軟凸起的效果。

到目前為止，有一些問題需要解決。我們發(fā)現(xiàn)了兩個(gè)主要問題：

1. 可見性

2. 易用性


- 可見性

圖形與背景對比度的主要問題是，當(dāng)它們都是相同的顏色時(shí)，就沒有可測量的對比度；客觀上存在陰影，因此我們可以近似并嘗試測量其外部的第一個(gè)像素。在上面的示例中，我們得出了這些對比度值。


如您所見，現(xiàn)代材料卡片和新擬態(tài)化卡片的對比度都非常低。并且卡片本身并不用于主要的操作控件上（只是一個(gè)背景），只要我們保持按鈕突出并具有足夠高的對比度，就可以了。 
兩者之間的差異很小，如果我們想為卡片使用更好的對比度，我們就必須這樣做： 


而且由于幾乎沒有人會(huì)嘗試使用如此強(qiáng)烈的陰影，這意味著其余UI元素必須可訪問。這種假設(shè)得出的結(jié)論是，如果我們通過版式，相近度和與重要元素的對比來進(jìn)行正確的層次劃分，那么這些卡片/凸起的塑料卡片并不那么重要。

尚未對此進(jìn)行測試（我將嘗試找到時(shí)間做這件事），但現(xiàn)在我們假設(shè)下面元素的兩個(gè)“版本”均為“確定”。即使有些人看不到陰影，也有足夠的對比度讓他們看到圖標(biāo)并“使用它”。



- 易用性

盡管“按鈕”看起來像按鈕，但是如果圖標(biāo)本身與背景形成鮮明對比，它將仍然有效。 因此，這里要記住的主要事情是，如果要使用這種樣式，請以足夠高的對比度保留所有重要元素。

畢竟，大多數(shù)“現(xiàn)代材料”卡片視圖也不會(huì)通過陰影來做對比。 





僅僅是卡片嗎？

-

但是，如果我們決定將組件用作按鈕而不是卡片，則會(huì)出現(xiàn)可訪問性的主要問題。

我們可以像下面的示例一樣輕松創(chuàng)建帶有內(nèi)部陰影的按下狀態(tài)。


對比度測試


這里的問題實(shí)際上很大。 

此按下狀態(tài)的對比度太小，不足以表示差異。是否可以通過改變的其余部分來表達(dá)按鈕的狀態(tài)，這里有一些想法，例如使用輪廓和填充圖標(biāo)，下劃線或甚至用顏色填充按下狀態(tài)。


嘗試各種想法，但狀態(tài)必須立即被識(shí)別。 




開發(fā)

-

開發(fā)實(shí)現(xiàn)其實(shí)它比我們認(rèn)為的在CSS中實(shí)現(xiàn)“軟陰影”外觀要容易。我們尚未研究Swift和Kotlin，但我認(rèn)為這不應(yīng)該成為問題。

https://neumorphism.io/#55b9f3（實(shí)現(xiàn)新擬態(tài)效果CSS代碼）






其他影響

-
剛才說的形狀只是一方面。這種設(shè)計(jì)新樣式還帶有更多的按鈕和圖標(biāo)。通常情況下，我們只需要回到“過去的美好時(shí)光”并使用位圖。這似乎是一種回歸，不必?fù)?dān)心-這是沒有必要的。 

您可以輕松地將可開發(fā)的設(shè)計(jì)與這些卡片形狀組合在一起（新擬態(tài)卡片），從而獲得很好的效果。







我們真的需要這些嗎？

-

盡管這一新趨勢影響了許多設(shè)計(jì)師，但對比以前使用的卡片組件可訪問性問題相比，它的問題并不那么嚴(yán)重。

所以去瘋狂的順應(yīng)這一趨勢，并對其進(jìn)行調(diào)整以使其成為您的趨勢。UI設(shè)計(jì)師的工作就是需要不斷來回挑戰(zhàn)自我，探索潮流，以符合產(chǎn)品審美。如果沒有這種不斷的探索的精神，所有產(chǎn)品將再次看起來相同，同質(zhì)化嚴(yán)重。



但也要記住，每個(gè)新趨勢都帶有不可抗拒性因素，如果要使用，必須精心的設(shè)計(jì)探索， 驗(yàn)證后才拿去面對用戶。 



個(gè)人感悟

-

本篇文章，作者通過對新擬態(tài)設(shè)計(jì)趨勢分析，在文中提及“新擬態(tài)”和以前材料卡片的區(qū)別，同時(shí)證實(shí)了新擬態(tài)風(fēng)格優(yōu)勢！但也存在一定的弊端！如何去權(quán)衡與設(shè)計(jì)的把控，需要設(shè)計(jì)師們多去研究探索！



就我個(gè)人而言，我認(rèn)為目前新擬態(tài)設(shè)計(jì)風(fēng)格， 其實(shí)更適合像車機(jī)那種偏實(shí)體硬件的HMI設(shè)計(jì)又或者智能硬件平臺(tái)，智能櫥窗，智能鏡等，但是如果在移動(dòng)端去使用，那么需要去適當(dāng)做簡化。如何去簡化以適應(yīng)新趨勢，這需要不斷去嘗試。 



這一趨勢如果要盛行起來，需要大廠來引領(lǐng)， 比如今年蘋果會(huì)出現(xiàn)的IOS14或者Google材料3.0到來。 扁平化是蘋果帶來的，材料設(shè)計(jì)師google帶來的。 

如今新擬態(tài)才初出茅廬，還未被廣泛使用，需要有先驅(qū)者引領(lǐng)。畢竟國內(nèi)的環(huán)境大家都不敢冒險(xiǎn)去嘗試運(yùn)用到線上！ 



轉(zhuǎn)自：站酷-功夫UX 

分享本文至：

日歷

鏈接

個(gè)人資料

存檔