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