Advertisement
  1. Web Design
  2. Workflow
Webdesign

.إرشادات مشروع Magento للمصممين

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Saadkhaled (you can also view the original English article)

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

الغرض من هذا الدليل هو زيادة الوعي بالتصميم لغرض معين والتكنولوجيا (Magento) ، مع تنفيذ أفضل الممارسات العامة لتصميم التجارة الإلكترونية. 


المقدمة

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


انها ماجنتو

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

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

في هذا الدليل ، سأعرض جميع مشاهدات الصفحات المهمة في Magento

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

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

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

هيا نبدأ...


الأجزاء الرئيسية من المتجر

هناك العديد من الأقسام الرئيسية التي يجب تغطيتها مع كل تصميم Magento:

  • صفحات CMS
  • صفحة قائمة المنتجات
  • صفحة عرض المنتج
  • صفحة تسجيل الدخول / تسجيل المستخدم - (تسجيل الدخول أو عرض الضيف)
  • صفحة حساب المستخدم
  • عملية الخروج

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


الصفحة الرئيسية

Home Page screenshot

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

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

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

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


صفحة الفئات 

عنوان URL التوضيحي: صفحة التصنيف 

Category page

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

بافتراض أنك قد قمت بتعيين كتالوج منتجاتك بعناية واهتمام ، سيكون لديك الآن هذه الجوانب المهمة من الصفحة للعناية التالية: 

تصفية المنتج 

  • عرض الشبكة 
  • عرض القائمة 

تفترض أنك ستحتاج إلى كل من الطريق ، من المهم تصميم كلاً من هذه المشاهدات. 

. فرز المنتجات 

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

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

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

نصيحة: لا يستغرق الأمر سوى بضع ساعات من العمل الإضافي ، ولكن من الأفضل أن يكون لديك خياران "من الألف إلى الياء" و "ZA" مدرجًا أسفل الآخر بدلاً من استخدام نقرة غير مألوفة إضافية لذلك. 

الأسعار 

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

تقييم 

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

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

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


صفحة المنتج 

مع Magento لديك 6 + 3 أنواع من المنتجات تحت تصرفك ، حيث يتم وضع تلك +3 في المتجر باسم " Up-Sell " أو "Cross-Sell" أو " Related ". 

تحتاج إلى معرفة النظام الأساسي الذي تقوم بتصميمه 

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

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

منتج بسيط 

عنوان URL التوضيحي: هاتف Nokia 2610 - صفحة المنتج 

العناصر التالية من "المنتج البسيط" ، بشكل عام ، مشتركة لجميع أنواع المنتجات: 

نصيحة: استخدم "Firebug" أو "Web inspector" لإلقاء نظرة على العناصر الموجودة في صفحة العرض التوضيحي الفعلية لنفسك. 

  •  مربع المنتجات الأساسية
  • مربع ضمانات المنتج 

مربع المنتجات الأساسية 

  • مربع صورة المنتج 
    •  صورة المنتج
    • شريط التمرير Zoom Image 
    • مزيد من وجهات النظر - صور مصغرة 
  • متجر المنتجات 
    •  مربع تصنيفات
    •  مربع التوفر
    •  مربع السعر
    • الإضافة إلى المربع - إضافة إلى زر "سلة التسوق" و "إضافة إلى قائمة المفضلات" و "إضافة إلى المقارنة" 
    • مربع نظرة عامة سريعة 

مربع ضمانات المنتج 

هذا القسم من صفحة المنتج مخصص لـ "التفاصيل" ، "Up sell products" ، "Reviews" ، "Tags" إلخ. 

واحد quirk Magento هنا هو "المراجعات" التي تم عرضها على المستخدم بعد إعادة تحميل الصفحة ، واستبدال كل المحتويات الأخرى في مربع الضمانات.  ضع هذا في اعتبارك أثناء التصميم ، أو راجع هذه المقالات حول كيفية جعلها تعمل من أجلك من تدفق محتوى القالب "الافتراضي". 

منتج بسيط مع خيارات مخصصة 

عنوان URL التوضيحي: منتج بسيط يتضمن خيارات 

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

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

