2020-5-18 ui設(shè)計(jì)分享達(dá)人
分享火爆Dribbble和Ins的設(shè)計(jì)趨勢(shì)
相信最近很多小伙伴在逛Dribbble時(shí)候，發(fā)現(xiàn)最近流行一波新的設(shè)計(jì)風(fēng)格，和以往不同的是，這次趨勢(shì)又回到之前擬物化了，但它與純擬物化還是有區(qū)別的，現(xiàn)在它有一個(gè)流行詞語(yǔ)叫“新擬態(tài)”，今天就和大家分享下國(guó)外一位設(shè)計(jì)師對(duì)這個(gè)趨勢(shì)的看法！
雖然UI以各種擬態(tài)化的形式存在（例如，您的桌面OS垃圾桶），現(xiàn)在這種風(fēng)格的趨勢(shì)更加明顯。正如卡米爾·法拉納（Kamil Falana）指出的那樣，從無(wú)生命的“表達(dá)”到現(xiàn)實(shí)主義的過(guò)渡開(kāi)始出現(xiàn)。
不久前，我們還觀察到，這種變化開(kāi)始在我們身邊發(fā)生，蘋(píng)果（IOS13系統(tǒng)）就是一個(gè)很好的例子。向最小化設(shè)計(jì)和輕擬物化發(fā)展，最終帶來(lái)了無(wú)紋理3d視覺(jué)感官。受到了大家的喜歡，來(lái)看一張高清圖。
如下圖設(shè)計(jì)風(fēng)格，在dribbble上獲得認(rèn)可度比較高！
Dribbble用戶alexplyuto的作品獲得了四千多次贊，并帶動(dòng)了這一趨勢(shì)。
備注：可看出目前扁平化設(shè)計(jì)過(guò)于雷同，用戶審美疲勞。偶爾出現(xiàn)新設(shè)計(jì)趨勢(shì)風(fēng)格，反而更個(gè)給各位設(shè)計(jì)師們帶來(lái)新鮮感！
新風(fēng)格的特征點(diǎn)
-
由于按鈕的視覺(jué)表現(xiàn)看著變化不大（因?yàn)樾×艘恍?，不直觀），因此我們將重點(diǎn)放在實(shí)際的卡片概念上，以使這種視覺(jué)表現(xiàn)更能直觀感受出來(lái)
-
這種風(fēng)格的主要好處是“新鮮”（至少持續(xù)很長(zhǎng)時(shí)間）。它為界面帶來(lái)了“新感覺(jué)”，并使其脫穎而出。它也可以與其他樣式混合使用，這樣就避免很呆板整個(gè)畫(huà)面變成這種柔軟凸起的效果。
到目前為止，有一些問(wèn)題需要解決。我們發(fā)現(xiàn)了兩個(gè)主要問(wèn)題：
1. 可見(jiàn)性
2. 易用性
- 可見(jiàn)性
圖形與背景對(duì)比度的主要問(wèn)題是，當(dāng)它們都是相同的顏色時(shí)，就沒(méi)有可測(cè)量的對(duì)比度；客觀上存在陰影，因此我們可以近似并嘗試測(cè)量其外部的第一個(gè)像素。在上面的示例中，我們得出了這些對(duì)比度值。
而且由于幾乎沒(méi)有人會(huì)嘗試使用如此強(qiáng)烈的陰影，這意味著其余UI元素必須可訪問(wèn)。這種假設(shè)得出的結(jié)論是，如果我們通過(guò)版式，相近度和與重要元素的對(duì)比來(lái)進(jìn)行正確的層次劃分，那么這些卡片/凸起的塑料卡片并不那么重要。
尚未對(duì)此進(jìn)行測(cè)試（我將嘗試找到時(shí)間做這件事），但現(xiàn)在我們假設(shè)下面元素的兩個(gè)“版本”均為“確定”。即使有些人看不到陰影，也有足夠的對(duì)比度讓他們看到圖標(biāo)并“使用它”。
- 易用性
僅僅是卡片嗎？
但是，如果我們決定將組件用作按鈕而不是卡片，則會(huì)出現(xiàn)可訪問(wèn)性的主要問(wèn)題。
我們可以像下面的示例一樣輕松創(chuàng)建帶有內(nèi)部陰影的按下?tīng)顟B(tài)。
對(duì)比度測(cè)試
此按下?tīng)顟B(tài)的對(duì)比度太小，不足以表示差異。是否可以通過(guò)改變的其余部分來(lái)表達(dá)按鈕的狀態(tài)，這里有一些想法，例如使用輪廓和填充圖標(biāo)，下劃線或甚至用顏色填充按下?tīng)顟B(tài)。
開(kāi)發(fā)實(shí)現(xiàn)其實(shí)它比我們認(rèn)為的在CSS中實(shí)現(xiàn)“軟陰影”外觀要容易。我們尚未研究Swift和Kotlin，但我認(rèn)為這不應(yīng)該成為問(wèn)題。
https://neumorphism.io/#55b9f3（實(shí)現(xiàn)新擬態(tài)效果CSS代碼）
您可以輕松地將可開(kāi)發(fā)的設(shè)計(jì)與這些卡片形狀組合在一起（新擬態(tài)卡片），從而獲得很好的效果。
-
盡管這一新趨勢(shì)影響了許多設(shè)計(jì)師，但對(duì)比以前使用的卡片組件可訪問(wèn)性問(wèn)題相比，它的問(wèn)題并不那么嚴(yán)重。
所以去瘋狂的順應(yīng)這一趨勢(shì)，并對(duì)其進(jìn)行調(diào)整以使其成為您的趨勢(shì)。UI設(shè)計(jì)師的工作就是需要不斷來(lái)回挑戰(zhàn)自我，探索潮流，以符合產(chǎn)品審美。如果沒(méi)有這種不斷的探索的精神，所有產(chǎn)品將再次看起來(lái)相同，同質(zhì)化嚴(yán)重。
-
本篇文章，作者通過(guò)對(duì)新擬態(tài)設(shè)計(jì)趨勢(shì)分析，在文中提及“新擬態(tài)”和以前材料卡片的區(qū)別，同時(shí)證實(shí)了新擬態(tài)風(fēng)格優(yōu)勢(shì)！但也存在一定的弊端！如何去權(quán)衡與設(shè)計(jì)的把控，需要設(shè)計(jì)師們多去研究探索！
如今新擬態(tài)才初出茅廬，還未被廣泛使用，需要有先驅(qū)者引領(lǐng)。畢竟國(guó)內(nèi)的環(huán)境大家都不敢冒險(xiǎn)去嘗試運(yùn)用到線上！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com