نمای کلی ویجت های برنامه

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

این مستند انواع مختلف ویجت هایی را که می توانید ایجاد کنید و اصول طراحی را که باید دنبال کنید معرفی می کند. برای ساختن ویجت برنامه با استفاده از Remove View APIها و طرح‌بندی‌های XML، به ایجاد یک ویجت ساده مراجعه کنید. برای ساخت ویجت با استفاده از APIهای سبک Kotlin و Compose، به Jetpack Glance مراجعه کنید.

انواع ویجت

همانطور که ویجت خود را برنامه ریزی می کنید، به این فکر کنید که چه نوع ویجتی را می خواهید بسازید. ویجت ها معمولا در یکی از دسته های زیر قرار می گیرند:

ویجت های اطلاعاتی

ویجت نمونه آب و هوا که توکیو را عمدتاً ابری، 14 درجه و دمای پیش‌بینی‌شده را از ساعت 4 بعد از ظهر تا 7 بعد از ظهر نشان می‌دهد.
شکل 1. ویجت اطلاعاتی از یک برنامه آب و هوا.

ویجت های اطلاعاتی معمولاً عناصر اطلاعاتی مهم را نمایش می دهند و نحوه تغییر آن اطلاعات در طول زمان را دنبال می کنند. نمونه‌هایی از ویجت‌های اطلاعاتی عبارتند از ویجت‌های آب‌وهوا، ویجت‌های ساعت، یا ابزارک‌های ردیابی امتیازات ورزشی. ضربه زدن روی ویجت‌های اطلاعات معمولاً برنامه مرتبط را راه‌اندازی می‌کند و نمای دقیق اطلاعات ویجت را باز می‌کند.

ویجت های مجموعه

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

ویجت‌های مجموعه معمولاً روی موارد استفاده زیر تمرکز می‌کنند:

  • در حال مرور مجموعه
  • باز کردن یک عنصر از مجموعه به نمای جزئیات آن در برنامه مرتبط.
  • تعامل با عناصر، مانند علامت گذاری آنها به پایان رسیده — با پشتیبانی از دکمه های ترکیبی در Android 12 (سطح API 31).

ویجت ها را کنترل کنید

ویجتی برای برنامه‌ای به نام «لیست نور» که کلیدهای تغییر وضعیت با برچسب «اتاق خواب»، «آشپزخانه» و «اتاق نشیمن» را نمایش می‌دهد و دو کلید اول را خاموش می‌کند.
شکل 4. نمونه ای از ویجت کنترل.

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

تعامل با ویجت کنترل ممکن است نمای جزئیات مرتبط را در برنامه باز کند. این بستگی به این دارد که آیا عملکرد ویجت کنترل، داده‌ای را خروجی می‌دهد، مثلاً در مورد ویجت جستجو.

ویجت های ترکیبی

یک برنامه موسیقی عمومی که دکمه‌های «شست پایین»، «بازگشت»، «پخش/مکث»، «به جلو» و «شست بالا» را نشان می‌دهد. هنرمند و آهنگ به ترتیب به عنوان «هنرمند» و «موسیقی نمونه» فهرست شده‌اند.
شکل 5. نمونه ای از ویجت برنامه موسیقی.

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

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

ویجت ها را با دستیار گوگل ادغام کنید

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

محدودیت های ویجت

در حالی که ویجت ها را می توان به عنوان "برنامه های کوچک" درک کرد، اما محدودیت های خاصی وجود دارد که قبل از طراحی ویجت باید درک کنید.

حرکات

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

تنها حرکات موجود برای ویجت‌ها، لمس و کشیدن انگشت عمودی است.

عناصر

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

دستورالعمل های طراحی

محتوای ویجت

ابزارک ها با «تبلیغ» محتوای جدید و جالبی که در برنامه شما موجود است، راه بسیار خوبی برای جذب کاربر به برنامه شما هستند.

