سبع قواعد ذهبية لتصميم القائمة على الجوال

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

1. النص الأساسي لا يقل عن 16 بكسل

16 بكسل (1 rem) هو الحد. أقل من ذلك يجعل العميل يكبر يدوياً ويكسر الهرمية. التوصية: جسم 16-18 بكسل، اسم المنتج 18-22، عنوان الفئة 22-28.

2. أهداف اللمس 44 × 44 بكسل كحد أدنى

Apple HIG وGoogle Material يطلبان 44 × 44. الأصغر = 15-23% أخطاء أكثر. بين علامات التبويب 8 بكسل على الأقل.

3. الهرمية كنمط F

القراءة على الجوال عمودية. ضع المقترحات في الأعلى، ثبّت شريط الفئات. إذا لم يفهم العميل المنطق في 5 ثوان، يفوز زر الرجوع.

4. WebP/AVIF والتحميل البطيء

WebP أخف 30% من PNG. AVIF أصغر بـ15-20%. الصور تُحمَّل عند فتح الفئة فقط — <img loading="lazy">.

5. قاعدة الثلاث ثوان

LCP أقل من 3 ثوان. اختبر بـ3G محاكى — واي فاي المقهى نادراً أفضل. حزمة JavaScript أقل من 150 KB.

6. لوحة ألوان 4-5 كحد أقصى

لون العلامة + ثانوي + لمسة + أسود + أبيض. أيقونات الحساسية بالشكل وبالون — 1 من 12 رجلاً يعاني عمى الألوان أحمر-أخضر.

7. اختبار اليد الواحدة

ضع الإجراءات الحرجة في النصف السفلي — قاعدة منطقة الإبهام. منصات Mobile-first مثل thMenu تتبع هذه الأنماط افتراضياً.

قائمة جوال مضبوطة جيداً ترفع الطلبات 12-18%. السيئة تعيد العميل إلى النادل وتمحو ميزة الرقمنة.

هل وجدت هذا مفيداً؟ شاركه.