شرح جماليات التصميم الحداثي (Neumorphism)

يشهب

إشهار المواقع/تصميم وجرافيكس
فريق الإدارة
مشرف المواقع والتصميم والجرافيكس

معلومات العضو

إنضم
19 مارس 2021
الأوسمة
2
العمر
31
الإقامة
مــ جمهورية ــصـــ العربية ــر
الجنس
ذكر
نشاط يشهب:
202
0
100
  • جماليات التصميم الحداثي (Neumorphism)

جماليات التصميم الحداثي (Neumorphism)


تصميم واجهات الاستخدام تعدى كونه بُعداً جمالياً فقط. و أصبح أحد مقومات نجاح الواجهة المستخدمة متيحاً خيارات مطورة للتحكم، و الشخصنة، و البساطة، و التطبيق.
أحدث صيحة في التصميم 2021 5f339b2c01a1dc611521b36b_neumorphic-1
منذ نهايات عام 2019، ظهر اتجاه جديد في التصميم جذب العالم نحوه.. إنه (*neumorphism) أو كما يطلق عليه أحياناً ( Soft UI design concept) و ترجمتها الحرفية (مبدأ الواجهة الناعمة). و السؤال هنا: ما الذي أعطى هذا الاتجاه كل هذا الزهو و الجاذبية بين المصممين حول العالم؟​

في الدقائق التالية، سنتعرف سوياً على أصل الـ(neumorphism) و أساسياته و مبادئه. و كيف نستفيد منه في تصميم الواجهات.



جذور الـ (NEUMORPHISM)


دعونا نعود إلى البداية منذ 40 سنة. و تحديداً مع اتجاه التصميم الشهير (Skeuomorphic) و الذي تبنته شركة أبل العملاقة في جميع تصميماتها. و هذا الاتجاه في التصميم يعتمد على محاكاه شبه كاملة للأشكال في الواقع من حيث الألوان و التأثيرات و الظلال.. إلخ.
ما بين عام 2000 و 2010، أدركت شركة أبل و كذلك شركة مايكروسوفت وجود اتجاه جديد في التصميم (Flat design) و الذي يُعتبر النقيض من الـ(Skeuomorphic). حيث أنه يقوم على البساطة في التأثيرات و كذلك الألوان. و يهتم بالظلال الخفيفة و الرسوميات المسطحة ثنائية الأبعاد.​


أحدث صيحة في التصميم 2021 5f339b49a8a911518b99b104_4CRsImVBCxuqvlKJ9Y3rmYuEl3oHhPW2lXVAfLuy1XGlSP55tYZHVXKBgODIp0H43reTdaVoeQARHxfv9PAFRatMfb80xp-YXjeOtFHh8rXZ8lEteEZV_CyLblv2j45cdv4kDmj4x8xGvDjPEA
وُلد (التصميم الناعس) أمام أعين المصممين بواسطة (Michal Malewicz) الذي قدم هذا الاتجاه على أنه (Skeuomorphism) العصر الحديث (New-Skeuomorphism). و اختصرها (Jason Kelley) لتكون (Neu-o-morphism). و قد جذب هذا الاتجاه خبراء الواجهات و المصممين بشدة لأنه حقق المعادلة الصعبة التي كان يبحث عنها الجميع. فقد جمع هذا الاتجاه بين بساطة التصاميم المسطحة، و بين واقعية التصاميم ثلاثية الأبعاد. و أشادوا جميعاً بقوته.​

"في الولايات المتحدة الأمريكية، يقضي المستخدم دقيقتين من كل ثلاث دقائق على الانترنت مستخدماً الأجهزة المحمولة (Mobile Platform). و هو ما يحتم علينا أن نهتم بشكل أكبر بتصميم واجهات المحمول أكثر من واجهات الحاسوب. و هنا يظهر السؤال: هل يعطينا (التصميم الناعس) أداة مفيدة في تصميم واجهة مناسبة لأجهزة المحمول؟"

من أجل الإجابة على هذا السؤال، دعونا نقارن بين ما يقدمه (التصميم الناعس) و بين ما تقدمه اتجاهات التصاميم الأخرى المعاصرة.​