منتج الحزمة 

عنوان URL التوضيحي: منتج الحزمة 

تحتوي صفحة منتج الباقة على تخطيط مماثل للمنتج البسيط ، باستثناء السعر الذي يمكن عرضه كـ "من / إلى" و "منخفض" ، بالإضافة إلى "السعر كما تمت تهيئته. 

في أنواع المنتجات المجمعة ، توجد أيضًا اختلافات في الصفحات العامة والأسعار ، على النحو التالي: 

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

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

المنتج المجمعة 

عنوان URL التوضيحي: المنتج المجمّع 

والفرق الهام الوحيد عند مقارنته بعرض صفحة "المنتج البسيط" هو أن جميع منتجات المجموعة يتم عرضها داخل الجدول. 

منتج شكلي 

عنوان URL التوضيحي: منتج قابل للتكوين 

تحتوي صفحة نوع المنتج هذه على خيارات المنتج القابلة للتكوين في شكل إسقاط مماثل لتلك التي يتم عرضها في "حزمة المنتج". 

منتج قابل للتنزيل 

عنوان URL التوضيحي: منتج قابل للتنزيل 

يشبه التخطيط تخطيط "المنتج البسيط" إلى حد كبير ويحتوي على ميزة "Sample" التي توفر رابطًا إلى الجزء القابل للتنزيل من "المنتج القابل للتنزيل" الفعلي. 

بعد الشراء ، يمكن للعملاء تنزيل المنتج من صفحة الدفع. 

إذا لم تكن قد قمت بذلك بالفعل ، يجب أن تتعرف على جميع المنتجات الداخلية من خلالمراجعة وثائق Magento واستكشاف الأعمال الداخلية للتخطيطات والقوالب. 

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

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

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


حتى بيع ، بيع عبر والمنتجات ذات الصلة 

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

حتى بيع المنتجات 

عنوان URL التوضيحي: منتج البيع لأعلى 

يتم عرض منتجات بيع أعلى على صفحة المنتج في وصف المنتج.   يقدم هذا المثال لوحة مفاتيح أكثر تكلفة ومنتجات أخرى كمبيعات مضافة إلى لوحة المفاتيح الأقل تكلفة. 

عبر بيع المنتجات 

عنوان URL التوضيحي: (أضف شيئًا إلى سلة التسوق أولاً) صفحة العربة 

تظهر منتجات البيع المتبادل بجوار سلة التسوق بشكل افتراضي.  عندما يتنقل العميل إلى صفحة عربة التسوق (سواء بشكل تلقائي بعد إضافة منتج أو غير ذلك) ، يتم عرض هذه المنتجات كبيعات مبيعية للعناصر الموجودة بالفعل في عربة التسوق. 

يمكن اعتبار منتجات البيع المتقاطع كمشتريات مدفوعة ، مثل المجلات والحلوى في سجلات النقد في متاجر البقالة. 

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

أنواع المنتجات والأسعار (الأسعار) 

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

أنواع المنتجات: 

  •  منتج بسيط ومنتج بسيط مع خيارات
  •  منتج مجمعة
  • حزمة المنتج و "حزمة" مع خيارات 
  •  المنتج شكلي و "شكلي" مع خيارات
  • منتج قابل للتنزيل و "قابل للتنزيل" مع خيارات 
  • المنتج الافتراضي و "الظاهري" مع خيارات 

أنواع الأسعار: 

  •  سعر عادي
  •  سعر خاص
  •  من / إلى السعر
  •  السعر كما تمت تهيئته
  • أسعار الطبقة 

يمكن أن يكون لكل منتج سعر خاص بالإضافة إلى السعر العادي.   أيضا ، يمكن تعيين سعر خاص لبدء وتنتهي في تاريخ المطلوب. 

يتم عرض "من / إلى" و "السعر كما تمت تهيئته" على منتج حزمة حيث يتم حساب السعر من العنصر بأقل سعر يصل إلى العنصر بأعلى سعر في الحزمة.   في صفحة الفئة ، لن يكون هناك سوى سعر "من / إلى" المعروض لنفس المنتج. 

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