درست مانند تیزرهای صفحه اول روزنامه، ویجت ها اطلاعات یک برنامه را ادغام و متمرکز می کنند و ارتباطی با جزئیات غنی تری در برنامه ایجاد می کنند. ممکن است بگویید ویجت اطلاعات "میان وعده" است در حالی که برنامه "غذا" است. مطمئن شوید که برنامه شما جزئیات بیشتری را در مورد یک مورد اطلاعاتی نسبت به آنچه ویجت نمایش می دهد نشان می دهد.

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

نامزدهای خوب برای پیوندهای ناوبری در ویجت ها عبارتند از:

  • توابع مولد: اینها توابعی هستند که به کاربر اجازه می دهند محتوای جدیدی برای یک برنامه ایجاد کند، مانند ایجاد یک سند جدید یا یک پیام جدید.

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

تغییر اندازه ویجت

ویجت استاندارد ساعت Google
شکل 6. ویجت استاندارد ساعت گوگل.

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

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

اجازه دادن به کاربران برای تغییر اندازه ویجت ها مزایای مهمی دارد:

  • آنها می توانند میزان اطلاعاتی را که می خواهند در هر ویجت ببینند به خوبی تنظیم کنند.
  • آنها بهتر می توانند بر روی چیدمان ویجت ها و میانبرها در پانل های خانه خود تأثیر بگذارند.

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

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

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

نمونه ابزارک آب و هوا در کوچکترین اندازه شبکه 3×2، و فهرست نام مکان (توکیو)، دما (14 درجه)، و نماد نشان دهنده هوای نیمه ابری
شکل 7. نمونه ویجت آب و هوا در اندازه "کوچک" شبکه 3x2.


ویجت نمونه آب و هوا در اندازه «متوسط» 5×2، شامل تمام رابط‌های کاربری از اندازه شبکه 3×2 به‌علاوه برچسب «اکثراً ابری» و دمای پیش‌بینی‌شده از ساعت 16 تا 19
شکل 8. نمونه ویجت آب و هوا در اندازه شبکه 5x2 "متوسط".


ویجت نمونه آب و هوا در اندازه «بزرگ» 5×4، شامل تمام رابط‌های کاربری از اندازه‌های شبکه 3×2 و 5×2 به‌علاوه پیش‌بینی آب‌وهوا از سه‌شنبه تا جمعه
شکل 9. نمونه ویجت آب و هوا در اندازه "بزرگ" شبکه 5x4.

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

ملاحظات چیدمان

وسوسه انگیز است که ویجت های خود را با توجه به ابعاد شبکه قرارگیری دستگاهی که با آن توسعه می دهید قرار دهید. این می تواند یک تقریب اولیه مفید باشد، اما نکات زیر را در نظر داشته باشید:

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

پیکربندی ویجت توسط کاربران

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

چک لیست طراحی ویجت

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

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

این مستند انواع مختلف ویجت هایی را که می توانید ایجاد کنید و اصول طراحی را که باید دنبال کنید معرفی می کند. برای ساختن ویجت برنامه با استفاده از Remove View APIها و طرح‌بندی‌های XML، به ایجاد یک ویجت ساده مراجعه کنید. برای ساخت ویجت با استفاده از APIهای سبک Kotlin و Compose، به Jetpack Glance مراجعه کنید.

انواع ویجت

همانطور که ویجت خود را برنامه ریزی می کنید، به این فکر کنید که چه نوع ویجتی را می خواهید بسازید. ویجت ها معمولا در یکی از دسته های زیر قرار می گیرند:

ویجت های اطلاعاتی

ویجت نمونه آب و هوا که توکیو را عمدتاً ابری، 14 درجه و دمای پیش‌بینی‌شده را از ساعت 4 بعد از ظهر تا 7 بعد از ظهر نشان می‌دهد.
شکل 1. ویجت اطلاعاتی از یک برنامه آب و هوا.

ویجت های اطلاعاتی معمولاً عناصر اطلاعاتی مهم را نمایش می دهند و نحوه تغییر آن اطلاعات در طول زمان را دنبال می کنند. نمونه‌هایی از ویجت‌های اطلاعاتی عبارتند از ویجت‌های آب‌وهوا، ویجت‌های ساعت، یا ابزارک‌های ردیابی امتیازات ورزشی. ضربه زدن روی ویجت‌های اطلاعات معمولاً برنامه مرتبط را راه‌اندازی می‌کند و نمای دقیق اطلاعات ویجت را باز می‌کند.

