سایز بندی

ویجت‌های اندروید سازگار و مقیاس‌پذیر طراحی کنید که به طور یکپارچه مقیاس‌پذیر باشند. از اندازه‌های پیش‌فرض پیشنهادی ما به عنوان نقطه شروع استفاده کنید و طرح‌بندی‌های خود را در ابعاد مختلف آزمایش کنید تا از خوانایی و تجربه کاربری بهینه اطمینان حاصل شود.

اندازه‌های پیش‌فرض

با بهینه‌سازی طرح‌بندی خود برای حداقل یکی از اندازه‌های پیشنهادی ما، یک تجربه ویجت بی‌نقص ارائه دهید. با تعریف ویژگی‌های targetCellWidth و targetCellHeight برای دستگاه‌های دستی و تبلت، از قرارگیری صحیح و قابلیت مشاهده در انتخابگر ویجت اطمینان حاصل کنید.

این مقادیر بر اساس دستگاه‌های پیکسل هستند. از این اندازه‌ها به عنوان نقطه شروع برای طراحی ویجت خود استفاده کنید. ویجت خود را در اندازه‌های مختلف و روی دستگاه‌های مختلف به طور کامل آزمایش کنید تا از کیفیت تجربه کاربری اطمینان حاصل کنید.

دستی

اندازه‌ها حداقل عرض حداکثر عرض حداقل ارتفاع حداکثر ارتفاع
۲x۱ ۱۰۹ ۳۰۶ ۵۶ ۱۳۰
۲x۲ ۱۰۹ ۳۰۶ ۱۱۵ ۲۷۶
۲x۳ ۱۰۹ ۳۰۶ ۱۸۵ ۴۲۲
۴x۱ ۲۴۵ ۶۲۴ ۵۶ ۱۳۰
۴x۲ ۲۴۵ ۶۲۴ ۱۱۵ ۲۷۶
4x3 ۲۴۵ ۶۲۴ ۱۸۵ ۴۲۲

قرص

اندازه‌ها حداقل عرض حداکثر عرض حداقل ارتفاع حداکثر ارتفاع
۲x۱ ۱۸۰ ۳۰۴ ۶۴ ۱۲۰
۲x۲ ۱۸۰ ۳۰۴ ۱۸۴ ۳۰۴
۲x۳ ۱۸۰ ۳۰۴ ۳۰۴ ۴۸۸
۳x۱ ۳۲۸ ۴۸۸ ۶۴ ۱۲۰
۳x۲ ۲۹۸ ۴۸۸ ۱۸۴ ۳۰۴
۳x۳ ۲۹۸ ۴۸۸ ۳۰۴ ۴۸۸
۳x۴ ۲۹۸ ۴۸۸ ۴۲۴ ۶۷۲

نقاط شکست

نقاط شکست برای ساخت ویجت‌های قابل تغییر اندازه، کاربرپسند و سازگار ضروری هستند. با آزمایش طراحی خود، می‌توانید آستانه‌های اندازه‌ای را که در آن‌ها تنظیمات طرح‌بندی ضروری است، مشخص کنید. نقاط شکست را برای ایجاد این تغییرات پیاده‌سازی کنید و اطمینان حاصل کنید که ویجت شما جذابیت بصری و عملکرد خود را در هر اندازه‌ای حفظ می‌کند.

نقاط شکست همچنین انعطاف‌پذیری لازم برای گنجاندن یا حذف مشروط محتوای تکمیلی را ارائه می‌دهند و استفاده از فضا را بر اساس ابعاد ویجت بهینه می‌کنند.

شکل ۱: استفاده از نقاط توقف برای ایجاد تغییرات در طرح‌بندی در اندازه‌های مختلف.

مرزها را پر کنید

یکی از دلایل اصلی حذف ویجت‌ها توسط کاربران، عدم هماهنگی با سایر عناصر صفحه اصلی است. برای جلوگیری از این امر، مطمئن شوید که ویجت شما همیشه فضای شبکه اختصاص داده شده به خود را به طور کامل پر می‌کند.

مطمئن شوید که ظرف در تمام اندازه‌ها از لبه تا لبه کش می‌آید.
اضافه کردن حاشیه سفارشی. ویجت شما باید به طور یکپارچه از لبه به لبه حرکت کند.
برای ایجاد هماهنگی بصری، مطمئن شوید که شکل غیرمستطیلی شما در محور عمودی یا افقی با شبکه در تماس باشد.
از شکل‌های مربعی ثابت استفاده کنید. در عوض، از کانتینرهای مستطیلی واکنش‌گرا استفاده کنید که با ابعاد مختلف شبکه سازگار می‌شوند.