激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

新擬物風(fēng)格，UI設(shè)計(jì)的新趨勢(shì)終于來(lái)了？

發(fā)布時(shí)間：2024-09-04 17:51:07 瀏覽量：240次

靜電說(shuō)：最近設(shè)計(jì)群開(kāi)始流行一個(gè)名詞叫做“新擬物”，什么叫做新擬物風(fēng)格呢？簡(jiǎn)單粗暴先看圖感受一下：

新擬物風(fēng)格

其實(shí)這種風(fēng)格在去年年底已經(jīng)開(kāi)始有討論的聲音，它的原詞叫做New skeuomorphism（新擬物風(fēng)格），經(jīng)過(guò)簡(jiǎn)化后成為一個(gè)新詞Neuomorphism，另外，還有一個(gè)詞來(lái)描述這種風(fēng)格，那就是Soft UI。

新擬物風(fēng)格是啥？

人類總是喜新厭舊的，這一點(diǎn)任何時(shí)候都存在，要知道，扁平化設(shè)計(jì)已經(jīng)從iOS7一直流行至今，時(shí)間也從2013年推出到現(xiàn)在經(jīng)歷了7個(gè)年頭。在iOS7之前，全寫(xiě)實(shí)風(fēng)格的擬物化設(shè)計(jì)才是主流。

古老的擬物風(fēng)格

7個(gè)年頭對(duì)于每個(gè)人的審美都是一個(gè)很大的挑戰(zhàn)。沒(méi)有光影質(zhì)感的各種線性化圖標(biāo)，插畫(huà)已經(jīng)讓人感到視覺(jué)疲勞。設(shè)計(jì)師希望在里邊加入一些新的東西。

iOS13的部分圖標(biāo)設(shè)計(jì)

但是，這種變化并不能完全說(shuō)是之前擬物風(fēng)格的回歸。仔細(xì)觀察，你會(huì)發(fā)現(xiàn)這種質(zhì)感的表現(xiàn)是及其克制的，想象一下你手中的Apple Pencil，蘋(píng)果的Air Pods，通體白色光潔的塑料質(zhì)感，才是這種風(fēng)格的精髓。在這種風(fēng)格里，你無(wú)法找到類似于“雜點(diǎn)”，“粗糙感”類似的名詞。

新擬物風(fēng)格元素

總體來(lái)說(shuō)，這是對(duì)前代超逼真的擬物風(fēng)格+扁平風(fēng)格的一次結(jié)合。很多擬物元素都做了最大化的精簡(jiǎn)，同時(shí)又兼具立體感，比如陰影，及微小的漸變。

新擬物風(fēng)格特征

顏色：新擬物風(fēng)格大多數(shù)使用淺色，其實(shí)淺色系設(shè)計(jì)我們總會(huì)想到Dribbble風(fēng)，是的。現(xiàn)在Dribbble風(fēng)已經(jīng)讓人膩味，于是設(shè)計(jì)師考慮變換顏色，將純白中加入一點(diǎn)點(diǎn)其他顏色，比如灰色，米色，漸變，當(dāng)然這種顏色都是微小的，低飽和度的。

陰影：是的，擬物風(fēng)格怎么可能沒(méi)有陰影及高光。新擬物風(fēng)格嘗試在純色界面中凸顯元素的凸起和凹陷感，這個(gè)時(shí)候就會(huì)使用投影，內(nèi)陰影和內(nèi)高光等表現(xiàn)方式。這種方式讓元素呈現(xiàn)立體感的同時(shí)，也更加純粹。并且，幾乎所有的設(shè)計(jì)工具都可以輕松完成這種效果。但是，新擬物的陰影必須足夠的柔和，如果你的設(shè)計(jì)中出現(xiàn)了過(guò)于強(qiáng)烈的陰影，那么這種風(fēng)格可能就不是所謂的“新擬物”了。

新擬物陰影表現(xiàn)

簡(jiǎn)而言之，這是一種在純色背景中營(yíng)造凸起和凹陷感的“純潔的”UI風(fēng)格。

UI設(shè)計(jì)示例

要設(shè)計(jì)新擬物，建議背景色不能為全白或者全黑色，你必須要使用一種中間色調(diào)，比如不同層次的灰色表現(xiàn)。

