هوش مصنوعی برای طراحان رابط کاربری: از ایده تا کد
طراح رابط کاربری بیشتر وقتش صرف کارهایی میشود که طراحی نیستند: متن دکمه، دادهی نمونه، توضیح برای برنامهنویس. اینها را میشود سپرد — و چند چیز را نمیشود.
یک روز کاری معمول طراح رابط کاربری را که بشکافید، سهم خودِ طراحی کمتر از چیزی است که فکر میکنید. بقیهاش صرف نوشتن متن دکمه، ساختن دادهی نمونهی فارسی برای جدول، نامگذاری لایهها، و توضیحدادن همان طرح به برنامهنویس میشود.
دقیقاً همین بخشهاست که سپردنش منطقی است. نه چون ابزار سلیقهی بهتری دارد، بلکه چون این کارها تکرارپذیرند و تصمیم طراحانهی خاصی نمیخواهند.
وایرفریم و ساختار اولیه
برای شروع یک صفحه، بهجای نگاهکردن به بوم خالی، توصیف متنی بخواهید: چه بخشهایی، به چه ترتیبی، با چه اولویتی. خروجی متنی است ولی همان کاری را میکند که یک اسکچ سرانگشتی میکند — جهت میدهد.
یک اپلیکیشن رزرو نوبت آرایشگاه طراحی میکنم.
برای صفحهی «انتخاب زمان»، ساختار پیشنهاد بده:
- بخشها را به ترتیب از بالا فهرست کن
- برای هر بخش بگو چه اطلاعاتی نشان میدهد
- بگو کدام بخش را میشود در نسخهی اول حذف کرد
مخاطب: کاربر ایرانی، موبایل، راستچین.
از الگوهای رایج استفاده کن، چیز نو اختراع نکن.آن خط آخر مهم است. مدل وقتی آزاد باشد، الگوی غیرمعمول پیشنهاد میدهد که در تست کاربر شکست میخورد.
میکروکپی: متن دکمه، خطا، حالت خالی
این پرکاربردترین جایش است. سه دسته متن که همیشه دیر نوشته میشوند و همیشه کیفیتشان پایینتر از بقیهی محصول است: برچسب دکمه، پیام خطا، و حالت خالی.
برای پیام خطا یک قاعده بدهید و ببینید چقدر خروجی بهتر میشود: «بگو چه شد، بگو تقصیر کیست بدون سرزنش کاربر، بگو حالا چه کند.» بیشتر پیامهای خطای فارسی فقط قسمت اول را دارند.
بهجای نوشتن «لحن صمیمی و کوتاه»، دو نمونه از متنهای فعلی محصولتان بگذارید و بگویید «با همین لحن ادامه بده». مدل الگو را از نمونه بهمراتب بهتر از توصیف میگیرد و خروجی با بقیهی محصول یکدست میماند.
دادهی نمونهی فارسی
لورم ایپسوم برای طراحی فارسی بد است، چون طول کلمه و شکل حروف را واقعی نشان نمیدهد و شما با یک طرح دروغین جلو میروید. ساختن دادهی واقعینما — نام، آدرس، عنوان محصول، متن کامنت — کاری است که در چند ثانیه انجام میشود.
یک نکته که خیلیها جا میاندازند: بخواهید بدترین حالت را هم بسازد. نام خیلی بلند، آدرس سهخطی، عنوان محصولی که در دو خط جا نمیشود. طرحی که فقط با دادهی خوشفرم تست شده، در محیط واقعی میشکند.
از طرح به کد
تبدیل طرح به HTML و CSS قابل قبول کار میکند، بهشرطی که انتظار کد نهایی نداشته باشید. کاری که واقعاً خوب انجام میدهد، ساخت اسکلت اولیه و کلاسبندی است؛ چیزی که خوب انجام نمیدهد، حالتهای تعاملی و ریزهکاریهای واکنشگرا. جزئیات این مسیر را در راهنمای برنامهنویسی با هوش مصنوعی باز کردهایم، و اگر اصلاً کد نمینویسید، ساخت سایت بدون کد مسیر دیگری پیشنهاد میدهد.
برای راستچین صریح باشید. اگر ننویسید، خروجی چپچین میآید و بعد باید تکتک اصلاح کنید:
این کامپوننت را با Tailwind بنویس.
- dir="rtl" روی ریشه
- فونت: Vazirmatn
- آیکونهای جهتدار (فلش، بازگشت) باید آینه شوند
- حالتهای hover و focus و disabled را هم بنویس
- عرضهای شکست: 360 و 768 و 1024
فقط کد را بده، بدون توضیح.دسترسپذیری و بازبینی
بازبینی دسترسپذیری کار خستهکنندهای است که معمولاً انجام نمیشود. مدل در این نقش خوب عمل میکند: کد یا توصیف طرح را بدهید و بخواهید نسبت کنتراست، اندازهی ناحیهی لمسی، برچسب فرم و ترتیب فوکوس را بررسی کند.
محدودیتش را هم بدانید: چیزی که نمیبیند را نمیتواند بررسی کند. اگر فقط کد را دادهاید، دربارهی رنگ نهایی رندرشده حدس میزند.
چه کاری را بسپاریم
| کار | کیفیت خروجی | نکته |
|---|---|---|
| متن دکمه و پیام خطا | خوب | با نمونهی لحن محصول خودتان |
| دادهی نمونهی فارسی | خوب | حالتهای حدی را هم بخواهید |
| نامگذاری کامپوننت و توکن | خوب | قرارداد نامگذاری تیم را بدهید |
| ساختار اولیهی صفحه | متوسط | الگوی رایج بخواهید، نه ابتکار |
| کد کامپوننت | متوسط | راستچین را صریح بنویسید |
| آیکون و تصویر تزئینی | متوسط | سبک یکدست سخت بهدست میآید |
| تصمیم بر اساس رفتار کاربر | ضعیف | دادهی واقعی لازم است |
جایی که جواب نمیدهد
سه چیز را از مدل نگیرید. اول، هویت بصری. اگر دنبال زبان طراحی مخصوص محصولتان هستید، خروجی به میانگین اینترنت میل میکند — همان دلیلی که در طراحی لوگو با هوش مصنوعی هم توضیح دادهایم. دوم، پژوهش کاربر؛ مدل نمیداند کاربران شما کجا گیر میکنند. سوم، سازگاری بلندمدت دیزاین سیستم، که به تصمیمهای قبلی تیم وابسته است نه به الگوی عمومی.
برای تصاویر داخل رابط، منطق پرامپتنویسی تصویری فرق دارد و در ساخت عکس با هوش مصنوعی جداگانه آمده است.
جمعبندی
ابزار هوش مصنوعی برای طراح، بیشتر از آنکه همطراح باشد، دستیار مقدمات است: پیشنویس متن، دادهی نمونه، اسکلت کد، چکلیست دسترسپذیری. همینها وقت آزاد میکند برای بخشی که واقعاً طراحی است. برای امتحانکردن، در نارنگی با متنهای میکروکپی محصول فعلیتان شروع کنید.
برای اصول تجربهی کاربری، مقالههای گروه نیلسن نورمن و برای دسترسپذیری، استاندارد WCAG مرجعهای اصلیاند.