ما هي فوائد (التصميم الناعس) مقارنة مع اتجاهات التصميم الأخرى؟

مازال الجدل كبيراً حول حيوية (التصميم الناعس) في الاستخدام على أجهزة الحاسوب و الأجهزة المحمولة. إذا كان موقعك لا يحتوي على واجهة مناسبة للاستخدام من خلال المحمول، فإن فرص نجاحك تقل إلى النصف. حيث أن 85% من مستخدمي الانترنت يفضلون واجهة مناسبة للمحمول. و عدم وجود مثل هذه الواجهة سيجعل فرص الزائر لأن يترك موقعك في الحال تضاعف خمس أضعاف. إن (التصميم الناعس) يوفر لك أرقى تصميم مسطح للأيقونات و الخطوط لإضافة إلى لمسة ثلاثية الأبعاد من خلال الظل و التأثيرات على مكونات الموقع.​
النقاط التالي توضح بالتفصيل كيف يمكنك استخدام (التصميم الناعس) في خلق استايل قوي و جذاب للموقع:

1. إنشاء الواجهة

يتميز (التصميم الناعس) بلون موحد للخلفية و العناصر الموجودة عليها سواء زرار أو بار أو غيرها. و يتم التفريق بين الخلفية و العناصر بالظلال الداخلية و الخارجية لتؤدي الغرض كتدرج لوني. مما يعطي انطباع بالبروز عن سطح الخلفية كجسم ثلاثي الأبعاد (بالمقارنة مع جسم يطفو على الخلفية كما في الـ (Flat Design)). و بهذه الطريقة يستمتع المستخدم بنعومة الألوان و في نفس الوقت يأخذ انطباع الثلاثي الأبعاد.​
أحدث صيحة في التصميم 2021 5f339b49a35a9c30c7349f27_bno26zJZwq36hgFiWu8De57GcVewREdPC68oKgyesJl3EO_9kzHYZP9TvK1WE5Zyh7gsAfJ7IxVVl0Zt_rg47TXiAz_6KNuf6art7RTs0-T5S6V529p0DYff8Kvf2bh8lWEW_vq7lq2Sp-wWuQ
يمكنك بسهولة تطبيق هذا المبدأ على برنامج الفوتوشوب. كما يمكنك استخدام كود CSS للوصول لنفس النتيجة.

2. التجربة
كما ذكرنا في النقطة السابقة، يعتمد (التصميم الناعس) على اللون الواحد بصورة شبه كاملة. لكن يمكنك دائماً إعطاء لون ثاني للأزرار و البارات و غيرها بشرط أن يكون اللون قريب منه و ليس معاكساً له مما يعطي إحساس بأنه ضمن الخلفية و ليس مفصولاً عنها.
في المثال التالي نجد المصمم أعطى الزرار حياة عن طريق لون مختلف عند الضغط على الزر. بشرط أن يكون اللون غير ساطع.​

أحدث صيحة في التصميم 2021 5f339b4acbf7b20bb82e2629_2kgOfAlbCHHjjDlnkfozc__Ub3m3ecSYaFANHo7ivTUZ8OAoohDreB12qvXdDUk5kpLPvVQo4yyFG6rQPB09R8nSo66kl3DntLYOgCE4RSTEFsYv-PVx9K9yWeNejZl7Ocm-Dpp_ePRswGOYJA
أحدث صيحة في التصميم 2021 5f339b4951b51a4b4def905f_f5sgQ-FOanOqJMpKuccVuBuh0ZYAex2BFsZYOtkL1RCMXQ6UQWEe2Gog1LTTm0Wh3jkzmbhiZTWJLvnmMSyiuW_UjeEV_ljXeLmbnSxVZltXTbHglivlTaaCOznl65L0SSacWwMcesytqm7Dww

3. تشغيل واجهة المستخدم

