امروز در سری مقالات دانشجویار، به بررسی و معرفی آموزش ساخت پروتوتایپ در adobe xd  پرداخته شده است که این مورد از سر فصل های ارائه شده دوره آموزش Adobe Xd می باشد. با دانشجویار همراه باشید.

مقدمه

Adobe Creative Cloud، برای ایجاد موکاپ‌ها و پروتوتایپ‌هایی که در نهایت می‌خواهید در وبسایت‌ها یا اپلیکیشن‌ها به کار گیرید، نرم افزاری به نام Adobe XD ارائه کرده است. Adobe XD نرم افزاری ساده است، بنابراین می‌توانید از آن هنگامی که برای اولین بار پروژه‌ای را شروع کرده‌اید، به راحتی استفاده کنید. این نرم افزار، ابزار‌های مفیدی را برای جذاب و آسان کردن فرایند طراحی ارائه کرده است. در ادامه‌ی مقاله در مورد ساخت موکاپ و خروجی گرفتن در Adobe XD مطالب کاربردی بیان خواهیم کرد.

آموزش پیشنهادی

دوره جامع آموزش Adobe Xd 2023 به صورت پروژه محور

  • آشنایی و کار با تمام ابزارها به همراه تکنیک های استفاده
  • کار با ویدئو و انیمیشن Lottie در Adobe Xd
  • اجرا پروژه لندنیگ پیج یا صفحه فرود برای وبسایت
  • پروتوتایپ، انیمیشن و تعاملی کردن طرح
  • طراحی پروژه اپلیکیشن شبکه اجتماعی مشابه اینستاگرام برای آیفون
حامد مودی
۴.۹
مشاهده دوره

ساخت موکاپ و خروجی گرفتن در Adobe XD

ساخت موکاپ فرایندی است که به طراح کمک می‌کند تا سر نخی در مورد این که محصول نهایی چگونه خواهد بود، داشته باشد. ایجاد موکاپ و خروجی گرفتن در Adobe XD پیشنهاداتی در مورد ظاهر نهایی طرح ارائه می‌دهد. این مورد به طراح کمک می‌کند تا بتواند مواردی را با کاربران مورد نظر و افراد دیگری که در فرایند مابین wireframe و prototype حضور دارند، به اشتراک بگذارد. Wireframe‌ها برای نمایش ساختار و الزامات عملکردی طرح، توسعه یافته و به اشتراک گذاشته می‌شوند. موکاپ نیز wireframe‌ای است که دارای یک لایه‌ی سطحی بیشتر است که طرح‌های بصری شامل تایپوگرافی، رنگ‌ها و تصاویر را نشان می‌دهد.

نکته
مقاله پیشنهادی: نصب adobe xd

Adobe XD نرم افزاری کارآمد برای ساخت پروتوتایپ است که با هدف کمک به طراحان UI/UX برای ساخت موکاپ، وایرفریم، پروتوتایپ و آرت‌بورد توسعه یافته است. برای استفاده از این نرم افزار نیازی به سابسکرایب ندارید. تنها کاری که باید انجام دهید، ثبت نام، دانلود و نصب آن است. در ادامه مراحل ساخت موکاپ در Adobe XD را با جزئیات بیان کرده‌ایم.

مرحله ۱: به صفحه‌ی اصلی Adobe XD بروید

هنگامی که به صفحه اصلی یا homepage نرم افزار رفتید، روی Get XD for free کلیک کنید. پس از انجام این کار، صفحه‌ی جدیدی باز می‌شود و دانلود به صورت اتوماتیک شروع می‌شود. بعد از به پایان رسیدن دانلود، فایل نصبی را راه‌اندازی کنید. بعد از این کار از شما خواسته می‌شود پروژه‌ای که می‌خواهید را ایجاد کنید.

مرحله ۲: نوع پروژه را انتخاب کنید

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

مرحله ۳: ساخت موکاپ را شروع کنید

  • رنگی را برای پس‌زمینه انتخاب کنید.
  • اولین عنصر که navigation bar ثانویه است را اضافه کنید. می‌توانید از ابزار rectangle استفاده کنید. با استفاده از ابزار متن موجود در منوی Adobe XD، رنگ پس‌زمینه را به navigation bar اضافه کنید.
  • Call to action را با استفاده از ابزار rectangle ایجاد کنید.
  • لوگو را نیز می توانید با کشیدن فایل تصویر به داخل آرت‌بورد، به موکاپ اضافه کنید.
  • سپس عنوان اصلی و نوار جستجو را با استفاده از ابزار‌های text و rectangle اضافه کنید.
  • برای اضافه کردن پست به موکاپ، دو rectangle به آرت‌بورد اضافه کنید. با استفاده از ابزار text عناوین را به این rectangle‌ها اضافه کنید.
  • برای اضافه کردن تصویر به rectangle‌ها همانطور که قبلا نیز گفته شد، فایل‌های تصویری را به داخل موکاپ بکشید.

مرحله ۴: پیش نمایش موکاپ ساخته شده در Adobe XD

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

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

پلاگین یا افزونه‌ی Adobe XD چیست؟

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

Adobe Undraw چیست؟

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

چگونه می‌توان طرح مناسب را با استفاده از Adobe UnDraw انتخاب کرد؟

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

دیگر پلاگین‌های AdobeXD

توجه داشته باشید شما به هیچ عنوان محدود به Undraw نیستید چرا که پلاگین‌های زیادی وجود دارد که به شما امکان اضافه کردن ویژگی‌های جالب و منحصر به فرد به طراحی‌تان را می‌دهد. به طور مثال، پلاگین VizzyCharts به شما امکان می دهد تا در صورت نیاز به نمایش داده‌ها، به کمک نمودار‌های مختلف این کار را انجام دهید. و یا پلاگین Icons 4 Design تعداد زیادی آیکون مهم و ضروری با طراحی‌های متنوع را در اختیار شما قرار می‌دهد تا در طرح‌هایتان مورد استفاده قرار دهید.

پلاگین دیگری که ممکن است به کارتان بیاید، پلاگین Color Designer است که طیف وسیعی از رنگ‌ها و سایه‌ها را برای انتخاب به شما ارائه می‌کند. پلاگین آخری که می‌خواهیم معرفی کنیم پلاگین Quick Mockup است که امکان انتخاب تم (چندین طرح متفاوت هم برای تم‌های روشن و هم تم‌های تیره وجود دارد)، آیکون و تصاویر متناسب با طرحتان را در اختیار شما قرار می‌دهد.