نظرة عامة على المشروع
نظمنا صفحات Chroma Dewy على Shopyy حول إطلالات المكياج وعرض المنتجات الملونة. تجمع لافتة الرئيسية صور مكياج العيون المقربة مع نص المجموعة، ثم تقود لوحات الظلال وصور الفئات إلى التصفح. تربط الهوية البرتقالية والخلفيات الفاتحة وصور المكياج المشبعة بين الموضوعات ومقارنة الكتالوج وفحص المنتج منفردًا.
| الخدمات | القطاع | منصة |
| تصميم وتطوير مواقع Shopyy | الجمال والعناية الشخصية | Shopyy |
| متطلبات المشروع | السوق المستهدف | نمط التصميم |
| إطلالات المكياج وعرض المنتجات الملونة | واجهة بالإنجليزية وأسعار بالدولار الأمريكي | هوية برتقالية وخلفيات فاتحة وصور مكياج مشبعة الألوان |
| عرض سعر المشروع | التسليمات | مدة التنفيذ |
| 4,500 يوان صيني | الصفحة الرئيسية وهيكل التصنيفات وتفاصيل المنتجات والتصميم المتجاوب | 7 أيام |
تحدي التصميم
يجب أن يعبر موقع التجميل عن تأثير المكياج مع تسهيل مقارنة الألوان والأدوات. استخدمنا الصور المقربة للأشخاص لتقديم الموضوع، وشبكات منتظمة للوحات الألوان والفرش والعبوات، حتى لا يتنافس نوعا المعلومات.
استراتيجية التصميم: إطلالات المكياج وعرض المنتجات الملونة
تجمع لافتة الرئيسية لقطات العيون المقربة ونص المجموعة، وتقود لوحات الظلال وصور الفئات أسفلها إلى المنتجات. تحدد الرئيسية الاتجاه، وتدعم التصنيفات المقارنة، وتشرح صفحات المنتجات الشكل والمواصفات، وتربطها مداخل التنقل والمحتوى.
نظم خط Josefin Sans العناوين والتنقل والمتن، مع تحديد الأولويات بحجم الخط ووزنه وعرض الفقرة. تستمر الهوية البرتقالية والخلفيات الفاتحة والصور المشبعة عبر الصفحات. تتقارب المعلومات داخل المجموعات وتفصلها مسافات أوسع، ليبقى لكل صورة وشرح وإجراء مكان واضح.
الحركة والوظائف: دعم الاختيار الحالي
تحتفظ لافتة الرئيسية بسهمي الانتقال، وتقود صور الفئات أسفلها إلى الكتالوجات. تركز خيارات الكمية والصور والشروح المجمعة على المنتج الحالي. ويختصر الجوال التنقل في مدخل قائمة واضح مع الحفاظ على مسار التصفح.
لافتة الرئيسية: مكياج العيون هو البؤرة الأولى
وضعنا مجموعتين من لقطات مكياج العيون يمين اللافتة ونص الموضوع يسارها، مع شعار Chroma Dewy البرتقالي في ترويسة بسيطة. تكشف اللقطات المقربة اللون والملمس مباشرة، وتتيح الأسهم الانتقال إلى موضوعات أخرى.
يربط Josefin Sans بخفته بين التنقل ونصوص المنتجات، وتترك الخلفية الفاتحة مساحة لألوان المكياج القوية. لكل من الصورة والنص منطقة مستقلة، فلا تحتاج الشاشة الأولى إلى جميع تفاصيل المنتج.
منطقة الجديد: مقارنة الألوان في شبكة منتظمة
نظمنا New Arrivals في أعمدة من بطاقات لوحات الظلال، لتظهر مقارنة الألوان مباشرة على الخلفية الفاتحة. تظل الأسماء والأسعار تحت الصور مختصرة، ثم تأتي صور فئات Brushes وEyes وLips.
تؤسس لوحات الألوان المتساوية والبطاقات الموحدة نظامًا واضحًا، مع تباعد متساوٍ بين الفئات. يظهر البرتقالي كعلامة هوية محدودة، بينما تأتي الألوان الرئيسية من المنتجات نفسها.
تصنيف الفرش: إظهار الشكل ومحتويات المجموعات
تعرض صفحة الفرش القطع المفردة والمجموعات في شبكة واحدة تحت عنوان Makeup Brushes. توضح الصور رؤوس الفرش والمقابض وعدد القطع أولًا، ثم تتبعها الأسماء والأسعار.
تقلل الخلفية البيضاء والمسافات الواسعة ازدحام البطاقات، ويحافظ التنقل بخط رفيع وعنوان التصنيف المركزي على الخفة. ولأدوات الكتالوج مكان مستقل لا يقطع إيقاع المقارنة.
صفحة المنتج: صورة العبوة تقدم معلومات القطعة
تمنح صفحة The Volturi الجانب الأيسر لصورة عبوة بالأحمر والأسود، وتضع الاسم والسعر والكمية والوصف القصير يمينًا. تقدم الصورة الخصائص البصرية ثم يكمل النص التفاصيل.
تخلق الخلفية الحمراء حدًا واضحًا مع الصفحة الفاتحة، وتنظم الإطارات الرفيعة والمسافات المتقاربة منطقة الإجراءات. يبقي الفراغ بين الصورة والنص الموضوع الداكن واضحًا ضمن واجهة الموقع الخفيفة.
امتداد التفاصيل: فصل المحتوى المساند عن التوصيات
تستمر الصفحة بصور مصغرة ومراجعات وتوصيات You May Also Like. تربط المسافات هذه الأقسام مع الفصل بين معلومات المنتج الحالي ومداخل مواصلة التسوق.
تستخدم صور التوصيات أعمدة موحدة، وتبقى صور الأشخاص والعبوات والأدوات على خلفيات فاتحة. تقسم العناوين الصغيرة والفراغات الرأسية مجموعات المحتوى، ليواصل القارئ البحث عما يهمه.
رئيسية الجوال: تنقل مختصر مع الموضوع والجديد
يختصر الجوال التنقل الأفقي في مدخل MENU أحمر، مع ترتيب الشعار والبحث رأسيًا فوقه. يلي لافتة المجموعة قسم New Arrivals، محافظًا على تسلسل الإطلالة ثم المنتج.
في العرض الضيق، تحصل صور المنتجات على مساحة أكبر، وتُرتب العناوين والأسعار رأسيًا. يختلف شريط القائمة الأحمر بوضوح عن المحتوى الفاتح، ليعود الزائر إلى الفئات أثناء تصفح الموضوع.
منتج الجوال: الصور والشروح بالتتابع
تبدأ صفحة المنتج المحمولة بمسار التنقل وصورة العبوة الكبيرة، ثم الاسم والسعر والكمية. تبقى الصورة محتفظة بالموضوع كاملًا، ويتحول العمودان المكتبيان إلى قراءة متصلة.
تتكيف العناوين المحاذاة إلى اليسار بالتفاف طبيعي، مع مساحة بين السعر والإجراءات. تصل الخلفية الفاتحة والإطارات الدقيقة وألوان العلامة الصفحة بباقي الموقع، محافظة على اللغة البصرية نفسها.
خلاصة التصميم: ربط الموضوع بالتفاصيل العملية
في Chroma Dewy، تقود إطلالات المكياج والمنتجات الملونة الهوية البرتقالية والخلفيات الفاتحة والصور المشبعة عبر الرئيسية والتصنيفات والمنتجات. تعبر الصور عن الموضوع، وتشرح النصوص التفاصيل، وتدعم مداخل الكتالوج والخيارات الخطوة التالية. ويحافظ الجوال على الترتيب لتجربة متسقة.
خطط لموقع Shopyy واضح لعلامتك التجارية
شاركنا موقعك الحالي ومواد علامتك والصفحات المطلوبة. سنراجع نوع المنتجات والسوق المستهدف وأولويات المحتوى لنخطط معًا للصفحات والتصميم والوظائف المناسبة.