新擬物顏色灰色調(diào)

從下圖中，我們也可以看出單純的陰影卡片表現(xiàn)和新擬物中的卡片表現(xiàn)有何不同？下圖左側(cè)為新擬物塑造的卡片，右側(cè)為常用的卡片形式。區(qū)別在哪里呢？新擬物是凸起來(lái)的，而常規(guī)的卡片則是浮在背景上的。

新擬物卡片示例

由于新擬物風(fēng)格在顏色上的運(yùn)用規(guī)則，我們可以發(fā)現(xiàn)，這種僅靠陰影和高光支撐起來(lái)的風(fēng)格，區(qū)塊之間的對(duì)比度并不是很高。我們整體感覺(jué)畫(huà)面會(huì)非常素。要避免這種情況，只能在區(qū)塊中的內(nèi)容上下功夫，將區(qū)塊內(nèi)容做到盡可能的強(qiáng)對(duì)比，同時(shí)在不同的交互狀態(tài)中作出較大的差異化。

新擬物對(duì)比度

不同的交互狀態(tài)必須有足夠的識(shí)別度是必須的，下圖是正確的表現(xiàn)方式：

UI交互狀態(tài)

而下圖的識(shí)別度則過(guò)低：

UI交互狀態(tài)對(duì)比

如下圖的智能家居應(yīng)用，開(kāi)關(guān)按鈕，僅僅通過(guò)凹凸感來(lái)表達(dá)開(kāi)啟和關(guān)閉，是否足夠合適呢？用戶是否會(huì)混淆呢？答案顯而易見(jiàn)。

智能家居應(yīng)用開(kāi)關(guān)按鈕

靜電的建議：

對(duì)于新擬物風(fēng)格，我們可以多去了解其趨勢(shì)和進(jìn)化方向。但是目前來(lái)說(shuō)，這種由Dribbble上興起的熱潮只能在更多“實(shí)驗(yàn)性”風(fēng)格作品上大放異彩。其根本原因就是上文提到的非常大的弊端。不少設(shè)計(jì)師說(shuō)：新擬物起始于Dribbble，也會(huì)終結(jié)于Dribbble。這句話也不為過(guò)，因?yàn)椴簧貲ribbble風(fēng)的設(shè)計(jì)僅僅在設(shè)計(jì)師圈子中流行，并沒(méi)有很好地運(yùn)用到商業(yè)設(shè)計(jì)中去，這是個(gè)很大的問(wèn)題。

如果你一定要使用新擬物，請(qǐng)記住，新擬物需要用良好的內(nèi)容+可識(shí)別性的顏色去撐起來(lái)整個(gè)框架。但個(gè)人感覺(jué)，這是一種適合于展示，并不適合實(shí)際使用，或者實(shí)際使用場(chǎng)景很受限的設(shè)計(jì)風(fēng)格。

如果說(shuō)無(wú)邊框設(shè)計(jì)和單純使用排版來(lái)創(chuàng)造UI是可以被用戶接受的話，目前這種新擬物風(fēng)格在用戶可用性和友好程度上并不高，我們僅僅把他們當(dāng)做實(shí)驗(yàn)性風(fēng)格去嘗試就好。也許某一天，新擬物風(fēng)可以在設(shè)計(jì)師的不斷嘗試中獲得更好的體驗(yàn)和視覺(jué)兼顧。

對(duì)于現(xiàn)階段商業(yè)設(shè)計(jì)師來(lái)說(shuō)，我們可以從輕擬物風(fēng)格上獲取靈感，逐漸的，微小的運(yùn)用到現(xiàn)在的UI風(fēng)格中，形成屬于自己獨(dú)特風(fēng)格的作品，而不是照搬全抄的使用，這無(wú)疑是更明智的選擇。

關(guān)于如何設(shè)計(jì)新擬物風(fēng)格，靜電會(huì)在《靜電的UI設(shè)計(jì)教室》課程中詳細(xì)講解。有興趣的小伙伴可以下滑頁(yè)面了解課程詳情咨詢報(bào)名。

想要了解更多關(guān)于新擬物風(fēng)格的內(nèi)容嗎？點(diǎn)擊咨詢火星時(shí)代教育，探尋UI設(shè)計(jì)的更多樂(lè)趣！

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定