تصميم التطبيقات: أساسيات Mobile UI

1 يعني إيه Mobile UI؟ والفرق اللي بيوقع فيه المبتدئين

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

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

الفرق الجوهري بين تصميم الويب وتصميم الموبايل

خلينا نحط الفروق على الترابيزة بوضوح، لأن فهمها هو اللي هيحدد كل قرار هتاخده بعد كده:

شايف الفرق؟ كل سطر في الجدول ده قرار تصميم. اللي بيصمم تطبيق بعقلية الويب بيحط قائمة علوية فيها 8 عناصر — على الموبايل دي كارثة. بيحط نص طويل جنب صورة — على الموبايل النص هيبقى خيط رفيع لا يُقرأ. القاعدة الذهبية: صمم للموبايل من الأول، مش كنسخة مصغرة من حاجة تانية.

الـ UI مش الـ UX — والفرق ده فلوس

ناس كتير بتخلط بين المصطلحين، والخلط ده بيكلف. الـ UI هو الشكل: حلو ولا وحش، مرتب ولا مكركب. الـ UX هو التجربة: هل المستخدم وصل للي عاوزه؟ هل انبسط ولا اتعصب؟ خد المثال ده:

المعادلة العملية اللي تمشي عليها: UX أولًا، UI ثانيًا. حدد رحلة المستخدم وخطواته الأول (ده UX)، وبعدين جمّل الشاشات (ده UI). اللي بيبدأ بالشكل بيطلع بلوحة فنية جميلة محدش عارف يستخدمها. واللي بيبدأ بالتجربة بيطلع تطبيق ناجح — حتى لو شكله بسيط في الأول.

ليه التطبيقات الناجحة كلها “شبه بعض”؟

سؤال بيتسأل كتير: ليه كل تطبيقات السوشيال ميديا شبه بعض؟ ليه كل تطبيقات البنوك نفس الترتيب؟ الإجابة مش نقص إبداع — دي حكمة. المستخدم اتعلم لغة مشتركة: عارف إن القائمة تحت، وإن السهم اللي فوق على الشمال بيرجع، وإن علامة الـ + معناها إضافة. لما تكسر اللغة دي عشان تبقى “مختلف”، المستخدم بيتلخبط — واللخبطة بتساوي حذف.

الإبداع في تصميم التطبيقات مش في اختراع لغة جديدة — الإبداع في استخدام اللغة الموجودة بذكاء: هوية بصرية مميزة، تفاصيل مدروسة، وتجربة سلسة. القواعد الرسمية للمنصات (Apple HIG للآيفون وMaterial Design للأندرويد) هي القاموس بتاع اللغة دي — وهنتكلم عنها بالتفصيل في قسم الأدوات. احفظ الجملة دي: الألفة أسرع من الإبداع — المستخدم بيثق في اللي يعرفه.

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

2 المبادئ الخمسة اللي أي شاشة موبايل ناجحة مبنية عليها

قبل ما نتكلم عن مكونات وألوان وأدوات، لازم تثبت المبادئ. المبادئ دي هي الفلتر اللي هتعدي عليه كل قرار تصميم: الشاشة دي محتاجة زر كمان؟ اللون ده مناسب؟ الترتيب ده منطقي؟ من غير مبادئ، كل قرار هيبقى “عشان شكله حلو” — وده مش معيار.

3 تشريح شاشة التطبيق: 12 مكون لازم تعرفهم

أي شاشة تطبيق في الدنيا — مهما كانت معقدة — مبنية من مجموعة مكونات أساسية بتتكرر. لو عرفت المكونات دي ودور كل واحد فيهم، هتقدر “تقرأ” أي تصميم وتفككه، وبعدين تبني تصميمك الخاص من نفس اللبنات. خلينا نشرح الشاشة من فوق لتحت:

المكونات مش زينة — كل واحد له عقد مع المستخدم

