編輯導(dǎo)讀：新擬態(tài)風(fēng)格與扁平化風(fēng)格完全相反，可以理解成“加高光、加漸變、加陰影”，其原理是為界面的UI元素賦予真實(shí)感。本文圍繞新擬態(tài)設(shè)計(jì)進(jìn)行了分析，希望對(duì)你有幫助。

一、設(shè)計(jì)師Alexander Plyuto發(fā)布的作品

在該風(fēng)格之前，產(chǎn)品普遍是扁平化風(fēng)格，扁平化設(shè)計(jì)意味著將界面中所有元素做扁平處理，其特征是：去高光、去漸變、去陰影。

二、什么是新擬態(tài)

首先了解“擬態(tài)化”，它用于描述界面對(duì)象，反映了現(xiàn)實(shí)世界中的對(duì)象對(duì)應(yīng)到數(shù)字界面中的顯示方式。此設(shè)計(jì)概念利用了用戶對(duì)實(shí)際對(duì)象現(xiàn)有認(rèn)知和思維，該設(shè)計(jì)風(fēng)格讓用戶無需花費(fèi)額外時(shí)間學(xué)習(xí)新的界面，當(dāng)UI元素與顯示世界類似物結(jié)合時(shí)，可以減輕用戶的認(rèn)知負(fù)擔(dān)。

新擬態(tài)風(fēng)格與扁平化風(fēng)格完全相反，可以理解成“加高光、加漸變、加陰影”，其原理是為界面的UI元素賦予真實(shí)感。原生名詞有幾種叫法：Neumorphism/soft UI，翻譯過來就是“新擬態(tài)”/軟UI，是一種具有流線感的設(shè)計(jì)風(fēng)格，介于扁平與投影之間。

三、新擬態(tài)特點(diǎn)

?圖片源自Dribble @Alexander Plyuto

新擬態(tài)風(fēng)格特征：

①投影和高光的明暗形成了立體的“浮雕”效果，元素呈現(xiàn)有厚度感但又柔和的邊緣，無紋理的擬物風(fēng)。

②克制的色彩使用；

③整個(gè)界面中的元素只有一個(gè)光源照射。作者預(yù)設(shè)了一個(gè)光源，靠近光源的部分更亮，反之更暗。圖片中作品的光源固定位置是從左上角向右下照射，即受光面在左上，故元素的左上 和 右下投影呈對(duì)比；

④元件與背景采用相近色。無論界面是淺色模式還是暗色模式，各個(gè)模式下的顏色對(duì)比度很低，整體視覺上非常柔和、甚至是模糊，易引起視覺疲勞；

⑤視覺上按鈕狀態(tài)采用“選中狀態(tài)下按鈕是凹進(jìn)去的，未選中時(shí)是凸出來的”方式。對(duì)于選中狀態(tài)，圖片中作品的元素做了內(nèi)陰影的處理方式，同時(shí)，選中狀態(tài)的元素統(tǒng)一采用與未選中狀態(tài)相反的光源。

常見樣式較簡(jiǎn)單，有時(shí)也會(huì)采用漸變手法表現(xiàn)元件質(zhì)感。此處筆者通過PPT制作了簡(jiǎn)單的效果圖。

常見樣式：

添加漸變的樣式：

Photoshop也可以實(shí)現(xiàn)該效果，雙擊圖層，對(duì)“投影”進(jìn)行設(shè)置：

四、新擬態(tài)的局限性

新擬態(tài)意味著界面與實(shí)際事物的類似，但需要謹(jǐn)慎運(yùn)用。新擬態(tài)風(fēng)格的柔和特征也有很明顯的缺點(diǎn)，即弱清晰度。故在設(shè)計(jì)時(shí)為了讓層級(jí)在視覺上更清晰，會(huì)增加一些漸變描邊等處理方式。

以此我們延伸一下該風(fēng)格的局限性：

①弱清晰度；新擬態(tài)對(duì)視力低下、失明、色盲的用戶來說，可辨識(shí)性較 差。而產(chǎn)品設(shè)計(jì)需要尊重?zé)o障礙設(shè)計(jì)。

《世界現(xiàn)代設(shè)計(jì)史》引用

