نموذج تصميمدار عطورShopify، عربي من اليمين لليسار مع Tabby

متجر عطور بالعربية أولاً، اتجاه اليمين لليسار فيه مصمم لا معكوس

نموذج تصميم يوضح كيف نتعامل مع متجر Shopify بلغتين بتخطيط حقيقي من اليمين لليسار وتقسيط عبر Tabby.

المنصةShopify، عربي من اليمين لليسار مع Tabby
القطاعدار عطور
النطاقتصميم تجربة المستخدم بلغتين، قالب Shopify مخصص
الحالةنموذج تصميم
oudatelier.ae/ar
المطلوب

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

ما بنيناه

متجر Shopify بواجهتين إنجليزية وعربية ضمن قالب واحد، وخصائص CSS منطقية للتخطيط، وخطوط عربية مختارة للعناوين والنصوص، ومسار لمجموعة التجربة، وخيارات للهدايا، وعرض Tabby على مستوى صفحة المنتج والسلة. صُمم لعرض القرارات.

oudatelier.ae/ar
oudatelier.ae/ar/products/soraya-tote
oudatelier.ae/ar/cart
القرارات

خيارات اتخذناها، ولماذا.

  1. 01

    خصائص CSS منطقية بدلاً من ملف تنسيق معكوس

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

  2. 02

    العربية لغة، لا طبقة ترجمة

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

  3. 03

    الأرقام والأسعار مقروءة في الاتجاهين

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

  4. 04

    رسالة Tabby حيث يُتخذ القرار

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

  5. 05

    مجموعة التجربة كنقطة دخول

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

  6. 06

    قالب داكن بتباين مُختبَر

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

الجدول الزمني المخطط: مخطط كمشروع قالب مخصص من 6 إلى 8 أسابيع: التعرف على المتطلبات في الأسبوع 1، والتصميم في الأسبوعين 1 و2، والتطوير في الأسابيع 3 إلى 6، واختبار العربية مع قارئ لغته الأم العربية وإدخال المحتوى في الأسبوعين 6 و7، ثم أسبوع الإطلاق بعد ذلك.

ShopifyLiquidShopify MarketsTranslate and AdaptTabbyخصائص CSS المنطقيةShopify FlowJavaScript دون مكتبات إضافيةGit مع GitHub

صممه وبناه فريق الاستوديو لدينا.

ابدأ مشروعك

علامتك، مبنية بهذا المستوى.

أخبرنا ماذا تبيع ومتى تريد الإطلاق.

عرض سعر ثابت بالدرهم، مكتوب. نرد خلال يوم عمل واحد.

اطلب عرض سعر ثابتواتساب