ویجت های مجموعه

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

ویجت‌های مجموعه معمولاً روی موارد استفاده زیر تمرکز می‌کنند:

  • در حال مرور مجموعه
  • باز کردن یک عنصر از مجموعه به نمای جزئیات آن در برنامه مرتبط.
  • تعامل با عناصر، مانند علامت گذاری آنها به پایان رسیده — با پشتیبانی از دکمه های ترکیبی در Android 12 (سطح API 31).

ویجت ها را کنترل کنید

ویجتی برای برنامه‌ای به نام «لیست نور» که کلیدهای تغییر وضعیت با برچسب «اتاق خواب»، «آشپزخانه» و «اتاق نشیمن» را نمایش می‌دهد و دو کلید اول را خاموش می‌کند.
شکل 4. نمونه ای از ویجت کنترل.

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

تعامل با ویجت کنترل ممکن است نمای جزئیات مرتبط را در برنامه باز کند. این بستگی به این دارد که آیا عملکرد ویجت کنترل، داده‌ای را خروجی می‌دهد، مثلاً در مورد ویجت جستجو.

ویجت های ترکیبی

یک برنامه موسیقی عمومی که دکمه‌های «شست پایین»، «بازگشت»، «پخش/مکث»، «به جلو» و «شست بالا» را نشان می‌دهد. هنرمند و آهنگ به ترتیب به عنوان «هنرمند» و «موسیقی نمونه» فهرست شده‌اند.
شکل 5. نمونه ای از ویجت برنامه موسیقی.

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

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

ویجت ها را با دستیار گوگل ادغام کنید

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

محدودیت های ویجت

در حالی که ویجت ها را می توان به عنوان "برنامه های کوچک" درک کرد، اما محدودیت های خاصی وجود دارد که قبل از طراحی ویجت باید درک کنید.

حرکات

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

تنها حرکات موجود برای ویجت‌ها، لمس و کشیدن انگشت عمودی است.

عناصر

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

دستورالعمل های طراحی

محتوای ویجت

ابزارک ها با «تبلیغ» محتوای جدید و جالبی که در برنامه شما موجود است، راه بسیار خوبی برای جذب کاربر به برنامه شما هستند.

درست مانند تیزرهای صفحه اول روزنامه، ویجت ها اطلاعات یک برنامه را ادغام و متمرکز می کنند و ارتباطی با جزئیات غنی تری در برنامه ایجاد می کنند. ممکن است بگویید ویجت اطلاعات "میان وعده" است در حالی که برنامه "غذا" است. مطمئن شوید که برنامه شما جزئیات بیشتری را در مورد یک مورد اطلاعاتی نسبت به آنچه ویجت نمایش می دهد نشان می دهد.

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

نامزدهای خوب برای پیوندهای ناوبری در ویجت ها عبارتند از:

  • توابع مولد: اینها توابعی هستند که به کاربر اجازه می دهند محتوای جدیدی برای یک برنامه ایجاد کند، مانند ایجاد یک سند جدید یا یک پیام جدید.

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

تغییر اندازه ویجت

ویجت استاندارد ساعت Google
شکل 6. ویجت استاندارد ساعت گوگل.

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

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

اجازه دادن به کاربران برای تغییر اندازه ویجت ها مزایای مهمی دارد:

  • آنها می توانند میزان اطلاعاتی را که می خواهند در هر ویجت ببینند به خوبی تنظیم کنند.
  • آنها بهتر می توانند بر روی چیدمان ویجت ها و میانبرها در پانل های خانه خود تأثیر بگذارند.

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

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

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

نمونه ابزارک آب و هوا در کوچکترین اندازه شبکه 3×2، و فهرست نام مکان (توکیو)، دما (14 درجه)، و نماد نشان دهنده هوای نیمه ابری
شکل 7. نمونه ویجت آب و هوا در اندازه "کوچک" شبکه 3x2.


