2020-2-28 資深UI設(shè)計者
新擬態(tài)設(shè)計(Neumorphism UI)是 2020 年 UI 設(shè)計的主要趨勢之一,你可以在 dribbble 上看到很多作品,新擬態(tài)是基于New+Skeuomorphism 英文單詞的拼寫。它是一種使用對象陰影的模糊、角度和強(qiáng)度來突顯出對象的樣式。由于其柔和的陰影和整體的外觀,使該設(shè)計看起來更加的逼真、未來、現(xiàn)代、真實、有吸引力。
但是老實說,這不是最實用的設(shè)計。嘗試設(shè)計和上線以「新擬態(tài)」為整體調(diào)性的產(chǎn)品,很有可能讓所有人失望,包括你們的同事、用戶和可訪問性用戶(目前有 5700 萬美國人患有某種程度的殘疾。在上網(wǎng)的用戶中,有 54% 的成年人是殘障人士,來源于:W3.org)。
根據(jù) W3 的說法,web 和移動端的可訪問性包括影響訪問的所有障礙,包含:
僅新擬態(tài)而言并不支持:視覺、認(rèn)知、物理方面設(shè)計。
讓我們深入地討論為什么新擬態(tài) UI 和 可訪問性是無法共存的。
免責(zé)聲明:我不是可訪問性和新擬態(tài)方面的設(shè)計專家,本文旨在分享一些有關(guān)新擬態(tài)的一些想法。下面使用的 dribbble 作品僅供參考,以突出我在此問題上的觀點。沒有一絲評價、嘲笑、不尊重以下設(shè)計師的意思,如果你的設(shè)計在下面展示了,并且你希望我盡快刪除,請及時聯(lián)系我。
新擬態(tài)對視力低下、失明、色盲的用戶來說,可辨識性較差。
△ https://dribbble.com/shots/10006635-Neumorphic-Rebound-of-Nomad-iOS-UI-Kit
當(dāng)設(shè)計中帶有重要 CTA 按鈕時,你經(jīng)??紤]并注意使它重點突出,并且在頁面上容易被識別閱讀。但是,當(dāng)使用新擬態(tài)的設(shè)計風(fēng)格時,沒有諸如對比度之類的東西,因為按鈕的材質(zhì)與背景是相同的,唯一將它們分開的是角度和各種柔和的陰影。
△ https://dribbble.com/shots/9393020-Mi-Remote-Control-Mobile-app
根據(jù) W3.org 關(guān)于移動端可訪問性的描述:
與臺式機(jī)/筆記本電腦設(shè)備相比,移動設(shè)備更可能用于各種環(huán)境中,包括戶外。在戶外,陽光或其他強(qiáng)光源下更可能產(chǎn)生眩光,這種情況提高了對所有用戶使用良好對比度的重要性,并可能加劇視力低下的用戶在移動設(shè)備上訪問對比度差的內(nèi)容的挑戰(zhàn)性。
與對比度問題相關(guān)的 WCAG 2.0 成功標(biāo)準(zhǔn)是(原文地址:https://w3c.github.io/WCAG21-zh/#contrast-minimum):
新擬態(tài)讓用戶思考。
△ https://dribbble.com/shots/9592062-Neumorphism-Smart-Home
一般來說,帶有陰影的元素通常比沒有陰影的視覺上更加突出。但是,使用新擬態(tài)設(shè)計時,大多數(shù)元素都會漂浮并脫穎而出,在一個屏幕上互相競爭,用戶很難輕易理解頁面中的視覺層次和信息層級關(guān)系,這會導(dǎo)致界面缺少適當(dāng)?shù)慕裹c,從而在眼動追蹤中造成混亂。
界面上缺少信息層級關(guān)系的結(jié)果,會對用戶的決策過程以及他們的思考過程產(chǎn)生重大的影響。因此,如存在多個可操作的內(nèi)容,但是信息層級,重點不突出,這會讓用戶在當(dāng)前的流程或頁面上產(chǎn)生困惑,很難理解正在發(fā)生的事情。從而可能導(dǎo)致錯誤的判斷和誤操作,好的 UI/UX 不需要讓用戶思考。
認(rèn)知和學(xué)習(xí)障礙影響人們處理信息的方式。例如,它們可以影響人們的感知、記憶、語言、注意力、解決問題和理解力。類別和條件的術(shù)語各不相同,包括智力殘疾、發(fā)育障礙、注意缺陷多動障礙(ADHD)、自閉癥、癡呆癥、誦讀障礙等。
△ https://dribbble.com/shots/9916835-Neumorphism-Smart-Home-app
新擬態(tài)會造成混亂:
- 我可以點擊嗎?
- 選擇了什么?
- 不是什么?
- 這是可點擊的嗎?
- 還是不是?
對象的階段由內(nèi)部/外部陰影決定和標(biāo)識。由于新擬態(tài)圍繞著各種陰影色調(diào)和角度變化,因此用戶不禁要問,可點擊與不可點擊之間的界限在哪里。
△ https://dribbble.com/shots/9938821-Smart-home-app
每個使用新擬態(tài)的產(chǎn)品都可以根據(jù)其功能和要求有自己的 UI 設(shè)計規(guī)范,但是由于陰影、角度和浮動水平的不同,由于缺乏一致性,迷失了方向的可操作項,「新擬態(tài)」可能會給用戶帶來麻煩,最終為殘疾用戶造成身體障礙。
觸發(fā)可操作性的元素應(yīng)該足夠清晰,以便與不可操作的元素(內(nèi)容、狀態(tài)信息等)明確區(qū)分。提供元素可操作的明確指示與具有可操作元素(如按鈕或鏈接)的 web 和本機(jī)移動應(yīng)用程序相關(guān),尤其是在交互模式中,可操作元素通常以視覺方式檢測(觸摸和鼠標(biāo)使用)。交互元素還必須由依賴于編程確定的可訪問名稱的用戶(例如屏幕閱讀器用戶)檢測到。
△ https://dribbble.com/shots/9838619-Music-Player-Neumorphism-Rebound-shot
從 dribbble 開始的新擬態(tài)的設(shè)計趨勢,應(yīng)該要在追隨前認(rèn)真地思考,是否適用?這是一個問題。
設(shè)計師可以自由地實踐和探索他們傾向于哪種趨勢或風(fēng)格……我只是在這里展示和解釋為什么「新擬態(tài)」和「可訪問性」不能并存。我也不是來阻止你練習(xí)你的設(shè)計技巧(如果有的話,我鼓勵每個人練習(xí)他們的技巧和探索他們的想法,但希望,考慮它可能對殘疾用戶的影響以及特殊場景下的實用性的思考)。
不過,我之前在另一篇文章中說過,我會再說一次:現(xiàn)在是 2020 年,作為一個設(shè)計師,我認(rèn)為我們必須重新評估我們在設(shè)計實際產(chǎn)品時的設(shè)計方式。我們不能為所有人設(shè)計,但要排除殘疾用戶。在可訪問性和使所有數(shù)字產(chǎn)品都可訪問方面,我們還有很長的路要走,但是它必須要在某一個地方開始。例如,它可以從我們把新擬態(tài)拋在腦后開始,而從那時起專注于開發(fā)一種在美學(xué)上令人愉悅但又實用、現(xiàn)實的設(shè)計。謝謝。
文字來源:優(yōu)設(shè) 作者:UX Talk
藍(lán)藍(lán)設(shè)計的小編 http://yvirxh.cn