يعطي (التصميم الناعس) انطباع قوي لمستخدم موقعك. إذا كنت تستخدم الألوان المتناسقة و الظلال و الإضاءة بكفاءة خصوصاً على حركة الأزرار و الخيارات و الكروت إلخ. بحيث تعطي تفاعل مع المستخدم عند تصفحه الموقع أو المنتدى. يُعتبر (التصميم الناعس) أحد أقوى المنافسين في هذه النقطة حيث يعطي حرية اختيار ألوان فاتحة أو قاتمة طالما أنك تعرف كيف تضع انطباع الطبقات الثلاثية الأبعاد. و هذا مثال لما يعطيه التصميم من انطباع بالهدوء و الجاذبية في نفس الوقت فقط باستخدام لون واحد مع الأبيض و استخدام الظلال و الإضاءة بذكاء.​

أحدث صيحة في التصميم 2021 5f339b4a3a88d89da479db84_pdDS_PHyKQSu_lyUs5R4KaptXUJHdm3MZ5RWBwI8DA9NsAqKGag464AFcrh3za2MI-ph1GoVQGnhS3B5ano6r74oDdMeUJGSnT1eqbEfidYLdk5i3GUTOVambnTtnNscqA09Ax3hJn83Pglb4g

4. كفاءة عالية في تصميم النماذج المبدئية

إن (التصميم الناعس) يلائم التعريفات المتفق عليها في التصميم. بالتالي فإن (التصميم الناعس) يتيح فرصة قوية للتغيير في تصميم واجهة المستخدم بسهولة و يسر. كما يعطي قابلية للتجريب بسرعة و كفاءة. و هو ما يلائم الاتجاه العام السائد في جعل المواقع صديقة للهواتف النقالة و الأجهزة ذات الشاشات الصغيرة نسبياً.

5. التلاقي بين المستخدم و واجهة الاستخدام

قد يخسر الموقع/ التطبيق أكثر من نصف عملائه إذا فشل التصميم في إيجاد ارتباط بين المستخدم و واجهة الاستخدام. المحك الحقيقي للتصميم هو قدرته على ضمان تفاعل مميز بين المستخدم و واجهة الاستخدام. نجح (التصميم الناعس) في هذا الاختبار عن جدارة حيث استطاع إضفاء لمسة ثلاثية الأبعاد على الموقع أو التطبيق مما أعطى انطباع أن واجهة الاستخدام حقيقية و قريبة منا كما الأدوات التي نستخدمها في حياتنا اليومية. و هو ما يعطي الاحساس بالألفة و التلاقي الذي نتحدث عنه. أبرز الأمثلة على ذلك هو تصميم الآلة الحاسبة الشهير و كذلك تصميم كشاف الإضاءة.

6. سهولة ابتكار تصاميم جديدة

أعتقد أنك تدرك الآن حقيقة أن (التصميم الناعس) أحد أسهل اتجاهات التصميم و أكثرها سرعة في التنفيذ لبساطته. و بالرغم أن هذا الاتجاه لم يتعدى عمره العامين، إلا أنه أثبت نفسه بقوة في الأوساط التقنية بين أهل التصميم. و سوف تجد له مئات الأمثلة و الدروس و التطبيقات على الويب.​



في النهاية، يظهر أمامنا اتجاه جديد في تصميم واجهات المواقع و التطبيقات. هل هو اتجاه دائم؟ هل سيتغير؟ بالتأكيد لا نعرف. لكن (التصميم الناعس) استطاع أن يفرض نفسه بقوة و نعومة كأحد أهم اتجاهات التصميم في المواقع و المنتديات و التطبيقات منذ عام 2019 و حتى اليوم.

و سأقوم تباعاً بإضافة المزيد عن أدوات هذا الاتجاه و الدروس التي ستفيد كل مصمم عربي يريد أن يستخدم (التصميم الناعس). كما أننا نقوم على تجميع فريق تصميم لإنشاء استايلات عربية عالية الجودة لدعم أصحاب المواقع و المنتديات.



* لم أجد ترجمة حرفية لمصطلح (neumorphism). لذا أطلقت عليه (التصميم الناعس)!
 
توقيع يشهب
---[.. الَّلهُمَّـ اجعَلْـ عَمَلَنَا خَالِصًا لِوَجهَكَـ الكَرِيمِـ ..]---
---[.. الَّلهُمَّـ اخْتمـ بالبَـاقيـاتِــ الـصَالِحَاتِــ أعْمَـالَنَا ..]---

أبوعائشة

منتدى الحوار والبحث والفكر
فريق الإدارة
إداري

معلومات العضو

