إنتقل إلى المحتوى الرئيسي

اتجاه التصميم

تسمح لك خطوة اتجاه التصميم بمراجعة وتدقيق وتثبيت التصميم المرئي لقالبك قبل أن يقوم Theme Builder بتوليد القالب بالكامل.

نظرة عامة​

بعد إكمال مقابلة الاكتشاف (Discovery Interview)، يعرض Theme Builder اتجاه تصميمك مع عرض معاينة سطح المكتب والهاتف المحمول. يتيح لك ذلك رؤية كيف سيبدو تصميمك بالضبط على أجهزة مختلفة قبل الالتزام بالقالب.

مكونات اتجاه التصميم​

1. لوحة الألوان​

مخطط ألوان القالب الخاص بك، ويشمل:

  • اللون الأساسي — اللون الرئيسي للعلامة التجارية المستخدم للأزرار والروابط واللمسات المميزة.
  • اللون الثانوي — لون مكمل لإضافة التنوع.
  • لون التمييز — لون التمييز للعناصر المهمة.
  • الألوان المحايدة — درجات الرمادي والأبيض للخلفيات والنصوص.
  • لون النص — اللون الأساسي للنص لضمان سهولة القراءة.

2. الخطوط (Typography)​

اختيارات الخطوط لـ:

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

3. التخطيط والمسافات​

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

4. العناصر المرئية​

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

عرض المعاينة (Preview Rendering)​

معاينة سطح المكتب​

يعرض معاينة سطح المكتب تصميمك بعرض كامل (عادةً 1200 بكسل أو أكثر):

  • قائمة التنقل الكاملة.
  • التخطيط الكامل بجميع الأعمدة.
  • خطوط وأبعاد مسافات كبيرة.
  • جميع العناصر المرئية بالحجم الكامل.

معاينة الهاتف المحمول​

يعرض معاينة الهاتف المحمول تصميمك بعرض الهاتف المحمول (عادةً 375 بكسل):

  • قائمة تنقل متجاوبة (قائمة الهامبرغر).
  • تخطيط عمود واحد.
  • خطوط وأبعاد مسافات معدلة.
  • أحجام أزرار سهلة اللمس.

نقاط التوقف المتجاوبة​

يقوم Theme Builder بعرض المعاينات عند نقاط التوقف التالية:

الجهازالعرضالمعاينة
الهاتف المحمول375 بكسلهاتف عمودي
التابلت768 بكسلتابلت أفقي
سطح المكتب1200 بكسلسطح مكتب بعرض كامل
سطح المكتب الكبير1920 بكسلشاشة فائقة الاتساع

تحسين تصميمك​

إجراء التعديلات​

يمكنك تحسين اتجاه تصميمك عن طريق:

  1. تعديل الألوان — تغيير أي لون في لوحة الألوان.
  2. تغيير الخطوط — اختيار أنواع خطوط مختلفة.
  3. تعديل المسافات — ضبط الحشوة والهوامش.
  4. تحديث التخطيط — تغيير عرض الحاويات وأعمدة الشبكة.
  5. تخصيص العناصر — تعديل أنماط الأزرار، وتصميمات البطاقات، وما إلى ذلك.

تحديثات المعاينة​

تنعكس التغييرات في الوقت الفعلي:

  • يتم تحديث معاينة سطح المكتب فورًا.
  • يتم تحديث معاينة الهاتف المحمول فورًا.
  • يتم تحديث جميع نقاط التوقف المتجاوبة.
  • يمكنك التبديل بين المعاينات للتحقق من التغييرات.

عرض المقارنة​

قارن اتجاه تصميمك بما يلي:

  • التصميم الأصلي — لمعرفة ما الذي تغير.
  • تصميمات المنافسين — للمقارنة بمواقع الإلهام.
  • الإصدارات السابقة — للعودة إلى اتجاه تصميم سابق.

الموافقة على اتجاه التصميم​

بمجرد أن تكون راضيًا عن تصميمك:

  1. مراجعة كلا المعاينتين — للتأكد من أن مظهر سطح المكتب والهاتف المحمول جيد.
  2. التحقق من جميع الألوان — لضمان التباين وسهولة الوصول.
  3. اختبار الخطوط — للتحقق من سهولة القراءة في جميع الأحجام.
  4. تأكيد التخطيط — للتحقق من المسافات والمحاذاة.
  5. الموافقة على التصميم — للمتابعة إلى توليد القالب.

الخطوات التالية​

بعد الموافقة على اتجاه تصميمك:

  1. يقوم Theme Builder بتوليد القالب الكامل الخاص بك.
  2. يتم تثبيت القالب على موقع WordPress الخاص بك.
  3. يمكنك التخصيص أكثر باستخدام مُخصص WordPress (WordPress customizer).
  4. المتابعة إلى Hospitality Menus أو الميزات الأخرى.

أفضل الممارسات​

  • الاختبار على أجهزة حقيقية — استخدم الهواتف والأجهزة اللوحية الفعلية إن أمكن.
  • التحقق من سهولة القراءة — تأكد من أن النص قابل للقراءة في جميع الأحجام.
  • التحقق من التباين — استخدم Validate Palette Contrast لسهولة الوصول.
  • النظر في الأداء — تحسين الصور والخطوط لضمان السرعة.
  • التخطيط للمحتوى — التأكد من أن التخطيط يعمل مع المحتوى الفعلي الخاص بك.

استكشاف الأخطاء وإصلاحها​

المعاينة لا تتحدث​

  • تحديث الصفحة.
  • مسح ذاكرة التخزين المؤقت للمتصفح.
  • تجربة متصفح مختلف.
  • التحقق من اتصال الإنترنت.

الألوان تبدو مختلفة​

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

مشاكل الخطوط​

  • التحقق من تحميل ملفات الخطوط.
  • التحقق من حجم الخط عند نقاط التوقف المختلفة.
  • الاختبار بمحتوى فعلي.
  • النظر في طول السطر لضمان سهولة القراءة.

وثائق ذات صلة​