طراحی UI/UX و هوش مصنوعی
طراحی UI با پرامپت متنی؛ از ایده تا نمونه اولیه قابل ویرایش
پرامپت متنی میتواند شروع طراحی رابط کاربری را سریعتر کند؛ به شرطی که بدانید چه اطلاعاتی بدهید، خروجی را چطور گسترش دهید و کجا باید با قضاوت انسانی آن را اصلاح کنید.
چرا طراحی UI با پرامپت متنی مهم شده است؟
در تیمهای محصول، سرعت تصمیمگیری معمولاً از سرعت طراحی جلوتر است. ایده باید سریع دیده شود، تیم باید درباره مسیر تجربه کاربری حرف بزند و مشتری یا مدیر محصول باید چیزی ملموستر از توضیح شفاهی ببیند. ابزارهای text-to-UI این فاصله را با تبدیل یک توضیح متنی به ماکاپ یا نمونه اولیه قابل ویرایش کوتاه میکنند.
اما این روند به معنی حذف طراح نیست. خروجی هوش مصنوعی بیشتر شبیه پیشنویس بصری است: برای شروع گفتوگو، کشف مسیرها و ساخت نسخه اولیه مفید است، ولی همچنان به بازنویسی محتوا، تنظیم دسترسیپذیری، کنترل برند، بررسی جریان کاربر و گاهی پیادهسازی جداگانه نیاز دارد.
از brief تا نمونه اولیه چندصفحهای
شروع درست با نام ابزار نیست؛ با روشن کردن مسئله آغاز میشود. پیش از نوشتن پرامپت، نوع محصول، دستگاه هدف، مخاطب، کار اصلی کاربر و یک ویژگی مهم از لحن بصری را مشخص کنید. ابزار text-to-UI بر اساس این brief میتواند صفحههای آغازین، کامپوننتهای لازم و یک مسیر اولیه برای گفتوگو درباره محصول پیشنهاد دهد.
پرامپت باید از یک برچسب کلی دقیقتر باشد، اما لازم نیست همهٔ صفحهها و جای دقیق اجزا را دیکته کند. ابتدا نوع محصول، مخاطب و هدف اصلی را بگویید و فقط چند صفت بصری سازگار اضافه کنید:
این الگو به ابزار میگوید چه چیزی بسازد، برای چه کسی بسازد و چه حس بصری داشته باشد. brief فشرده و قابلفهم معمولاً از فهرست بلندِ الزامها نتیجهٔ قابلاعتمادتری میدهد؛ جزئیات حساس مانند متن نهایی، قواعد برند و مسیرهای استثنا را در مرحله بازبینی تکمیل کنید.
گسترش طراحی با تولید صفحههای جدید
بعد از تولید نمونه اولیه، کار تمام نمیشود. یکی از کاربردهای مهم پرامپت متنی، اضافه کردن صفحههای تازه به پروژه است. اگر یک صفحه اصلی دارید و حالا به صفحه پرداخت، پروفایل، داشبورد یا حالت خالی نیاز دارید، میتوانید در همان پروژه صفحه جدید بسازید و هماهنگی آن با تم موجود را بررسی کنید.
۱. هدف صفحه را جداگانه تعریف کنید
بهجای درخواست «یک صفحه دیگر»، وظیفه صفحه، اقدام اصلی و اطلاعاتی که کاربر برای تصمیم نیاز دارد را بنویسید.
۲. چند گزینه را مقایسه کنید
خروجی اول همیشه بهترین نیست. گزینهها را از نظر مسیر کاربر، تراکم اطلاعات، وضوح CTA و تناسب با صفحههای موجود بررسی کنید.
۳. صفحه را به جریان متصل کنید
بعد از انتخاب مسیر مناسب، ارتباط آن را با صفحه قبل و بعد روشن کنید تا نمونه اولیه فقط مجموعهای از صفحههای جدا نباشد.
برای مثال، اگر طراحی یک اپلیکیشن خبری را ساختهاید، میتوانید با یک پرامپت صفحه ذخیره مقاله، صفحه paywall یا صفحه تنظیمات اعلان را اضافه کنید و سریعتر درباره کل جریان محصول تصمیم بگیرید.
تغییر تم و رنگ با پرامپت متنی
پرامپت فقط برای ساخت صفحه نیست. میتوانید از آن برای پیشنهاد جهت تم، ساخت حالت تاریک یا بررسی پالت رنگ استفاده کنید. این کار زمانی مفید است که تیم هنوز درباره مسیر بصری تصمیم نگرفته و میخواهد چند گزینه را سریع مقایسه کند.
برای تولید تم، پرامپت باید حس برند، محدودیت و کاربرد را مشخص کند:
برای پالت رنگ، بهتر است کامپوننت یا بخش هدف را هم بگویید. مثلاً اگر در حال طراحی اپلیکیشن خبری هستید، یک پرامپت مانند «newspaper-inspired palette for category tabs» نتیجه دقیقتری از درخواست کلی «رنگ خوب پیشنهاد بده» میدهد.
ویرایش طرح موجود؛ Figma، اسکرینشات و طرحهای اولیه
همیشه از صفر شروع نمیکنید. گاهی چند کامپوننت در Figma دارید، یک اسکرینشات از محصول خودتان نقطه شروع است یا طرح قدیمی محصول باید به نسخه تازهتری تبدیل شود. در این حالت، میتوانید طرح را به ابزاری که از ورودی تصویری یا لایههای طراحی پشتیبانی میکند وارد کنید و از آن بهعنوان زمینهٔ تکرار استفاده کنید.
بعد از تبدیل یا وارد کردن طرح، پرامپت میتواند نقش گسترشدهنده را بازی کند: صفحههای جدید بسازد، تم را هماهنگ کند، یا چند مسیر جایگزین برای همان رابط پیشنهاد دهد. البته این بخش نیازمند دقت حقوقی و اخلاقی هم هست؛ اسکرینشات از محصول دیگر نباید به کپی مستقیم رابط یا نقض هویت بصری تبدیل شود.
یک گردشکار پیشنهادی برای طراحی UI با پرامپت
| مرحله | ورودی لازم | خروجی مورد انتظار | بازبینی انسانی |
|---|---|---|---|
| تعریف مسئله | مخاطب، هدف، دستگاه، محدودیت برند | brief کوتاه طراحی | آیا مسئله واقعی و قابل سنجش است؟ |
| تولید اولیه | پرامپت text-to-UI با صفحههای اصلی | نمونه اولیه چندصفحهای | آیا مسیر کاربر منطقی است؟ |
| گسترش | پرامپت برای صفحههای جدید یا حالتها | صفحههای مکمل و جریان قابل کلیک | آیا صفحهها با هم سازگارند؟ |
| تم و رنگ | حس برند، حالت روشن/تاریک، محدودیت کنتراست | تم یا پالت پیشنهادی | آیا خوانایی و دسترسیپذیری حفظ شده؟ |
| آمادهسازی ارائه | سناریو، هدف کسبوکار، محدودیتها | پروتوتایپ قابل توضیح | آیا تصمیمها قابل دفاعاند؟ |
اگر هدف شما طراحی وب است، میتوانید پس از آماده شدن brief، از راهنمای استفاده از ThinkFlow برای تبدیل ایده به خروجی قابل مشاهده کمک بگیرید و نمونههای مشابه را در گالری سایتهای ساختهشده با هوش مصنوعی بررسی کنید.
محدودیتها؛ چه چیزهایی را نباید به ابزار بسپاریم؟
خروجی text-to-UI معمولاً برای شروع عالی است، اما برای انتشار کافی نیست. ابزار ممکن است متن placeholder بسازد، صفحهها را از نظر محتوایی سطحی نگه دارد، نسبت کنتراست را دقیق رعایت نکند یا جریانهایی تولید کند که در استفاده واقعی ناقص باشند.
برای نوشتن پرامپتهای دقیقتر، مقاله آموزش پرامپتنویسی برای طراحی رابط کاربری و برای نمونههای آمادهتر، کتابخانه پرامپت طراحی UI مکمل خوبی هستند.
سوالات متداول
طراحی UI با پرامپت متنی یعنی چه؟
یعنی ایده، صفحهها، سبک و محدودیتهای رابط را با متن توضیح میدهید تا ابزار هوش مصنوعی یک ماکاپ یا نمونه اولیه قابل ویرایش بسازد.
آیا خروجی text-to-UI آماده انتشار است؟
معمولاً نه. خروجی برای شروع طراحی و نمونهسازی مناسب است، اما باید از نظر محتوا، دسترسیپذیری، جریان کاربر و سازگاری برند بازبینی شود.
چه اطلاعاتی باید در پرامپت طراحی UI بنویسیم؟
نوع محصول، مخاطب، دستگاه هدف، صفحههای مورد نیاز، سبک بصری، محدودیت برند، حالتهای مهم رابط و معیار موفقیت را روشن بنویسید.
منبع و روش تدوین
این مقاله بر اساس متن ارسالی شما و با الهام از مقاله Designing with text prompts: Create UI designs faster than ever before در وبلاگ Uizard تدوین شده است. ناشر منبع Uizard است؛ در صفحهٔ منبع نام نویسندهٔ فردی درج نشده و تاریخ انتشار آن ۱۹ مارس ۲۰۲۴ است. این نسخه ترجمهٔ تحتاللفظی نیست: فرایند brief، بازبینی انسانی، محدودیتهای انتشار و لینکسازی داخلی برای مخاطب فارسی ThinkFlow به آن افزوده شده است. تاریخ دسترسی و بازبینی: ۲۷ شهریور ۱۴۰۵.
مطالب مرتبط
پرامپت را به خروجی قابل دیدن تبدیل کنید
اگر ایده رابط یا brief اولیه آماده است، میتوانید در ThinkFlow آن را به یک خروجی قابل مشاهده تبدیل کنید، نسخهها را مقایسه کنید و قبل از انتشار، ساختار و متن را بازبینی کنید.