النقطة اللي ناس كتير بتفوتها: المستخدم اتعلم يتوقع سلوك معين من كل مكون. الـ Tab Bar تحت معناه “دي الأقسام الرئيسية”. السهم اللي فوق على الشمال معناه “ارجع”. علامة الـ X معناها “اقفل من غير ما تحفظ”. لما تستخدم مكون في غير وظيفته المتوقعة — زي ما تحط زر الحذف بنفس شكل زر الحفظ — إنت بتكسر العقد، والمستخدم هو اللي بيدفع التمن (بيدوس غلط).

عشان كده القواعد الرسمية مهمة: Apple HIG بيشرح كل مكون في الآيفون وسلوكه المتوقع بالتفصيل، وMaterial Design بيعمل نفس الحاجة للأندرويد. مش لازم تحفظهم — لكن لازم ترجعلهم قبل ما تستخدم مكون أول مرة. المصمم المحترف مش اللي حافظ كل حاجة — اللي عارف يرجع للمصدر الصح.

التسلسل البصري: عين المستخدم بتروح فين الأول؟

المكونات لوحدها مش كفاية — ترتيبها هو اللي بيحدد التجربة. العين بتمشي على الشاشة بترتيب متوقع: فوق لتحت، والعناصر الكبيرة والملونة الأول. عشان كده:

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

4 الشبكة والمساحات: نظام الـ 8pt ومناطق الأمان

ليه تصميمات المحترفين “مريحة للعين” حتى لو مش عارف ليه؟ السر في الشبكة. نظام الـ 8pt هو أبسط وأشهر نظام شبكي في تصميم التطبيقات: كل المقاسات والمساحات مضاعفات الرقم 8 (8، 16، 24، 32، 48…). ليه 8؟ لأنه رقم يقبل القسمة على 2 و4 — فيديك مرونة كافية من غير ما تحتار بين 13 و14 و15 بكسل.

الفكرة مش الرقم نفسه — الفكرة إن كل حاجة في التصميم ماشية على إيقاع واحد. المسافة بين العنوان والنص 16، وبين النص والزر 24، وحشو البطاقة 16 من كل جهة. لما كل المسافات من نفس العيلة، العين بتحس بالانسجام تلقائيًا — حتى لو المستخدم مش فاهم في التصميم.

مناطق الأمان: الحتت اللي ممنوع تحط فيها حاجة مهمة

شاشات الموبايل الحديثة مش مستطيلات كاملة — فيها نتوء (Notch) من فوق، وحواف منحنية، وشريط إيماءات من تحت. مناطق الأمان (Safe Areas) هي المساحة اللي تضمن إن المحتوى المهم يظهر كامل على كل الأجهزة من غير ما يتقطع أو يتغطى.

• من فوق: سيب مسافة للـ Status Bar والنتوء — العنوان المهم مينفعش يلزق في الحافة العلوية.
• من تحت: سيب مسافة لشريط الإيماءات (Home Indicator) — الزر المهم مينفعش يكون لازق في آخر الشاشة.
• من الجناب: حشو جانبي ثابت (16 أو 24) على طول التطبيق — المحتوى الملزق في الحرف شكله رخيص ومتعب.
• الـ Tab Bar: لو موجود، المحتوى يقف فوقه — مش تحته.

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

أهداف اللمس: الإصبع مش الماوس (تاني — عشان مهم)

اتكلمنا عن المبدأ في القسم التاني، وهنا الرقم العملي: أي عنصر قابل للمس لازم تكون مساحته 44×44 نقطة على الأقل (ده معيار آبل، وجوجل بتقول 48×48dp — خد الأكبر وارتاح). والمسافة بين عنصرين قابلين للمس: 8 نقاط على الأقل — عشان الإصبع ميدوسش على الاتنين مع بعض.

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

5 الألوان والخطوط: هوية التطبيق اللي بتتحس مش بتتشاف

المستخدم العادي مش هيقول “الألوان متناسقة” — هيقول “التطبيق ده مريح” أو “التطبيق ده مزعج”. الألوان والخطوط هما اللي بيصنعوا الإحساس ده من غير ما حد ياخد باله. عشان كده القرارات هنا حساسة: غلطة صغيرة في التباين أو مقاس الخط بتخلي التطبيق كله “متعب” — والمستخدم مش هيعرف يشرح ليه، هو بس هيحذفه.

