ویرایش و پیش‌نمایش بصری

ویرایش بصری مستقیماً در App Viewer کار می‌کند. از نوار ابزار زیر پیش‌نمایش برای انتخاب عناصر، ویرایش متن، جایگزینی تصاویر، اعمال تم و پیش‌نمایش تغییرات خود پیش از انتشار استفاده کنید.

استفاده کنید از انتخاب عنصر برای تغییرات با کمک AI، از Edit Text برای تغییر مستقیم متن، و از Theme برای سبک‌های سراسری مانند رنگ‌ها، فونت‌ها و افکت‌ها استفاده کنید.

نحوه کار ویرایش بصری

وقتی عامل‌های AI یک وظیفه را کامل می‌کنند، App Viewer در بالای پروژه ظاهر می‌شود. نوار ابزار ویرایش بصری زیر پیش‌نمایش قرار دارد.

• انتخاب عنصر به شما امکان می‌دهد یک یا چند عنصر را انتخاب کنید و از عامل‌ها بخواهید آن‌ها را تغییر دهند.
• ویرایش متن به شما امکان می‌دهد متن را مستقیماً در پیش‌نمایش ویرایش کنید.
• تم کنترل‌های تم را برای سبک‌های سراسری باز می‌کند.

وقتی به نوار ابزار نیاز ندارید، می‌توان آن را جمع کرد.

پیش از شروع

پیش از شروع ویرایش، مطمئن شوید که:

• پروژه شما یک build کامل‌شده دارد. ابزارهای ویرایش بصری پس از پایان یک وظیفه توسط عامل‌ها، از App Viewer در دسترس هستند.
• می‌دانید که تغییرات تا زمانی که منتشر نکنید زنده نیستند. URL عمومی شما تا زمانی که نسخه به‌روزشده را منتشر نکنید، بدون تغییر می‌ماند.
• می‌دانید که یک تم فقط به سبک‌های مشترک می‌رسد. عناصری که با مقادیر ثابت ساخته شده‌اند، پس از تغییر تم ظاهر قبلی خود را حفظ می‌کنند. بخش اگر یک تم درست به نظر نمی‌رسد را در پایین ببینید.

تنظیم سبک‌های سراسری با Theme

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

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

یک تم انتخاب کنید

انتخاب کنید تم از نوار ابزار زیر App Viewer. پنل Theme شامل یک فیلد Search Themes است و تم‌ها را در بخش‌های زیر گروه‌بندی می‌کند:

• تم فعلی — چیزی که پروژه شما اکنون استفاده می‌کند. پیش از اعمال هر چیزی، این بخش نشان می‌دهد هنوز هیچ تمی اعمال نشده است, و + دکمه کنار آن یک تم جدید ایجاد می‌کند.
• تم ویژه — 15 پیش‌تنظیم منتخبِ طراحان. هرکدام به‌صورت پیش‌نمایش یک صفحه ساخته‌شده با آن، همراه با نام و ردیفی از نمونه‌رنگ‌ها برای نمایش پالت آن نشان داده می‌شود. این‌ها قابل حذف نیستند.
• تم شما — تم‌هایی که ایجاد یا سفارشی‌سازی کرده‌اید. این‌ها را می‌توان تغییر نام داد و حذف کرد.

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

زبانه Theme، با یک تم اعمال‌شده در بالا و تم‌های ذخیره‌شده شما در زیر آن.

برای اعمال یکی از آن‌ها:

1. تم موردنظر خود را انتخاب کنید.
2. Atoms می‌پرسد "آیا می‌خواهید تم name?"
3. انتخاب کنید اعمال را برای تأیید انتخاب کنید، یا لغو را برای بازگشت.
4. پیش‌نمایش را بررسی کنید.

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

توجه: اگر تغییرات ذخیره‌نشده‌ای در متن یا تصویر دارید، Atoms پیش از اعمال یک تم جدید از شما می‌خواهد آن‌ها را ذخیره یا رد کنید.

