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