على سبيل المثال: يمكنك بيع اللوازم المكتبية وترغب في إنشاء عرض ترويجي حيث يقوم العملاء الذين يشترون ثلاثة مربعات من ورق الطابعة بتوفير المال مقارنة بشراء صندوق واحد فقط. 

بعد ذلك ، سنتعرف على "صفحة سلة التسوق" ، مما يجعلك تقترب خطوة واحدة من عملية Checkout الفعلية. 


عربة التسوق 

 عنوان URL التوضيحي: (أضف شيئًا إلى سلة التسوق أولاً) سلة التسوق 

من الواضح أن هناك حالتين للعربة: فارغة ومأهولة. 

سلة مأهولة 

هنا لدينا صفحة وضعت في صفين.   الأول هو الجدول الذي يعرض جميع المنتجات في انتظار الشراء.   تحتهم عادة ما يكون لدينا منتجات "عبر بيع" (انظر "بيع عبر" المنتجات) ، رموز الخصم ، الشحن والضرائب وأخيرا قسم الخروج مع المجاميع الفرعية ، المجاميع الكلية و "المضي قدما للخروج" زر. 

في الرسالة: 

  •  عربة التسوق
  •  مربع عبر بيع
  • الخصم و الشحن و الخروج 

عربة التسوق عبارة عن جدول يعرض عناصر سلة التسوق مع أسماء الفئات للتناوب بين أنماط كل صف في الجدول.   هذا يساعد على تمييز المنتجات عن بعضها البعض عندما يكون هناك أكثر من 4 منتجات في سلة التسوق. 

لا يظهر مربع البيع المتقاطع إلا إذا كان المنتج يحتوي على منتج عبر بيع أو منتجات تم تعيينها من لوحة مشرف المتجر.   يرجى الاطلاع على صفحة بيع عبر. 

يتم وضع رموز الشحن والخصم مع زر Checkout داخل div ( .cart-assateral-block ) وبما أنها تحتوي على حقول إدخال تعرض رسائل خطأ ، فيجب أن تكون مصممة أيضًا. 

 عربة فارغة

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


الخروج (صفحة واحدة) 

عنوان URL التوضيحي: (أضف شيءًا إلى سلة التسوق أولاً) صفحة واحدة Checkout 

هناك قسمان رئيسيان في "صفحة الخروج الواحدة": 

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

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

ما لم يتم الطعن في إجراء عملية فحص مخصصة بالكامل ، فإنه من المستحسن بشدة استخدام هذا الجزء من "الجلد" فقط. 

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

يتمثل أحد التغييرات المحتملة في سلوك "علامات التبويب" في جعلها مرئية في وقت واحد وتستخدم الرسوم المتحركة من CSS3 أو جافا سكريبت للإنزلاق للخطوة التالية أو السابقة.   بطبيعة الحال ، ستظل بحاجة إلى "مؤشر التقدم" الذي يمكن تعيينه أعلى خطوات السحب التي تشير إلى جميع الخطوات الموجودة في العملية وتمييزها. 

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

إذا لم تسر الأمور كما هو مخطط لها عند الدفع ، حسنًا ، فسيظهر للمستخدم رسالة خطأ سنتناولها بعد ذلك. 


صناديق الرسائل 

في Magento يتم التعامل مع جميع التفاعل السياقي بين المستخدم والمخزن من خلال مربعات الرسائل.   يمكن أن تحتوي مربعات الرسائل على "رسائل الخطأ" أو "رسائل النجاح" المقدمة للمستخدم. 

ولما كانت هذه التفاعلات جزءًا أساسيًا من تجربة المستخدم ، فيجب اعتبار تصميمها وتنسيبها كأولوية وليس بعد التفكير. 

مثال رسالة الخطأ في السياق: 

مثال رسالة النجاح بعد إرسال البيانات الصالحة: 

مثال رسالة الخطأ بعد إرسال البيانات غير المقبولة: 

مثال رسالة الإخطار بعد إرسال البيانات: 

يجب أن يكون الاعتبار الأساسي هو وضع تخطيط مربعات التفكير في السياق والسياق. 

