منتدى بابل
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.
+2
المحترف الذهبي
يشهب
6 مشترك

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

يشهب

فريق العمل
يشهب
البلد : مصر
الجنس : ذكر
المساهمات : 155
العمر : 32
السٌّمعَة : 16
عضو محبوب
لقد أُعجب هذا العضو أكثر من 5 مشاركة!
إعجاب المساهمات
لقد أعجبك أكثر من 50 مشاركة!
فريق العمل
هذا العضو ينتمي إلى مجموعة فريق العمل!
عضو مُخضرم
هذا العضو ينتمي إلى هذا المنتدى منذ 2 سنة!
عضو مُساهم
لقد شارك هذا العضو في أكثر من 100 مشاركة وتعليق!
عضو مُتحمس
لقد شارك هذا العضو في أكثر من 50 موضوعًا مختلفًا ، انه مُتحمس حقيقي!
https://nf-son.ahlamontada.com/
الجمعة 30 أبريل - 17:46

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






تصميم واجهات الاستخدام تعدى كونه بُعداً جمالياً فقط. و أصبح أحد مقومات نجاح الواجهة المستخدمة متيحاً خيارات مطورة للتحكم، و الشخصنة، و البساطة، و التطبيق.

جماليات التصميم الحداثي (Neumorphism) 5f339b2c01a1dc611521b36b_neumorphic-1


جماليات التصميم الحداثي (Neumorphism) 5f339b4a363a6849e4546665_o0oWwNphkm4h8yeZxo64l2knKjsST6We4hhGIeb46IkKTEGj9TOSGehsKUIuhN-RDInB6nkPnoeKD8ZSrWCEMdkjPNLr9TT2K3prgzAdk-AjZ5Vz_hLj0dNiwPdNCrR_CArduIBhGS4orIQSfw

منذ نهايات عام 2019، ظهر اتجاه جديد في التصميم جذب العالم نحوه.. إنه (*neumorphism) أو كما يطلق عليه أحياناً ( Soft UI design concept) و ترجمتها الحرفية (مبدأ الواجهة الناعمة). و السؤال هنا: ما الذي أعطى هذا الاتجاه كل هذا الزهو و الجاذبية بين المصممين حول العالم؟
في الدقائق التالية، سنتعرف سوياً على أصل الـ(neumorphism) و أساسياته و مبادئه. و كيف نستفيد منه في تصميم الواجهات.



جذور الـ (neumorphism)





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

جماليات التصميم الحداثي (Neumorphism) 5f339b49a8a911518b99b104_4CRsImVBCxuqvlKJ9Y3rmYuEl3oHhPW2lXVAfLuy1XGlSP55tYZHVXKBgODIp0H43reTdaVoeQARHxfv9PAFRatMfb80xp-YXjeOtFHh8rXZ8lEteEZV_CyLblv2j45cdv4kDmj4x8xGvDjPEA

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

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


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



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





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

النقاط التالي توضح بالتفصيل كيف يمكنك استخدام (التصميم الناعس) في خلق استايل قوي و جذاب للموقع:

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

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

جماليات التصميم الحداثي (Neumorphism) 5f339b49a35a9c30c7349f27_bno26zJZwq36hgFiWu8De57GcVewREdPC68oKgyesJl3EO_9kzHYZP9TvK1WE5Zyh7gsAfJ7IxVVl0Zt_rg47TXiAz_6KNuf6art7RTs0-T5S6V529p0DYff8Kvf2bh8lWEW_vq7lq2Sp-wWuQ
يمكنك بسهولة تطبيق هذا المبدأ على برنامج الفوتوشوب. كما يمكنك استخدام كود CSS للوصول لنفس النتيجة.

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

في المثال التالي نجد المصمم أعطى الزرار حياة عن طريق لون مختلف عند الضغط على الزر. بشرط أن يكون اللون غير ساطع.

جماليات التصميم الحداثي (Neumorphism) 5f339b4acbf7b20bb82e2629_2kgOfAlbCHHjjDlnkfozc__Ub3m3ecSYaFANHo7ivTUZ8OAoohDreB12qvXdDUk5kpLPvVQo4yyFG6rQPB09R8nSo66kl3DntLYOgCE4RSTEFsYv-PVx9K9yWeNejZl7Ocm-Dpp_ePRswGOYJAجماليات التصميم الحداثي (Neumorphism) 5f339b4951b51a4b4def905f_f5sgQ-FOanOqJMpKuccVuBuh0ZYAex2BFsZYOtkL1RCMXQ6UQWEe2Gog1LTTm0Wh3jkzmbhiZTWJLvnmMSyiuW_UjeEV_ljXeLmbnSxVZltXTbHglivlTaaCOznl65L0SSacWwMcesytqm7Dww

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

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

جماليات التصميم الحداثي (Neumorphism) 5f339b4a3a88d89da479db84_pdDS_PHyKQSu_lyUs5R4KaptXUJHdm3MZ5RWBwI8DA9NsAqKGag464AFcrh3za2MI-ph1GoVQGnhS3B5ano6r74oDdMeUJGSnT1eqbEfidYLdk5i3GUTOVambnTtnNscqA09Ax3hJn83Pglb4g

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

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

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

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

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

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


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

