العين كلاس موتورز: تصميم موقع معرض سيارات خارقة (مقترح)

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

العين كلاس موتورز معرض للسيارات الفارهة والنادرة في مدينة العين بالإمارات، يعمل منذ عام 1995 كما يروي في قصّته. اقترحت عليه كنانيا موقعاً جديداً: تصميم موقع معرض سيارات داكن تقوده الصور، أُعدّ على Adobe XD ويضمّ صفحة رئيسية وصفحة سيارة وأداة مقارنة. لم يعتمد العميل هذا التصميم، ونعرضه كما قُدّم.

بالتعاون مع

Al Ain Class Motors

كل صفحات مقترح العين كلاس، مباشرة من ملف XD.

شاهد الشاشات الـ٣

رئيسية تُفتح كصالة عرض

تشبه أغلب مواقع السيارات صفحات الإعلانات المبوّبة: شبكات من الصور الصغيرة وقوائم طويلة من المواصفات. ولمعرض يبيع السيارات الخارقة اخترنا الاتجاه المعاكس، فتُفتح الرئيسية على صورة بملء الشاشة لسيارة خارقة حمراء بأبواب مرفوعة وعبارة «Crafted for the Discerning Driver». وفوقها قائمة من ثمانية عناصر هي الرئيسية والمخزون والماركات والمتجر والأخبار وبِع سيارتك ومن نحن والتواصل، ويتوسّطها الشعار مع عبارة «منذ 1995». الخلفيات سوداء والخط أبيض، ولون أحمر واحد مخصّص للأفعال، فيبقى اللون للسيارات.

البحث حسب الماركة

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

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

خمسة اختصارات وشبكة العروض

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

صفحة سيارة تُقرأ ككتيّب

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

مقارنة السيارات جنباً إلى جنب

مشترو السيارات الرياضية يقارنون الأرقام، لذلك يضمّ تصميم موقع معرض سيارات العين كلاس صفحة مقارنة. تصفّ الصفحة عدّة سيارات في أعمدة مع صورة لكل منها، ثم صفوفاً للماركة والسنة والمسافة المقطوعة ونوع الدفع والأبواب والمحرّك وناقل الحركة والقوة وعزم الدوران والتسارع والسرعة القصوى والسعر، وتُبرز أفضل قيمة في كل صف باللون الأخضر. ولكل عمود علامة صغيرة لحذف سيارته، وحين يفضّل المعرض ألّا ينشر السعر تظهر في الخانة عبارة «Ask for price». ويدعو عمود فارغ الزائر إلى إضافة سيارة أخرى، ويحتفظ شريط في أسفل الموقع بالسيارات المختارة حتى يفتح الزائر المقارنة.

نطاق المقترح

• تصميم موقع معرض سيارات على Adobe XD: الرئيسية وصفحة السيارة والمقارنة
• صورة رئيسية بملء الشاشة وقائمة من ثمانية عناصر
• بحث حسب الماركة بالفلاتر وعدد نتائج مباشر
• الوافدون الجدد والعروض حسب الماركة والسيارات المباعة والاختصارات
• صفحة سيارة بشريط صور وفيديو مميّز ومواصفات ومعرض صور
• مقارنة جنباً إلى جنب مع إبراز أفضل القيم
• الأخبار بالفلاتر والنشرة والريلز
• قُدّم مع BIGBANG IT Solutions ولم يعتمده العميل

مشاريع وخدمات ذات صلة

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

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

ما يجب أن يقدّمه تصميم موقع معرض سيارات فاخرة

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

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

بطاقة سيارة واحدة للموقع كله

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

لماذا جدول المقارنة

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

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

رحلة الزائر من الصورة إلى المعاينة

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

السيارات المباعة سجلٌّ للمعرض

قد يبدو غريباً أن يعرض تصميم موقع معرض سيارات سياراتٍ بيعت فعلاً، والموقع قائم أصلاً للبيع. لكن السيارات المباعة في سوق السيارات الفارهة من أقوى أدلّة الثقة، فالمشتري يريد أن يعرف أن المعرض باع من قبل سيارات بهذا المستوى، وأنه يعرف كيف يجدها ويسلّمها. لذلك جاءت «السيارات المباعة» بطاقة مستقلة بين الاختصارات الخمسة، وبالتصميم نفسه لبطاقات المخزون، فيقرؤها الزائر سجلّاً لمبيعات المعرض.

الأخبار والريلز والنشرة

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

وتستعمل الأخبار بطاقة واحدة فيها صورة، وشارة نوع ملوّنة (رمادية للمدوّنة وحمراء للفعاليات)، وعنوان بأحرف كبيرة، وسطران من المقدّمة. وفوق البطاقات فلاتر للكل والمدوّنات والفعاليات وأخبار السيارات، وتحتها زر «عرض الكل». أما النشرة فصندوق داكن فيه شعار ماركة وصورة سيارة بأبواب مفتوحة، وسطر واحد يدعو الزائر إلى الاشتراك كي لا يفوته أيّ عرض.

ترتيب الرئيسية من الأعلى إلى الأسفل

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

الأسود والأبيض، والأحمر للأفعال

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

الوافدون الجدد والاختصارات عن قرب

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

صفحة السيارة بالتفصيل

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

«منذ 1995» وحقائق أخرى على الصفحة

في تصميم موقع معرض سيارات بهذا المستوى تطمئن المشتريَ حقائق صغيرة، فقيمة السيارة الواحدة قد تتجاوز ثمن بيت. ومن هذه الحقائق عبارة «منذ 1995» تحت الشعار، وصورة مبنى المعرض الحقيقي بجانب قصّته، وعدد النتائج الذي يظهر قبل البحث، وتسمية كل سيارة باسمها الكامل وإصدارها، فتحمل السيارة المحدودة الإنتاج عبارة «1 من 149» في عنوانها.

أسلوب تصوير واحد للمخزون

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

ما يحتاجه فريق التطوير

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

من لوحات سطح المكتب إلى الهاتف

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

تصميم بالإنكليزية لسوق يقرأ بالعربية

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

أسئلة عن تصميم موقع معرض سيارات