تصميم واجهات تطبيقات UI/UX: لماذا يفيدك أن يصمم ويبرمج تطبيقك الفريق نفسه؟

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

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

UI وUX بلغة صاحب المشروع

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

التطبيق الجميل بتجربة سيئة يُحذف بعد أول استخدام. والتطبيق العادي الشكل بتجربة واضحة يُستخدم كل يوم. لذلك نبدأ دائماً من التجربة.

ما الذي نصممه، وما الذي لا نصممه

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

كيف نعمل: من رحلة المستخدم إلى نسخة على جوالك

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

هذه الطريقة هي سبب سرعتنا: لا يوجد تسليم بين فريقين، ولا ملف تصميم ينتظر من يترجمه إلى كود.

التصميم العربي: أخطاء نصلحها كثيراً

العربية ليست الإنجليزية معكوسة. أخطاء نراها في تطبيقات كثيرة:

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

نشرح هذه التفاصيل بتوسع في كيف تجعل تطبيقك عربياً بشكل صحيح. وإن كان تطبيقك قائماً ويعاني منها، فإصلاح الاتجاه والخطوط يبدأ من 80$ لخمس شاشات، ومن 200$ لتخطيط RTL كامل حتى 12 شاشة، ومن 400$ لإعداد ثنائي اللغة كامل بتبديل اللغة.

الحالات التي تنساها أغلب التصاميم

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

• الحالة الفارغة: ماذا يرى المستخدم الجديد قبل أن يضيف أي شيء؟
• التحميل: هل يعرف أن شيئاً يحدث؟
• الخطأ: رسالة تشرح ماذا حدث وماذا يفعل، بالعربية الواضحة، لا "Error 500".
• انقطاع الإنترنت.
• رفض الإذن: المستخدم رفض إذن الموقع أو الإشعارات، فماذا الآن؟
• البيانات الطويلة: اسم من خمس كلمات، أو عنوان من ثلاثة أسطر.

لديك تصميم Figma جاهز؟

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

من أعمالنا

صممنا وبنينا واجهات تطبيقين منشورين على المتجرين، يمكنك تحميلهما والحكم بنفسك: DriveX بتطبيقي العميل والكابتن، وتطبيق لوح لتعليم القرآن والعربية بتطبيقي الطالب والمعلم. وفي المواقع: موقع Strathclyde International College بحركة مرتبطة بالتمرير، وموقع Veneto Paints بكتالوج منتجات بالعربية والإنجليزية.

كم يكلف تصميم واجهات التطبيق؟

التصميم مشمول في أسعار مشاريعنا، فلا يوجد بند منفصل له عندما نصمم ونبني معاً:

أما التصميم وحده دون برمجة (ملف تصميم تسلّمه لفريق آخر)، فنقدّم له عرض سعر عند الطلب بعد معرفة عدد الشاشات والمنصات. وللتفاصيل عن تكلفة المشروع كاملاً اقرأ كم تكلفة برمجة تطبيق.

متى لا نكون الخيار المناسب؟

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

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

هل أحتاج تصميماً جاهزاً قبل أن أتواصل معكم؟

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

هل أحصل على ملفات التصميم؟

نعم. الكود المبني هو المرجع النهائي، وهو ملكك بالكامل. وإن صممنا شاشات في Figma خلال المشروع، فتُسلَّم لك ضمن ملفات التسليم.

كم جولة تعديل على التصميم؟

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

هل تصممون لوحات التحكم والأنظمة الداخلية أيضاً؟

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

هل يمكن تحسين تصميم تطبيقي الحالي دون إعادة بنائه؟

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

كيف أبدأ؟

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