برنامه‌هایی که از طرح‌بندی‌های واکنش‌گرا استفاده می‌کنند و به‌طور خودکار با اندازه‌های مختلف صفحه‌نمایش سازگار می‌شوند، ارزش بیشتری را برای کاربران به ارمغان می‌آورند و تجارب کاربر سازنده‌تر و جذاب‌تری را ارائه می‌کنند.
طرح‌بندی‌های واکنش‌گرا به‌صورت پویا قالب‌بندی می‌کنند و عناصری مانند دکمه‌ها، فیلدهای متنی و دیالوگ‌ها را برای تجربه کاربری بهینه قرار می‌دهند. با استفاده از شیوه‌های طراحی واکنش‌گرا، به‌طور خودکار به کاربران برنامه‌تان ارزش بیشتری در صفحه‌های بزرگتر ارائه دهید. خواه متن بیشتری در یک نگاه قابل مشاهده باشد، اقدامات بیشتر روی صفحه، یا اهداف ضربه ای بزرگتر و قابل دسترس تر، شیوه های پاسخگو تجربه پیشرفته ای را برای کاربران صفحه نمایش بزرگتر فراهم می کند.
از طریق طراحی واکنش گرا ارزش اضافه کنید
انجام دهید
- از کتابخانه مؤلفه M3 Compose استفاده کنید که دارای رفتار پاسخگو و تطبیقی داخلی است.
- از طرح‌بندی‌های واکنش‌گرا استفاده کنید که به‌طور خودکار و هموار تنظیم می‌شوند تا فضای موجود در اندازه‌های صفحه را پر کند.
نکن
- برای پر کردن فضای اضافی، عناصر رابط کاربری (از جمله فیلدهای نوشتاری، دکمه‌ها، کادرهای گفتگو) را گسترش دهید.
- اندازه فونت ها را افزایش دهید، مگر اینکه هدف اصلی آنها گرافیکی باشد.
برنامه‌ها و کاشی‌های واکنش‌گرا را برای Wear OS بسازید
رابط‌های کاربری واکنش‌گرا کشیده و تغییر می‌کنند تا از تمام فضای صفحه موجود به بهترین شکل ممکن استفاده کنند، صرفنظر از اینکه در چه اندازه صفحه نمایش رندر می‌شوند.
هنگام طراحی طرح‌بندی‌های واکنش‌گرا بر روی یک صفحه گرد، نماهای پیمایشی و غیرپیمایشی هر کدام نیازمندی‌های منحصربه‌فردی برای حفظ مقیاس‌بندی عنصر UI و حفظ یک چیدمان و ترکیب متعادل دارند. برای نماهای پیمایشی، از درصدها برای تعریف تمام حاشیه های بالا، پایین و کناری استفاده کنید تا از بریده شدن و ایجاد مقیاس بندی متناسب عناصر جلوگیری کنید. برای نماهای بدون پیمایش، از درصدها و محدودیت های عمودی برای همه حاشیه ها استفاده کنید. به این ترتیب، محتوای اصلی در وسط می‌تواند کشیده شود تا منطقه موجود را پر کند.
نماهای پیمایشی
تمام حاشیه‌های بالا، پایین و کناری باید بر حسب درصد تعریف شوند تا از بریده شدن و ایجاد مقیاس‌بندی متناسب عناصر جلوگیری شود.
نماهای بدون پیمایش
تمام حاشیه ها باید بر حسب درصد و محدودیت های عمودی باید به گونه ای تعریف شوند که محتوای اصلی در وسط بتواند برای پر کردن منطقه موجود کشیده شود.
نمونه ها
تصاویر زیر نمونه هایی از اپلیکیشن هایی را نشان می دهد که واکنش گرا و بهینه شده اند.
دکمه هایی که لبه ها را در آغوش می گیرند
لیست کارت ها
لیست کلیدها و دکمه ها
کاشی با کارت های تصویری
لیست کارت ها با تصاویر
کاشی با نمودار