__________________________________________
* لم أجد ترجمة حرفية لمصطلح (neumorphism). لذا أطلقت عليه (التصميم الناعس)!
توقيع: يشهب


جماليات التصميم الحداثي (Neumorphism) O1010
جماليات التصميم الحداثي (Neumorphism) Uia_oo13
جماليات التصميم الحداثي (Neumorphism) Uia_oo12
جماليات التصميم الحداثي (Neumorphism) Uia_od12
منتدى ابن النيل و الفرات
جماليات التصميم الحداثي (Neumorphism) Last10

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

المحترف الذهبي

نائب الإدارة
المحترف الذهبي
البلد : العراق
الجنس : ذكر
المساهمات : 1195
العمر : 29
السٌّمعَة : 34
نائب الادارة
هذا العضو ينتمي إلى مجموعة نائب الادارة!
خبير المنتديات
هذا المستخدم خبير في استضافة منتديات أحلى منتدى المجانية
عضو مُساهم
لقد شارك هذا العضو في أكثر من 100 مشاركة وتعليق!
عضو مُتسلق
لقد شارك هذا العضو في أكثر من 100 موضوعًا مختلفًا ، استمر في ذلك!
عضو نشيط للغاية
لقد قمت بفتح أكثر من 100 موضوعا في المنتدى
المحبوب الحقيقي للأعضاء
لقد حصلت على أكثر من 100 إعجابا على مشاركاتك .. يبدو أن أعضائنا يحبونك حقًا!
إعجاب المساهمات
لقد أعجبك أكثر من 50 مشاركة!
الذكرى الرابعة (إنشاء المنتدى)
هذا العضو ينتمي إلى هذا المنتدى منذ إنشاء المنتدى!
الأحد 2 مايو - 12:12
اولا اود اشكرك على مجهودك و موضوعك حبيبي
بس انا اردت ان اعرف هل هذا الامر يتم بالفوتوشوب يعني؟
توقيع: المحترف الذهبي


جماليات التصميم الحداثي (Neumorphism) O1010
جماليات التصميم الحداثي (Neumorphism) Uia_oo13
جماليات التصميم الحداثي (Neumorphism) Uia_oo12
جماليات التصميم الحداثي (Neumorphism) Uia_od12

يشهب يعجبه هذا الموضوع

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

يشهب

فريق العمل
يشهب
البلد : مصر
الجنس : ذكر
المساهمات : 155
العمر : 32
السٌّمعَة : 16
عضو محبوب
لقد أُعجب هذا العضو أكثر من 5 مشاركة!
إعجاب المساهمات
لقد أعجبك أكثر من 50 مشاركة!
فريق العمل
هذا العضو ينتمي إلى مجموعة فريق العمل!
عضو مُخضرم
هذا العضو ينتمي إلى هذا المنتدى منذ 2 سنة!
عضو مُساهم
لقد شارك هذا العضو في أكثر من 100 مشاركة وتعليق!
عضو مُتحمس
لقد شارك هذا العضو في أكثر من 50 موضوعًا مختلفًا ، انه مُتحمس حقيقي!
https://nf-son.ahlamontada.com/
  • تقييم المساهمة: 100% (1)
الثلاثاء 4 مايو - 0:40
المحترف الذهبي كتب:اولا اود اشكرك على مجهودك و موضوعك حبيبي
بس انا اردت ان اعرف هل هذا الامر يتم بالفوتوشوب يعني؟
التصميم فكرة .. أما التطبيق فيمكن أن يكون بواسطة فوتوشوب أو غيره.
الشكر موصول لك على مرورك و التعليق
توقيع: يشهب


جماليات التصميم الحداثي (Neumorphism) O1010
جماليات التصميم الحداثي (Neumorphism) Uia_oo13
جماليات التصميم الحداثي (Neumorphism) Uia_oo12
جماليات التصميم الحداثي (Neumorphism) Uia_od12
منتدى ابن النيل و الفرات
جماليات التصميم الحداثي (Neumorphism) Last10

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

AsHeK EgYpT

نائب الإدارة
AsHeK EgYpT
البلد : مصر
الجنس : ذكر
المساهمات : 2142
العمر : 27
السٌّمعَة : 43
نائب الادارة
هذا العضو ينتمي إلى مجموعة نائب الادارة!
خبير المنتديات
هذا المستخدم خبير في استضافة منتديات أحلى منتدى المجانية
إعجاب المساهمات
لقد أعجبك أكثر من 50 مشاركة!
عضو مُساهم
لقد شارك هذا العضو في أكثر من 100 مشاركة وتعليق!
عضو مُخضرم
هذا العضو ينتمي إلى هذا المنتدى منذ 2 سنة!
عضو ودود
لقد أضاف هذا العضو أكثر من 10 أعضاء من أعضاء المنتدى كأصدقاء!
عضو مُتسلق
لقد شارك هذا العضو في أكثر من 100 موضوعًا مختلفًا ، استمر في ذلك!
عضو نشيط للغاية
لقد قمت بفتح أكثر من 100 موضوعا في المنتدى
المحبوب الحقيقي للأعضاء
لقد حصلت على أكثر من 100 إعجابا على مشاركاتك .. يبدو أن أعضائنا يحبونك حقًا!
https://www.7babil.com
الخميس 17 مارس - 18:43
مشكور على الموضوع الرائع
توقيع: AsHeK EgYpT


