پرش به مطلب اصلی

صفحه

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

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

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


ساختار یک صفحه

هر صفحه در اپ‌ادیتور از چند بخش اصلی تشکیل می‌شود که در کنار هم ظاهر و رفتار صفحه را می‌سازند.

۱. گروه اصلی

گروه اصلی
گروه اصلی در طراحی صفحه

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

گروه اصلی مشخص می‌کند که محتوای صفحه چگونه در فضای صفحه قرار بگیرد؛ برای مثال، ویجت‌ها به‌صورت عمودی، افقی، شناور یا در ساختارهای ترکیبی چیده شوند.

پیشنهاد طراحی

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

برای آشنایی بیشتر با چیدمان، صفحه چیدمان صفحه را ببینید.


۲. محتوای صفحه

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

نمونه‌هایی از ویجت‌ها:

  • متن
  • تصویر
  • دکمه
  • گروه
  • فرم‌ها
  • ویدئو و صدا
  • وب‌ویو
  • تب و اسلاید
  • لیست‌ها
  • محتوای HTML
  • ویجت‌های وردپرس
  • ویجت‌های فروشگاهی و پرداخت
  • و...

هر ویجت تنظیمات مخصوص خود را دارد و می‌تواند ظاهر، محتوا یا رفتار متفاوتی در صفحه ایجاد کند.


۳. تنظیمات صفحه

تنظیمات صفحه در اپ ادیتور
تنظیمات صفحه

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

در تنظیمات صفحه معمولاً مواردی مانند موارد زیر مدیریت می‌شوند:

  • عنوان صفحه
  • جهت نمایش محتوا
  • نمایش یا عدم نمایش نوارها
  • تنظیمات تمام‌صفحه
  • تنظیمات چرخش صفحه
  • رویدادهای صفحه
  • شرایط دسترسی یا نمایش

این تنظیمات کمک می‌کنند تا هر صفحه دقیقاً مطابق نیاز اپلیکیشن طراحی و کنترل شود.


رویدادهای صفحه

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

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

مهم‌ترین رویدادهای قابل استفاده در صفحه عبارت‌اند از:

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

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

رویداد صفحه را می توانید در تنظیمات صفحه اضافه کنید.

هشدار

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


ایجاد صفحه جدید

ایجاد صفحه در اپ ادیتور
ایجاد صفحه جدید

برای ساخت صفحه جدید در اپ‌ادیتور، معمولاً دو روش وجود دارد:

استفاده از قالب‌های آماده

در این روش، می‌توانید یکی از قالب‌های آماده را انتخاب کنید و سپس آن را مطابق نیاز خود تغییر دهید.

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

برای آشنایی بیشتر، صفحه قالب‌ها را ببینید.

ایجاد صفحه خالی

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

این روش برای زمانی مناسب است که طراحی اختصاصی‌تری در نظر دارید یا می‌خواهید کنترل کامل‌تری روی ساختار صفحه داشته باشید.


صفحه اصلی

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

در بسیاری از اپلیکیشن‌ها، صفحه اصلی شامل بخش‌هایی مانند موارد زیر است:

  • منوی دسترسی سریع
  • بنرها یا اسلایدرها
  • دسته‌بندی محتوا
  • آخرین مطالب یا محصولات
  • دکمه‌های اصلی ناوبری
  • بخش‌های معرفی یا پیشنهاد ویژه
مهم

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

اگر هنوز اولین اپلیکیشن خود را نساخته‌اید، راهنمای ساخت اولین اپلیکیشن را مطالعه کنید.


صفحات سیستمی و خاص

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

صفحه آغازین

صفحه آغازین یا Splash Screen اولین صفحه‌ای است که هنگام اجرای اپلیکیشن نمایش داده می‌شود. این صفحه معمولاً شامل لوگو، نام برند یا تصویر معرفی اپلیکیشن است.

صفحه اصلی

صفحه اصلی مسیر اصلی ورود کاربر به محتوای اپلیکیشن است و معمولاً مرکز ناوبری برنامه محسوب می‌شود.

صفحه معرفی

صفحه معرفی برای راهنمایی کاربر در اولین استفاده از اپلیکیشن کاربرد دارد. این صفحه‌ها معمولاً امکانات اصلی برنامه را معرفی می‌کنند.

صفحات حساب کاربری

اگر اپلیکیشن شما دارای حساب کاربری باشد، ممکن است از صفحات زیر استفاده کنید:

  • صفحه ورود
  • صفحه ثبت‌نام
  • صفحه فراموشی رمز عبور
  • صفحه پروفایل کاربر

برای اطلاعات بیشتر، صفحه حساب کاربری را ببینید.

صفحه آفلاین

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

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


ارتباط صفحه و ویجت

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

نکات مهم درباره ارتباط صفحه و ویجت:

  • ویجت‌ها داخل صفحات قرار می‌گیرند.
  • بدون وجود صفحه، ویجت‌ها قابل نمایش نیستند.
  • ساختار درختی ویجت‌ها ظاهر نهایی صفحه را می‌سازد.
  • گروه اصلی صفحه، پایه چیدمان سایر ویجت‌هاست.
  • تغییر تنظیمات هر ویجت، مستقیماً روی ظاهر یا رفتار صفحه تأثیر می‌گذارد.
  • رویدادهای ویجت‌ها و رویدادهای صفحه می‌توانند با یکدیگر ترکیب شوند.

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


استفاده مجدد از صفحات

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

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

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

با این حال، هنگام قرار دادن یک صفحه داخل صفحات دیگر، به موارد زیر توجه کنید:

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

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


نکات طراحی صفحه

برای طراحی بهتر صفحات در اپ‌ادیتور، رعایت نکات زیر پیشنهاد می‌شود:

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

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

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

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


جمع‌بندی

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

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

قدم بعدی پیشنهادی: