السلام عليكم اخي ايهاب شكرا جزيلا على هذا العمل لدي طلب صغير ان امكانك ترتيب الحلقات في المصفوفه لكي نعرف او من اراد ان يتعلم في مستقبل لكي يعرف من اين يبدا
في تصميم واجهات المستخدم (UI Design) مثل **Figma**، يُستخدم نظام **8-point grid** لتحديد المسافات والأحجام بشكل متسق ومنظم. يعتمد هذا النظام على مبدأ بسيط: جميع المسافات، الأحجام، والحشوات (padding/margin) تكون مضاعفات الرقم 8. ### **شرح النظام** - الأساس هو الرقم 8. - جميع القيم (المسافات بين العناصر، الحواف، الأحجام) تكون: - 8px، 16px، 24px، 32px، 40px... (مضاعفات الرقم 8). - هذا يضمن التناسق والتنظيم في التصميم. --- ### **كيفية استخدام النظام** #### 1. **المسافات بين العناصر** - إذا كنت تريد ترك مسافة صغيرة بين العناصر: **8px**. - لمسافة متوسطة: **16px**. - لمسافة أكبر: **24px أو 32px**. #### 2. **الحشوات (Padding)** - يتم تحديد الحشوات داخل العناصر مثل الأزرار بناءً على النظام: - صغير: **8px**. - متوسط: **16px**. - كبير: **24px**. #### 3. **الأحجام** - يُستخدم النظام لتحديد أحجام الخطوط، الأزرار، الصور، إلخ: - زر صغير: **32px × 32px**. - زر كبير: **48px × 48px**. --- ### **المعادلة الرياضية** المعادلة بسيطة: ```plaintext الحجم أو المسافة = 8 × n ``` حيث: - **n** هو رقم صحيح (1، 2، 3، ...). مثال: - إذا كانت المسافة المطلوبة بين عنصرين هي **16px**: - 8 × 2 = 16 - إذا كانت المسافة المطلوبة **24px**: - 8 × 3 = 24 --- ### **لماذا نظام 8-point Grid؟** 1. **التناسق:** يجعل التصميم متناسقًا عبر جميع الأجهزة والشاشات. 2. **المرونة:** يعمل بشكل مثالي مع مختلف دقة الشاشات (Retina، HD، إلخ). 3. **البساطة:** يسهل العمل على المصممين والمطورين باستخدام قيم محددة مسبقًا. إذا كنت تستخدم **Figma**، يمكنك تفعيل الشبكة (Grid) وجعلها تعتمد على نظام 8px لضبط التصميم بسهولة.
ربنا يحميك ويارب نوصل للمليون انت رائع وسامحنى انا معتبرك مثل ابنى چو وعايز أقولك انا كنت داخل اشوف بتحكي في ايه خلتنى اتفرج من اول مقدمة ومتابع لحد الجزء السادس بجد ياأبنى ربنا يحميك شرحك مبسط وسهل ومشوق للمتابعة ربنا يباركك ويحفظك وكل سنة وانت وأسرتك بكل خير يارب❤
تحفه♥️ بارك الله فيك♥️ يا ريت حلقه الاحجام في اسرع وقت وياريت حلقه توضح فيها اهميه كل سكشن واولويه ترتيبهم وافكار مختلفه لاشكال السكاشن حلقه نرتب فيها افكارنا بشكل عام💞
حاولت افهم اللي استنتجته ان كل اعداد البكسل اللي بنستخدمها بتكون نتاج ضرب 8 ف اي عدد صحيح او كسر 0.5 يعني 8 مضروبه في نص, واحد، واحد ونص ،اتنين ،اتنين ونص وهكذا... لو فهمتي حاجة غير كده فهميني 🤷
31:02 ليه هنا بدل الحسبة دي كلها معملش عدد العناصر اللي انا عايزها في auto layout وهوا كان هيظبط المسافات بالتساوي , هل في سبب معين انك مستخدمتش الطريقة دي
السلام عليكم استاذ ايهاب هل هأكتب النصوص في واجهة التطبيقات ولا دا شغل المبرمج ؟ ولو مش هاكتب أضع في مكان النص مثال بأي كلمة يكون الحجم والنوع وكدا محدد وبعدين المبرمج يكتبه صح ؟ والصور غير التابعة للتصميم هل أنا بضعها ؟
السلام عليكم اخي ايهاب شكرا جزيلا على هذا العمل لدي طلب صغير ان امكانك ترتيب الحلقات في المصفوفه لكي نعرف او من اراد ان يتعلم في مستقبل لكي يعرف من اين يبدا
في تصميم واجهات المستخدم (UI Design) مثل **Figma**، يُستخدم نظام **8-point grid** لتحديد المسافات والأحجام بشكل متسق ومنظم. يعتمد هذا النظام على مبدأ بسيط: جميع المسافات، الأحجام، والحشوات (padding/margin) تكون مضاعفات الرقم 8.
### **شرح النظام**
- الأساس هو الرقم 8.
- جميع القيم (المسافات بين العناصر، الحواف، الأحجام) تكون:
- 8px، 16px، 24px، 32px، 40px... (مضاعفات الرقم 8).
- هذا يضمن التناسق والتنظيم في التصميم.
---
### **كيفية استخدام النظام**
#### 1. **المسافات بين العناصر**
- إذا كنت تريد ترك مسافة صغيرة بين العناصر: **8px**.
- لمسافة متوسطة: **16px**.
- لمسافة أكبر: **24px أو 32px**.
#### 2. **الحشوات (Padding)**
- يتم تحديد الحشوات داخل العناصر مثل الأزرار بناءً على النظام:
- صغير: **8px**.
- متوسط: **16px**.
- كبير: **24px**.
#### 3. **الأحجام**
- يُستخدم النظام لتحديد أحجام الخطوط، الأزرار، الصور، إلخ:
- زر صغير: **32px × 32px**.
- زر كبير: **48px × 48px**.
---
### **المعادلة الرياضية**
المعادلة بسيطة:
```plaintext
الحجم أو المسافة = 8 × n
```
حيث:
- **n** هو رقم صحيح (1، 2، 3، ...).
مثال:
- إذا كانت المسافة المطلوبة بين عنصرين هي **16px**:
- 8 × 2 = 16
- إذا كانت المسافة المطلوبة **24px**:
- 8 × 3 = 24
---
### **لماذا نظام 8-point Grid؟**
1. **التناسق:** يجعل التصميم متناسقًا عبر جميع الأجهزة والشاشات.
2. **المرونة:** يعمل بشكل مثالي مع مختلف دقة الشاشات (Retina، HD، إلخ).
3. **البساطة:** يسهل العمل على المصممين والمطورين باستخدام قيم محددة مسبقًا.
إذا كنت تستخدم **Figma**، يمكنك تفعيل الشبكة (Grid) وجعلها تعتمد على نظام 8px لضبط التصميم بسهولة.
شكرا ايهاب
مشفتش حد لخص فكرة الspacing زي كدا عظمة حقيقي ❤❤شكرا ليك وشكرا انك بتوفر وقت عشان تعمل النوع دا من المحتوى❤
الشرح ممتع وجميل وغير ملل وفكرة ال spacing طلعت مهمة جدا وبتعطي جماليه للتصميم
ربنا يحميك ويارب نوصل للمليون
انت رائع وسامحنى انا معتبرك مثل ابنى چو وعايز أقولك انا كنت داخل اشوف بتحكي في ايه خلتنى اتفرج من اول مقدمة ومتابع لحد الجزء السادس بجد ياأبنى ربنا يحميك شرحك مبسط وسهل ومشوق للمتابعة ربنا يباركك ويحفظك وكل سنة وانت وأسرتك بكل خير يارب❤
يعني مسلن مسلن عجبني انك تناقش فكرتك بشكل عملي وتقنع المشاهد... شكرا لوقتك :)
تحفه♥️ بارك الله فيك♥️
يا ريت حلقه الاحجام في اسرع وقت
وياريت حلقه توضح فيها اهميه كل سكشن واولويه ترتيبهم وافكار مختلفه لاشكال السكاشن حلقه نرتب فيها افكارنا بشكل عام💞
شرحك جميل وممتع بعيد عن اي ملل .. وحلو جدا ان الحلقة تكون طويله بكل التفاصيل
best arabic course ever .. can't wait for the next
جزاك الله خيراً علي المحتوي القيم دا❤❤
شكرا لك دروسك اجت في وقت مناسب شكرا لك من كل قلبي
ممكن تحكيلنا عن ux
كيف نتطور في ux
وتشرحلنا بامثلة عملية تحليل صفحات بناء على ux
حقيقي بستفاد منك جدا شكرا❤
تفاصيل مهمة بشرح جميل👌
جزاك الله خير الجزاء الله يسعدك
عالمي يا صديقي ❤👏🏻
عظمه يا ايهاب🤍
ممكن بس توضيح لارقام المعادله بنحطها علي اساس ايه ...يعني ال 8 دي جات منين وليه ضربتها في 16 او غيره بلييييز لان مش فاهمه الارقام دي جات منين
حاولت افهم اللي استنتجته ان كل اعداد البكسل اللي بنستخدمها بتكون نتاج ضرب 8 ف اي عدد صحيح او كسر 0.5 يعني 8 مضروبه في نص, واحد، واحد ونص ،اتنين ،اتنين ونص وهكذا... لو فهمتي حاجة غير كده فهميني 🤷
thank you for sharing mr ehab
31:02
ليه هنا بدل الحسبة دي كلها معملش عدد العناصر اللي انا عايزها في auto layout وهوا كان هيظبط المسافات بالتساوي , هل في سبب معين انك مستخدمتش الطريقة دي
ايوا لانه لسه متطرقناش لل auto layout وللتصميم وبرضه الطريقه اليدوي هتفيد جدا الناس تعرفها عشان لو حبه يعمله حاجه معينه 👀
كله هنشرحه مش تقلق
أحبك ❤
بجد شكراا انا دايما كان عندي مشكله في المسافات و مش بعرف اظبطها
السلام عليكم استاذ ايهاب
هل هأكتب النصوص في واجهة التطبيقات ولا دا شغل المبرمج ؟
ولو مش هاكتب أضع في مكان النص مثال بأي كلمة يكون الحجم والنوع وكدا محدد وبعدين المبرمج يكتبه صح ؟
والصور غير التابعة للتصميم هل أنا بضعها ؟
❤
عندي سؤال هوا الزاي طلعة الالة الحاسبة في figma ?
عاوز اعرف اذاى ادخل على كورس ux لان البوست الى موجود ف الديسكربش قديم
انا فهمت انو حنضرب ال٨ ب x (رقم) بس على اساس بضرب بالرقم x
ما شاء الله
الذكاء الاصطناعي في figma بكون للنسخة المدفوعة ولا توقف لأنه عندي النسخة المجانية وما فيه ذكاء اصطناعي ؟!!🤔 🤔 ⁉️ ⁉️ ⁉️ ⁉️ ⁉️ ⁉️ ⁉️ ⁉️
جميل❤
شكرا ايهاب على المعلومات القيمة
لكن سوال انا نزلت اداة الspacing على جوجل لكن مش عارف استخدمها
ازاي استخدمها اذا سمحت
+1
حلقه مفيده وتقيله جدا ❤️🔥
جزاك الله عنا خير الجزاء
حد يمكن يوضح ايه هو ال رقم 8 جابه منين في المعادلة الرياضية؟؟ لو سمحتو
+1
25:42 بس في عناصر قليلة الادب مش بتحترم نفسها 😂😂