ساخت پروتوتایپ تعاملی در Adobe XD به شما این امکان را می‌دهد که طرح‌های ثابت خود را به یک شبیه‌سازی واقعی از وب‌سایت یا اپلیکیشن تبدیل کنید. این کار با اتصال صفحات (Artboards) به یکدیگر از طریق لینک‌های تعاملی انجام می‌شود تا بتوانید جریان کاربری را قبل از کدنویسی تست کنید.
حالت‌های اصلی: Design و Prototype
در بالای سمت چپ نرم‌افزار XD، دو تب اصلی وجود دارد: • Design (طراحی): در این حالت، شما صفحات و عناصر بصری (دکمه‌ها، تصاویر، متون) را طراحی می‌کنید. • Prototype (نمونه‌سازی): در این حالت، شما بین عناصر و صفحات مختلف ارتباط و تعامل ایجاد می‌کنید.
طراحی صفحات در حالت Design
قبل از اینکه بتوانید تعاملی ایجاد کنید، باید حداقل دو صفحه (Artboard) طراحی کرده باشید. برای مثال، یک صفحه “ورود” (Login) و یک صفحه “داشبورد” (Dashboard). مطمئن شوید تمام دکمه‌ها، آیکون‌ها و عناصری که می‌خواهید قابل کلیک باشند، در این صفحات طراحی شده‌اند.
ورود به حالت Prototype
روی تب Prototype در بالای صفحه کلیک کنید تا وارد حالت نمونه‌سازی شوید. اکنون محیط کاری شما برای ایجاد تعامل آماده است.
ایجاد اولین تعامل (لینک کردن)
- در صفحه اول (مثلاً صفحه ورود)، روی عنصری که می‌خواهید تعاملی باشد کلیک کنید (مثلاً دکمه “ورود”).
- پس از انتخاب، یک فلش آبی رنگ در کنار آن ظاهر می‌شود.
- روی این فلش آبی کلیک کرده و آن را بکشید (Drag) و روی صفحه دومی که می‌خواهید کاربر به آن منتقل شود (صفحه داشبورد) رها کنید. تبریک! شما اولین تعامل خود را ساختید. یک “سیم” (Wire) آبی رنگ اکنون این دو صفحه را به هم متصل می‌کند.
تنظیم جزئیات تعامل (Interaction)
پس از ایجاد اتصال، پنل Property Inspector در سمت راست، تنظیمات این تعامل را نمایش می‌دهد.
۱. Trigger (ماشه): چه چیزی تعامل را فعال می‌کند؟
- Tap (کلیک یا لمس): رایج‌ترین حالت؛ با کلیک کردن یا لمس کردن عنصر فعال می‌شود.
- Drag (کشیدن): برای ساخت اسلایدرها یا کشیدن کارت‌ها استفاده می‌شود.
- Time (زمان): برای ساخت صفحات اسپلش (Splash Screen) که پس از چند ثانیه به صورت خودکار به صفحه بعد می‌روند.
- Keys & Gamepad (کیبورد و دسته بازی): برای پروتوتایپ‌های دسکتاپ که با کلیدهای کیبورد کنترل می‌شوند.
- Voice (صدا): برای ساخت پروتوتایپ‌های دارای فرمان صوتی.
۲. Action (عمل): چه اتفاقی پس از فعال شدن رخ می‌دهد؟
- Transition (انتقال): کاربر را به یک صفحه دیگر منتقل می‌کند. این محبوب‌ترین گزینه است.
- o Animation (انیمیشن): نوع افکت انتقال را مشخص می‌کند. مثلاً Dissolve (محو شدن)، Slide Left (کشیده شدن از راست به چپ) یا Push Up (هل دادن به بالا).
- o Easing (شتاب): سرعت انیمیشن را کنترل می‌کند (مثلاً شروع آرام و پایان سریع).
- o Duration (مدت زمان): مدت زمان انیمیشن را بر حسب ثانیه مشخص می‌کند.
- Auto-Animate (انیمیشن خودکار): یکی از قدرتمندترین ویژگی‌های ادوبی ایکس دی.
اگر دو صفحه دارای عناصر مشترک با نام لایه یکسان باشند، XD به صورت هوشمند بین تغییرات حالت، اندازه یا موقعیت آن‌ها انیمیشن ایجاد می‌کند.
- Overlay (لایه رو): برای نمایش عناصری مانند منوهای همبرگری، پاپ‌آپ‌ها یا کیبورد که روی صفحه فعلی ظاهر می‌شوند.
- Scroll To (اسکرول به): با کلیک روی یک دکمه، صفحه به بخش خاصی از همان صفحه اسکرول می‌کند.
- Previous Artboard (صفحه قبلی): کاربر را به صفحه‌ای که از آن آمده بازمی‌گرداند (بسیار مفید برای دکمه‌های “بازگشت”).
تعیین نقطه شروع
هر پروتوتایپی باید یک نقطه شروع داشته باشد. به صورت پیش‌فرض، اولین صفحه‌ای که ایجاد می‌کنید، صفحه شروع است. برای تغییر آن، صفحه مورد نظر خود را انتخاب کرده و روی آیکون خانه (Home) خاکستری رنگی که در کنار آن ظاهر می‌شود، کلیک کنید. آیکون آبی خواهد شد و آن صفحه به عنوان نقطه شروع پروتوتایپ شما تنظیم می‌گردد.
پیش‌نمایش و تست
برای دیدن نتیجه کار خود، روی آیکون پلی (Preview) در بالای سمت راست نرم‌افزار کلیک کنید. پنجره‌ای باز می‌شود که پروتوتایپ تعاملی شما را نمایش می‌دهد. روی دکمه‌ها کلیک کنید و جریان کاربری را تست کنید تا مطمئن شوید همه چیز به درستی کار می‌کند.
اشتراک‌گذاری پروتوتایپ
پس از اتمام کار، روی تب Share در بالای صفحه کلیک کنید. در اینجا می‌توانید یک لینک قابل اشتراک‌گذاری از پروتوتایپ خود ایجاد کنید تا آن را برای مشتری، تیم توسعه یا سایر ذی‌نفعان ارسال کنید. شما می‌توانید تنظیمات مختلفی مانند نیاز به رمز عبور یا اجازه گذاشتن کامنت را نیز مشخص کنید.