إنضم
26 ديسمبر 2020
المشاركات
11,555
الحلول
8
مستوى التفاعل
7,085
الأوسمة
1
الإقامة
دولة الإمارات العربية المتحدة
الموقع الالكتروني
الجنس
ذكر
شكرا لك وبارك الله فيك والله يعطيك العافية.

بانتظار جديدك المتجدد معنا دائما.

يامرحبابك.​
 
توقيع أبوعائشة

«اللَّهُمَّ اكْفِنِي بحَلالِكَ عَنْ حَرَامِكَ، وَأَغْنِنِي بفَضْلِكَ عَمَّنْ سِوَاكَ»


يشهب

إشهار المواقع/تصميم وجرافيكس
فريق الإدارة
مشرف المواقع والتصميم والجرافيكس

معلومات العضو

إنضم
19 مارس 2021
المشاركات
202
مستوى التفاعل
100
الأوسمة
2
العمر
31
الإقامة
مــ جمهورية ــصـــ العربية ــر
الجنس
ذكر
شكرا لك وبارك الله فيك والله يعطيك العافية.

بانتظار جديدك المتجدد معنا دائما.

يامرحبابك.​
الشكر موصول لك على مرورك و التشجيع.
لك خالص تحياتي و تقديري؛
 
توقيع يشهب
---[.. الَّلهُمَّـ اجعَلْـ عَمَلَنَا خَالِصًا لِوَجهَكَـ الكَرِيمِـ ..]---
---[.. الَّلهُمَّـ اخْتمـ بالبَـاقيـاتِــ الـصَالِحَاتِــ أعْمَـالَنَا ..]---

محمد عمر

مؤسس منتديات المشاغب
فريق الإدارة
مدير منتديات المشاغب

معلومات العضو

إنضم
27 مارس 2021
المشاركات
13,137
الحلول
58
مستوى التفاعل
6,595
الأوسمة
4
العمر
49
الإقامة
ليبيا
الجنس
ذكر
بارك الله فيك اخي العزيز
 
توقيع محمد عمر


منتديات الشارقة سوفت

ahmedqatar

صديق المسيرة
فريق الإدارة
كبار الشخصيات VIP

معلومات العضو

إنضم
21 مارس 2021
المشاركات
1,739
الحلول
13
مستوى التفاعل
917
الأوسمة
3
الإقامة
كوكب الارض
الجنس
ذكر
طرح مميز
 
توقيع ahmedqatar
انهم قوم لا يفقهون و إذا فقهوا لا يعملون و إذا عملوا لا يتقنون و إن اتقنوا فإنهم ميّتون
لقد كانوا سابقا يسجنون الناس لأنهم يسرقون أما الآن فهم يسجنونهم لأنهم يقولون الحقيقة

الموج الصامت

مؤسس منتديات المشاغب
فريق الإدارة
إداري

معلومات العضو

إنضم
13 مارس 2021
المشاركات
9,420
الحلول
15
مستوى التفاعل
5,496
الأوسمة
2
العمر
41
الإقامة
لبنان
الموقع الالكتروني
الجنس
ذكر
اشتقنا لك يا طبيبنا المميز..
 

معلومات العضو

إنضم
20 أغسطس 2021
المشاركات
2,972
الحلول
10
مستوى التفاعل
1,862
الأوسمة
4
الإقامة
من أرض الله
الموقع الالكتروني
الجنس
ذكر
بارك الله فيك ?
 
توقيع العبد الفقير إلى الله

lFPm3qh.png

إنّ من جملة الهجر أن يهجر المرء الاعتقاد الفاسد إلى الاعتقاد الصحيح،
والسلوك الفاسد إلى السلوك الصحيح، والفقه الفاسد إلى الفقه الصحيح،
يهجُر البدعة إلى السنة، ويهجر المعصية إلى الطاعة.
----------
410.png
الاقتراحات والشكاوى
410.png
أعلن على منتديات المشاغب
410.png
مركز ملفات المشاغب
المنتدى غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء.
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء واتفاق واعطاء معلومات موقعه.
المواضيع والتعليقات المنشورة لا تعبر عن رأي منتديات المشاغب ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)
عودة
أعلى