Neumorphism هو المظهر الذي يبدو فيه الزر أو البطاقة وكأنها مضغوطة خارج الصفحة نفسها، مثل شكل مصبوب من البلاستيك الناعم. لا يوجد حدود، ولا لون تعبئة يختلف عن الخلفية، فقط تسليط الضوء شاحب على جانب واحد وظل ناعم على الجانب الآخر. يتم تصويره بشكل جميل في نماذج التصميم. في الواجهة الحقيقية، من السهل أن تخطئ بطريقتين: يختفي التأثير، أو يصبح من الصعب رؤية عناصر التحكم.
ترجع كلتا المشكلتين إلى قدر صغير من العمليات الحسابية حول الألوان والظلال. يشرح هذا الدليل كيفية بناء تأثير واجهة المستخدم الناعمة من اثنين box-shadow الطبقات، وكيفية اشتقاق الظلال الفاتحة والداكنة من لون سطح واحد، وما تتغير الأشكال المسطحة والمقعرة والمحدبة والمضغوطة، وكيفية الحفاظ على واجهة جديدة قابلة للاستخدام بموجب قواعد التباين WCAG. ال مولد CSS Neorphormism ينتج كل التعليمات البرمجية أدناه مع معاينة مباشرة.
ليرة تركية؛DR: يحتوي العنصر الجديد على نفس لون خلفية الصفحة وظلال صندوقية: لون أغمق للإزاحة لأسفل ويمينًا، وآخر أفتح للإزاحة لأعلى ويسارًا. استخدام الكلمة الأساسية الداخلية في كليهما يجعل العنصر يبدو مضغوطًا. يستمد مولد CSS Neumorphism كلا اللونين الظليين من لون سطحك، مع أشرطة تمرير للمسافة (2 إلى 50 بكسل)، والضبابية (0 إلى 100 بكسل)، والكثافة (2 إلى 40%) ونصف القطر (0 إلى 80 بكسل)، بالإضافة إلى الأشكال المسطحة والمقعرة والمحدبة والمضغوطة. يعطي سطح الضوء الافتراضي
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. تصل هذه الظلال إلى حوالي 1.5:1 فقط من التباين مع السطح، أقل بكثير من 3:1 التي يطلبها WCAG بشأن حدود التحكم، لذلك تحتاج العناصر التفاعلية إلى حدود مرئية أو حالة تركيز. إنه من جانب العميل، مجاني، بدون تسجيل.
ما هو Neumorphism في تصميم واجهة المستخدم؟
Neumorphism، وتسمى أيضًا واجهة المستخدم الناعمة، هي نمط مرئي تظهر فيه عناصر الواجهة مبثوقة من خلفيتها أو مضغوطة عليها باستخدام ظلال فاتحة وداكنة مقترنة بدلاً من الحدود أو الحشوات المتناقضة. يمزج الاسم "؛ جديد وحاصل؛ و"؛skeuomorphism"؛ النمط القديم الذي يقلد المواد الفيزيائية. يقلد Neumorphism مادة واحدة، وسطحًا واحدًا مستمرًا، ويعتمد على مصدر ضوء متخيل في أعلى اليسار.
أصبح هذا النمط شائعًا في مواقع عرض التصميم في عام 2020 تقريبًا. وهو مناسب تمامًا للألواح المزخرفة ولوحات المعلومات التي يتم عرضها على شاشات جيدة ورسومات الأبطال لمرة واحدة. إنه غير مناسب للأشكال الكثيفة وأي شيء يستخدم في الهواء الطلق وأي تحكم يجب على المستخدم العثور عليه بسرعة، للأسباب التي يغطيها قسم إمكانية الوصول.
كيف يعمل التأثير النيومورفي في CSS؟
يحتاج التأثير إلى ثلاثة أشياء: لون الخلفية على العنصر الذي يطابق الصفحة، ونصف قطر الحدود، وظلين مصبوبين في اتجاهين متعاكسين. CSS box-shadow تقبل الخاصية قائمة ظلال مفصولة بفواصل، ولكل منها إزاحة x، وإزاحة y، ونصف قطر التمويه، واللون، كما هو موثق في MDN'؛s مرجع الظل المربع والمحددة في خلفيات وحدود CSS المستوى 3.
فيما يلي مخرجات المولد '؛s الإعداد المسبق للضوء الافتراضي:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
اقرأ قائمة الظل من اليسار إلى اليمين. يتم إزاحة الظل الأول بمقدار 12 بكسل لليمين و12 بكسل للأسفل، غير واضح على 24 بكسل، باللون الرمادي الأغمق من السطح: هذا هو الظل الموجود على الجانب بعيدًا عن الضوء. يتم إزاحة الثاني بمقدار 12 بكسل لليسار و12 لأعلى بلون أفتح من السطح: التمييز على الجانب المواجه للضوء. لأن خلفية العنصر '؛ هي نفسها #e0e0e0 كالصفحة، لا توجد حافة مرئية. الشكل موجود فقط كحدود حيث يلتقي الظلان.
لماذا لا يظهر تأثير Neumorphism الخاص بي؟
السبب الأكثر شيوعًا هو عدم التطابق بين خلفية العنصر '؛ وكل ما يقف وراءه. إذا كانت الصفحة بيضاء والبطاقة كذلك #e0e0e0، ترى بطاقة رمادية ذات ظل، وليس قذفًا ناعمًا. قم بتعيين الخلفية الأصلية '؛s على نفس لون العنصر. تقوم لوحة معاينة المولد '؛s بذلك تلقائيًا، ولهذا السبب تبدو موجودة بشكل صحيح وخاطئ عند لصقها على صفحة بيضاء.
السبب الثاني هو لون مميز لا يمكن رؤيته. على سطح خفيف جدًا "؛light"؛ قد يكون الظل أبيضًا نقيًا بالفعل، وعلى صفحة بيضاء نقية يكون الظل الأبيض غير مرئي. ولهذا السبب أيضًا لا يتم إجراء الشكل الجديد أبدًا #ffffff.
كيف يتم حساب ألوان الظل الفاتحة والداكنة؟
يقوم المولد بإزاحة كل قناة حمراء وخضراء وزرقاء من لون السطح بنفس المقدار: نسبة الشدة 255. يضيف الظل الفاتح تلك الكمية ويطرحها الظل الداكن، ويتم تثبيت كل قناة على النطاق من 0 إلى 255 و مدور.
فيما يلي حساب سطح الضوء الافتراضي المحدد مسبقًا #e0e0e0 (224، 224، 224) بكثافة 15%:
- مبلغ التحول: 15% من 255 = 38.25.
- الظل الداكن: 224 - 38.25 = 185.75، مقربًا إلى 186، وهو سداسي
ba. نتيجة:#bababa. - الظل الخفيف: 224 + 38.25 = 262.25، مثبت على 255، سداسي عشري
ff. نتيجة:#ffffff.
الخطوة 3 تظهر حدًا يستحق المعرفة. على #e0e0e0 يصل التمييز إلى اللون الأبيض النقي بمجرد مرور الشدة (255 - 224) /255 = 12.2%. أي شدة أعلى تجعل الظل أغمق دون جعل التمييز أكثر سطوعًا، وبالتالي يصبح التأثير غير متوازن. على الأسطح الفاتحة، حافظ على الشدة بالقرب من نقطة التثبيت تلك، أو اختر سطحًا أغمق قليلاً حتى يكون التمييز متاحًا.
نفس القاعدة تعطي الإعدادات المسبقة الأخرى:
| تعيين مسبق | سطح | المسافة / طمس | شدة | الظل الداكن | ظل خفيف |
|---|---|---|---|---|---|
| ضوء | #e0e0e0 |
12/24 بكسل | 15% | #bababa |
#ffffff |
| بطاقة | #f0f0f3 |
10 / 20 بكسل | 12% | #d1d1d4 |
#ffffff |
| مظلم | #2d2f34 |
12/24 بكسل | 12% | #0e1015 |
#4c4e53 |
| مضغوط | #e0e0e0 |
12/24 بكسل | 15% | #bababa |
#ffffff |
| محدب | #e0e0e0 |
12/24 بكسل | 15% | #bababa |
#ffffff |
في الإعداد المسبق المظلم، طرح 30.6 من كل قناة (45، 47، 52) يعطي (14، 16، 21)، أو #0e1015، وإضافته يعطي (76، 78، 83)، أو #4c4e53. نظرًا لأن الإزاحة متساوية عبر القنوات، فإن اللون الأزرق الطفيف للسطح يحمل كلا الظلال، لذلك لا تتحول البطاقة ذات الشكل الجديد الداكن إلى اللون الرمادي المحايد المسطح.
ماذا تتغير الأشكال الأربعة؟
يتحكم الشكل في ملء خلفية العنصر '؛ وما إذا كانت الظلال موجودة خارجه أم بداخله. المسافة والضبابية ونصف القطر تتصرف بنفس الطريقة بالنسبة للأربعة.
| شكل | خلفية | الظلال | يبدو مثل |
|---|---|---|---|
| شقة | لون السطح الصلب | الخارجي | هضبة مرتفعة |
| محدب | linear-gradient(145deg, light, dark) |
الخارجي | قبة مرتفعة، مضاءة من أعلى اليسار |
| مقعر | linear-gradient(145deg, dark, light) |
الخارجي | طبق مرتفع ينحني إلى الداخل |
| مضغوط | لون السطح الصلب | كلاهما inset |
تم دفع جوفاء إلى الصفحة |
ينتج الإعداد المسبق المضغوط:
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
مع inset، يتم رسم الظلال داخل صندوق الحشو '؛s، بحيث يظهر الظل الداكن على طول الحافة الداخلية العلوية اليسرى والإبراز على طول أسفل اليمين. وهذا يعكس إشارة الإضاءة ويقرأ على أنه انخفاض. إنه الطبيعي "؛ نشط "؛ أو "؛on"؛ حالة للتبديل الذي تكون حالة الراحة فيه مسطحة.
يستخدم الإعداد المسبق المحدب الظلال الفاتحة والداكنة الكاملة كتوقفات متدرجة linear-gradient(145deg, #ffffff, #bababa)، وهو منحنى قوي إلى حد ما بكثافة 15%. للحصول على قبة أكثر دقة، قلل من الشدة؛ مما يخفف التدرج والظلال معًا، حيث أن كلاهما يأتي من نفس اللونين.
كيف تتفاعل المسافة والطمس ونصف القطر؟
أشرطة التمرير مستقلة، لكن المظهر يعتمد على نسبها.
- مسافة (2 إلى 50 بكسل) يحدد مدى إزاحة كل ظل على كلا المحورين. فهو يتحكم في الارتفاع الظاهري: المسافات الأكبر تجعل العنصر يطفو أعلى فوق الصفحة.
- طمس (0 إلى 100 بكسل) يحدد مدى نعومة حواف الظل. يعطي التمويه الذي يبلغ ضعف المسافة تقريبًا، كما هو الحال في كل إعداد مسبق، مظهرًا وسادة مميزًا. يؤدي التمويه الذي يساوي المسافة أو أقل منها إلى إنتاج ظلال ذات حواف صلبة تبدو أشبه بالقاطع.
- نصف القطر (0 إلى 80 بكسل) يدور حول الزوايا. تستخدم واجهة المستخدم الناعمة دائمًا تقريبًا التقريب السخي؛ تبدو الزوايا المربعة ذات الظلال الناعمة وكأنها خطأ في العرض.
- شدة (2 إلى 40%) يحدد مدى تحرك الظلال من لون السطح.
نسبة البداية العملية هي التمويه = مسافة 2x، نصف القطر = مسافة 2x، الشدة بالقرب من نقطة التثبيت لسطحك. بالنسبة للعناصر الصغيرة مثل زر أيقونة 40 بكسل، قم بتقليص المسافة إلى 4 إلى 6 بكسل؛ إزاحة 12 بكسل على زر 40 بكسل تجعل الظل أكبر من عنصر التحكم.
هل يمكن الوصول إلى الشكل الجديد؟
ليس افتراضيا. يتم تعريف حافة التحكم '؛s بواسطة ظلال تختلف عن السطح بنسبة قليلة فقط في النصوع، وهذا يفشل في متطلبات WCAG للحدود المرئية للمكونات التفاعلية.
WCAG 2.2 معيار النجاح 1.4.11، التباين غير النصي، يتطلب أن تكون المعلومات المرئية اللازمة لتحديد مكون واجهة المستخدم وحالاته نسبة تباين لا تقل عن 3:1 مقابل الألوان المجاورة. تستخدم نسبة التباين صيغة النصوع النسبي المحددة في WCAG 2.2. العمل من خلال الإعداد المسبق الافتراضي:
| زوج | النصوع النسبي | نسبة التباين | يلتقي 3:1؟ |
|---|---|---|---|
الظل الداكن #bababa مقابل السطح #e0e0e0 |
0.491 مقابل 0.745 | حوالي 1.47:1 | لا |
ظل خفيف #ffffff مقابل السطح #e0e0e0 |
1.000 مقابل 0.745 | حوالي 1.32:1 | لا |
حدود #7f7f7f مقابل السطح #e0e0e0 |
0.212 مقابل 0.745 | حوالي 3.03:1 | فقط |
حدود #767676 مقابل السطح #e0e0e0 |
0.181 مقابل 0.745 | حوالي 3.44:1 | نعم، مع الهامش |
نص #333333 مقابل السطح #e0e0e0 |
0.033 مقابل 0.745 | حوالي 9.6:1 | نعم (يمرر أيضًا 4.5:1 للنص) |
وأشكال الظل هذه هي أفضل حالة. يؤدي التمويه إلى نشر لون الظل، لذا فإن معظم الظل المرئي يكون أفتح من #bababa. لا يساعد رفع الشدة كثيرًا على سطح الضوء، لأن التمييز مثبت بالفعل باللون الأبيض.
للتحقق من الألوان الخاصة بك، و مدقق تباين الألوان يحسب النسبة لأي زوج، و دليل للتحقق من تباين الألوان يشرح الصيغة بالتفصيل.
كيفية الحفاظ على المظهر واجتياز قواعد التباين
ليس عليك التخلي عن الأسلوب. عليك أن تتوقف عن الاعتماد عليه في أي شيء يجب على المستخدم إدراكه.
- استخدم واجهة المستخدم الناعمة للحاويات، وليس لعناصر التحكم. يمكن أن تكون البطاقات والألواح والآبار المزخرفة ذات شكل جديد بحت. المعيار 1.4.11 يدور حول المكونات التفاعلية والرسومات ذات المغزى، لذا فإن الحاوية التي يحدد محتواها نفسها تحمل مخاطر أقل بكثير من الزر الذي تكون حافته هي العلامة الوحيدة الموجودة.
- امنح كل عنصر تفاعلي إشارة حقيقية. حد 1 أو 2 بكسل بلون 3:1 أو أفضل، أو رمز متباين، أو تسمية نصية.
- جعل التركيز واضحا. أضف أ
:focus-visibleالخطوط العريضة بلون عالي التباين. الظلال الناعمة ليست مؤشر التركيز. - لا تشير إلى الحالة بالعمق وحده. إذا تم الضغط على يعني "؛on"؛ قم أيضًا بتغيير رمز أو تسمية أو لون.
- احترام إعدادات المستخدم. ال يفضل استعلام وسائط التباين يتيح لك إضافة حدود أو إسقاط التأثير عندما يطلب المستخدم المزيد من التباين.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
كيفية توليد الشكل الجديد CSS، خطوة بخطوة
- افتح ال مولد نيومورفيسم واختر إعدادًا مسبقًا كنقطة بداية: خفيف أو بطاقة أو داكن أو مضغوط أو محدب.
- اضبط لون السطح باستخدام منتقي الألوان ليتناسب مع الخلفية التي سيجلس عليها العنصر.
- اضبط المسافة والطمس حسب الارتفاع والنعومة، ثم الشدة حسب التباين، وشاهد المعاينة المباشرة.
- اختر الشكل: مسطح، مقعر، محدب أو مضغوط.
- اضبط نصف القطر ليناسب حجم العنصر.
- انقر فوق نسخ CSS والصق الإعلانات الثلاثة في قاعدتك. تذكر أن تعطي الأصل نفس لون الخلفية.
كيف تدعم المواضيع الفاتحة والداكنة؟
قم بإنشاء مجموعة واحدة من القيم لكل سمة وقم بتبديلها بخصائص مخصصة. توفر الإعدادات المسبقة للضوء والظلام أعلاه زوجًا عاملاً
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
الشكل الجديد الداكن له مرآة لمشكلة سطح الضوء: الظل يلتصق باللون الأسود، والإبراز يحمل التأثير. تحقق من التباين بشكل منفصل لكل موضوع.
مقارنة Neumorphism وglassmorphism والظلال البسيطة
تعد واجهة المستخدم الناعمة إحدى الطرق العديدة لإظهار العمق، ولكل منها تكاليف مختلفة.
| أسلوب | Css الأساسية | إشارة العمق | خطر التباين | جيد ل |
|---|---|---|---|---|
| نيومورفيسم | اثنان متعارضان box-shadow طبقات، مطابقة الخلفية |
البثق من الصفحة | عالي | لوحات زخرفية، لوحات عدادات العرض |
| التشكل الزجاجي | backdrop-filter: blur() وملء شفاف |
طبقة متجمدة فوق المحتوى | متوسطة، تعتمد على ما هو وراء | تراكبات، بطاقات فوق الصور |
| ارتفاع نمط المواد | واحد أو اثنين للأسفل box-shadow طبقات |
البطاقة العائمة فوق الصفحة | منخفض | واجهات عامة |
| شقة مع الحدود | border وملء الألوان |
لا أحد | الأدنى | النماذج والبيانات الكثيفة والعمل الأول لإمكانية الوصول |
ال مولد التشكل الزجاجي يبني نمط الزجاج المصنفر، و دليل مولد الظل الصندوقي يغطي ظلال الارتفاع المفردة والطبقات. للنص المتوهج أو المنقوش بدلاً من المربعات، مولد الظل النصي يطبق فكرة مماثلة على النوع. كلهم مدرجون في محور أدوات CSS.
هل المولد خاص؟
نعم. يتم إنشاء المعاينة وCSS في متصفحك باستخدام JavaScript، ولا يتم تحميل أو تخزين أي شيء، وتستمر الصفحة في العمل دون اتصال بالإنترنت بمجرد تحميلها. يتم احتساب نسخ CSS ضمن حد الاستخدام اليومي، وتظهر رسالة إذا تم الوصول إلى هذا الحد.