ویجت نمونه آب و هوا در اندازه «متوسط» 5×2، شامل تمام رابط‌های کاربری از اندازه شبکه 3×2 به‌علاوه برچسب «اکثراً ابری» و دمای پیش‌بینی‌شده از ساعت 16 تا 19
شکل 8. نمونه ویجت آب و هوا در اندازه شبکه 5x2 "متوسط".


ویجت نمونه آب و هوا در اندازه «بزرگ» 5×4، شامل تمام رابط‌های کاربری از اندازه‌های شبکه 3×2 و 5×2 به‌علاوه پیش‌بینی آب‌وهوا از سه‌شنبه تا جمعه
شکل 9. نمونه ویجت آب و هوا در اندازه "بزرگ" شبکه 5x4.

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

ملاحظات چیدمان

وسوسه انگیز است که ویجت های خود را با توجه به ابعاد شبکه قرارگیری دستگاهی که با آن توسعه می دهید قرار دهید. این می تواند یک تقریب اولیه مفید باشد، اما نکات زیر را در نظر داشته باشید:

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

پیکربندی ویجت توسط کاربران

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

چک لیست طراحی ویجت

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

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

این مستند انواع مختلف ویجت هایی را که می توانید ایجاد کنید و اصول طراحی را که باید دنبال کنید معرفی می کند. برای ساختن ویجت برنامه با استفاده از Remove View APIها و طرح‌بندی‌های XML، به ایجاد یک ویجت ساده مراجعه کنید. برای ساخت ویجت با استفاده از APIهای سبک Kotlin و Compose، به Jetpack Glance مراجعه کنید.

انواع ویجت

همانطور که ویجت خود را برنامه ریزی می کنید، به این فکر کنید که چه نوع ویجتی را می خواهید بسازید. ویجت ها معمولا در یکی از دسته های زیر قرار می گیرند:

ویجت های اطلاعاتی

ویجت نمونه آب و هوا که توکیو را عمدتاً ابری، 14 درجه و دمای پیش‌بینی‌شده را از ساعت 4 بعد از ظهر تا 7 بعد از ظهر نشان می‌دهد.
شکل 1. ویجت اطلاعاتی از یک برنامه آب و هوا.

ویجت های اطلاعاتی معمولاً عناصر اطلاعاتی مهم را نمایش می دهند و نحوه تغییر آن اطلاعات در طول زمان را دنبال می کنند. نمونه‌هایی از ویجت‌های اطلاعاتی عبارتند از ویجت‌های آب‌وهوا، ویجت‌های ساعت، یا ابزارک‌های ردیابی امتیازات ورزشی. ضربه زدن روی ویجت‌های اطلاعات معمولاً برنامه مرتبط را راه‌اندازی می‌کند و نمای دقیق اطلاعات ویجت را باز می‌کند.

ویجت های مجموعه

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

ویجت‌های مجموعه معمولاً روی موارد استفاده زیر تمرکز می‌کنند:

  • در حال مرور مجموعه
  • باز کردن یک عنصر از مجموعه به نمای جزئیات آن در برنامه مرتبط.
  • تعامل با عناصر، مانند علامت گذاری آنها به پایان رسیده — با پشتیبانی از دکمه های ترکیبی در Android 12 (سطح API 31).

ویجت ها را کنترل کنید

ویجتی برای برنامه‌ای به نام «لیست نور» که کلیدهای تغییر وضعیت با برچسب «اتاق خواب»، «آشپزخانه» و «اتاق نشیمن» را نمایش می‌دهد و دو کلید اول را خاموش می‌کند.
شکل 4. نمونه ای از ویجت کنترل.

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

تعامل با ویجت کنترل ممکن است نمای جزئیات مرتبط را در برنامه باز کند. این بستگی به این دارد که آیا عملکرد ویجت کنترل، داده‌ای را خروجی می‌دهد، مثلاً در مورد ویجت جستجو.

ویجت های ترکیبی

یک برنامه موسیقی عمومی که دکمه‌های «شست پایین»، «بازگشت»، «پخش/مکث»، «به جلو» و «شست بالا» را نشان می‌دهد. هنرمند و آهنگ به ترتیب به عنوان «هنرمند» و «موسیقی نمونه» فهرست شده‌اند.
شکل 5. نمونه ای از ویجت برنامه موسیقی.

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

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

