# تعلم تصميم واجهات المستخدم

> تعلم تصميم واجهات المستخدم UI/UX من الصفر: الفرق بينهما، ومبادئ نيلسن العشرة، وإرشادات Apple وGoogle، وFigma مجاناً للطلاب، وتمرين عملي.
>
> تسوى تعرض عروض الطلاب الحالية في السعودية على [فيجما](https://tiswa.app/deals/figma/)، [كانفا](https://tiswa.app/deals/canva/) و[أدوبي](https://tiswa.app/deals/adobe/).

![تعلم تصميم واجهات المستخدم](https://tiswa.app/assets/blog/ui-ux-roadmap/ui-ux-roadmap-cover-ar.webp)

## ما الفرق بين UI وUX؟

|  | UX تجربة المستخدم | UI واجهة المستخدم |
|---|---|---|
| السؤال | هل يحقق المستخدم هدفه بسهولة؟ | هل الشاشة واضحة وجميلة ومتناسقة؟ |
| يعمل على | البحث، رحلة المستخدم، هيكل المعلومات، النماذج الأولية، الاختبار | الألوان، الخطوط، المسافات، الأيقونات، المكونات |
| ناتجه | مخططات تدفق ونماذج رمادية بسيطة | شاشات نهائية ونظام تصميم |
| يشبه في البناء | المخطط المعماري للمنزل | التشطيب والديكور |

![بطاقة مقارنة من جدول الدليل (تعلم تصميم واجهات المستخدم)](https://tiswa.app/assets/blog/ui-ux-roadmap/ui-ux-roadmap-inline-2-ar.webp)


في الشركات الصغيرة يقوم مصمم واحد بالاثنين، وفي الكبيرة ينفصلان. تعلّم الاثنين في البداية، ثم تميل إلى ما يجذبك أكثر.

## المبادئ العشرة لنيلسن

أشهر مرجع لتقييم سهولة الاستخدام هو المبادئ العشرة التي وضعها Jakob Nielsen مع Rolf Molich. احفظها، لأنك ستستخدمها في كل مراجعة تصميم:

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

## خارطة التعلم في أربع مراحل

1. **المرحلة 1: الأساسيات البصرية**: الطباعة والخطوط، والألوان والتباين، والمسافات والشبكات، والتسلسل البصري. انظر إلى التطبيقات التي تحبها واسأل: لماذا هذا الزر هنا وبهذا الحجم؟
2. **المرحلة 2: الأداة**: تعلم Figma: الإطارات، والتخطيط التلقائي (Auto Layout)، والمكونات، والنماذج الأولية القابلة للنقر. Figma مجاني للطلاب عبر برنامجه التعليمي.
3. **المرحلة 3: عملية UX**: مقابلة المستخدمين، ورحلة المستخدم، وهيكل المعلومات، والنماذج الرمادية، واختبار الاستخدام مع خمسة أشخاص.
4. **المرحلة 4: إرشادات المنصات**: اقرأ [إرشادات Apple للواجهات](https://developer.apple.com/design/human-interface-guidelines) و[Material Design من Google](https://m3.material.io/). المستخدم يتوقع أن يتصرف تطبيق آيفون كتطبيقات آيفون، وتطبيق أندرويد كتطبيقات أندرويد.

![مخطط من 4 خطوات: المرحلة 1: الأساسيات البصرية / المرحلة 2: الأداة / المرحلة 3: عملية UX / المرحلة 4: إرشادات المنصات](https://tiswa.app/assets/blog/ui-ux-roadmap/ui-ux-roadmap-inline-1-ar.webp)


> **نصيحة**: إذا كنت تصمم بالعربية، اختبر كل شاشة من اليمين إلى اليسار من البداية. الأيقونات التي تدل على اتجاه مثل الأسهم تنعكس، ومكان العناوين والأزرار يتبدل، والخط العربي يحتاج مسافة سطر أكبر من اللاتيني.

## تمرين عملي: أعد تصميم شاشة حقيقية

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

1. **اختر الشاشة**: مثلاً شاشة تسجيل المقررات في بوابة جامعتك، أو صفحة الطلب في تطبيق تستخدمه.
2. **قيّمها بالمبادئ العشرة**: اكتب جدولاً: المبدأ، المشكلة، شدتها من 1 إلى 3. ستجد غالباً خمس مشاكل على الأقل.
3. **اسأل ثلاثة زملاء**: اطلب من كل واحد أن ينفذ مهمة على الشاشة الحالية وأنت تراقب بدون مساعدة. دوّن أين توقف.
4. **ارسم نموذجاً رمادياً**: في Figma، بدون ألوان، رتب العناصر بحل يعالج المشاكل التي وجدتها.
5. **صمم الواجهة النهائية**: أضف الخطوط والألوان والمكونات، واصنع نموذجاً قابلاً للنقر.
6. **اختبر من جديد**: أعد نفس المهمة مع نفس الزملاء، وقارن الوقت والأخطاء قبل وبعد.

هذا التمرين وحده يصبح دراسة حالة كاملة لملف أعمالك: المشكلة، والبحث، والحل، والنتيجة.

## الأدوات المجانية للطلاب

- Figma مجاني للطلاب عبر [Figma for Education](https://www.figma.com/education/)، وتجده ضمن [برامج التصميم للطلاب](https://tiswa.app/blog/design-software-for-students/).
- Canva مجاني عبر Canva for Campus إذا كانت جامعتك مشتركة، وهو مفيد للعروض والمنشورات أكثر من الواجهات. التفاصيل في [Canva للطلاب](https://tiswa.app/blog/canva-for-students/).
- Adobe Creative Cloud Pro بخصم 70% للسنة الأولى عبر تسوى، إذا احتجت أدوات الصور والرسوم.

وإذا أردت منهجاً مرتباً بشهادة، فشهادة Google UX Design متاحة على Coursera ضمن شهادات Google المهنية، وCoursera تتيح طلب مساعدة مالية.

## أخطاء المبتدئين في التصميم

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

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

## الذكاء الاصطناعي في التصميم

استخدمه لتوليد أفكار وأسئلة مقابلات ونصوص واجهة، ولمراجعة تصميمك بالمبادئ. وفي [الذكاء الاصطناعي لطلاب العمارة والتصميم](https://tiswa.app/blog/ai-for-architecture-design-students/) أدوات وطلبات أكثر. جرّب:

مراجعة تصميم:

```
Act as a senior UX designer. I am redesigning [screen, e.g. course registration in a university portal]. The main task is [task]. Here is my design: [describe the layout or attach a screenshot]. Review it against Nielsen's 10 usability heuristics. For each problem, name the heuristic, explain the issue in one line and suggest a fix. Also tell me what to test with 5 users.
```

## كيف تطلب رأياً مفيداً في تصميمك

لا تسأل زميلك "هل التصميم جميل؟"، فالإجابة غالباً مجاملة. أعطه مهمة محددة، مثل: "حاول أن تجد زر الدفع وتكمل الطلب"، ثم راقبه بصمت ولاحظ أين يتردد أو يضغط في المكان الخطأ. خمسة أشخاص بهذه الطريقة يكشفون أغلب مشاكل الاستخدام، وهي ملاحظات حقيقية تستطيع ذكرها في دراسة الحالة داخل ملف أعمالك، مع التعديل الذي أجريته بعدها.

تسوى يجمع لك أدوات التصميم للطلاب مثل Figma for Education وCanva for Campus وخصم Adobe، وكل خصومات الطلاب في السعودية في تطبيق واحد. شوف [كل العروض](https://tiswa.app/deals/) ووثّق حسابك مرة واحدة. [سجّل في تسوى](https://tiswa.app/join/)

## من التعلم إلى العمل

المصمم يُوظَّف بملف أعماله قبل شهادته. اجمع ثلاث دراسات حالة كاملة تشرح كل منها المشكلة والعملية والنتيجة، كما في [كيف تسوي بورتفوليو](https://tiswa.app/blog/build-a-portfolio/). وإذا أردت أن تفهم كيف تتحول تصاميمك إلى تطبيق، فتعلم أساسيات [جافا سكربت](https://tiswa.app/blog/learn-javascript/)، فالمصمم الذي يفهم المطور أسهل في العمل معه.

## أسئلة

### من أين أبدأ تعلم تصميم واجهات المستخدم؟

ابدأ بأساسيات الخطوط والألوان والمسافات، ثم تعلم Figma، ثم عملية UX من البحث إلى الاختبار، ثم إرشادات Apple وGoogle. وطبّق كل مرحلة على تمرين إعادة تصميم شاشة حقيقية.

### هل أحتاج موهبة في الرسم لأصبح مصمم UI/UX؟

لا. التصميم الرقمي يعتمد على المبادئ والتنظيم وفهم المستخدم أكثر من الرسم اليدوي، وكلها مهارات تتعلمها بالتمرين.

### هل Figma مجاني للطلاب؟

نعم، عبر برنامج Figma for Education الذي يتحقق من أنك طالب.

### هل أحتاج البرمجة في تصميم الواجهات؟

ليست شرطاً، لكن فهم أساسيات HTML وCSS وجافا سكربت يجعل تصاميمك قابلة للتنفيذ ويسهل عملك مع المطورين.

### ما أفضل طريقة لبناء ملف أعمال UX؟

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


## المصادر

[^1]: nngroup.com, https://www.nngroup.com/articles/ten-usability-heuristics/
[^2]: developer.apple.com, https://developer.apple.com/design/human-interface-guidelines
[^3]: m3.material.io, https://m3.material.io/
[^4]: figma.com, https://www.figma.com/education/
[^5]: coursera.org, https://www.coursera.org/professional-certificates/google-ux-design