پیانوی آنلاین، بدون نصب

AI Piano Player

طراحی و اجرای تجربه‌ای مرورگری برای نواختن، ضبط، بازپخش و یادگیری پیانو؛ با تمرکز بر خوانایی ۸۸ کلید، ورودی‌های مختلف و حس کنترل‌شده یک سالن کنسرت مجازی.

حوزه پروژهموسیقی دیجیتال و آموزش آنلاین
دامنه کارطراحی وب، تجربه کاربری، توسعه فرانت‌اند و تجربه تعاملی صدا برای پیانوی مرورگری
وب‌سایتaipianoplayer.com
طراحی وبتجربه کاربری UXتوسعه فرانت‌اندصدای وب Web Audioطراحی تعامل برای ابزار آموزشی
مشاهده وب‌سایت پروژه
نمای رابط AI Piano Player با پیانوی ۸۸ کلیدی، کنترل‌های ضبط و فضای تیره الهام‌گرفته از سالن کنسرت.
تجربه نهایی

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

در نمای اصلی AI Piano Player، کاربر پیش از هر توضیح طولانی با یک پیانوی کامل روبه‌رو می‌شود.

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

در صفحه فعلی می‌توان ورودی‌های مختلف را دید: ماوس، لمس و کلیدهای کامپیوتر.

گره طراحی

مسئله پروژه

مسئله پروژه تبدیل یک ساز فیزیکی، عریض و حساس به لمس به تجربه‌ای مرورگری بود؛ تجربه‌ای که هم سریع شروع شود، هم برای تمرین و ضبط جدی‌تر کم نیاورد.

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

پرسش عملی این بود: کاربر در چند ثانیه اول باید چه چیزی را بفهمد؟ پاسخ، کم کردن مسیرهای فرعی بود.

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

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

یکی از انتخاب‌های مهم، جدا کردن ناحیه کنترل از بدنه پیانو بود.

Record، Play، Download و Clear در یک ردیف مستقل قرار گرفتند تا مسیر بعد از نواختن مشخص بماند. کاربر می‌تواند ایده‌ای را ثبت کند، همان‌جا بازبینی کند، فایل را بگیرد یا با یک اجرای تازه شروع کند.

کنترل Volume، Hall Reverb و Pedal به زبان ابزار موسیقی نزدیک نگه داشته شد. انتخاب دیگر این بود که این گزینه‌ها زیر دست کاربر باشند، اما روی کلیدها ننشینند.

برای ورودی کیبورد کامپیوتر هم راه‌حل، نمایش انتخابی برچسب‌ها بود. همه چیز نباید روی همه کلیدها نوشته می‌شد.

یادگیری با حرکت

درس وقتی کار می‌کند که صدا جای خود را نشان بدهد

بخش Learn بر پایه یک تصمیم روشن شکل گرفت: کاربر فقط نام قطعه یا توضیح آموزشی نمی‌خواهد؛ باید ببیند ملودی روی کدام کلیدها حرکت می‌کند.

در صفحه فعلی، درس‌ها بر قطعات public domain تکیه دارند و کلیدهای فعال در توالی ملودی روشن می‌شوند.

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

  • عبارت‌های کوتاه موسیقایی می‌توانند با روشن شدن کلیدها دنبال شوند.
  • بازپخش، تمرین آرام‌تر و مرور دوباره حرکت دست را ممکن می‌کند.
  • استفاده از قطعات public domain مرز محتوایی بخش یادگیری را روشن نگه می‌دارد.
مرز شواهد

چه چیزهایی را می‌شود دید و چه چیزهایی را نباید حدس زد

برای AI Piano Player داده تجاری، نرخ رشد یا گزارش رفتار کاربران در اختیار نداریم.

از تصویر و صفحه فعلی می‌توان وجود پیانوی ۸۸ کلیدی، برچسب‌های کیبورد، دکمه‌های ضبط و بازپخش، دانلود، پاک‌سازی، کنترل حجم صدا، Hall Reverb و Pedal را بررسی کرد.

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

دامنه تحویل

خروجی‌ها به رفتار کاربر وصل شدند

تحویل پروژه فقط طراحی یک قاب موسیقایی نبود.

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

  • رابط بصری پیانوی ۸۸ کلیدی برای تجربه مرورگری طراحی شد.
  • نگاشت کلیدهای کامپیوتر برای شروع سریع‌تر نواختن در تجربه قرار گرفت.
  • کنترل‌های ضبط، بازپخش، دانلود و پاک‌سازی در مسیر بعد از اجرا چیده شدند.
  • تنظیم صدا، پدال و Hall Reverb به صورت مستقل و قابل دسترس ارائه شد.
  • بخش یادگیری با قطعات public domain و نمایش حرکت کلیدها ساختاردهی شد.
دامنه تحویل

خروجی‌های تحویل

  • طراحی رابط کاربری پیانوی آنلاین
  • طراحی تجربه کاربر برای نواختن، ضبط و یادگیری
  • توسعه فرانت‌اند تجربه تعاملی
  • پیاده‌سازی منطق تعامل با ماوس، لمس و کیبورد
  • طراحی کنترل‌های ضبط، بازپخش، دانلود و پاک‌سازی
  • ساختاردهی تجربه درس‌های public domain
پروژه بعدی

وقتی رابط باید مثل ساز رفتار کند

AI Piano Player پروژه‌ای بود که در آن زیبایی تنها زمانی ارزش داشت که دست کاربر را از نواختن دور نکند. تصمیم‌های اصلی حول همین اصل گرفته شدند: کلیدها جلوتر از توضیح، کنترل‌ها کنار رفتار، و یادگیری متکی بر دیدن حرکت صدا.

مشاهده خدمات طراحی سایت