القوائم هي تمثيل مرئي لعنصر أو أكثر من العناصر ذات الصلة. وتُستخدم بشكل شائع لعرض مجموعة من الخيارات.
المراجع
| Type | رابط | الحالة |
|---|---|---|
| التصميم | مصدر التصميم (Figma) | متوفرة |
| التنفيذ | Jetpack Compose | قريبًا |
أهمّ الميزات
- القوائم هي مجموعة مستمرة من النصوص أو الصور.
- يجب أن تبدو القوائم طبيعية وأن تكون قابلة للمسح ضوئيًا.
- تتكون القوائم من عناصر تحتوي على إجراءات أساسية وتكميلية تمثلها الرموز والنص.
الصيغ
هناك ثلاثة أنواع من القوائم: قائمة من سطر واحد وقائمة من سطرين وقائمة من ثلاثة أسطر.
- قائمة من سطر واحد: تتكوّن من سطر واحد للتواصل مع كل عنصر. يضمن هذا التصميم البسيط أن يكون كل عنصر مميزًا عن الآخر بوضوح.
- قائمة من سطرين: تستخدم خطَين متوازيَين لتوصيل كل عنصر. يضمن هذا التصميم المنظم سهولة القراءة الطبيعية ويتجنب الحمل المعرفي الزائد.
- قائمة من ثلاثة أسطر: تستخدم ثلاثة خطوط متوازية لتمثيل كل عنصر. يخلق هذا التصميم الزخرفي مستوى عاليًا من البروز البصري.
علم التشريح
- الرمز: رسم صغير يمثّل عنصرًا أو إجراءً محدّدًا، وغالبًا ما يُستخدم لتوصيل فكرة أو مفهوم بصريًا.
- خط علوي: سطر قصير من النص يظهر فوق العنوان أو العنوان الفرعي، ويُستخدم غالبًا لتوفير سياق إضافي أو تأكيد.
- العنوان: سطر نص كبير غامق يعمل كعنوان رئيسي لعنصر أو صفحة تصميم.
- العنوان الفرعي: هو سطر من النص أصغر يوفر معلومات إضافية أو سياقًا أسفل العنوان الرئيسي.
- التحكّم: عبارة عن عنصر تفاعلي يتيح للمستخدم إدخال قرار.
الولايات
المواصفات
الاستخدام
القوائم هي مجموعات منظمة عموديًا من النصوص والصور. إنّ القائمة المحسَّنة لفهم القراءة، وتتألّف من عمود واحد متواصل من العناصر. يمكن أن تحتوي عناصر القائمة على إجراءات أساسية وتكميلية تمثلها الرموز والنص.
الإجراءات التي يُنصح بها
عناصر القائمة ليست أزرارًا. ولا تحتوي العناصر على حاويات. وتكون عناصر القائمة غير محدّدة وغير مركّزة بشكل تلقائي.
تنبيه
استخدِم خلفية الحاوية لعناصر القائمة عند الضرورة فقط.
عناصر التحكّم في الاختيار
تتحكّم هذه السياسة في عرض المعلومات والإجراءات لعناصر القائمة. ويمكن محاذاتها مع الحافة البادئة أو اللاحقة لعنصر القائمة.
- مربّعات الاختيار: اختَر عنصرًا أو أكثر من عناصر القائمة.
- أزرار الاختيار: اختَر عنصرًا واحدًا فقط من القائمة.
- مفاتيح التحكّم: انقر على أحد عناصر التحكّم لتفعيله أو إيقافه.
الإجراءات التي يُنصح بها
استخدِم مؤشر اختيار الرموز لعرض العنصر الذي تم اختياره في القائمة بوضوح. سيساعد هذا المستخدمين على التعرف بسهولة على العنصر الذي حددوه وتحسين تجربة المستخدم الإجمالية.
الإجراءات غير المُوصى بها
تجنَّب الاعتماد فقط على لون الخلفية للإشارة إلى التحديد في قائمة.
الإجراءات غير المُوصى بها
تجنب وضع الأزرار داخل عنصر القائمة لأن ذلك قد يتسبب في حدوث التباس حول العنصر الذي يتم التركيز عليه حاليًا.
الرموز
الإجراءات التي يُنصح بها
إذا كنت تعرض النوع نفسه من المحتوى في القائمة، احذف الرموز لتقليل الضوضاء المرئية وتحسين تجربة المستخدم. تجنَّب استخدام الرموز في قائمة إذا كانت لا تخدم أي غرض ولا تقدّم معلومات إضافية.
الإجراءات غير المُوصى بها
تجنَّب استخدام الرمز نفسه لكل العناصر في قائمة معيّنة. وقد يكون هذا مربكًا بصريًا ومربكًا للمستخدمين. بدلاً من ذلك، استخدم الأيقونات فقط عندما تضيف قيمة أو توفر معلومات إضافية.
الصور الرمزية والصور
يمكن أن تتضمن عناصر القائمة صورًا في اقتصاص دائري لتمثيل شخص أو كيان.
