طراحی میانای کاربر برنامه‌تان به ضریب شکل دستگاه خاصی وابسته نیست. برنامه‌های Android باید با انواع مختلفی از دستگاه‌ها سازگار شوند، از گوشی‌های ۴ اینچی گرفته تا تلویزیون‌های ۵۰ اینچی و دستگاه‌های ChromeOS با پنجره‌های قابل‌تغییر اندازه.
میانای کاربر برنامه‌تان درون پنجره‌ای ترسیم می‌شود که اندازه آن می‌تواند به‌دلخواه تغییر کند. از توصیف‌گرهای منبع برای ارائه چیدمان‌های مختلف برای اندازه‌های مختلف پنجره استفاده می‌کنید. این تفاوت‌ها می‌تواند به‌دلیل محدودیت‌های اندازه صفحه‌نمایش دستگاه باشد، یا ممکن است ناشی از استفاده کاربر از حالت چندپنجره‌ای برای تغییر اندازه پنجره باشد.
طراحی محتوای واکنش‌گرا
باید تجربه غنی‌ای برای همه کاربران فراهم کنید، بنابراین باید هر صفحه در برنامه‌تان از فضای پنجره دردسترس شما به‌طور کامل استفاده کند.
برای مثال، برنامه‌ای که در پنجره‌ای اجرا می‌شود که کل عرض صفحه‌نمایش تلفن را اشغال می‌کند، شاید بتواند جزئیات مربوط به بخشی از محتوا را هنگام ورود به حالت چندپنجره‌ای پنهان کند و بتواند میانای کاربر خود را گسترش دهد تا هنگام اجرا در پنجره‌ای که کل عرض صفحه‌نمایش دستگاه ChromeOS را اشغال می‌کند، محتوای بیشتری ارائه دهد.
علاوه‌بر برآورده کردن این انتظارات کاربر، اغلب لازم است محتوای بیشتری در دستگاه‌های بزرگ‌تر ارائه شود تا از ایجاد فضای سفید بیش‌ازحد یا ایجاد ناخواسته تعاملات نامناسب جلوگیری شود. در شکل زیر، می‌توانید برخی‌از مشکلاتی را که ممکن است هنگام تطبیق طراحی میانای کاربر برای پنجره بزرگ‌تر ایجاد شود ببینید:
شکل ۱. محتوای ناکافی در پنجره‌های عریض منجر به ایجاد فضای سفید نامناسب و طول خط بسیار زیاد می‌شود.
برای کسب اطلاعات بیشتر درباره طراحی تجربه‌های پیمایش واکنش‌گرا، به پیمایش برای واسط‌های کاربر واکنش‌گرا مراجعه کنید.
ارائه تجربه‌های کاربری سفارشی‌شده
مهم است که تجربه‌های منحصربه‌فردی ارائه دهید که فراتر از گسترش دادن نماهای محتوایتان برای پر کردن فضای دردسترس باشد. می‌توانید میاناهای کاربر را برای ارائه تجربه کاربری ایده‌آل برای اندازه‌های پنجره داده‌شده سفارشی‌سازی کنید، حتی می‌توانید از چیدمان‌ها و ابزاره‌های کاملاً متفاوت استفاده کنید.
در شکل ۲، وقتی فضای عمودی کافی وجود دارد، از
BottomNavigationView
به‌عنوان پیمایش سطح بالا استفاده می‌شود.
وقتی اندازه پنجره کاهش می‌یابد، همان‌طور که در سمت راست شکل نشان داده شده است،
پیمایش سطح بالا بااستفاده از
DrawerLayout
پیاده‌سازی می‌شود.
شکل ۲. وقتی فضای عمودی محدود باشد، کشوی پیمایش جایگزین نوار پیمایش پایین می‌شود.
در اینجا چند نمونه دیگر آورده شده است:
Toolbarمی‌تواند گزینه‌های منوِ کنش‌ها را باتوجه‌به فضای دردسترس نشان دهد یا پنهان کند.RecyclerView.LayoutManagerمی‌تواند تعداد ستون‌هایش را تغییر دهد تا از اندازه پنجره نهایت استفاده را ببرد- می‌توانید میزان جزئیاتی را که برای نماهای سفارشی نشان می‌دهید افزایش دهید، زیرا فضای بیشتری برای انجام این کار دارید.
این‌ها همه روش‌های عالی برای اطمینان از این است که کاربران شما تجربه‌های عالی داشته باشند هرجا که برنامه شما را اجرا می‌کنند.
می‌توانید نمونه‌های بیشتری از الگوهای طراحی واکنش‌گرا و ایده‌هایی برای چیدمان‌های تطبیقی را در material.io پیدا کنید.