ویجت ها را با دستیار گوگل ادغام کنید

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

محدودیت های ویجت

در حالی که ویجت ها را می توان به عنوان "برنامه های کوچک" درک کرد، اما محدودیت های خاصی وجود دارد که قبل از طراحی ویجت باید درک کنید.

حرکات

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

تنها ژست‌های موجود برای ویجت‌ها لمس و کشیدن انگشت عمودی است.

عناصر

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

دستورالعمل های طراحی

محتوای ویجت

ابزارک ها با «تبلیغ» محتوای جدید و جالبی که در برنامه شما موجود است، راه بسیار خوبی برای جذب کاربر به برنامه شما هستند.

درست مانند تیزرهای صفحه اول روزنامه، ویجت ها اطلاعات یک برنامه را ادغام و متمرکز می کنند و ارتباطی با جزئیات غنی تری در برنامه ایجاد می کنند. ممکن است بگویید ویجت اطلاعات "میان وعده" است در حالی که برنامه "غذا" است. مطمئن شوید که برنامه شما جزئیات بیشتری را در مورد یک مورد اطلاعاتی نسبت به آنچه ویجت نمایش می دهد نشان می دهد.

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

نامزدهای خوب برای پیوندهای ناوبری در ویجت ها عبارتند از:

  • توابع مولد: اینها توابعی هستند که به کاربر اجازه می دهند محتوای جدیدی برای یک برنامه ایجاد کند، مانند ایجاد یک سند جدید یا یک پیام جدید.

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

تغییر اندازه ویجت

ویجت استاندارد ساعت Google
شکل 6. ویجت استاندارد ساعت گوگل.

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

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

اجازه دادن به کاربران برای تغییر اندازه ویجت ها مزایای مهمی دارد:

  • آنها می توانند میزان اطلاعاتی را که می خواهند در هر ویجت ببینند به خوبی تنظیم کنند.
  • آنها بهتر می توانند بر روی چیدمان ویجت ها و میانبرها در پانل های خانه خود تأثیر بگذارند.

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

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

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

نمونه ابزارک آب و هوا در کوچکترین اندازه شبکه 3×2، و فهرست نام مکان (توکیو)، دما (14 درجه)، و نماد نشان دهنده هوای نیمه ابری
شکل 7. نمونه ویجت آب و هوا در اندازه "کوچک" شبکه 3x2.


ویجت نمونه آب و هوا در اندازه «متوسط» 5×2، شامل تمام رابط‌های کاربری از اندازه شبکه 3×2 به‌علاوه برچسب «اکثراً ابری» و دمای پیش‌بینی‌شده از ساعت 16 تا 19
شکل 8. نمونه ویجت آب و هوا در اندازه شبکه 5x2 "متوسط".


ویجت نمونه آب و هوا در اندازه «بزرگ» 5×4، شامل تمام رابط‌های کاربری از اندازه‌های شبکه 3×2 و 5×2 به‌علاوه پیش‌بینی آب‌وهوا از سه‌شنبه تا جمعه
شکل 9. نمونه ویجت آب و هوا در اندازه "بزرگ" شبکه 5x4.

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

ملاحظات چیدمان

وسوسه انگیز است که ویجت های خود را با توجه به ابعاد شبکه قرارگیری دستگاهی که با آن توسعه می دهید قرار دهید. این می تواند یک تقریب اولیه مفید باشد، اما نکات زیر را در نظر داشته باشید:

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

پیکربندی ویجت توسط کاربران

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

چک لیست طراحی ویجت

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

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

این مستندات انواع مختلفی از ابزارک هایی را که می توانید ایجاد کنید و اصول طراحی را برای دنبال کردن معرفی می کند. برای ساخت ویجت برنامه با استفاده از API های Deport View و XML ، به ایجاد یک ویجت ساده مراجعه کنید. برای ساختن ویجت با استفاده از Kotlin و API های سبک ، به Jetpack Glance مراجعه کنید.

انواع ویجت