نظام الألوان: 3 ألوان كفاية — والرابع جريمة

أنجح تطبيقات العالم ماشية على نظام بسيط:

• اللون المحايد (60%): الخلفيات والنصوص الأساسية — أبيض ورمادي فاتح في الوضع الفاتح، ورمادي غامق في الداكن. ده اللي بيخلي العين ترتاح.
• اللون الثانوي (30%): لتمييز الأقسام والعناصر الثانوية — درجة هادية من لون البراند.
• لون التمييز (10%): لون واحد صريح للأزرار الرئيسية والروابط والعناصر المهمة. وظيفته الوحيدة: يقول للعين “بص هنا”.

القاعدة اللي مبتتكسرش: كل لون له وظيفة ثابتة في التطبيق كله. اللون الأحمر للتحذيرات والحذف — مينفعش تستخدمه لزر “حفظ” في شاشة تانية. اللون المميز للأفعال الرئيسية — مينفعش يظهر في زخارف جانبية. لما اللون يبقى له معنى ثابت، المستخدم بيتعلم يقرأ التطبيق بسرعة البرق.

الوضع الداكن: مش “الوضع الفاتح معكوس”

أكبر غلطة في الـ Dark Mode: تاخد التصميم الفاتح وتعكس الألوان. النتيجة خلفية سوداء صريحة بتوجع العين ونصوص بهتانة. الوضع الداكن الصح له قواعده:

