سريع الاستجابة
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

إنشاء تطبيقات ومربّعات سريعة الاستجابة لنظام Wear OS
تتوسع واجهات المستخدم سريعة الاستجابة وتتغير لتحقيق أقصى استفادة ممكنة من جميع مساحة الشاشة
المتاحة، بغض النظر عن حجم الشاشة التي يتم عرضها عليها. عند تصميم تخطيطات سريعة الاستجابة على شاشة مستديرة، يكون لكل طريقة عرض تمرير أو غير تمرير متطلبات فريدة للحفاظ على تحجيم عناصر واجهة المستخدم، بالإضافة إلى الحفاظ على تخطيط وتكوين متوازن. بالنسبة إلى طرق العرض بالتمرير، استخدِم النسب المئوية لتحديد كل الهوامش العلوية والسفلية والجانبية لتجنّب اقتصاصها وتوفير مقاس متناسب مع العناصر. في طرق العرض التي لا تنتقل، استخدم النسب المئوية
والقيود الرأسية لكل الهوامش. بهذه الطريقة، يمكن للمحتوى الرئيسي في
المنتصف تمديد المنطقة المتاحة.
يمكنك الاطِّلاع على إرشادات تنفيذ Compose وTiles للتنسيقات المتجاوبة مع مختلف الأجهزة.
check_circle
الإجراءات التي يُنصح بها
- استخدِم مكوّنات عادية مصمَّمة للتكيّف مع المحتوى.
- يمكنك استخدام التنسيقات التكيُّفية التي تتكيّف بسلاسة مع جميع أحجام الشاشات.
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,["# Responsive and optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\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\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]