همانطور که ویجت خود را برنامه ریزی می کنید ، به این نوع ویجت که می خواهید بسازید فکر کنید. ابزارک ها به طور معمول در یکی از دسته های زیر قرار می گیرند:

ابزارک های اطلاعاتی

ویجت هواشناسی به عنوان مثال توکیو به عنوان عمدتا ابری ، 14 درجه و دمای پیش بینی شده از 4 بعد از ظهر تا 7 بعد از ظهر آغاز می شود
شکل 1. ویجت اطلاعاتی از یک برنامه آب و هوا.

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

ابزارک

ابزارک های مجموعه در نمایش چندین عناصر از همان نوع ، مانند مجموعه ای از تصاویر از یک برنامه گالری ، مجموعه مقالات از یک برنامه خبری یا مجموعه ای از ایمیل یا پیام از یک برنامه ارتباطی تخصص دارند. ابزارک های مجموعه می توانند به صورت عمودی پیمایش کنند.

ابزارک های جمع آوری به طور معمول روی موارد استفاده زیر تمرکز می کنند:

  • مرور مجموعه.
  • باز کردن یک عنصر از مجموعه در نمای جزئیات آن در برنامه مرتبط.
  • تعامل با عناصر ، مانند علامت گذاری آنها - با پشتیبانی از دکمه های مرکب در Android 12 (سطح API 31).

ابزارک های کنترل

ویجت برای برنامه ای به نام "لیست نور" ، نمایش سوئیچ های ضامن با برچسب "اتاق خواب" ، "آشپزخانه" و "اتاق نشیمن" با دو سوئیچ اول خاموش خاموش
شکل 4. مثال ویجت کنترل.

هدف اصلی ویجت کنترل نمایش توابع متداول است تا کاربر بتواند بدون نیاز به باز کردن برنامه ، آنها را از صفحه اصلی سوق دهد. شما می توانید از آنها به عنوان کنترل از راه دور برای یک برنامه فکر کنید. نمونه ای از ویجت کنترل یک ویجت کنترل خانه است که به کاربران امکان می دهد چراغ ها را در خانه روشن یا خاموش کنند.

تعامل با ویجت کنترل ممکن است نمای جزئیات مرتبط را در برنامه باز کند. این بستگی به این دارد که آیا عملکرد ویجت کنترل هرگونه داده ، مانند مورد ویجت جستجو را خروجی می کند.

ابزارک های ترکیبی

یک برنامه موسیقی کلی که دکمه هایی را برای "Thumbs Down" ، پشت ، پخش/مکث ، رو به جلو و "انگشت شست" نشان می دهد. این هنرمند و آهنگ به ترتیب به عنوان "هنرمند" و "مثال موسیقی" ذکر شده اند.
شکل 5. نمونه ویجت برنامه موسیقی.

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

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

ویجت ها را با دستیار Google ادغام کنید

هر نوع ویجت را می توان در پاسخ به دستورات صوتی کاربر توسط Google Assistant نمایش داد. شما می توانید ویجت های خود را برای انجام اقدامات برنامه پیکربندی کنید و به کاربران این امکان را می دهد تا پاسخ های سریع و تجربیات برنامه تعاملی را در سطوح دستیار مانند Android و Android Auto دریافت کنند. برای کسب اطلاعات بیشتر در مورد تحقق ویجت برای دستیار ، به ادغام اقدامات برنامه با ابزارک های اندرویدی مراجعه کنید.

محدودیت های ویجت

در حالی که ویجت ها را می توان به عنوان "مینی برنامه ها" درک کرد ، محدودیت های خاصی وجود دارد که قبل از طراحی ویجت خود برای درک آنها مهم است.

حرکات

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

تنها حرکات موجود برای ابزارک ها ، لمس و کشیدن عمودی است.

عناصر

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

دستورالعمل های طراحی

محتوای ویجت

ویجت ها با "تبلیغ" محتوای جدید و جالب که در برنامه شما موجود است ، یک روش عالی برای جذب کاربر به برنامه شما است.

