المستوى 2: المواقع الإلكترونية التي تستجيب للأجهزة الجوّالة والمحسّنة
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تقدّم التطبيقات التي تستخدم تخطيطات سريعة الاستجابة وتتكيّف تلقائيًا مع أحجام الشاشات المختلفة قيمة إضافية للمستخدمين وتوفّر تجارب أكثر إنتاجية وجاذبية.
تنسّق التصاميم المتجاوبة العناصر وتضعها بشكل ديناميكي، مثل الأزرار وحقول النصوص ومربّعات الحوار، لتقديم أفضل تجربة ممكنة للمستخدم. يمكنك أن تقدّم تلقائيًا لمستخدمي تطبيقك قيمة إضافية على الشاشات الكبيرة من خلال الاستفادة من ممارسات التصميم المتجاوب. سواء كان ذلك من خلال عرض المزيد من النصوص بلمحة، أو توفير المزيد من الإجراءات على الشاشة، أو توفير أهداف نقر أكبر وأسهل في الاستخدام، تقدّم الممارسات المتجاوبة تجربة محسّنة لمستخدمي الشاشات الأكبر حجمًا.
إضافة قيمة من خلال التصميم المتجاوب
check_circle
الإجراءات التي يُنصح بها
- استخدِم مكتبة مكوّنات M3 Compose التي تتضمّن سلوكًا مدمجًا سريع الاستجابة وقابلاً للتكيّف.
- استخدِم التصميمات المتجاوبة التي يتم ضبطها تلقائيًا وسلاسة لملء المساحة المتاحة على أحجام الشاشات المختلفة.
cancel
الإجراءات غير المُوصى بها
- توسيع عناصر واجهة المستخدم، بما في ذلك الحقول النصية والأزرار ومربّعات الحوار، لملء المساحة الإضافية
- زيادة أحجام الخطوط، ما لم تكن تخدم غرضًا رسوميًا بشكل أساسي
أمثلة
تعرض الصور التالية أمثلة على تطبيقات متجاوبة ومحسَّنة.
مربّع يحتوي على بطاقات صور
قائمة البطاقات التي تتضمّن صورًا
مربّع يحتوي على رسم بياني
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Tier 2: Responsive and optimized\n\nApps that employ responsive layouts and automatically adapt to different screen\nsizes offer additional value to users and provide more productive, engaging user\nexperiences.\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\nAdd value through responsive design\n-----------------------------------\n\ncheck_circle\n\n### Do\n\n- Use the M3 Compose component library which has built-in responsive and adaptive behavior.\n- Utilize responsive layouts, which automatically and smoothly adjust to fill the available space across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements---including text fields, buttons, dialogs---to fill extra space.\n- Increase the sizes of fonts, unless they're serving a primarily graphic purpose.\n\nExamples\n--------\n\nThe following images show examples of apps that are responsive and optimized.\n\n\n### Edge-hugging buttons\n\n\u003cbr /\u003e\n\n\n### List of cards\n\n\u003cbr /\u003e\n\n\n### List of switchers and buttons\n\n\u003cbr /\u003e\n\n\n### Tile with image cards\n\n\u003cbr /\u003e\n\n\n### List of cards with images\n\n\u003cbr /\u003e\n\n\n### Tile with graph\n\n\u003cbr /\u003e"]]
