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