دقیقاً مانند تیزرهای موجود در صفحه اول یک روزنامه ، ابزارک ها اطلاعات یک برنامه را تلفیق و متمرکز می کنند و ارتباطی با جزئیات غنی تر در برنامه ارائه می دهند. ممکن است بگویید ویجت اطلاعات "میان وعده" است در حالی که برنامه "وعده غذایی" است. اطمینان حاصل کنید که برنامه شما جزئیات بیشتری را در مورد یک مورد اطلاعات نسبت به آنچه ویجت نشان می دهد نشان می دهد.

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

نامزدهای خوب برای پیوندهای ناوبری در ابزارک ها عبارتند از:

  • توابع تولیدی: اینها توابع هستند که به کاربر اجازه می دهد محتوای جدیدی را برای یک برنامه ایجاد کند ، مانند ایجاد یک سند جدید یا یک پیام جدید.

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

تغییر اندازه ویجت

ویجت ساعت Google استاندارد
شکل 6. ویجت ساعت استاندارد Google.

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

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

اجازه دادن به اندازه گیری ویجت ها به کاربران مزایای مهمی دارد:

  • آنها می توانند چقدر اطلاعاتی را که می خواهند در هر ویجت مشاهده کنند ، تنظیم کنند.
  • آنها می توانند بهتر بر روی طرح ابزارک ها و میانبرهای روی پانل های خانگی خود تأثیر بگذارند.

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

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

در مثال زیر ، کاربر می تواند در سه مرحله ویجت هواشناسی را تغییر اندازه دهد و با رشد ویجت ، اطلاعات غنی تری در مورد آب و هوا در محل فعلی قرار دهد.

مثال ویجت هواشناسی در کوچکترین اندازه 3x2 شبکه ، و لیست نام مکان (توکیو) ، دما (14 درجه) و نمادی که نشانگر هوای جزئی ابری است
شکل 7. ویجت هواشناسی مثال در اندازه کوچک 3x2 شبکه.


مثال ویجت هواشناسی در اندازه 5x2 'متوسط ​​، از جمله تمام UI از اندازه 3x2 شبکه به علاوه برچسب "عمدتا ابری" و پیش بینی دمای 4 بعد از ظهر تا 7 بعد از ظهر
شکل 8. مثال ویجت هواشناسی در اندازه "متوسط" با شبکه 5x2.


مثال ویجت هواشناسی در اندازه 5x4 'بزرگ ، از جمله تمام UI از اندازه 3x2- و 5x2 شبکه به علاوه پیش بینی آب و هوا از سه شنبه تا جمعه
شکل 9. مثال ویجت هواشناسی در اندازه بزرگ 5x4 شبکه.

برای هر اندازه ویجت ، تعیین کنید که چه میزان از اطلاعات برنامه شما نمایش داده می شود. برای اندازه های کوچکتر ، روی اطلاعات ضروری متمرکز شوید و سپس با رشد ویجت به صورت افقی و عمودی ، اطلاعات متنی را اضافه کنید.

ملاحظات طرح

وسوسه انگیز است که ویجت های خود را با توجه به ابعاد شبکه قرار دادن دستگاهی که با آن توسعه می دهید ، بگذارید. این می تواند یک تقریب اولیه مفید باشد ، اما نکات زیر را در خاطر داشته باشید:

  • برنامه ریزی استراتژی تغییر اندازه ویجت خود در سراسر "سطل های اندازه" به جای ابعاد متغیر شبکه ، به شما قابل اطمینان ترین نتایج را می دهد.
  • تعداد ، اندازه و فاصله سلول ها می توانند از دستگاه به دستگاه دیگر متفاوت باشند. از این رو ، بسیار مهم است که ویجت شما انعطاف پذیر باشد و می تواند فضای کم و بیش از آنچه پیش بینی شده است ، در خود جای دهد.
  • از آنجا که کاربر یک ویجت را تغییر می دهد ، سیستم با دامنه اندازه DP پاسخ می دهد که در آن ویجت شما می تواند خود را مجدداً تغییر دهد.
  • با شروع در Android 12 ، می توانید ویژگی های اندازه تصفیه شده تر و طرح های انعطاف پذیر تر را ارائه دهید. این شامل:

پیکربندی ویجت توسط کاربران

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

چک لیست طراحی ویجت

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