چیدمان صفحه با ویجت گروه
در اپادیتور، بخش مهمی از طراحی صفحه با استفاده از ویجت گروه انجام میشود. ویجت گروه برای کنار هم قرار دادن چند ویجت، ساختاردهی به صفحه، کنترل فاصلهها و تعیین نوع چیدمان فرزندان استفاده میشود.
به زبان ساده، هر زمان بخواهید چند ویجت را داخل یک بخش مشخص قرار دهید و نحوه نمایش آنها را مدیریت کنید، میتوانید از ویجت گروه استفاده کنید.
ویجت گروه میتواند فرزندان خود را به چند شکل مختلف نمایش دهد:
- چیدمان عمودی
- چیدمان افقی
- چیدمان لایهای
- چیدمان جدولی
هر نوع چیدمان کاربرد خاص خود را دارد و انتخاب درست آن باعث میشود صفحه شما مرتبتر، قابل کنترلتر و واکنشگراتر باشد.
ویجت گروه چیست؟
ویجت گروه یک ویجت نگهدارنده است. یعنی خودش معمولاً برای نمایش مستقیم محتوا استفاده نمیشود، بلکه چند ویجت دیگر را درون خود قرار میدهد.
برای مثال، اگر بخواهید یک عنوان، یک متن توضیحی و یک دکمه را زیر هم نمایش دهید، میتوانید هر سه را داخل یک ویجت گروه با چیدمان عمودی قرار دهید.
نمونه کاربردها:
- ساخت بخشهای مختلف صفحه
- قرار دادن چند دکمه کنار هم
- ایجاد کارتهای اطلاعاتی
- ساخت فرمها
- ساخت ردیفها و ستونهای منظم
- قرار دادن ویجتها روی هم در چیدمان لایهای
- ایجاد جدول یا ساختارهای چندستونه
انواع چیدمان در ویجت گروه
چیدمان عمودی
در چیدمان عمودی، فرزندان گروه از بالا به پایین قرار میگیرند.
این نوع چیدمان برای بیشتر بخشهای رایج صفحه مناسب است؛ مانند فرمها، لیست اطلاعات، بخش پروفایل، صفحه تنظیمات و محتوای متنی.
مثال ساده:
عنوان
توضیحات
دکمه ثبت
در این حالت، هر ویجت در یک ردیف جداگانه قرار میگیرد.
کاربردهای رایج چیدمان عمودی
- نمایش فیلدهای یک فرم زیر هم
- ساخت صفحه ورود یا ثبتنام
- نمایش عنوان، توضیح و دکمه در یک بخش
- ایجاد لیستهای ساده
- چیدمان محتوای صفحه از بالا به پایین
چیدمان افقی
در چیدمان افقی، فرزندان گروه از راست به چپ یا چپ به راست، کنار یکدیگر قرار میگیرند. جهت نمایش میتواند به تنظیمات کلی زبان، جهت صفحه یا تنظیمات خود چیدمان وابسته باشد.
این نوع چیدمان برای زمانی مناسب است که بخواهید چند ویجت در یک ردیف نمایش داده شوند.
مثال ساده:
[آیکن] [عنوان] [دکمه]
کاربردهای رایج چیدمان افقی
- قرار دادن آیکن کنار متن
- ساخت ردیف اطلاعات
- نمایش دو دکمه کنار هم
- ساخت نوار ابزار
- نمایش تصویر و توضیح در کنار یکدیگر
چیدمان لایهای
در چیدمان لایهای، فرزندان روی یکدیگر قرار میگیرند. یعنی به جای اینکه ویجتها پشت سر هم در یک ردیف یا ستون چیده شوند، میتوانند به صورت لایههای مختلف روی هم نمایش داده شوند.
این چیدمان برای طراحیهایی مناسب است که در آنها یک ویجت باید روی ویجت دیگر قرار بگیرد.
مثال:
- نمایش متن روی تصویر
- قرار دادن دکمه روی یک بنر
- نمایش برچسب روی کارت محصول
- قرار دادن آیکن روی تصویر پروفایل
نمونه ساختار:
[تصویر پسزمینه]
[متن روی تصویر]
[دکمه روی تصویر]
در چیدمان لایهای باید دقت کنید که ویجتها روی همدیگر را نپوشانند، مگر اینکه این رفتار بخشی از طراحی شما باشد.
چیدمان جدولی
در چیدمان جدولی، فرزندان به شکل ردیف و ستون نمایش داده میشوند. این نوع چیدمان برای نمایش آیتمهای تکراری یا بخشهایی که باید در چند ستون مرتب شوند کاربرد دارد.
مثالها:
- نمایش محصولات در چند ستون
- ساخت گالری تصاویر
- نمایش گزینههای منو به صورت شبکهای
- ساخت صفحه دستهبندیها
- نمایش کارتها در ساختار منظم
در چیدمان جدولی، بهتر است اندازه آیتمها تا حد امکان هماهنگ باشد تا خروجی صفحه مرتبتر دیده شود.
وزندهی در چیدمانهای عمودی و افقی
در چیدمانهای عمودی و افقی، میتوان برای فرزندان از قابلیت وزندهی استفاده کرد.
وزندهی مشخص میکند هر فرزند چه مقدار از فضای قابل استفاده را نسبت به فرزندان دیگر اشغال کند.
برای مثال، اگر در یک چیدمان افقی دو ویجت داشته باشید:
- ویجت اول با وزن 1
- ویجت دوم با وزن 2
در این حالت، ویجت دوم تقریباً دو برابر ویجت اول از فضای ردیف را اشغال میکند.
مثال:
[ وزن 1 ][ وزن 2 ]
در چیدمان عمودی نیز همین مفهوم وجود دارد، اما فضا در جهت عمودی تقسیم میشود.
مثال:
چه زمانی از وزندهی استفاده کنیم؟
از وزندهی زمانی استفاده کنید که بخواهید اندازه ویجتها نسبت به فضای موجود صفحه تنظیم شود.
کاربردهای رایج:
- تقسیم صفحه به چند بخش
- بزرگتر کردن یک بخش نسبت به بخش دیگر
- ساخت ردیفهایی با ستونهای نامساوی
- کنترل بهتر نمایش در اندازههای مختلف صفحه
- ایجاد چیدمانهای واکنشگرا
نکته مهم درباره وزندهی
وزندهی زمانی معنیدار است که فضای قابل تقسیم وجود داشته باشد. اگر محتوای گروه فقط به اندازه فرزندان خود فضا بگیرد، ممکن است وزندهی نتیجهای که انتظار دارید ایجاد نکند.
همچنین بهتر است از وزندهی بیش از حد و بدون نیاز استفاده نکنید. در بسیاری از موارد، تنظیم اندازه، فاصله یا تراز کردن ویجتها کافی است.
حالت اسکرولپذیر و بدون اسکرول
چیدمانهای عمودی و افقی میتوانند در دو حالت استفاده شوند:
- اسکرولپذیر
- بدون اسکرول
انتخاب این حالت به مقدار محتوا و نوع طراحی صفحه بستگی دارد.
حالت اسکرولپذیر
در حالت اسکرولپذیر، اگر تعداد یا اندازه فرزندان بیشتر از فضای قابل نمایش باشد، کاربر میتواند صفحه یا بخش مورد نظر را اسکرول کند.
این حالت برای لیستها و محتواهای طولانی مناسب است.
مثالهای مناسب برای حالت اسکرولپذیر:
- لیست محصولات
- فرمهای طولانی
- صفحه تنظیمات
- محتوای متنی زیاد
- لیست پیامها یا اعلانها
نکته مهم در حالت اسکرولپذیر
اگر میدانید محتوای یک بخش ممکن است از صفحه بزرگتر شود، بهتر است آن بخش را اسکرولپذیر طراحی کنید. این کار باعث میشود محتوا در صفحههای کوچکتر بریده نشود و کاربر بتواند به همه آیتمها دسترسی داشته باشد.
حالت بدون اسکرول
در حالت بدون اسکرول، فرزندان باید در همان فضای موجود نمایش داده شوند. در این حالت، اگر تعداد آیتمها زیاد باشد یا اندازه آنها بزرگ باشد، ممکن است چیدمان به مشکل بخورد یا بخشی از محتوا به درستی دیده نشود.
این حالت برای بخشهایی مناسب است که تعداد آیتمها محدود و اندازه آنها قابل کنترل است.
مثالهای مناسب برای حالت بدون اسکرول:
- یک ردیف دکمه
- سربرگ صفحه
- بخش کوتاه اطلاعات
- نوار پایین صفحه
- یک کارت کوچک با چند آیتم محدود
پخش فضا بین آیتمها در حالت بدون اسکرول
در چیدمانهای عمودی و افقی، وقتی حالت بدون اسکرول فعال باشد، میتوان از قابلیت پخش فضا بین آیتمها استفاده کرد.
این قابلیت مشخص میکند فضای خالی موجود بین فرزندان چگونه توزیع شود.
برای مثال، در یک چیدمان افقی میتوانید آیتمها را به شکلهای مختلف قرار دهید:
[آیتم 1][آیتم 2][آیتم 3]
یا با فاصله بین آنها:
[آیتم 1] [آیتم 2] [آیتم 3]
یا با فاصله از ابتدا و انتها:
[آیتم 1] [آیتم 2] [آیتم 3]
این تنظیم برای مرتبسازی دکمهها، منوها، ردیفها و بخشهای ثابت بسیار کاربردی است.
نکته مهم
پخش فضا معمولاً زمانی بهتر عمل میکند که گروه فضای بیشتری نسبت به مجموع اندازه فرزندان داشته باشد. اگر فرزندان تمام فضای موجود را پر کرده باشند، فضای اضافهای برای پخش وجود نخواهد داشت.
نسبت ابعاد برای فرزندان
در چیدمان صفحه، گاهی لازم است یک ویجت همیشه با نسبت مشخصی نمایش داده شود. برای این کار میتوان از قابلیت نسبت ابعاد استفاده کرد.
نسبت ابعاد یعنی رابطه بین عرض و ارتفاع یک ویجت.
برای مثال:
- نسبت 1 به 1 یعنی ویجت مربعی است.
- نسبت 16 به 9 برای بنرها و ویدئوها رایج است.
- نسبت 4 به 3 برای بعضی تصاویر یا کارتها استفاده میشود.
کاربردهای نسبت ابعاد
- نمایش تصویر بدون تغییر شکل نامناسب
- ساخت کارتهای هماندازه
- طراحی بنرهای ثابت
- ساخت آیتمهای جدولی منظم
- جلوگیری از کشیدگی بیش از حد ویجتها
مثال:
اگر بخواهید کارتهای یک گالری همیشه مربعی باشند، میتوانید برای فرزندان نسبت ابعاد 1 به 1 تعریف کنید. در این حالت، عرض و ارتفاع کارتها متناسب باقی میماند.
نکته مهم درباره نسبت ابعاد
نسبت ابعاد به شما کمک میکند ظاهر ویجتها در اندازههای مختلف صفحه منظمتر باشد. با این حال، اگر محتوای داخل ویجت زیاد باشد، ممکن است نیاز باشد اندازه، فاصله داخلی یا حالت اسکرول را نیز بررسی کنید.
فاصله داخلی و فاصله بیرونی
در طراحی چیدمان، فقط نوع چیدمان مهم نیست. فاصلهها نیز نقش مهمی در خوانایی و زیبایی صفحه دارند.
دو مفهوم مهم در این بخش وجود دارد:
- فاصله داخلی
- فاصله بیرونی
فاصله داخلی
فاصله داخلی، فاصله بین مرز گروه و محتوای داخل آن است.
برای مثال، اگر یک کارت دارید و نمیخواهید متن به لبه کارت بچسبد، باید برای کارت فاصله داخلی تنظیم کنید.
[ متن داخل کارت با فاصله از لبهها ]
فاصله بیرونی
فاصله بیرونی، فاصله بین یک ویجت و ویجتهای اطراف آن است.
برای مثال، اگر دو کارت زیر هم قرار دارند و نمیخواهید به هم بچسبند، باید بین آنها فاصله بیرونی قرار دهید.
[ کارت اول ]
[ کارت دوم ]
تراز کردن فرزندان
در چیدمانهای عمودی و افقی، تراز کردن فرزندان اهمیت زیادی دارد. تراز مشخص میکند ویجتها در جهت اصلی یا جهت مخالف چیدمان چگونه قرار بگیرند.
برای مثال، در چیدمان افقی ممکن است بخواهید آیتمها:
- در ابتدای ردیف باشند
- وسطچین شوند
- در انتهای ردیف قرار بگیرند
- با فاصله مساوی پخش شوند
در چیدمان عمودی نیز میتوانید مشخص کنید فرزندان از بالا شروع شوند، در مرکز قرار بگیرند یا در انتهای فضای موجود نمایش داده شوند.
مثال کاربردی
اگر یک ردیف شامل آیکن و متن دارید، بهتر است آنها از نظر عمودی در مرکز یکدیگر قرار بگیرند تا ظاهر ردیف منظمتر شود.
[آیکن] متن عنوان
کنترل اندازه گروه
ویجت گروه میتواند بسته به تنظیمات، اندازه خود را از محتوای داخلش بگیرد یا فضای بیشتری از صفحه را اشغال کند.
در طراحی صفحه باید توجه کنید که گروه دقیقاً چه مقدار فضا نیاز دارد.
برای مثال:
- اگر گروه فقط شامل یک متن کوتاه است، معمولاً نیازی نیست کل صفحه را بگیرد.
- اگر گروه بخش اصلی صفحه است، ممکن است لازم باشد فضای بیشتری را اشغال کند.
- اگر گروه داخل یک چیدمان دیگر قرار دارد، اندازه آن باید با والد خود هماهنگ باشد.
چیدمانهای تو در تو
یکی از روشهای مهم در طراحی صفحه، استفاده از چیدمانهای تو در تو است.
یعنی میتوانید یک ویجت گروه را داخل ویجت گروه دیگر قرار دهید.
مثال:
- یک گروه عمودی برای کل صفحه
- داخل آن یک گروه افقی برای سربرگ
- یک گروه جدولی برای نمایش آیتمها
- یک گروه عمودی برای محتوای هر کارت
نمونه ساختار:
گروه عمودی صفحه
├─ گروه افقی سربرگ
├─ گروه جدولی محصولات
│ ├─ کارت محصول
│ ├─ کارت محصول
│ └─ کارت محصول
└─ گروه افقی دکمهها
نکته مهم درباره چیدمانهای تو در تو
چیدمانهای تو در تو بسیار کاربردی هستند، اما اگر بیش از حد پیچیده شوند، مدیریت صفحه سخت میشود. بهتر است هر گروه فقط مسئول یک بخش مشخص از صفحه باشد.
انتخاب چیدمان مناسب
برای انتخاب نوع چیدمان، این پرسشها را از خود بپرسید:
آیا آیتمها باید زیر هم باشند؟
اگر پاسخ بله است، از چیدمان عمودی استفاده کنید.
مثال:
- فرم ثبتنام
- صفحه تنظیمات
- محتوای مقاله
آیا آیتمها باید کنار هم باشند؟
اگر پاسخ بله است، از چیدمان افقی استفاده کنید.
مثال:
- دکمههای کنار هم
- آیکن و متن
- ردیف اطلاعات
آیا آیتمی باید روی آیتم دیگر قرار بگیرد؟
اگر پاسخ بله است، از چیدمان لایهای استفاده کنید.
مثال:
- متن روی تصویر
- نشان تخفیف روی کارت محصول
- دکمه روی بنر
آیا آیتمها باید در چند ستون و ردیف مرتب شوند؟
اگر پاسخ بله است، از چیدمان جدولی استفاده کنید.
مثال:
- گالری تصاویر
- محصولات
- دستهبندیها
نکات مهم در طراحی چیدمان
1. ابتدا ساختار کلی صفحه را مشخص کنید
قبل از اضافه کردن ویجتها، مشخص کنید صفحه شما از چه بخشهایی تشکیل شده است.
برای مثال:
- سربرگ
- محتوای اصلی
- دکمهها
- فوتر یا نوار پایین
بعد از مشخص شدن ساختار، برای هر بخش یک گروه مناسب بسازید.
2. از چیدمان ساده شروع کنید
بهتر است ابتدا صفحه را با چند گروه ساده طراحی کنید. سپس در صورت نیاز، چیدمانهای پیچیدهتر مانند لایهای یا جدولی را اضافه کنید.
3. برای صفحههای کوچکتر فکر کنید
ممکن است صفحه شما در دستگاههای مختلف با اندازههای متفاوت نمایش داده شود. بنابراین بهتر است از اندازههای ثابت بیش از حد استفاده نکنید و در صورت نیاز از وزندهی، نسبت ابعاد و اسکرول استفاده کنید.
4. محتوای زیاد را بدون اسکرول رها نکنید
اگر یک گروه شامل محتوای زیاد است، حالت اسکرولپذیر را بررسی کنید. در غیر این صورت ممکن است بخشی از محتوا در صفحههای کوچک دیده نشود.
5. فاصلهها را هماهنگ نگه دارید
استفاده نامنظم از فاصلهها باعث میشود صفحه شلوغ یا نامرتب دیده شود. سعی کنید فاصله بین بخشهای مشابه یکسان باشد.
6. از وزندهی برای تقسیم منطقی فضا استفاده کنید
وزندهی برای زمانی مناسب است که چند بخش باید فضای موجود را بین خود تقسیم کنند. برای اندازههای ساده، همیشه لازم نیست از وزندهی استفاده شود.
7. در چیدمان لایهای مراقب همپوشانی باشید
در چیدمان لایهای، ویجتها میتوانند روی هم قرار بگیرند. اگر موقعیت یا اندازه آنها درست تنظیم نشود، ممکن است محتوای مهم پنهان شود.
8. در چیدمان جدولی اندازه آیتمها را هماهنگ کنید
اگر آیتمهای جدول اندازههای بسیار متفاوتی داشته باشند، ظاهر صفحه نامرتب میشود. بهتر است برای کارتها، تصاویر و آیتمهای مشابه، اندازه یا نسبت ابعاد هماهنگ در نظر بگیرید.
9. گروهها را با هدف مشخص بسازید
هر گروه باید یک وظیفه مشخص داشته باشد. برای مثال، یک گروه برای سربرگ، یک گروه برای محتوای فرم و یک گروه برای دکمههای پایین صفحه.
این کار باعث میشود صفحه قابل فهمتر و ویرایش آن سادهتر شود.
10. پیشنمایش را بررسی کنید
بعد از تنظیم چیدمان، خروجی را در پیشنمایش بررسی کنید. اگر امکان بررسی در اندازههای مختلف وجود دارد، صفحه را در چند اندازه متفاوت مشاهده کنید تا مطمئن شوید چیدمان در حالتهای مختلف درست نمایش داده میشود.
نمونه ساختار یک صفحه ساده
در این مثال، صفحه با چند گروه ساخته شده است:
گروه عمودی اصلی
├─ گروه افقی سربرگ
│ ├─ آیکن
│ └─ عنوان صفحه
├─ گروه عمودی محتوا
│ ├─ متن توضیحی
│ ├─ فیلد اول
│ ├─ فیلد دوم
│ └─ دکمه ثبت
└─ گروه افقی دکمههای پایین
├─ دکمه بازگشت
└─ دکمه ادامه
در این ساختار:
- گروه اصلی، کل صفحه را به صورت عمودی مدیریت میکند.
- سربرگ با چیدمان افقی ساخته شده است.
- محتوای صفحه به صورت عمودی نمایش داده میشود.
- دکمههای پایین صفحه کنار هم قرار گرفتهاند.
جمعبندی
ویجت گروه یکی از مهمترین ابزارهای طراحی صفحه در اپادیتور است. با استفاده از این ویجت میتوانید ویجتهای مختلف را به شکل عمودی، افقی، لایهای یا جدولی کنار هم قرار دهید.
برای ساخت چیدمانهای بهتر، به این موارد توجه کنید:
- نوع چیدمان را بر اساس نیاز صفحه انتخاب کنید.
- برای محتوای زیاد از حالت اسکرولپذیر استفاده کنید.
- در حالت بدون اسکرول، از پخش فضا برای مرتبسازی آیتمها کمک بگیرید.
- برای تقسیم فضای موجود، وزندهی را بهدرستی به کار ببرید.
- برای کنترل شکل ویجتها، از نسبت ابعاد استفاده کنید.
- فاصلهها، ترازها و اندازهها را با دقت تنظیم کنید.
- از چیدمانهای تو در تو استفاده کنید، اما ساختار صفحه را بیش از حد پیچیده نکنید.
با رعایت این نکات، میتوانید صفحههایی منظم، خوانا و قابل استفاده در اندازههای مختلف طراحی کنید.