القوائم

القوائم هي تمثيل بصري لعنصر واحد أو أكثر مرتبط ببعضه. ويتم استخدامها عادةً لعرض مجموعة من الخيارات.

غلاف القائمة

المراجع

النوع رابط الحالة
التصميم مصدر التصميم (Figma) متاح
التنفيذ Jetpack Compose متاح

أهم التفاصيل

  • القوائم هي مجموعة مستمرة من النصوص أو الصور.
  • يجب أن تبدو القوائم طبيعية وأن تكون قابلة للمعاينة.
  • تتألف القوائم من عناصر تحتوي على إجراءات أساسية وتكميلية يتم تمثيلها بالأيقونات والنصوص.

المتغيرات

هناك ثلاثة أنواع من القوائم: قائمة من سطر واحد وقائمة من سطرَين وقائمة من ثلاثة أسطر.

بنية القوائم

  1. قائمة من سطر واحد: سطر واحد للتواصل مع كل عنصر يضمن هذا التصميم البسيط أن يكون كل عنصر مختلفًا بوضوح عن الآخر.
  2. قائمة من سطرَين: تستخدِم سطرَين متوازيين للإشارة إلى كل عنصر. يضمن هذا التصميم المُنظَّم سهولة القراءة ويتجنّب التداخل العميق في المحتوى.
  3. قائمة من ثلاثة أسطر: تستخدِم ثلاثة أسطر متوازية لتمثيل كل عنصر. يُضفي هذا التصميم الزخرفي مستوىً عالٍ من الظهور المرئي.

علم التشريح

بنية القوائم

  1. الرمز: رسم صغير يمثّل عنصرًا أو إجراءً معيّنًا، وغالبًا ما يُستخدَم للتعبير بصريًا عن فكرة أو مفهوم.
  2. الخط العلوي: سطر قصير من النص يظهر فوق العنوان أو الترجمة المصاحبة، ويُستخدَم عادةً لتوفير سياق أو تأكيد إضافي.
  3. العنوان: سطر نص كبير وغامق يُستخدَم كعنوان رئيسي ل عنصر تصميم أو صفحة.
  4. العنوان الفرعي: سطر نص أصغر يقدّم معلومات إضافية أو سياقًا أسفل عنوان رئيسي.
  5. عنصر التحكّم: عنصر تفاعلي يسمح للمستخدم بإدخال قرار.

الولايات

إدراج الولايات

المواصفات

إدراج المواصفات

اقتراح ارتفاع القائمة

المسافة بين العناصر في القائمة

الاستخدام

القوائم هي مجموعات من النصوص والصور يتم تنظيمها عموديًا. تم تحسين القائمة لتسهيل فهم القراءة، وهي تتألف من عمود واحد متواصل من العناصر. يمكن أن تحتوي عناصر القائمة على إجراءات أساسية وتكميلية يتم تمثيلها بواسطة الرموز والنصوص.

عناصر القائمة ليست أزرارًا. لا تحتوي العناصر على حاويات. تكون عناصر القائمة غير محدّدة وغير مُركّزة تلقائيًا.
استخدِم خلفية الحاوية لعناصر القائمة عند الضرورة فقط.

عناصر التحكّم في الاختيار

تتحكّم عناصر التحكّم في عرض المعلومات والإجراءات لعناصر القائمة. ويمكن محاذاة هذه العناصر مع الحافة الأمامية أو الخلفية لعنصر القائمة.

مربّع اختيار الاختيار

زر اختيار

مفتاح الاختيار

  1. مربّعات الاختيار: اختَر عنصرًا واحدًا أو أكثر من القائمة.
  2. أزرار الاختيار: اختَر عنصرًا واحدًا فقط في القائمة.
  3. مفاتيح التبديل: يمكنك تفعيل عنصر تحكّم أو إيقافه.
استخدِم مؤشر اختيار رمز لعرض العنصر المحدّد بوضوح في قائمة. سيساعد ذلك المستخدمين في تحديد العنصر الذي اختاروه بسهولة وتحسين تجربة المستخدم العامة.
تجنَّب الاعتماد فقط على لون الخلفية للإشارة إلى العنصر المحدّد في القائمة.
تجنَّب وضع أزرار داخل عنصر قائمة، لأنّ ذلك قد يؤدي إلى حدوث التباس بشأن العنصر الذي يتم التركيز عليه حاليًا.

الرموز

إذا كنت تعرض النوع نفسه من المحتوى في القائمة، يمكنك حذف الرموز لتقليل التشويش المرئي وتحسين تجربة المستخدم. تجنَّب استخدام الرموز في قائمة إذا لم تكن تخدم أي غرض ولا تقدّم معلومات إضافية.
تجنَّب استخدام الرمز نفسه لجميع العناصر في القائمة. وقد يكون ذلك مربكًا للمستخدمين. بدلاً من ذلك، استخدِم الرموز فقط عندما تضيف قيمة أو تقدّم معلومات إضافية.

الصور الرمزية والصور

يمكن أن تتضمّن عناصر القائمة صورًا في إطار دائري لتمثيل شخص أو كيان.

الصور الرمزية والصور