آموزش ساخت پروتوتایپ تعاملی با Auto-Animate در ادوبی XD، انطباق نام لایهها و گروه‌ها، تنظیم تریگرها و قواعد اکشن دوم در حالت نگهداری رسمی نرمافزار. طراحی پروتوتایپ‌های تعاملی در ادوبی XD به طراحان امکان میدهد جریان کاربری یک محصول دیجیتال را شبیه‌سازی کنند. ابزار Auto-Animate برای ایجاد ترنزیشن‌های حرکتی روان میان آرت‌بوردها نقشی اساسی دارد. در حال حاضر ادوبی XD در حالت نگهداری (Maintenance Mode) قرار دارد؛ یعنی ادوبی توسعه پیوسته یا ارائه قابلیت‌های جدید برای این برنامه را متوقف کرده، اما کاربران فعلی همچنان به‌روزرسانی‌های رفع باگ، پایداری، امنیت و حریم خصوصی را دریافت می‌کنند. توجه داشته باشید که وارد کردن فایل‌ها از فتوشاپ یا ایلاستریتور به XD و خروجی گرفتن برای افترافکت فرایندهایی کاملاً مجزا از ساخت پروتوتایپ تعاملی درون این نرمافزار هستند. تسلط بر قواعد رسمی Auto-Animate مانع از بروز خطاهای رایج در تعاملات میشود. مفهوم Auto-Animate در ادوبی XD و تفاوت آن با تایم‌لاین و کی‌فریم قابلیت Auto-Animate در ادوبی XD ترنزیشن‌هایی ایجاد میکند که حرکت محتوا را در میان آرت‌بوردها نمایش می‌دهند. نکته کلیدی این است که این قابلیت ابزار تایم‌لاین نیست و هیچ فریم کلیدی (Keyframe) ندارد. بنابراین نباید کارکرد آن را با کی‌فریم‌های افترافکت مقایسه کرد یا در XD به دنبال خط زمانی گشت. در این سیستم، انیمیشن بر پایه مقایسه تفاوت وضعیت عناصر میان آرتبورد مبدا و مقصد شکل می‌گیرد. برای آنکه Auto-Animate بتواند تغییرات یک عنصر را تشخیص دهد، لایهها باید همنام باقی بمانند. بهترین روش برای ایجاد آرتبورد مقصد، تکثیر مستقیم آرتبورد اولیه (Duplicate) است؛ زیرا تکثیر آرتبورد نام لایهها را بدون تغییر حفظ میکند و دقیقاً همان ساختاری را فراهم میآورد که الگوریتم تطابق لایهها به آن نیازمند است. تکثیر آرتبورد نام لایهها را نگه می‌دارد. راهنمای ادوبی این حفظ نام را برای روش‌های دیگر کپی نگفته است. قواعد تطابق نام لایه و گروه‌بندی؛ محو شدن اشیای نامتقارن قاعده بنیادین ادوبی روشن است: اگر شیء هم از نظر نام لایه و هم گروه در هر دو آرتبورد مطابقت داشته باشد، ویژگیهای آن لایه انیمیت می‌شوند. با تغییر خصوصیات لایه، این تفاوت در طول ترنزیشن انیمیت میگردد. برای اطلاع از ویژگیهای مشمول این رفتار، باید به صفحه رسمی Object properties در مستندات ادوبی رجوع کرد و نباید جدول فرضی برای آن ساخت. اشیایی که در هر دو آرتبورد مطابقت ندارند رفتار متفاوتی نشان می‌دهند. طبق قوانین ادوبی، اگر شیء در آرتبورد مقصد نباشد، با انیمیشن Fade Out محو میشود؛ و اگر شیء در آرتبورد مبدا غایب بوده و تنها در مقصد باشد، با انیمیشن Fade In پدیدار میگردد. عناصر نامتقارن هرگز دگرگونی حرکتی پیدا نمی‌کنند و سرنوشت آنها تنها Fade In یا Fade Out است. ورود به حالت Prototype و سیم‌کشی آرت‌بوردها با پنل تعاملات برای متصل کردن آرت‌بوردها باید از نوار بالای ادوبی XD وارد حالت Prototype شوید. با کلیک روی هر شیء یا کل آرتبورد، یک کانکتور ظاهر میشود. کشیدن این کانکتور و رها کردن آن روی آرتبورد مقصد، سیم‌کشی تعاملی را شکل میدهد. پس از اتصال، با کلیک مجدد روی کانکتور، پنل تعاملات (Interaction) در بازرس ویژگی‌ها (Property Inspector) در سمت راست نمایان میشود تا بتوانید جزئیات دقیق تعامل را پیکربندی نمایید. گاهی نیاز است به یک المان بیش از یک تعامل اختصاص داده شود. برای این کار، المانی را که از قبل دارای تعامل است انتخاب کنید؛ سپس روی علامت مثبت (+) روی بوم آرتبورد کلیک نمایید، یا علامت مثبت (+) موجود در Property Inspector را بزنید. با این اقدام، یک تعامل تازه روی همان لایه ایجاد میگردد تا بدون ایجاد پیچیدگی اضافی در ساختار صفحه، مسیرهای کاربری گوناگون پیاده‌سازی شوند. انواع محرکها (Triggers) و محدودیت دفعات استفاده در پروتوتایپ محرک یا Trigger تعیین‌کننده رفتاری است که انیمیشن را فعال میکند. در مستندات رسمی ادوبی محرکهای معینی قید شدهاند که عبارتند از: Tap (ضربه یا کلیک)، Drag (کشیدن)، Hover (نگه‌داشتن نشانگر ماوس)، Time (گذشت زمان)، Voice (فرمان صوتی) و Keys & Gamepad (کلیدهای کیبورد و کنترلر بازی). هر یک از این گزینه‌ها برای بخشی از تعاملات وب و اپلیکیشن مورد استفاده قرار میگیرند. درباره تعداد دفعات مجاز استفاده از محرکها قواعد مشخصی حاکم است. شما میتوانید هر یک از محرکهای Tap، Drag، Hover و Time را تنها یکبار برای هر شیء به کار ببرید. در مقابل، محرکهای صوتی (Voice) و کلیدهای صفحهکلید و دسته بازی (Keys & Gamepad) محدودیتی ندارند و می‌توان آنها را چندین‌بار برای یک شیء تنظیم کرد. در مثال سوایپ، محرک Drag و اکشن Auto-Animate است. تنظیمات اکشن Auto-Animate، منحنیهای Easing و متغیر مدت زمان در بخش Action، با برگزیدن Auto-Animate و تعیین مقصد در Destination، تنظیمات انیمیشن فعال می‌شوند. مؤلفه کلیدی دیگر این بخش، انتخاب منحنی شتاب یا Easing است. راهنمای رسمی ادوبی صریحاً از سه گزینه Ease Out، Ease In و Ease In-Out نام برده است که ریتم آغاز و پایان حرکت را کنترل می‌کنند. مثالهای همین راهنما فقط Ease Out، Ease In و Ease In-Out را نام می‌برند. عامل تعیین‌کننده دیگر در کیفیت حرکت، تنظیم مدت زمان یا Duration است. ادوبی در مثال مربوط به باز شدن منوی همبرگری خود، عدد ۰٫۸ ثانیه را برای این فیلد تنظیم کرده است. باید توجه داشت که این عدد ۰٫۸ ثانیه صرفاً یک نمونه آموزشی است و نباید آن را زمان پیشفرض نرمافزار تلقی کرد. ادوبی هیچ مدت زمان پیش‌فرضی را برای Duration معرفی نکرده است و طراحان موظفند با ارزیابی نیاز طرح، مقدار مناسب را برای تعاملات خود مشخص نمایند. قانون افزودن اکشن دوم و نحوه پیشنمایش در مرورگرهای پشتیبانی‌شده در ادوبی XD یک محرک میتواند دو اکشن همزمان داشته باشد، اما این قابلیت پیرو یک قاعده صریح است: اکشن اول حتماً باید یک اقدام انتقالی شامل Transition، Auto-Animate، Overlay، Scroll to یا Previous Artboard باشد. اکشن دوم الزاماً باید یک عمل غیرانتقالی نظیر Audio playback یا Speech playback باشد. اگر طراح یکی از موارد صوتی Audio یا Speech را به عنوان اکشن اول برگزیند، طبق قواعد ادوبی افزودن اکشن دوم غیرممکن خواهد بود. برای مشاهده خروجی و بررسی روان بودن تعاملات تعریف‌شده، میتوانید پروتوتایپ را در مرورگرهای پشتیبانی‌شده (Supported Browsers) اجرا و ارزیابی نمایید. ادوبی فهرستی از مدل‌های اختصاصی دستگاه‌ها اعلام نکرده و تکیه بر استانداردهای مرورگرهای تحت پشتیبانی برای تست پروتوتایپ کافی است. پروتوتایپ یک رابط، از جمله طرح‌هایی که در نگارچی باز می‌کنید، با Auto-Animate فقط وقتی ویژگی‌ها را انیمیت میکند که نام لایه و گروه در هر دو آرتبورد یکی باشد. ادوبی XD در حالت نگهداری است و قابلیت تازهای به این رفتار اضافه نمیکند. پیشنمایش Auto-Animate اسکرول آرتبورد را پخش نمیکند برای پیاده‌سازی اسکرول افقی یا عمودی در طراحی بخش‌هایی نظیر اسلایدرها و فهرست‌ها، ادوبی قابلیتی مستقل به نام گروههای اسکرول (Scroll Groups) تدارک دیده است. با تبدیل لایهها به گروه اسکرول، محتوای درون آن محدوده مشخص به صورت مستقل قابلیت پیمایش پیدا میکند، در حالی که آرتبورد و دیگر بخش‌های طراحی بدون تغییر و ثابت بر جای خود باقی می‌مانند. با وجود امکان ساخت گروههای اسکرول، باید یک محدودیت فنی اساسی را در نظر گرفت: نرمافزار ادوبی XD در هنگام پیشنمایش آرت‌بوردهایی که با Auto-Animate جابه‌جا می‌شوند، به هیچ عنوان از اسکرول خود آرتبورد پشتیبانی نمیکند. در نتیجه پیشنمایش Auto-Animate اسکرول آرتبورد را پخش نمیکند و نباید تصور کرد که کل صفحه در حین اجرای این انیمیشن جابه‌جا میشود. درک این تمایز ساختاری، طراحان را از خطاهای اجرایی در ساخت پروتوتایپ‌های پیچیده بازمی‌دارد.