هیچ دوره ای در سبد خرید شما وجود ندارد
امروز در سری مقالات دانشجویار، به بررسی و معرفی آموزش ساخت پروتوتایپ در adobe xd پرداخته شده است که این مورد از سر فصل های ارائه شده دوره آموزش Adobe Xd می باشد. با دانشجویار همراه باشید.
امروزه بازار طراحی وب سایت به یکی از شلوغ‌ترین بازارهای کاری تبدیل شده است. بنابراین ارائه نمونه‌های اولیه از طراحی نهایی وب سایت می‌تواند به شما کمک کند تا اشتباهات روند کاری خود را متوجه شوید و در نهایت کار ارائه شده توسط شما مشتری پسند و زیبا باشد. ما در این مقاله می‌خواهیم به آموزش ساخت پروتوتایپ در xd بپردازیم، پس با ما همراه باشید.
آموزش پیشنهادی
چرا آموزش ساخت پروتوتایپ در xd مهم است؟
آموزش ساخت پروتوتایپ در xd به شما کمک می‌کند تا نمونه اولیه تعاملی از آنچه در حال طراحی آن هستید را ایجاد کنید. این نمونه به شما کمک می‌کند تا بفهمید چگونه کاربران برنامه یا وب سایت شما را تجربه می‌کنند. شما می‌توانید صفحات مختلف در وب سایت خود را با استفاده از پیوندها یا گزینه مناسب به هم متصل کنید. پس از تنظیم صفحه نمایش، می‌توانید هر جریان را به عنوان پیوندهای قابل اشتراک‌گذاری برای بازبینی به اشتراک بگذارید، بازخورد جمع آوری کرده و آن‌ها را به طور همزمان در سطوح مختلف هدف منتشر کنید.
صفحه اصلی را تنظیم کنید
صفحه اصلی اولین صفحه برنامه یا وب سایت شما است. کاربران شما فعالیت خود در برنامه یا وب سایت را از صفحه اصلی شروع می‌کنند. همچنین در زمان نمایش نمونه اولیه، پیش نمایش با صفحه اصلی آغاز می‌شود. یعنی به طور پیش فرض صفحه اول شما، اولین صفحه است که در آن پیوندهای مفید را اضافه می‌کنید.
نحوه تنظیم نمونه اولیه به عنوان صفحه اصل در آموزش ساخت پروتوتایپ در xd
- روی صفحه هنری که می‌خواهید به عنوان صفحه اصلی تنظیم کنید، کلیک کنید. نماد خانه خاکستری در گوشه بالا سمت چپ ظاهر می‌شود.
- روی نماد صفحه اصلی کلیک کنید تا به رنگ آبی درآید. این موضوع نشان دهنده این است که صفحه طراحی شده شما به عنوان صفحه اصلی تنظیم شده است.
- برای تنظیم یک صفحه طراحی شده متفاوت به عنوان صفحه اصلی، کافی است روی نماد صفحه مربوط به آن صفحه هنری کلیک کنید. برای مشاهده تمام صفحات طراحی شده پس از ایجاد آن‌ها، اطمینان حاصل کنید که همه صفحات طراحی شده را با پیوندهای مناسب به یکدیگر متصل کنید.
Multiple Flows را در پروژه خود تنظیم کنید
شما در این بخش از آموزش ساخت پروتوتایپ در xd با نحوه کار Multiple Flows آشنا می‌شوید.
Multiple Flows به شما امکان می‌دهد چندین نسخه از یک طرح را از یک سند یا در همان فایل ایجاد کرده و به اشتراک بگذارید و از مجموعه‌ای مشابه از صفحات طراحی شده در نمونه‌های اولیه یا مشخصات طراحی استفاده کنید. هر جریان مجموعه‌ای از پیوندها و جزئیات اشتراک است، بنابراین می‌توانید تغییرات را اعمال کرده و مجدداً منتشر کنید بدون این که هربار تنظیمات خود را لغو کرده و دوباره انجام دهید.
اگر می‌خواهید نسخه‌هایی از طرح خود ایجاد کنید، یک صفحه دوم به عنوان Home طراحی کنید، صفحات طراحی شده را به هم وصل کنید و برای هر مجموعه پیوندهای منحصر به فردی به اشتراک بگذارید. در زمان آموزش ساخت پروتوتایپ در xd باید بدانید که صفحات اولیه طراحی شده در خانه به عنوان نقطه شروع طراحی عمل می‌کنند که در آن می‌توانید پیوندها را ایجاد کنید تا صفحه‌های مختلف به یکدیگر متصل شوند.
از مجموعه‌ای از صفحات طراحی شده یکسان در چندین نمونه اولیه بدون نیاز به تکرار کار خود استفاده کنید. طرح‌های خود را تغییر دهید و پیوندهای خود را در یک صفحه به روز کنید.
همچنین با استفاده از این ابزار در هنگام طراحی وب سایتی که برای چندین سیستم عامل مانند تلفن همراه، رایانه، رایانه لوحی و غیره طراحی می‌شود، می‌توانید جریان‌های متقابل متعددی را تعریف و طراحی کنید که در هر کدام از آن‌ها صفحات وب سایت شما به شیوه متفاوتی به استقبال کاربران برود.
آموزش ساخت پروتوتایپ در xd، پیوند عناصر تعاملی به صفحه‌های هدف
- Multiple Flows را تنظیم کنید
- به حالت نمونه اولیه بروید.
- صفحه اصلی را برای تعیین نقطه شروع طراحی خود تنظیم کنید.
- نامی برای هر جریان وارد کنید تا بهتر سازماندهی شود.
- اگر طرح شما متشکل از Multiple Flows است، برای هر یک از این جریان‌ها صفحات خاصی را به عنوان Home طراحی کنید.
- روی شی یا صفحه طراحی شده بعدی که می‌خواهید پیوند آن در صفحه شما باشد، کلیک کنید. یک دسته اتصال دهنده با یک پیکان از شی صفحه طراحی شده بعدی ظاهر می‌شود. کلیک کنید و بکشید تا دسته روی شیء مقصد یا صفحه طراحی شده بعدی آزاد شود.
نکات مهم در آموزش ساخت پروتوتایپ در xd
در زمان آموزش ساخت پروتوتایپ در xd به یاد داشته باشید که برای ویرایش یا حذف پیوندها و نقاط اتصال، هر کدام از آن‌ها را ویرایش یا حذف انتخاب کنید. همچنین می‌توانید یک تعامل واحد را از Property Inspector انتخاب کرده و تعاملات آن را ویرایش کنید. برای پنهان کردن موقعیت نقاط اتصال در حالت نمونه اولیه، کلید Option (macOS) یا Alt (Windows) را نگه دارید. همچنین برای مشاهده نوک ابزار که تعداد تعاملات و نوع آن‌ها را به شما نشان می‌دهد، نشانگر خود را روی پیوند یا نقاط اتصال قرار دهید. .
برای اعمال تعامل تعریف شده بر روی یک شی دیگر، شی یا صفحه طراحی شده را انتخاب کنید، سپس گزینه کپی را انتخاب کنید. روی شیء مقصد یا صفحه طراحی شده مورد نظر کلیک کنید و در نهایت در منوی زمینه راست کلیک، Paste Interaction را انتخاب کنید.
صفحات پیوند خود را جذاب کنید.
در این بخش آموزش ساخت پروتوتایپ در xd شما یاد می‌گیرید که نمونه‌های اولیه خود را با استفاده از محرک‌سازی تصاویر و انیمشن‌ها جذاب‌تر کنید. برای این کار شما باید گزینه Property Inspector را انتخاب کنید. شما می‌توانید با توجه به گزینه‌های متنوع موجود نوع شکل مورد نظر خود را انتخاب کنید. به طور مثال می‌توانید پیوندهای موجود در صفحه اصلی خود را مانند لنگر یک کشتی طراحی کنید که با کلیک بر روی آن‌ها کشیده می‌شوند. همچمنین شما می‌توانید تعاملات ایجاد شده را به عنوان پیوندهای قابل اشتراک‌گذاری برای مرور مدیریت و منتشر کنید و بازخورد آن‌ها جمع آوری کنید و برای بهبود کار خود از آن‌ها استفاده کنید.
پیوند به صفحه طراحی شده قبلی
شما باید در در حالت نمونه اولیه، عنصر یا صفحه وب سایت خود که می‌خواهید پیوند آن در وب سایت شما نشان داده شود را انتخاب کنید. هنگامی که یک پیکان کوچک ظاهر می‌شود، روی فلش قبلی خود کلیک کرده و آن را بکشید یا گزینه Action> Previous Artboard را انتخاب کنید.
پیش نمایش و ضبط تعاملات
در زمان آموزش ساخت پروتوتایپ در xd باید بدانید که ضبط نمونه‌های اولیه در Adobe XD در Windows پشتیبانی نمی‌شود، البته یک راه حل برای این مشکل وجود دارد. کلیدهای Windows + G را همزمان فشار دهید و از ضبط کننده اصلی سیستم خود برای ضبط پنجره پیش نمایش استفاده کنید.
برای آزمایش نمونه اولیه و تعاملات، می‌توانید نمونه اولیه را پیش نمایش کنید. همچنین می‌توانید پیش نمایش را ضبط کرده و ضبط را به صورت یک فایل. mp4 ذخیره کنید. سپس می‌توانید فایل. mp4 را با ذینفعان خود به اشتراک بگذارید، آن‌ها می‌توانند مراحل اولیه نمونه را مشاهده و بررسی کنند و نظرات خود را ارائه دهند.
با ثبت نظرات، پیشنهادات، انتقاد ها و همچنین سوال های خود در بخش نظرات سایت ما را در راستای بهبود کیفیت خدماتمان، یاری نمایید.
حسن خلیلوند
خیلی عالی بود
امیدخان
خیلی خوبه، اما کاش یه آموزش ویدئویی از ایجاد پروتوتایپ میذاشتین تاثیر یادگیریش بیشتر