تصميم تطبيق متجر نباتات: إعادة تصميم الشاشة الرئيسية لمتجر إلكتروني
شاشة رئيسية لتطبيق متجر نباتات بتصميم مبتدئ: أربع أيقونات في الرأس، وثلاث قوائم منسدلة للفلاتر، وسبعة عناصر تحت كل صورة، ثم الشاشة نفسها بعد الإصلاح. كل تغيير جنبًا إلى جنب، والسبب وراء كل واحد، وملف Figma المجاني.
متجر النباتات حلّ الجزء السهل: المنتجات تُصوَّر بشكل جميل. المسودة الأولى أدناه فيها نباتات حقيقية وصور حقيقية، ثم تدفنها تحت رأس مزدحم وثلاث قوائم منسدلة للفلاتر وكتلة طويلة من نصائح العناية وسبعة عناصر تحت كل بطاقة. الإصلاح يُبقي كل الميزات ويمنح النباتات المساحة التي تستحقها.
الشاشة كاملة، قبل وبعد
مسودة المبتدئ
بعد الإصلاح
على اليسار، على المتسوّق أن يقرأ رأسًا وشريط فلاتر وثلاث جمل نصائح وكومة تفاصيل منتجات قبل أن يرى نباتًا واحدًا كاملًا. على اليمين، تظهر النباتات الأولى مباشرة بعد ثلاث كتل قصيرة، وكل بطاقة نبات كامل بسعره، واللون الأخضر له وظيفة واحدة: كل ما يمكن النقر عليه.
التخفيض يبقى في الشاشتين. نبات البيليا بسعر 24.99$ وعليه خط فوق 31.00$، ونخيل الصالون بسعر 28.00$ وعليه خط فوق 35.00$. المتجر وأسعاره وتقييماته مختلقة للتمرين، أما النباتات فحقيقية.
| مسودة المبتدئ | بعد الإصلاح | |
|---|---|---|
| أيقونات الرأس بجانب الشعار | 4 | 2 |
| الفلاتر | 3 قوائم منسدلة ورابط فرز | 4 رقائق قابلة للنقر |
| نصائح العناية | 3 جمل طويلة | 3 حقائق قصيرة مع أيقونات |
| العناصر تحت صورة كل بطاقة | 7 | 2، مع زر إضافة واحد |
| علامات التبويب | 5 | 4 |
| الهامش الجانبي | 14 px يسارًا، 12 px يمينًا | 20 px على الجانبين |
| أحجام النص | من 8 إلى 20 px | من 11 إلى 20 pt |
الإصلاح 1: الشعار والبحث والسلة، لا شيء غير ذلك
قبل
بعد
قائمة وشعار وثلاث أيقونات صغيرة، مقابل الشعار نفسه مع زرين دائريين كبيرين.
رأس المسودة يحمل قائمة وشعارًا وبحثًا وقلبًا وسلة. القلب هو قائمة الأمنيات، والشاشة المصلحة تمنح قائمة الأمنيات تبويبًا اسمه المحفوظات، فلا حاجة لأن يعيش القلب في الرأس. السلة تحتفظ بمكانها لأنها التحكم الوحيد الذي يتوقع المتسوق أن يجده أعلى المتجر، وشارتها تُظهر عدد ما فيها.
الأيقونات المتبقية أكبر: زران بقياس 44 px بدل أربع أيقونات صغيرة. الهاتف يُمسك بيد واحدة، والهدف الأكبر أسهل في الضغط. الشعار هو نفسه في الشاشتين، وهذا هو المقصود: أصلحنا الرأس بحذف الأشياء، لا بإعادة تصميم العلامة.
تغيرت الشارة من الأحمر إلى أخضر العلامة. النقطة الحمراء تقول إن هناك خطأ أو أمرًا عاجلًا. وعدد العناصر ليس هذا ولا ذاك.
الإصلاح 2: فلاتر تراها، لا قوائم منسدلة
قبل
بعد
الفئة والسعر والحجم كقوائم منسدلة مغلقة مع رابط فرز، مقابل داخلي وخارجي وعصاريات وصديق للحيوانات الأليفة كرقائق، مع تحديد داخلي.
القائمة المنسدلة تخفي خياراتها. لاستخدامها، ينقر المتسوق عليها، ويقرأ قائمة، ويختار، ثم تُغلق القائمة من جديد. ثلاث قوائم تعني ثلاث رحلات من هذا النوع قبل أن يتغير أي نبات على الشاشة. وهي تقول أيضًا أي نوع من الفلاتر موجود، لا ما بداخله.
الرقائق تعرض الخيارات علنًا. داخلي وخارجي وعصاريات وصديق للحيوانات الأليفة هي الأسئلة التي يطرحها مشتري النباتات فعلًا، فنقرة واحدة تجيب عن واحد منها، والرقاقة المحددة بالأخضر تُظهر الحالة الحالية. الرقائق الأربع تتسع لصف عرضه 350 px مع فائض 6 px، فلا شيء مقطوع ولا شيء يحتاج إلى تمرير.
الإصلاح 3: بطاقة هي النبات كله
قبل
بعد
صورة وشارة وقلب واسمان وسعر ونجوم وعدد تقييمات وزر بعرض كامل، مقابل صورة واسم قصير وسعر وزر دائري واحد.
بطاقة المسودة تكدّس سبعة أشياء تحت الصورة: الاسم اللاتيني للنبات، واسمه الشائع، والسعر، والسعر القديم، والنجوم، وعدد التقييمات، وزر إضافة إلى السلة بعرض كامل. وعلى الصورة نفسها شارة خصم وقلب. كل هذا في بطاقة بنصف عرض الشاشة.
الإصلاح يُبقي سطرين وزرًا واحدًا. الاسم قصير ("Pilea" و"Calathea") والسعر تحته، مع السعر القديم عليه خط حيث يوجد تخفيض. زر زائد دائري يحل محل شريط الإضافة العريض، لأن علامة الزائد على بطاقة المنتج نمط يعرفه المتسوقون مسبقًا.
الصور تغيرت أيضًا. قصّات المسودة تقطع النباتات والأصص غير متراصفة. الإصلاح يقصّ كل صورة بحيث يملأ النبات كله نحو 70% من ارتفاع الإطار، في المنتصف، مع أصيص كل نبات على الخط نفسه. فيُقرأ صف البطاقات كصف، لا كأربع صور مختلفة.
الإصلاح 4: نصائح العناية كثلاث حقائق
قبل
بعد
ثلاث جمل نصائح في صندوق أخضر، مقابل ثلاث أيقونات مع تسمية وكلمة واحدة لكل منها.
المسودة تقول الأشياء الصحيحة، لكن على المتسوق أن يقرأ ثلاث جمل ليجدها. الحقائق الثلاث هي الماء والضوء وهل النبات آمن للحيوانات الأليفة، ويمكن قول كل منها بكلمة واحدة: أسبوعيًا، غير مباشر، آمن.
الإصلاح يمنح كل حقيقة أيقونة وتسمية صغيرة وتلك الكلمة بخط عريض. فتُقرأ البطاقة كلها بلمحة. مشتري النباتات الذي يبحث عن "هل أضعه قرب قطتي؟" يجد "الحيوانات الأليفة: آمن" دون أن يقرأ.
الإصلاحات الأصغر
- أربعة تبويبات بدل خمسة. الرئيسية والمتجر والمحفوظات والملف الشخصي. تحولت قائمة الأمنيات إلى المحفوظات، وانتقلت السلة من شريط التبويبات إلى الرأس.
- هامش واحد. المسودة استخدمت 14 px يسارًا و12 px يمينًا. الإصلاح يستخدم 20 px على الجانبين و12 إلى 14 px بين الكتل.
- لا شارات على الصور. شارتا -20% الحمراء وNEW الزرقاء والقلب على كل صورة اختفت. التخفيض ما زال ظاهرًا لأن السعر المشطوب باقٍ.
- لون تمييز واحد. أخضر المسودة انضمت إليه شارات حمراء وزرقاء. الإصلاح يستخدم أخضر علامة واحدًا،
#1F7A4D، لكل ما يمكن النقر عليه. - سلّم خطوط حقيقي. انتقل النص من 8 إلى 20 px إلى أحجام iOS من 11 إلى 20 pt.
- عنوان قسم أقصر. "Popular Plants" صار "Popular"، لأن الشاشة كلها عن النباتات أصلًا.
دقّق في تطبيق متجرك
| السؤال | لماذا يهم |
|---|---|
| هل يمكن اختزال الرأس إلى الشعار والبحث والسلة؟ | كل أيقونة زائدة تنافس تلك التي يستخدمها الناس |
| هل يمكن تحويل أي قائمة منسدلة إلى رقائق؟ | الخيارات الظاهرة لا تحتاج نقرة إضافية |
| هل تعرض كل بطاقة منتج سعرًا واحدًا وإجراءً واحدًا؟ | سبع تفاصيل تحوّل البطاقة إلى استمارة |
| هل تُظهر الصور المنتج كاملًا بالمقياس نفسه؟ | القصّات المقطوعة تجعل الشبكة تبدو غير متساوية |
| هل يمكن تحويل أي فقرة نصائح إلى ثلاث حقائق قصيرة؟ | المتسوقون يمسحون النص بأعينهم، لا يقرؤونه |
احصل على ملف Figma
الملف المجاني يضم الشاشتين كمكوّنات، وكل إصلاح كزوج قبل وبعد، ومتغيرات الألوان وأنماط نص iOS.
ملف Figma مجاني
الشاشة الرئيسية لمتجر النباتات، قبل وبعد
الشاشتان وكل جزء مصلح كمكوّنات Figma. مجاني، للعرض فقط، انسخه إلى مسوداتك.
الأسئلة الشائعة
ما الذي ينبغي أن تعرضه الشاشة الرئيسية لتطبيق متجر إلكتروني أولًا؟
رأس قصير فيه الشعار والبحث والسلة، ثم الفلاتر كرقائق وأولى المنتجات. أبقِ كل ما ليس منتجًا، كالنصائح أو اللافتات، صغيرًا.
هل تكون الفلاتر قوائم منسدلة أم رقائق في تطبيق متجر؟
رقائق، للفلاتر القليلة التي يستخدمها الناس أكثر. الرقائق تعرض الخيارات دون نقرة، والمحددة منها تُظهر الحالة الحالية. احتفظ بالقوائم المنسدلة أو بورقة الفلاتر للقوائم الطويلة مثل السعر والحجم.
ما الذي ينبغي أن تعرضه بطاقة المنتج في تطبيق تسوق؟
صورة للمنتج كاملًا، واسم، وسعر، وزر إضافة واحد. أما التفاصيل مثل التقييمات والاسم الطويل فيمكن أن تكون في صفحة المنتج.
كيف تعرض تعليمات العناية في تطبيق؟
كبضع حقائق قصيرة مع أيقونات، كلمة واحدة لكل منها، مثل الماء: أسبوعيًا. الجمل الطويلة يمكن أن تعيش على بعد نقرة أعمق.
كم تبويبًا ينبغي أن يكون في تطبيق تسوق؟
أربعة أو خمسة. ادمج المكرر في الأماكن التي ينظر إليها الناس أصلًا، كالسلة في الرأس وقائمة الأمنيات في تبويب المحفوظات.
المصادر
- الشاشتان من تصميمنا، صُمّمتا وقيستا في Figma. المتجر وأسعاره وتقييماته مختلقة، أما أسماء النباتات فحقيقية.
- الصور عبر Pexels من Kulbir وGül Işık وKaboompics.
- Apple Human Interface Guidelines: Typography، لأحجام نص iOS المستخدمة في الشاشة المصلحة.
- نُشر أولًا كشرائح متتابعة على App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
