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