جماليات التصميم الحداثي (Neumorphism) O1010
وَإِذَا أَتَتْكَ مَذَمَّتِي مِنْ نَاقِصٍ .. فَهِيَ اَلشَّهَادَةُ لِي بِأَنِّي كَامِلُ
لَا يُشَوِّهُ سُمْعَتَكَ إِلَّا مِنْ تَمَنَّى أَنْ يُكَوِّنَ مِثْلَكَ وَفَشِلَ
جماليات التصميم الحداثي (Neumorphism) Uia_oo13
جماليات التصميم الحداثي (Neumorphism) Uia_oo12
جماليات التصميم الحداثي (Neumorphism) Uia_od12

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

Hager Ebrahim

عضو مميز
Hager Ebrahim
الجنس : انثى
المساهمات : 183
العمر : 23
السٌّمعَة : 1
عضو محبوب
لقد أُعجب هذا العضو أكثر من 5 مشاركة!
عضوية مميزة
هذا العضو ينتمي إلى مجموعة العضوية المميزة!
عضو مُساهم
لقد شارك هذا العضو في أكثر من 100 مشاركة وتعليق!
عضو مُخضرم
هذا العضو ينتمي إلى هذا المنتدى منذ 2 سنة!
عضو مُتسلق
لقد شارك هذا العضو في أكثر من 100 موضوعًا مختلفًا ، استمر في ذلك!
السبت 19 مارس - 18:36
عاشت الايادي دوم التالق

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

حياة القلوب

اسد المنتدى
حياة القلوب
البلد : مصر
الجنس : انثى
المساهمات : 814
العمر : 35
السٌّمعَة : 49
الأكثر إعجابا
لقد حصلت على أكثر من 50 إعجابا على مشاركاتك .. أعضائنا لديهم الحق فأنت لديك الكثير لتقدمه
اسد المنتدى
هذا العضو ينتمي إلى مجموعة اسد المنتدى!
عضو مُساهم
لقد شارك هذا العضو في أكثر من 100 مشاركة وتعليق!
عضو مُخضرم
هذا العضو ينتمي إلى هذا المنتدى منذ 2 سنة!
عضو مُتسلق
لقد شارك هذا العضو في أكثر من 100 موضوعًا مختلفًا ، استمر في ذلك!
الأربعاء 6 أبريل - 13:20
رائع احسنت النشر

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

KING MARWAN

رئيس الفريق
KING MARWAN
البلد : السعودية
الجنس : ذكر
المساهمات : 1049
العمر : 22
السٌّمعَة : 10
إدارة الفريق
هذا العضو ينتمي إلى مجموعة إدارة الفريق!
كاتب المنتدى
لقد قمت بفتح أكثر من 50 موضوعا في المنتدى
عضو مُساهم
لقد شارك هذا العضو في أكثر من 100 مشاركة وتعليق!
عضو مُخضرم
هذا العضو ينتمي إلى هذا المنتدى منذ 2 سنة!
عضو مُتسلق
لقد شارك هذا العضو في أكثر من 100 موضوعًا مختلفًا ، استمر في ذلك!
المحبوب الحقيقي للأعضاء
لقد حصلت على أكثر من 100 إعجابا على مشاركاتك .. يبدو أن أعضائنا يحبونك حقًا!
الأربعاء 29 مايو - 21:57
شكرا على الموضوع
توقيع: KING MARWAN


جماليات التصميم الحداثي (Neumorphism) O1010
جماليات التصميم الحداثي (Neumorphism) Uia_oo13
جماليات التصميم الحداثي (Neumorphism) Uia_oo12
جماليات التصميم الحداثي (Neumorphism) Uia_od12

سجل دخولك أو سجل عضوية جديدة لتستفيد أكثر من المنتدى!

سجل دخولك أو سجل عضوية جديدة لتحصل على المزيد من المنتدى!

تسجيل الدخول

إذا كان لديك حساب ، الرجاء تسجيل الدخول

تسجيل الدخول
تسجيل عضوية جديدة

إنشاء حساب جديد في المنتدى مجاني تمامًا

قم بالتسجيل الآن
صلاحيات المنتدى
لاتستطيع الرد على المواضيع في هذا المنتدى

مُحتوى هذا المنتدى محمي بواسطة: DMCA وغير مسموح نهائياً نسخه أو نقله بدون إذن كتابي مُسبق.DMCA.com Protection Status