به‌روزرسانی یک تم اعمال‌شده

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

برای دریافت آن، Update را روی تم فعلی خود انتخاب کنید و این مورد را تأیید کنید: آیا می‌خواهید تم را دوباره اعمال کنید name? سپس پروژه شما از نسخه جدیدتر استفاده می‌کند.

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

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

ساخت یا ویرایش یک تم در Theme Manager

انتخاب کنید + در کنار تم فعلی برای ساخت یک تم از ابتدا، یا یک تم موجود را برای تغییر باز کنید. هر دو مورد Theme Manager, را باز می‌کنند؛ جایی که می‌توانید یک تم را در برابر یک پیش‌نمایش زنده به‌دقت تنظیم کنید.

تنظیمات آن در سه زبانه قرار دارند:

• رنگ — نقش‌های رنگی که برنامه شما استفاده می‌کند، بر اساس کاربرد گروه‌بندی شده‌اند: رنگ‌های پایه, کارت, Popover, اصلی, ثانویه, و موارد دیگر. هر نقش مقدار مخصوص به خود را دارد، بنابراین تغییر اصلی به همه عناصری که از آن استفاده می‌کنند می‌رسد.
• فونت‌ها — تایپ‌فیس‌های Serif, Sans-serif, و Mono شما.
• افکت‌ها — Radius, گوشه و یک Shadow که آن را با رنگ، شفافیت، تاری، گستردگی و جابه‌جایی کنترل می‌کنید.

پیش‌نمایش کنار آن‌ها از مؤلفه‌های واقعی ساخته شده است — فرم‌های ورود، دکمه‌ها، ورودی‌ها، متن بدنه و متن monospace — بنابراین می‌توانید تغییر را فوراً ارزیابی کنید، نه این‌که حدس بزنید. از کلید جابه‌جایی روشن و تیره زیر آن استفاده کنید تا هر دو حالت را بررسی کنید، چون پالتی که روی سطوح روشن خوب کار می‌کند ممکن است روی سطوح تیره کنتراست خود را از دست بدهد.

در زیر پیش‌نمایش همچنین Undo و Redo را برای حرکت مرحله‌به‌مرحله در تغییرات خود، و Reset را برای بازگرداندن تم به حالت اولیه آن در اختیار دارید.

Theme Manager. پیش‌نمایش با تغییر هر مقدار به‌روزرسانی می‌شود و کنترل‌های زیر آن شامل undo، redo، export، import و reset هستند.

ذخیره یک تم

1. انتخاب کنید ذخیره.
2. به آن یک Theme Name, بدهید یا نام پیشنهادی را نگه دارید.
3. انتخاب کنید ذخیره را برای تأیید انتخاب کنید.

نتیجه مورد انتظار: تم شما در بخش My Theme در زبانه Theme ظاهر می‌شود و پالت آن به‌صورت نمونه‌رنگ‌ها نمایش داده می‌شود. آن را مانند هر تم دیگری اعمال کنید.

توجه: ویرایش‌ها تا زمانی که آن‌ها را ذخیره نکنید نگه داشته نمی‌شوند. اگر بخواهید با وجود تغییرات ذخیره‌نشده، تم دیگری اعمال کنید، Atoms جلوی شما را می‌گیرد و گزینه ذخیره یا رد کردن را پیشنهاد می‌دهد.

استفاده دوباره از یک تم در پروژه‌های مختلف

Theme Manager دارای Export و Import در زیر پیش‌نمایش است. یک تم را به فایل export کنید، سپس آن را در پروژه‌ای دیگر import کنید تا همان جهت طراحی را دوباره استفاده کنید، یا آن را به هم‌تیمی خود بدهید تا پروژه او با پروژه شما هماهنگ باشد.

اگر یک تم درست به نظر نمی‌رسد