يجب أن يكون التصميم صريحًا جدًا ، نظرًا لأنه يلزمه فقط أن يلائم شكل ومظهر الموقع. 


بحث 

 عنوان URL التوضيحي: نتيجة البحث 

تشتمل وظيفة البحث المضمنة في الواجهة الأمامية من Magento على ثلاث طرق للبحث عن المنتجات: 

  • بحث منتظم - باستخدام مربع البحث 
  • البحث المتقدم في الكتالوج - باستخدام صفحة منفصلة مع خيارات لإعدادات البحث 
  • البحث باستخدام الإكمال التلقائي - البحث باستخدام نتائج مقترحة تلقائيًا 

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

لا صفحة النتائج 

ماذا سيحصل المستخدم على رؤية بجانب "صندوق الرسائل" الافتراضي لإعلامه بأنه لم يتم العثور على شيء؟ 

هل ستزودهم باقتراحات في حالة وجود كلمة بها أخطاء إملائية ، و / أو صفحة بحث متقدم حيث يمكن لمستخدميك العاديين أو المدروسين البحث باستخدام SKU ضمن معايير أخرى؟ 

البحث المتقدم 

 نموذج بحث متقدم

نتائج البحث المتقدم 

بحث الإكمال التلقائي 


404 صفحة 

عنوان URL التوضيحي: لا يوجد شيء يمكن رؤيته ... 

الصفحة 404 تأتي كإعداد افتراضي مع Magento ولكن ، مثل الـ favicon ، يمكن أن تنزلق من خلال الشقوق ولا تحصل على الاهتمام الذي تستحقه.  بصفتك صفحة CMS ، يمكنك التخطيط لـ "Oh No!" سيناريو المستخدم بجعله أقل إجهادًا ويوفر إستراتيجية طارئة للمستخدم. 


.كتل الشريط الجانبي 

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

  • التنقل بين الطبقات 
  •  اختيار العملة
  •  النشرة الإخبارية
  •  الكلمات الشعبية
  •  تصويت
  •  مقارنة السلعة
  • منتجات ذات صله 
  • عربتي 

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


حسابي ورسائل البريد الإلكتروني المعاملات 

حسابي 

فوردعالم!   وصلنا أخيرا إلى الجزء الذي في النهاية يهم أكثر. 

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

إنه مكان رائع لتكوين الثقة بين العميل والمتجر ، وتجنب الاتصال غير الضروري من خلال إعلام المستخدمين المسجلين عن كل جانب من جوانب تجربة التسوق الخاصة بهم. 

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

رسائل البريد الإلكتروني المعاملات 

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

يجب أن تكون التصميمات الخاصة بهذه الرسائل الإلكترونية جاهزة قبل الإطلاق لأنها تحتاج إلى المزج مع باقي الهوية المرئية للعلامة التجارية. 

لحسن الحظ ، يسمح لك Magento بالتحكم الكامل في هذه الأمور.  يمكنك العثور على إجابات في إحدى المشاركات القديمة . 


استنتاج 

أدرك أن هذا كان قليلاً من قراءة طويلة لذلك أنا سرد بعض النقاط البارزة والأشياء الهامة في النهاية. 

يجب عليك الرجوع قدر المستطاع ويمكنك الرجوع إلى هذا المقال كنوع من دليل عام أو تذكير عند مناقشة المشاريع وأثناء التصميم. 

إرشادات عامة 

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

تصميم التسليمات 

هذه توصيات تتعلق بـ PSD الخاص بك تم تسليمها إلى مطور أو عميل.   سيكون من الرائع أيضًا استخدام نوع من "خدمة السحاب" مثل "Dropbox" للمشاركة. 

  • واحد PSD - تنظيم في مجموعات طبقة أو مجموعات الطبقات 
  • إضافة ملاحظات - وصف ماذا وأين وكيف ولماذا عند الحاجة 
  • تعريف الألوان - هذا مفيد للغاية عند ترميز CSS 
  • حدد الحالات التي تمحور حولها ، وقم بزيارتها ، وحالاتها النشطة والعادية للروابط 

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

تذكر ، لا أحد يلاحظ ما تفعله حتى لا تفعل ذلك. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.