激情六月丁香婷婷|亚洲色图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è)計的新趨勢終于來了？

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

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

新擬物風(fēng)格

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UI設(shè)計示例

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

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

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

新擬物卡片示例

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

新擬物對比度

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

UI交互狀態(tài)

而下圖的識別度則過低：

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

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

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

靜電的建議：

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

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

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

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

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

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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定