سطح 2: پاسخگو و بهینه شده
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
برنامه‌هایی که از طرح‌بندی‌های واکنش‌گرا استفاده می‌کنند و به‌طور خودکار با اندازه‌های مختلف صفحه‌نمایش سازگار می‌شوند، ارزش بیشتری را برای کاربران به ارمغان می‌آورند و تجارب کاربر سازنده‌تر و جذاب‌تری را ارائه می‌کنند.
طرح‌بندی‌های واکنش‌گرا به‌صورت پویا قالب‌بندی می‌کنند و عناصری مانند دکمه‌ها، فیلدهای متنی و دیالوگ‌ها را برای تجربه کاربری بهینه قرار می‌دهند. با استفاده از شیوه‌های طراحی واکنش‌گرا، به‌طور خودکار به کاربران برنامه‌تان ارزش بیشتری در صفحه‌های بزرگتر ارائه دهید. خواه متن بیشتری در یک نگاه قابل مشاهده باشد، اقدامات بیشتر روی صفحه، یا اهداف ضربه ای بزرگتر و قابل دسترس تر، شیوه های پاسخگو تجربه پیشرفته ای را برای کاربران صفحه نمایش بزرگتر فراهم می کند.
از طریق طراحی واکنش گرا ارزش اضافه کنید
check_circle
انجام دهید
- از کتابخانه مؤلفه M3 Compose استفاده کنید که دارای رفتار پاسخگو و تطبیقی داخلی است.
- از طرح‌بندی‌های واکنش‌گرا استفاده کنید که به‌طور خودکار و هموار تنظیم می‌شوند تا فضای موجود در اندازه‌های صفحه را پر کند.
cancel
نکن
- برای پر کردن فضای اضافی، عناصر رابط کاربری (از جمله فیلدهای نوشتاری، دکمه‌ها، کادرهای گفتگو) را گسترش دهید.
- اندازه فونت ها را افزایش دهید، مگر اینکه هدف اصلی آنها گرافیکی باشد.
نمونه ها
تصاویر زیر نمونه هایی از اپلیکیشن هایی را نشان می دهد که واکنش گرا و بهینه شده اند.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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"]]