無障礙設(shè)計(jì)始于1974年，是聯(lián)合國(guó)組織提出的設(shè)計(jì)新主張，強(qiáng)調(diào)的是在科學(xué)技術(shù)高度發(fā)展的社會(huì)，一切有關(guān)人類衣食住行的公共空間環(huán)境以及各類建筑設(shè)施、設(shè)備的規(guī)劃設(shè)計(jì)，都必須充分考慮具有不同程度身體上缺陷的人和正?；顒?dòng)能力衰退者 （如老人）群眾的使用需求。設(shè)計(jì)能滿足這些人需求的服務(wù)裝置，營(yíng)造一個(gè)充滿愛與關(guān)懷，切實(shí)保障人類安全、方便、舒適的現(xiàn)代生活環(huán)境。設(shè)計(jì)上考慮殘障群體的需求，讓他們更平等地使用互聯(lián)網(wǎng)，要求設(shè)計(jì)師的同理心和責(zé)任感。無障礙設(shè)計(jì)原則：可感知、可操作、可理解、全面、可靠。

②尺度把握相比扁平風(fēng)格更難。

例如 元件投影的輕重把控，太輕的投影不利于用戶快速找到目標(biāo)、太重的投影則容易讓界面顯得很臟；如果一定要用新擬態(tài)設(shè)計(jì)產(chǎn)品，則需要將元素通過增加漸變描邊的方式提高識(shí)別度，便于信息傳遞；

③不夠明了的視覺層級(jí)關(guān)系。新擬態(tài)風(fēng)格的元素具有漂浮、脫穎而出的特點(diǎn)，元素會(huì)在一個(gè)界面空間競(jìng)爭(zhēng)，對(duì)于用戶而言很難理解界面中的視覺層次以及信息層級(jí)關(guān)系，造成頁(yè)面混亂。

當(dāng)頁(yè)面缺少信息層級(jí)關(guān)系時(shí)，會(huì)影響到用戶的決策過程，如果同一個(gè)頁(yè)面出現(xiàn)多個(gè)可操作性內(nèi)容，但信息層級(jí)關(guān)系模糊，容易使用戶在當(dāng)前頁(yè)面/流程中的某一步產(chǎn)生困惑，最終可能導(dǎo)致錯(cuò)誤操作；

④新擬態(tài)具有一定的隱喻性。即 它會(huì)引導(dǎo)用戶點(diǎn)擊或者會(huì)讓人認(rèn)為這是一個(gè)功能按鈕。

例如 一款產(chǎn)品在界面中僅有一個(gè)新擬態(tài)卡片展現(xiàn)，那么用戶容易被引導(dǎo)對(duì)卡片進(jìn)行點(diǎn)擊這一交互行為。但也許該卡片僅僅用于展示卡片內(nèi)容，此時(shí)新擬態(tài)卡片的設(shè)計(jì)問題就顯露出來了。
工具推薦:https://neumorphism.io/#55b9f3

五、新擬態(tài)的適用性

前面講述了新擬態(tài)風(fēng)格的局限性，接下來了解下該風(fēng)格的適用性。沒錯(cuò)，雖然它的缺陷多且明顯，但也有適用的產(chǎn)品。例如 目前市面上該風(fēng)格多用于工具類產(chǎn)品（工具型產(chǎn)品具有“場(chǎng)景固定、需求明確、產(chǎn)品黏性相對(duì)較低”的特點(diǎn)，例如 筆記類、天氣類、時(shí)鐘類、遙控類），工具類產(chǎn)品相對(duì)固定，也無需過多的運(yùn)營(yíng)內(nèi)容，更容易把控，因此視覺風(fēng)格上的發(fā)揮空間更大；

新擬態(tài)風(fēng)格設(shè)計(jì)需要注意：復(fù)雜頁(yè)面或者復(fù)雜控件中，要謹(jǐn)慎使用新擬態(tài)風(fēng)格；混合使用，考慮風(fēng)格兼容問題；新擬態(tài)的隱喻性需要考量，避免用戶誤解；考慮該風(fēng)格對(duì)殘障人士的影響以及在特殊場(chǎng)景下的實(shí)用性。

國(guó)內(nèi)相關(guān)例子：有道云筆記，具體的體驗(yàn)報(bào)告在下一篇文章。

本文由 @產(chǎn)品秘閣 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。