• الخلفية رمادي غامق مش أسود صريح: درجات زي #121212 أريح بكتير من #000000 — وبتدي عمق للطبقات.
• الطبقات بالارتفاع مش باللون: البطاقة اللي فوق الخلفية تبقى أفتح درجة — مش بلون مختلف.
• قلل تشبع الألوان: اللون المميز الصارخ اللي كان حلو على الأبيض هيبقى مزعج على الغامق — استخدم نسخة أهدى منه.
• النصوص مش بيضاء صريحة: أبيض مائل للرمادي (#E0E0E0 مثلًا) أريح من الأبيض الناصع على خلفية داكنة.

ولو قررت تدعم الوضعين: صممهم مع بعض من الأول. التصميم اللي بيتحول للداكن في الآخر بيطلع فيه 20 شاشة منسية شكلها غريب. اعمل نظام الألوان كمتغيرات (Tokens) — لون الخلفية، لون النص، لون التمييز — وكل وضع ياخد قيمه. كده التحويل بيبقى تلقائي ونظيف.

الخطوط: مقاس واحد غلط يبوظ التطبيق كله

على الموبايل، الخط مش عنصر جمالي — هو وسيلة القراءة الأساسية. والقواعد هنا أرقام واضحة مفيهاش اجتهاد:

و3 قواعد إضافية بيفرقوا جدًا:

• خط واحد للتطبيق كله: (بأوزانه المختلفة) — خطين مختلفين في نفس التطبيق = فوضى بصرية. الاستثناء: خط للأرقام لو التطبيق مالي.
• طول السطر: على الموبايل السطر الطويل مرهق — قلل عرض النص أو كبّر المسافة بين السطور (Line Height 1.5 على الأقل).
• احترم إعدادات المستخدم: أنظمة التشغيل بتسمح بتكبير الخط (Dynamic Type) — تصميمك لازم يتمدد معاه من غير ما يتكسر. اختبر على أكبر مقاس خط متاح.

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

6 التنقل بين الشاشات: 5 أنماط وإمتى تستخدم كل واحد

التنقل (Navigation) هو الهيكل العظمي للتطبيق. المستخدم ممكن يسامحك في لون مش عاجبه — لكن مش هيسامحك لو تاه ومش عارف يرجع. كل نمط تنقل له شخصية واستخدام، واختيار الغلط هنا بيخلي التطبيق “ملخبط” حتى لو كل شاشة لوحدها جميلة.

القاعدة الذهبية: المستخدم لازم يعرف 3 حاجات دايمًا

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

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

رحلة المستخدم: ارسم الطريق قبل ما تبني الشوارع

قبل ما تصمم أي شاشة، ارسم User Flow: خريطة بسيطة بتوضح الخطوات اللي المستخدم هيعدي عليها عشان يحقق هدفه. مثال: فتح التطبيق ← الشاشة الرئيسية ← البحث ← صفحة المنتج ← السلة ← الدفع ← التأكيد. كل سهم في الخريطة دي = انتقال لازم يتصمم.

ليه الخطوة دي مهمة؟ لأنها بتكشف المشاكل بدري ورخيص: خطوة ناقصة (نسيت شاشة تأكيد الدفع!)، طريق مسدود (وصل لصفحة ومفيش زر رجوع)، أو رحلة طويلة بلا داعي (7 خطوات لهدف يخلص في 3). الورقة والقلم في المرحلة دي أرخص من إعادة تصميم 20 شاشة بعدين. القاعدة: كل خطوة زيادة بتخسرك جزء من المستخدمين — اختصر الرحلة للضروري بس.

7 سير العمل العملي: من الفكرة لنموذج تفاعلي في 6 خطوات

طيب، عرفت المبادئ والمكونات والشبكة والألوان والتنقل. السؤال العملي: أبدأ منين لما يكون عندي فكرة تطبيق؟ الترتيب ده هو اللي بيفرق بين مشروع بيخلص ومشروع بيتوه في النص. امشي على الخطوات دي بالترتيب — ومتلخبطهاش:

الأدوات: إيه اللي تستخدمه فعلًا؟

سوق أدوات التصميم مليان، لكن خلينا عمليين — دي الأدوات اللي هتحتاجها فعلًا كمبتدئ لمتوسط:

• Figma — الأداة الأساسية. تصميم الواجهات والنموذج التفاعلي ومكتبة المكونات — كل حاجة في مكان واحد، وتشتغل من المتصفح، والتعاون فيها لحظي. النسخة المجانية كافية تمامًا للتعلم والمشاريع الشخصية. ابدأ بيها ومتشتتش نفسك.
• قواعد المنصات الرسمية: أقسام المكونات في Apple HIG وMaterial Design — مش أدوات بالمعنى الحرفي، لكنهم المرجع اللي هترجعله في كل قرار. وفر على نفسك التخمين.
• مكتبات المكونات الجاهزة: الـ Design Kits الرسمية (زي Material 3 Kit لـ Figma) بتديك مكونات جاهزة مطابقة لقواعد المنصة — استخدمها كنقطة بداية وعدّل عليها بهويتك.
• أدوات الاختبار السريع: مشاركة رابط النموذج التفاعلي من Figma على موبايلك — أسرع طريقة تشوف تصميمك بحجمه الحقيقي. اعملها عادة يومية.

وملاحظة مهمة للمبتدئين: الأداة مش هي المهارة. Figma مجرد قلم أنضف — اللي بيفرق هو فهمك للمبادئ والقواعد اللي في الدليل ده. ناس كتير بتقضي شهور تتعلم “خفايا الأداة” وهي لسه مش عارفة يعني إيه تسلسل بصري. اتعلم الأساسيات الأول، والأداة هتيجي لوحدها.

التسليم للمطور (Handoff): المرحلة اللي بتتكسر فيها التصميمات

صممت 30 شاشة تحفة وسلمتهم للمطور — والنتيجة النهائية طالعة مختلفة تمامًا. السيناريو ده بيتكرر يوميًا، والسبب غالبًا في التسليم مش في التصميم. عشان التسليم ينجح:

• سمِّ كل حاجة بأسماء واضحة: الطبقات والمكونات والشاشات — “زر_رئيسي/الحالة_العادية” مش “Rectangle 47”. المطور بيتعامل مع اللي انت مسميه.
• وثّق الحالات: كل شاشة ليها حالات (فارغة، فيها بيانات، بتتحمل، فيها خطأ) — صممهم وسلمهم. التصميم اللي فيه “الحالة المثالية” بس هيتنفذ غلط في أول موقف حقيقي.
• حدد المقاسات والمسافات: استخدم نظام الـ 8pt والتزم بيه — المطور يقدر يستنتج أي مسافة لو النظام واضح.
• اشرح التفاعلات: الأنيميشن والانتقالات لازم تتوصف (المدة، النوع) — “انتقال ناعم” مش وصف. سجل فيديو قصير للنموذج التفاعلي لو لازم.
• خليك متاح للأسئلة: أول تسليم مش آخر تواصل — المطور هيسأل، وإجابتك السريعة بتمنع اجتهادات غلط تكلفك إعادة شغل.

8 7 أخطاء بتقتل أي تطبيق مهما كانت فكرته حلوة

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

9 إزاي تختبر تصميمك قبل ما تصرف جنيه على التطوير

أغلى جملة في المجال ده: “كنا نتمنى نكتشف المشكلة دي قبل التطوير”. الاختبار المبكر رخيص — والاكتشاف المتأخر غالي. ومش محتاج ميزانية ولا معمل: محتاج 5 أشخاص وموبايل ونموذجك التفاعلي. خلينا نتكلم عن 3 اختبارات عملية تقدر تعملهم النهاردة:

اختبار الـ 5 ثواني: هل الشاشة واضحة؟

ورّي الشاشة لحد لمدة 5 ثواني بس، وبعدين اسأله: “التطبيق ده بيعمل إيه؟” و”إيه اللي المفروض تدوس عليه؟”. لو الإجابة صح — الشاشة واضحة. لو متلخبط — عندك مشكلة في التسلسل البصري أو العنوان أو الزر الرئيسي. الاختبار ده بيقيس الانطباع الأول — وهو اللي بيحدد هل المستخدم هيكمل ولا هيمشي.

اختبار المهمة: هل الرحلة شغالة؟

ادي الشخص النموذج التفاعلي واطلب منه ينفذ مهمة حقيقية: “احجز موعد”، “اشتري المنتج ده”، “غيّر صورتك الشخصية”. واتفرج من غير ما تساعده — ولا كلمة. سجل: وقف فين؟ داس غلط فين؟ سأل “أعمل إيه دلوقتي؟” إمتى؟ كل نقطة توقف = مشكلة تصميم محتاجة حل. القاعدة الذهبية: اسكت واتفرج — أي تلميح منك بيخبي المشكلة بدل ما يكشفها.

اختبار الإبهام: هل التصميم مريح للإيد؟

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

وآخر نصيحة في القسم ده — وهي الأهم: اختبر بدري واختبر كتير. اختبار واحد بعد التصميم النهائي أحسن من مفيش، لكن 3 اختبارات صغيرة أثناء التصميم أحسن بكتير. كل اختبار بيحميك من إعادة شغل مكلفة — والتصميم اللي عدى على عيون حقيقية قبل الإطلاق بيطلع واثق من نفسه.

10 خارطة طريق 30 يوم: من الصفر لأول نموذج تفاعلي

الدليل ده فيه معلومات كتير — والسؤال الطبيعي: أبدأ منين وأخلص إمتى؟ الخارطة دي بتقسم الرحلة على 4 أسابيع، كل أسبوع له هدف واحد واضح ومخرج ملموس. مش لازم تلتزم بالأيام بالحرف — لكن الترتيب مهم: كل أسبوع بيبني على اللي قبله.

قواعد اللعبة في الـ 30 يوم

• ساعة مركزة أحسن من 4 ساعات مشتتة: حدد وقت ثابت يوميًا والتزم بيه — الاستمرارية هي اللي بتبني المهارة مش الحماس.
• مشروع واحد يخلص أحسن من 5 مشاريع مفتوحة: ركز على التدفق الواحد لحد ما يبقى ممتاز — وبعدين وسّع.
• اطلب رأي غير المصممين: رأي المستخدم العادي أصدق من رأي مصمم زميلك — هو اللي هيمثل جمهورك الحقيقي.
• وثّق رحلتك: احتفظ بنسخة من كل مرحلة (الـ Wireframe الأول، التصميم قبل التعديل) — ده اللي هيبقى معرض أعمالك وهيوضح طريقة تفكيرك لأي عميل أو شركة.

؟ الأسئلة الشائعة