طراحی تطبیقی عبارت است از طراحی چیدمان‌هایی که با نقاط شکست و دستگاه‌های خاص سازگار می‌شوند.
برای پیاده‌سازی مؤثر چیدمان‌های تطبیقی:
ابتدا، عرض کلاس پنجره دستگاه را برای تعیین تغییرات چیدمان درنظر بگیرید، سپس ارتفاع را تنظیم کنید. پشتیبانی از اندازه‌های مختلف صفحه‌نمایش.
Android از مفاهیم طراحی واکنش‌گرا، مشابه توسعه وب، بهره می‌برد و از شبکه‌ها و تصاویر انعطاف‌پذیر برای ایجاد چیدمان‌هایی استفاده می‌کند که به‌طور مؤثر به بافت خود پاسخ می‌دهند.
به چیدمان‌ها اجازه دهید با روش‌های تطبیقی به اندازه‌های مختلف پاسخ دهند: جریان مجدد، آشکارسازی، تغییر ارائه.
از قفل کردن برنامه فقط در حالت عمودی خودداری کنید. این کار باعث می‌شود هنگام تغییر اندازه برنامه، حالت جعبه‌ای ایجاد شود.
نبایدها
برای رهنمودهای طراحی درباره تطبیق دادن چیدمان‌ها با اندازه‌های گسترده صفحه‌نمایش، راهنمای توسعه‌دهندگان پشتیبانی از اندازه‌های مختلف صفحه‌نمایش در Compose و صفحه اعمال کردن چیدمان در M3 را بخوانید. همچنین می‌توانید برای الهام گرفتن و پیاده‌سازی چیدمان‌های صفحه‌نمایش بزرگ، به گالری صفحه‌نمایش بزرگ متعارف Android مراجعه کنید.
تطبیق‌پذیر فکر کنید
هنگام طراحی برنامه، تطبیقی باید پیش‌فرض باشد. بازار تلفن همراه Android دائماً درحال تکامل است، بنابراین نمی‌توانید تلفن همراه را فقط به‌عنوان گوشی تلفن درنظر بگیرید. بلکه باید شامل همه چیز از تلفن‌های همراه، دستگاه‌های تاشو، رایانه‌های لوحی، و هر چیزی بین آن‌ها باشد.
درحالی‌که برخی‌از ویژگی‌ها و موارد استفاده ممکن است در هر اندازه صفحه‌نمایش یا فرم فاکتوری منطقی نباشد. طراحی تطبیقی به کاربران شما آزادی بیشتری ازنظر ارگونومی، قابلیت استفاده، و کیفیت برنامه می‌دهد.
روش‌ها و کیفیت
می‌توانید با طراحی صفحه‌های کلیدی (مفاهیم ضروری یا برنامه شما را منتقل می‌کنند) با اندازه‌های کلاس به‌عنوان نقاط شکست شروع کنید تا به‌عنوان دستورالعمل‌هایی برای بقیه برنامه شما عمل کنند. این تجربه‌های قهرمان می‌توانند کیفیت‌های تطبیقی و فرم فاکتور متمایز را برجسته کنند. یا محتوا را طوری طراحی کنید که در سطح پایه واکنش‌گرا باشد، به این صورت که مشخص کنید محتوا چگونه باید محدود، گسترده، یا بازچینی شود.
در این مثال، پیمایش و محتوا برای پیمایش ارگونومیک بهتر، بازآرایی، انعطاف‌پذیر، و مقیاس‌بندی می‌شود. شبکه چیدمان از جهت عمودی به چندستونی گسترش می‌یابد. نشانی در نوار برنامه و فیلترها برای قرار گرفتن در شبکه چیدمان، بازآرایی و منعطف می‌شوند.
انجام دهید
نبایدها
انجام دهید
انجام دهید
نبایدها
مطمئن شوید ورودی‌ها و دکمه‌ها کشیده نشده باشند.
به محفظه‌ها و قاب‌ها فکر کنید.
از مفهوم دربرگیری قاب‌ها برای گروه‌بندی محتوا برای چیدمان‌های تطبیقی استفاده کنید. برای مثال، نمونه استفاده‌شده یک صفحه جزئیات است، یک قاب که می‌تواند در چیدمان فهرست-جزئیات نشان داده شود.
اندازه‌های فشرده باید به چیدمان تک‌قاب محدود شوند.
اندازه متوسط می‌تواند از چیدمان‌های ۱ تا ۲ قاب استفاده کند.
اندازه‌های بزرگ و خیلی بزرگ می‌توانند از چیدمان‌های چندقابی استفاده کنند.
از محفظه‌های ذاتی و بصری برای گروه‌بندی عناصر با هم استفاده کنید. قاب‌ها می‌توانند به داخل حرکت کنند، پنهان شوند، ازهم باز شوند، محدود شوند، یا بالا بیایند. تفکر با قاب‌ها طراحی را در همه دستگاه‌های همراه آسان‌تر می‌کند.
اگرچه قاب‌ها در صفحه‌نمایش‌های بزرگ ضروری نیستند، اما همچنان باید به محتوا در گروه‌بندی‌های محفظه‌ای برای انعطاف‌پذیری فکر کنید.
با تمرکز بر نحوه انطباق عناصر با شبکه، به عناصر اجازه دهید جابه‌جا و بازآرایی شوند. تغییر عمودی را برای عناصر درنظر بگیرید و با محدودیت‌ها و تغییرات ارائه ترکیب کنید.
مقیاس و مقدار محتوای نشان‌داده‌شده را درنظر بگیرید.
شبکه کوچکی از ویدیوها در تلفن، در رایانه لوحی فشرده و گیج‌کننده می‌شود. مقیاس عنصر میانای کاربر را براساس اندازه صفحه، تراکم، و ورودی به‌روز کنید.
برنامه باکیفیت باید با سطح متمایز در دستورالعمل‌های برنامه اصلی و کیفیت صفحه‌نمایش بزرگ مطابقت داشته باشد.
برای اطلاعات بیشتر درباره چیدمان‌ها، به صفحه «درک چیدمان» در Material Design 3 (M3) مراجعه کنید.
از اندازه‌های منحصربه‌فرد ضریب شکل بهره ببرید.
اندازه‌های کوچک‌تر صفحه‌نمایش و نسبت‌های ابعادی مختلف را نیز فراموش نکنید، زیرا تلفن‌های Android اندازه‌های مختلفی دارند و دستگاه‌های تاشو می‌توانند صفحه‌نمایش پوششی کوچکی داشته باشند که می‌تواند برنامه شما را نمایش دهد.
برای چیدمان‌های مبتنی بر کنترل، مثل پخش‌کننده‌های رسانه، اجازه دهید کنترل‌ها بازآرایی شوند و محتوا آشکار شود.
برای کمک به تنظیم کاربر، از عنصر لنگر، مانند دکمه پخش بزرگ، برای تطبیق محتوای اطراف استفاده کنید و هنر قهرمان به پس‌زمینه در صفحه جلد تبدیل می‌شود.
فراتر از کلاس‌های اندازه
اگرچه اندازه پنجره عاملی رایج برای طراحی تطبیقی است، برنامه شما باید برای کاربران آماده باشد تا مانیتورها و دستگاه‌های ورودی را متصل کنند، در فواصل مختلف مشاهده کنند و وضعیت دستگاه خود را تغییر دهند. می‌توانید این تغییرات را بااستفاده از mediaQuery API بررسی کنید. این API به شما امکان می‌دهد هنگام طراحی نحوه تطبیق عناصر خاص میانای کاربر با موارد استفاده خاص، جزئیات بیشتری اضافه کنید.
طراحی برنامه‌تان را در سطح مؤلفه یا قاب تطبیق دهید، به‌جای اینکه کل صفحه‌نمایش را براساس اندازه، ورودی، ضریب شکل، و وضعیت طراحی کنید.
برای کسب اطلاعات بیشتر درباره تعامل ورودی، راهنماهای تعامل تجربه رایانه را بخوانید.
نمونه مطالعه موردی Pawparrazzi را که با جدیدترین میاناهای برنامه‌سازی کاربردی تطبیقی و راهنمای طراحی ساخته و طراحی شده است بررسی کنید.
