ایجاد رابط کاربری با پیوست های تصویر

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

برای تولید رابط کاربری با هوش مصنوعی، این مراحل کلی را دنبال کنید:

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

    وایرفریم طراحی‌شده با دست از رابط کاربری یک اپلیکیشن
    شکل ۱: یک طرح کلی از رابط کاربری یک برنامه.
  2. با کلیک بر روی دکمه «پیوست کردن فایل تصویر»، تصویر را به درخواست خود پیوست کنید. آیکون پیوست فایل تصویری همچنین می‌توانید مستقیماً از پنل پیش‌نمایش در یک فایل بدون پیش‌نمایش موجود، روی «ایجاد کد از تصویر صفحه» کلیک کنید.

    شکل ۲: تولید کد از یک اسکرین‌شات در یک پنل پیش‌نمایش خالی.
  3. در قسمت چت، به عنوان عامل هوش مصنوعی، کد رابط کاربری را تولید کنید، برای مثال "کد Jetpack Compose را برای تصویر ارائه شده تولید کنید." وقتی پرس و جو و تصویر را ارسال می‌کنید، عامل هوش مصنوعی کدی را برای ایجاد رابط کاربری پیشنهادی پیشنهاد می‌دهد. عامل هوش مصنوعی معمولاً کد پیش‌نمایش Compose را نیز ارائه می‌دهد، بنابراین می‌توانید پس از وارد کردن رابط کاربری به پروژه خود، آن را به سرعت تجسم کنید - اگر این کار را نکرد، از آن بخواهید پیش‌نمایش‌های Compose را تولید کند .

    رابط چت Gemini که کد Jetpack Compose تولید شده بر اساس یک تصویر را نشان می‌دهد.
    شکل ۲: Gemini در حال تولید کد Jetpack Compose از یک تصویر پیوست شده.
  4. وقتی کد را وارد کردید و توانستید پیش‌نمایش Compose را در پنل پیش‌نمایش ببینید، می‌توانید با کلیک مستقیم روی پیش‌نمایش و درخواست از Gemini برای تبدیل آن، رابط کاربری را تغییر دهید. اگر تصویری از آنچه می‌خواهید دارید، می‌توانید با کلیک راست روی پیش‌نمایش و انتخاب AI Actions > Match UI to Target Image ، رابط کاربری را نیز تغییر دهید.

    اندروید استودیو پیش‌نمایشی از نوشتن متن (Compose) را با یک عنصر رابط کاربری انتخاب‌شده و چت Gemini نشان می‌دهد.
    شکل ۵: استفاده از Gemini برای تبدیل عناصر رابط کاربری مستقیماً از پیش‌نمایش Compose.
    شکل ۶: مثالی از استفاده از «مطابقت رابط کاربری با تصویر هدف»

مشکلات کیفیت رابط کاربری را پیدا کرده و برطرف کنید

عامل هوش مصنوعی همچنین می‌تواند به شما کمک کند تا از کیفیت بالای رابط کاربری و دسترسی‌پذیری آن اطمینان حاصل کنید. روی پیش‌نمایش نوشتن خود کلیک راست کرده و AI Actions > Fix all UI check problems را انتخاب کنید. عامل، رابط کاربری شما را برای مشکلات رایج، مانند مشکلات دسترسی‌پذیری، بررسی می‌کند و اصلاحات کد را برای حل آنها پیشنهاد می‌دهد.

شکل ۷: رفع مشکلات رابط کاربری با هوش مصنوعی
شکل ۸: نمونه رابط کاربری پس از اعمال اصلاحات