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