اعمال یک تم بررسی سازگاری نیست، بنابراین معمولاً شکست نمی‌خورد. یک تم مقادیر سبک مشترکی را که برنامه شما بر پایه آن‌ها ساخته شده جایگزین می‌کند، یعنی معمولاً هر تمی در انتخاب‌گر را می‌توان روی هر پروژه‌ای اعمال کرد.

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

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

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

Atoms به شما می‌گوید که تم قابل اعمال نیست. این مورد غیرمعمول است و یعنی رابط پروژه شما بر پایه سیستم تم‌دهی Atoms ساخته نشده است. به‌جای آن از Visual Editor استفاده کنید — همچنان می‌توان همه‌چیز را عنصر به عنصر انجام داد.

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

ویرایش عناصر با Visual Editor

1. نشانگر را روی نوار ابزار ویرایش بصری ببرید و انتخاب عنصر.
2. نوار ابزار این را نمایش می‌دهد برای انتخاب کلیک کنید، برای چند انتخابی Ctrl/Cmd + Click.
3. یک عنصر را در پیش‌نمایش انتخاب کنید. برای انتخاب چند عنصر، کلید Ctrl را در Windows یا Cmd را در Mac هنگام انتخاب نگه دارید.
4. انتخاب‌های شما به گفت‌وگوی پروژه پیوست می‌شوند. نوار ابزار تعداد موارد انتخاب‌شده را نشان می‌دهد، مانند Edit 1 selection in chat window.
5. تغییری را که می‌خواهید در گفت‌وگوی پروژه توضیح دهید و پیام خود را ارسال کنید.
6. انتخاب کنید انتخاب عنصر را دوباره انتخاب کنید تا از حالت انتخاب خارج شوید.

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

ویرایش مستقیم متن

1. انتخاب کنید ویرایش متن از نوار ابزار زیر App Viewer.
2. وقتی برای ویرایش روی محتوای متنی کلیک کنید ظاهر شد، متنی را که می‌خواهید تغییر دهید انتخاب کنید.
3. متن را مستقیماً در پیش‌نمایش ویرایش کنید.
4. می‌توانید پیش از ذخیره، چند عنصر متنی را ویرایش کنید. نوار ابزار تعداد ویرایش‌های در انتظار را نشان می‌دهد، مانند 1 تغییر متن یا 2 تغییر متن.
5. انتخاب کنید ذخیره را برای نگه داشتن همه تغییرات متنی در انتظار انتخاب کنید، یا Discard را برای حذف آن‌ها.

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

تغییرات خود را ذخیره یا رد کنید

تغییرات مستقیم متن و تصویر تا زمانی که آن‌ها را ذخیره نکنید اعمال نمی‌شوند. وقتی تغییراتی در انتظار باشند، نوار ابزار تعداد تغییرات را همراه با Discard و ذخیره.

• ذخیره همه ویرایش‌های مستقیم در انتظار را اعمال می‌کند.
• Discard ویرایش‌های در انتظار را حذف می‌کند و عناصر تحت تأثیر را به حالت قبلی‌شان بازمی‌گرداند.

اگر بخواهید با وجود تغییرات در انتظار از حالت ویرایش خارج شوید، Atoms این را نمایش می‌دهد:

تغییرات ذخیره‌نشده

شما تغییرات ذخیره‌نشده دارید. لطفاً پیش از خروج از حالت ویرایش، تغییرات را ذخیره یا رد کنید.

انتخاب کنید لغو را برای ادامه ویرایش یا Discard را برای خروج بدون نگه داشتن تغییرات انتخاب کنید.

ذخیره کردن، پروژه کاری را به‌روزرسانی می‌کند. تا زمانی که منتشر نکنید، سایت زنده را به‌روزرسانی نمی‌کند.

جایگزینی یک تصویر

