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