صدها مهارت آماده برای Claude، Cursor و موارد دیگر را مرور کنید.
رابط کاربری بازی سختترین بخش توسعه مستقل است (و کسی درباره آن صحبت نمیکند)
بیشتر توسعهدهندگان مستقل در دو هفته یک نمونه اولیه کارآمد از بازی را منتشر میکنند. سپس سه ماه آینده را صرف گیر افتادن بر روی رابط کاربری میکنند. دکمههایی که شبیه هنر برنامهنویسان به نظر میرسند. روکشهای HUD که با دوربین درگیر میشوند. شبکههای موجودی که با position: absolute و دعا ساخته شدهاند. مهارتهای هوش مصنوعی برای رابط کاربری بازی در Vibe Skills سیستمهای منوی منسجم، HUDها و روکشها را برای بازیهای مرورگر در یک جلسه تولید میکنند - بنابراین میتوانید بازی را منتشر کنید، نه صفحه تنظیمات را.
این راهنما به دلایلی میپردازد که چرا رابط کاربری حفظ بازیکن را تعیین میکند، شش سطح رابط کاربری که هر بازی به آنها نیاز دارد، مهارتهای رابط کاربری بازی هوش مصنوعی موجود در Vibe Skills، و یک گردش کار آخر هفته برای انتشار یک کیت رابط کاربری کامل.
صدها مهارت آماده برای Claude، Cursor و موارد دیگر را مرور کنید.
چرا رابط کاربری بازی حفظ بازیکن را تعیین میکند
بازیکنان بازی شما را در ۹۰ ثانیه اول قضاوت میکنند و بیشتر آن ثانیهها صرف رابط کاربری میشود. منوی اصلی، تنظیمات، نکات کنترلی، اولین HUDی که هنگام شروع بازی میبینند. اگر رابط کاربری نامناسب به نظر برسد، گیمپلی هرگز فرصتی پیدا نمیکند.
چند عدد که ارزش به خاطر سپردن دارند:
- ۳۸٪ از بازیکنان یک بازی مرورگر را در اولین جلسه رها میکنند اگر منوی اصلی شکسته یا بدون استایل به نظر برسد (دادههای تست بازی itch.io، ۲۰۲۵).
- منوی اصلی Hollow Knight شامل ۴ دکمه است، با دست طراحی شده و با سرعت ۶۰ فریم بر ثانیه اجرا میشود - و این یکی از پرتکرارترین دلایلی است که بازیکنان در ۳۰ دقیقه اول سخت، بازی را ادامه میدهند.
- صفحه مکث Celeste از ۳ اندازه قلم و ۲ رنگ استفاده میکند. این کل سیستم رابط کاربری است. خویشتنداری نشاندهنده کیفیت است.
- بازیهای پرهزینه ۱۵-۲۰٪ از کل بودجه تولید خود را صرف رابط کاربری/تجربه کاربری میکنند. توسعهدهندگان مستقل معمولاً ۰٪ هزینه میکنند.
این شکاف دقیقاً همان چیزی است که مهارتهای هوش مصنوعی برای پر کردن آن ساخته شدهاند.
صدها مهارت آماده برای Claude، Cursor و موارد دیگر را مرور کنید.
شش سطح رابط کاربری که هر بازی به آنها نیاز دارد
قبل از تولید هر چیزی، بدانید که چه چیزی را تولید میکنید. هر بازی مرورگر - پلتفرمر دوبعدی، شوتر سهبعدی، کلیکر بیکار، شبیهساز پیادهروی - به شش سطح رابط کاربری یکسان نیاز دارد. یک مهارت هوش مصنوعی خوب همه آنها را در یک سیستم استایل منسجم منتشر میکند.
| سطح | هدف | اشتباهات رایج | "خوب" چگونه به نظر میرسد |
|---|---|---|---|
| منوی اصلی | اولین تأثیر. جهت هنری را تعیین میکند. | فونتهای پیشفرض مرورگر، متن در مرکز، بدون حالت هاور | حداکثر ۳-۵ دکمه، تایپوگرافی سفارشی، انیمیشن جزئی هاور، حلقه پسزمینه |
| روکش HUD | اطلاعات درون بازی: سلامتی، امتیاز، مهمات، زمانسنج | اعداد شناور در گوشههای تصادفی، عدم گروهبندی، درگیری با دوربین | لنگر انداخته به گوشهها، نیمه شفاف، گروهبندی بر اساس نوع داده، محو شدن در حالت بیکار |
| موجودی / بارگیری | صفحه مدیریت اقلام | شبکه ۱۶ ستونی، عدم وجود کمیابی اقلام، توضیحات ابزار که صفحه را مسدود میکند | شبکه ۴-۸ ستونی، کمیابی رنگی، توضیحات ابزار در کنار، کشیدن و رها کردن یا کلیک |
| تنظیمات / گزینهها | صدا، کنترلها، گرافیک | یک لیست پیمایش طولانی از کلیدها | تبها (صدا / تصویر / کنترلها)، اسلایدرها نه کلیدها، "اعمال" + "بازنشانی به پیشفرض" |
| منوی مکث | وقفه در حین بازی | پنجرهای که کل بازی را پنهان میکند | روکش با کدری ۶۰٪، ۴-۵ گزینه، "ادامه" به طور خودکار برای کیبورد فوکوس شده |
| صفحه پایانی | خلاصه برد، باخت، یا دور | "بازی تمام شد" با فونت Arial قرمز، بدون دکمه پخش مجدد | خلاصه آمار، دکمه بزرگ "بازی دوباره"، "منوی اصلی" ثانویه |
یک بازی با ۶ سطح رابط کاربری پولیش شده، کامل به نظر میرسد. یک بازی با ۶ سطح رابط کاربری بدون استایل، شبیه یک پروژه مدرسهای به نظر میرسد، مهم نیست گیمپلی چقدر خوب باشد.
سختترین بخش حفظ انسجام هر ۶ مورد است - همان خانواده فونت، همان شعاع دکمه، همان رفتار هاور، همان پالت رنگ. اینجاست که مهارتهای هوش مصنوعی ارزش خود را نشان میدهند.
۵ مهارت رابط کاربری بازی هوش مصنوعی در Vibe Skills
دسته بندی بازی های سه بعدی در Vibe Skills دارای بیش از ۳۰ مهارت است که بازیهای قابل پخش کامل و سیستمهای رابط کاربری مرتبط با آنها را پوشش میدهد. در اینجا پنج مهارت متمرکز بر رابط کاربری با بیشترین نصب آورده شده است.
| مهارت | بهترین برای | موتورها | خروجی |
|---|---|---|---|
| تولید کننده کیت رابط کاربری بازی مرورگر | رابط کاربری کامل ۶ سطحی در یک سبک منسجم | Three.js، Phaser، جاوا اسکریپت ساده | سیستم روکش HTML/CSS + برگههای اسپریت |
| سیستم روکش HUD | فقط HUD درون بازی (سلامتی، امتیاز، نقشه کوچک، زمانسنج) | Three.js، Phaser، Unity WebGL، Godot HTML5 | روکش موقعیتیابی شده CSS یا اسپریتهای بوم |
| بسته صفحه مکث + تنظیمات | مکث، تنظیمات، بازنگری کنترلها | هر موتور بازی مبتنی بر وب | اجزای پنجره React/HTML |
| سیستم موجودی + توضیحات ابزار غارت | شبکههای اقلام، کشیدن و رها کردن، رنگهای کمیابی، توضیحات ابزار | Three.js، Phaser، Unity WebGL | کتابخانه اجزا + الگوهای کارت اقلام |
| ترکیب منوی اصلی + صفحه پایانی | اولین و آخرین تأثیرات | هر چیزی | منوی متحرک با Lottie + صفحه آمار پایان بازی |
هر ۵ مهارت با یک فایل توکن طراحی مشترک (رنگها، فونتها، فواصل، انیمیشن) عرضه میشوند، بنابراین سطوح شبیه به این است که از یک طراح واحد آمدهاند. اکثر کیتهای رابط کاربری مستقل این آزمایش را رد میکنند - منو از یک فونت استفاده میکند، HUD از فونت دیگری استفاده میکند، و بازیکنان بلافاصله متوجه میشوند.
مرور مهارتهای بازی سهبعدی در Vibe Skills →
یک کیت رابط کاربری بازی کامل در یک آخر هفته بسازید
در اینجا گردش کار واقعی که توسط توسعهدهندگان مستقلی که بازیهای مرورگر را در itch.io و Newgrounds منتشر میکنند، استفاده میشود. کل زمان: حدود ۱۲ ساعت کاری در طول یک آخر هفته.
مرحله ۱: یک مهارت رابط کاربری در Vibe Skills انتخاب کنید
دسته بندی بازی های سه بعدی را باز کنید و مهارت تولید کننده کیت رابط کاربری بازی مرورگر را نصب کنید. این تنها مهارتی است که هر ۶ سطح را در یک سیستم توکن منسجم منتشر میکند. اگر بازی شما از قبل منوهای کاری دارد و فقط به HUD نیاز دارید، به جای آن مهارت مستقل HUD Overlay را نصب کنید.
مرحله ۲: "حال و هوای" بازی خود را در ۳ کلمه تعریف کنید
قبل از تولید، ۳ کلمه را بنویسید که لحن بازی شما را توصیف کند. مثالها: "نئون، بیرحمانه، سریع" (یک شوتر سینثویو)، "ملایم، آبی، کند" (یک بازی ماهیگیری)، "تودرتو، قدیمی، پیکسل" (یک مترویدوانیا). این مهارت از اینها به عنوان ورودی برای پالت رنگ، انتخاب تایپوگرافی و انیمیشن استفاده میکند. این مرحله را حذف نکنید - ورودی عمومی، رابط کاربری عمومی تولید میکند.
مرحله ۳: ابتدا توکنهای طراحی را تولید کنید
این مهارت یک فایل tokens.css یا پیکربندی Tailwind را با پالت، مجموعه قلم، شعاع دکمه، مقیاس فاصله و زمانبندی انیمیشن خروجی میدهد. قبل از تولید هرگونه رابط کاربری واقعی، این را بررسی کنید. اگر توکنها در اینجا اشتباه به نظر برسند، همه سطوح اشتباه به نظر خواهند رسید. تا زمانی که آن را دوست داشته باشید، تنظیم کنید.
مرحله ۴: هر ۶ سطح را در یک دسته تولید کنید
با توکنهای تأیید شده، تولید کامل ۶ سطحی را اجرا کنید. خروجی یک پوشه از فایلهای HTML/CSS (یا اجزای React، بسته به موتور شما) به علاوه یک برگه اسپریت SVG برای آیکونها است. برای Three.js یا Phaser، از رویکرد روکش HTML استفاده کنید (DOM روی بوم قرار گرفته با pointer-events: none روی wrapper). برای Unity WebGL یا Godot HTML5، از نوع مبتنی بر بوم که این مهارت ارائه میدهد استفاده کنید.
مرحله ۵: آن را به حلقه بازی خود متصل کنید
HUD را به وضعیت بازی خود (مقدار سلامتی، امتیاز، زمانسنج) متصل کنید. بیشتر مهارتها شامل یک آداپتور کوچک GameUIState هستند که یک API setHealth(0.7) را در معرض دید قرار میدهد، بنابراین نیازی به دستکاری متغیرهای CSS به صورت دستی ندارید. رویدادهای مکث، تنظیمات و صفحه پایانی را به کنترلکننده ورودی موجود خود متصل کنید.
مرحله ۶: با ۳ غریبه تست کنید و بازبینی کنید
دوستان به شما خواهند گفت که رابط کاربری عالی است. غریبهها حقیقت را خواهند گفت. یک نسخه را در itch.io پست کنید، از ۳ نفر تصادفی بخواهید ۵ دقیقه بازی کنند و ضبط را تماشا کنید. اشکالات رابط کاربری که مهم هستند در ۶۰ ثانیه اول ظاهر میشوند. آنها را رفع کنید، سطح آسیبدیده را دوباره تولید کنید، منتشر کنید.
کل زمان: مرحله ۱-۳ (حدود ۱ ساعت) + مرحله ۴ (حدود ۳۰ دقیقه) + مرحله ۵ (حدود ۶-۸ ساعت ادغام) + مرحله ۶ (حدود ۳ ساعت چرخه تست) = یک آخر هفته.
یک طراح رابط کاربری فریلنسر ۳۰۰۰ تا ۸۰۰۰ دلار برای همان دامنه هزینه دریافت میکند و ۴-۶ هفته طول میکشد. اشتراک در Vibe Skills از ۳۹ دلار در ماه شروع میشود و تولیدات نامحدودی به شما میدهد - بنابراین میتوانید هر چند بار که میخواهید تکرار کنید تا زمانی که رابط کاربری درست به نظر برسد.
نصب یک مهارت رابط کاربری بازی در Vibe Skills →
سوالات متداول
آیا باید رابط کاربری بازی خود را به عنوان یک روکش HTML/CSS بسازم یا مستقیماً روی بوم؟
برای بیشتر بازیهای مرورگر، یک روکش HTML/CSS روی بوم Three.js یا Phaser سریعتر ساخته میشود، دسترسی به آن آسانتر است و متن را در هر وضوحی با وضوح بالا نمایش میدهد. از رابط کاربری مبتنی بر بوم فقط زمانی استفاده کنید که به سازگاری هنری پیکسل-به-پیکسل (یک بازی پیکسل-هنر دقیق) نیاز دارید یا زمانی که رویدادهای DOM با ورودی تداخل دارند. مهارتهای Vibe Skills هر دو نوع را ارائه میدهند.
آیا رابط کاربری روی موبایل کار میکند، یا به یک نسخه موبایل جداگانه نیاز دارم؟
کیت رابط کاربری بازی مرورگر در Vibe Skills چیدمانهای ریسپانسیو تولید میکند که از دستگاههای لمسی به صورت آماده کار میکنند - اهداف لمسی بزرگتر، روکشهای کنترل موبایل جایگزین (D-pad و دکمههای عمل)، و یک منوی مکث اول موبایل. نیازی به نسخه جداگانه ندارید، اما باید روی تلفن واقعی تست کنید. ابزارهای توسعه مرورگر در مورد عملکرد لمسی دروغ میگویند.
رابط کاربری بازی تا چه حد واقعبینانه میتواند در دسترس باشد؟
بازیهای مرورگر میتوانند به راحتی WCAG AA را برای منوها، تنظیمات و HUDها برآورده کنند - ناوبری با کیبورد، حلقههای فوکوس، کنتراست رنگ ۴.۵:۱ و برچسبهای صفحه خوان برای امتیاز و سلامتی. رویکرد روکش HTML این همه را تقریباً رایگان میکند. مهارتهای Vibe Skills به طور پیشفرض نشانهگذاری قابل دسترس را تولید میکنند. گیمپلی واقعی سختتر است که قابل دسترس باشد، اما رابط کاربری نباید مانع باشد.
آیا همین کیت رابط کاربری برای نسخههای Unity WebGL و Godot HTML5 کار میکند؟
عمدتاً بله. Unity WebGL و Godot HTML5 هر دو به یک بوم رندر میکنند و میتوانید یک روکش DOM را روی آن قرار دهید. این مهارتها شامل آداپتورهایی برای هر دو موتور هستند تا رابط کاربری با وضعیت بازی شما صحبت کند. ویژگیهای خاص Unity (مانند سیستم رویداد داخلی) به یک پل نازک نیاز دارند - این مهارت کد نمونهای برای آن پل ارائه میدهد.
چگونه منو، HUD و موجودی را از نظر بصری سازگار نگه دارم؟
این دلیل شماره ۱ است که رابط کاربری بازی مستقل آماتوری به نظر میرسد - ۶ سطح که به صورت جداگانه طراحی شدهاند. راه حل، توکنهای طراحی مشترک است: یک فایل که رنگها، فونتها، فواصل و انیمیشن را تعریف میکند. هر سطح از این فایل وارد میشود. مهارتهای Vibe Skills این کار را به طور خودکار انجام میدهند - توکنها را یک بار تولید کنید، همه ۶ سطح را از آن توکنها تولید کنید، تمام شد.
آیا میتوانم رابط کاربری تولید شده را بدون خراب کردن مهارت سفارشی کنم؟
بله. این مهارتها فایلهای HTML، CSS و (اختیاری) اجزای React قابل ویرایش را خروجی میدهند. شما مالک فایلها هستید. بیشتر توسعهدهندگان رنگها را تغییر میدهند، یک لوگو را جایگزین میکنند، آیکونها را عوض میکنند و شکل یک یا دو دکمه را تغییر میدهند - همین. اگر به یک تغییر سبک بزرگ نیاز دارید، به جای بازنویسی دستی سطوح، از توکنهای بهروز شده مجدداً تولید کنید.
اگر بازی من از قبل رابط کاربری نیمه ساخته دارد - آیا باید آن را دور بریزم؟
نه. مهارت HUD Overlay یا بسته صفحه مکث + تنظیمات را به صورت مستقل نصب کنید و یک سطح را در یک زمان جایگزین کنید. بیشتر توسعهدهندگان مستقل ابتدا منوی اصلی (بیشترین دید)، سپس HUD (بیشترین استفاده)، سپس تنظیمات و مکث (کمترین استفاده اما بیشترین خرابی) را ارتقا میدهند. پس از انتشار اولین سطح، پرش کیفیت را احساس خواهید کرد.
رابط کاربری را منتشر کنید، سپس بازی را منتشر کنید
رابط کاربری بازی قاتل خاموش پروژههای مستقل است. گیمپلی میتواند درخشان باشد، اما اگر منو شبیه یک تم پیشفرض وردپرس به نظر برسد، بازیکنان در ۹۰ ثانیه میپرند. رابط کاربری پولیش شده - توکنهای منسجم، HUD لنگر انداخته، تنظیمات تمیز، صفحه پایانی رضایتبخش - چیزی است که دانلود ۴ ساعته itch.io را مانند یک محصول واقعی جلوه میدهد.
طراحی مجدد ۴ هفتهای رابط کاربری را فراموش کنید. در یک آخر هفته یک کیت کامل ۶ سطحی تولید کنید، آن را وصل کنید و به ساختن بازی سرگرمکننده بازگردید.
مرور مهارتهای رابط کاربری بازی در Vibe Skills →
رابط کاربری بازی را از ابتدا نسازید. یک مهارت کیت رابط کاربری را در Vibe Skills نصب کنید و منو، HUD، موجودی، تنظیمات، مکث و صفحه پایانی را در یک جلسه منتشر کنید.