1. وارد انتخاب عنصر حالت شوید.
2. تصویری را که می‌خواهید جایگزین کنید انتخاب کنید.
3. یک تصویر از کتابخانه تصاویر انتخاب کنید، یا از کنترل بارگذاری روی تصویر انتخاب‌شده استفاده کنید.
4. جایگزینی را در پیش‌نمایش بررسی کنید.
5. انتخاب کنید ذخیره را برای اعمال تغییر تصویر انتخاب کنید، یا Discard را برای حذف آن.

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

زبانه Library با دسته‌بندی‌های تصویر و Popular Images.

تصاویر از کجا می‌آیند

Image مجموعه داخلی است. از Search assets برای چیزی مشخص استفاده کنید، یا یک دسته را مرور کنید — Backgrounds، Nature، Education، Health، Fashion، Science، Feelings و People، همراه با More tags برای بقیه. با انتخاب یک دسته، آن باز می‌شود؛ برای بازگشت از فلش عقب استفاده کنید. Popular Images در پایین، یک انتخاب عمومی را نشان می‌دهد. روی هر تصویر نگه دارید و Use asset را برای اعمال آن انتخاب کنید.

Generate یک تصویر جدید از روی توضیح ایجاد می‌کند و به پلن Pro یا Max نیاز دارد. آنچه را می‌خواهید زیر Describe the image you want to generate بنویسید و Generate. را انتخاب کنید. نتایج زیر فیلد ظاهر می‌شوند. برای اعمال روی عنصر خود، یک تصویر بندانگشتی تکمیل‌شده را انتخاب کنید.

Upload فایل خودتان را با کشیدن و رها کردن، چسباندن یا کلیک اضافه می‌کند. تصاویر می‌توانند در قالب‌های JPEG، PNG، GIF، BMP، TIFF یا WEBP و تا سقف 4MB باشند. تصاویر بارگذاری‌شده زیر ناحیه رهاسازی ظاهر می‌شوند — یکی را برای اعمال انتخاب کنید.

توجه: Use asset فقط روی تصاویر داخلی ظاهر می‌شود. در عوض، تصاویر تولیدشده یا بارگذاری‌شده شما با انتخاب تصویر بندانگشتی آن‌ها اعمال می‌شوند.

توضیح تغییرات در گفت‌وگو

پس از انتخاب یک یا چند عنصر با انتخاب عنصر, نتیجه‌ای را که می‌خواهید در گفت‌وگوی پروژه توضیح دهید.

برای مثال:

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

درباره نتیجه موردنظر دقیق باشید. دستورهایی مانند "ظاهرش را بهتر کن" ممکن است نتایج غیرقابل‌پیش‌بینی تولید کنند

تغییرات خود را پیش‌نمایش کنید

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

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

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

بازیابی از مشکل پیش‌نمایش

اگر پیش‌نمایش قدیمی به نظر می‌رسد، مدام در حال بارگذاری است یا خطاهای قرمز نشان می‌دهد، ممکن است مشکل از App Viewer باشد نه از ویرایش‌های بصری شما. بخش عیب‌یابی build و پیش‌نمایش را برای مراحل عیب‌یابی ببینید — تازه‌سازی, پنل Console ، Resolve, و این‌که چگونه خطایی را که همچنان باقی می‌ماند گزارش کنید.

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

انتشار تغییرات شما

ویرایش‌های بصری تا زمانی که منتشر نکنید در پروژه کاری شما باقی می‌مانند. گزینه Publish را در گوشه بالا-راست انتخاب کنید، یا Update اگر پروژه از قبل زنده است.

توجه: اگر پروژه شما از Specify Version به‌جای Always Latest, استفاده می‌کند، سایت زنده روی نسخه‌ای که انتخاب کرده‌اید قفل می‌ماند و تغییرات طراحی شما تا زمانی که نسخه جدیدی منتشر نکنید به‌صورت عمومی ظاهر نمی‌شوند.

برای خطاهایی که عامل‌ها هنگام build گزارش می‌کنند، بخش Issue Report.