در این آموزش قصد دارم نحوه ساخت پروتوتایپ و اینتراکشن ها در ادوبی ایکس دی / Adobe Xd را از صفر و بصورت جامع به شما آموزش دهم. در واقع شما با پروتوتایپ اینتراکشن ها یا حرکت های تعاملی مختلفی به طرحتون اضافه می کنید.
و بصورت کلی اینتراکشن ها نتیجه اکشنی توسط کاربر یا سیستم هستند که معمولا بصورت یک جلوه گرافیکی در اینترفیس به شما نشان داده می شود. پروتوتایپ مثل یک روح است که شما اون در قالب وایرفریم یا طرح یو ای خودتون می دمید تا اون طرح زنده بشه.
در واقع شما با پروتوتایپ می آید اینتراکشن ها یا حرکت های تعاملی مختلفی به طرحتون اضافه می کنید.
در نتیجه به عنوان مثال زمانی که کاربر بر روی یک دکمه کلیک کرد وارد صفحه دیگر بشود و یا اینکه اگر بخش به خصوصی از صفحه را درگ کرد، به صفحه دوم آنبوردینگی که طراحی کردید منتقل بشه و حرکات و اینتراکشن های مختلف دیگه ای که در این ابزار وجود دارد.
شما هم از پروتوتایپ در طراحی یوای و هم در طراحی یو ایکس برای اهداف مختلف استفاده می کنید. به عنوان مثال یک طراح یوایکس می تونه با ساخت پروتوتایپ وایرفریمی که ایجاد کرده، نحوه ی تعامل کاربر با بخشی از اپلیکیشن رو نشون بده.
با این وجود معمولا در اکثر ابزارهای طراحی دیجیتال با تغیییری در اینترفیس این عمل اتفاق می افتد و از طرفی در دستگاه ها یا نرم افزارهای مختلف دیگر ممکن است این فیدبک به طریق دیگری به شما نشان داده شود.
به عنوان مثال زمانی که شما دکمه روشن شدن کنسول Xbox را فشار می دهید، ایکسباکس با یک صدا و روشن شدن لوگو XBOX به شما اعلام می کند که دستگاه در حال روشن شدن است. یا اینکه اگر یک دستگاه یا دیوایس اپل داشته باشید و به آن عبارت Hey Siri را بگویید، دیوایس با یک صدا و جلوه گرافیکی به شما نشان می دهد که در حال گوش دادن به دستورات شماست.
به عنوان مثال در تلگرام زمانی که شما پیام را آرشیو می کنید، ایکان آرشیو تلگرام بصورت متحرک همان اکشنی را که انجام داده بودید به شما نشان می دهد که آن اقدام به درستی انجام گرفته است. در واقع وضعیت فعلی را با توجه به اکشنی که شما انجام دادید نشان می دهد.
حال شما در ادوبی ایکس دی نیز می توانید با استفاده از ویژگی پروتوتایپ اینتراکشن های مختلفی را طراحی کنید تا با هر اکشن کاربر یک ری اکشن به آن نشان داده شود.
در آموزش جامع ساخت پروتوتایپ در Adobe Xd – قسمت ششم چه مواردی بررسی می شود؟
محتوای فیلم آموزشی ساخت پروتوتایپ در ادوبی ایکس دی
- 00:48 | پروتوتایپ چیست؟
- 02:47 | چطور وارد بخش پروتوتایپ ادوبی ایکس دی بشویم؟
- 03:10 | پیش نیازهایی برای ساخت پروتوتایپ در Adobe Xd
- 03:58 | پروتوتایپ حالت های مختلف دکمه در ادوبی ایکس دی
- 04:39 | ایجاد کامپوننت قبل از ایجاد اینتراکشن پروتوتایپ
- 04:58 | ایجاد حالت های مختلف دکمه با کامپوننت ها در Adobe Xd
- 07:00 | ساخت اینتراکشن های دکمه رادیویی و چک باکس در Xd
- 08:58 | ساخت اینتراکشن پروتوتایپ اسکرول بار در ایکس دی
- 11:29 | تغییر محدوده نمایش صفحه پروتوتایپ در Adobe Xd
- 12:44 | ساخت اینتراکشن پروتوتایپ باز شدن منو اپلیکیشن در ادوبی ایکس دی
- 14:17 | نکات مهم در استفاده از نوع Auto Animate در پروتوتایپ Xd
- 15:00 | ساخت اینتراکشن پروتوتایپ اضافه کردن اعداد در سبد خرید
- 16:34 | ساخت اینتراکشن پروتوتایپ Drag یا کشیدن در Adobe Xd
- 17:32 | ساخت اینتراکشن پروتوتایپ صدا یا Voice در ایکس دی
- 19:20 | اینتراکشن پروتوتایپ Overlay برای نمایش یک آرتبورد بر روی دیگری
- 20:02 | اینتراکشن پروتوتایپ صفحه کلید یا کیبورد در ادوبی ایکس دی
- 20:48 | اینتراکشن پروتوتایپ زمان در Adobe Xd و ساخت انیمیشن
- 22:01 | حذف اینتراکشن های پروتوتایپ در ادوبی ایکس دی
آموزش جامع ساخت پروتوتایپ در Adobe Xd – قسمت ششم
آموزش جامع ساخت پروتوتایپ در فیگما و Multiple Flows
آموزش متحرک کردن آیکان ها در طراحی UI/UX با Adobe XD
آموزش وایرفریم چیست و چطور یک Wireframe برای UI و UX بکشیم؟
چطور در دوره های آموزشی طراحی شما ثبت نام کنیم؟
از جمله این دوره ها که در حال ضبط و آماده سازی است می توان به
- آموزش طراحی رابط کاربری – UI Design
- آموزش طراحی تجربه کاربری – UX Design
- آموزش صفحه آرایی کتاب، مجله و روزنامه با ایندیزاین
- آموزش طراحی گرافیک با فتوشاپ
این دوره ها در حال آماده سازی است اما شما می توانید با ثبت ایمیل خود از طریق لینک زیر در این دوره ها پیش ثبت نام کنید.
کسانی که قبل از انتشار دوره ها ایمیل خودشان را ثبت می کنند، از امتیاز هایی برخوردار می شوند.
گروه تلگرام برای بحث و تبادل نظر در حوزه دیزاین رابط و تجربه کاربری
این گروه تلگرامی با هدف رفع اشکال و راهنمایی طراحان UI/UX و طراحان محصول ایجاد شده است. برای عضویت در این گروه بر روی لینک زیر کلیک کنید.
عضویت در گروه تلگرام UIXFamily
کانال تلگرام برای معرفی کتاب ها و نکات کاربردی و آموزش های مختلف
شما می توانید با عضویت در کانال تلگرامی AsteriXarts به محتوای تخصصی در حوزه دیزاین و به خصوص UI/UX دسترسی داشته باشید. برای عضویت بر روی لینک زیر کلیک کنید:
عضویت در کانال تلگرام AsteriXarts
آموزش های اختصاصی طراحی در اینستاگرام
همچنین شما می توانید با دنبال کردن کانال AsteriXarts در اینستاگرام، به محتوا تخصصی در حوزه دیزاین، بیزینس، فریلنسینگ و … دسترسی داشته باشید. برای دنبال کردن کانال بر روی لینک زیر کلیک کنید:
دنبال کردن AsteriXarts در اینستاگرام
خبرنامه هفتگی دیزاین شامل مقالات، آموزش ها و منابع کمکی طراحی
بهترین مقالات، فیلم های آموزشی در حوزه دیزاین و به خصوص UI/UX و منابع کمکی طراحی را هر پنجشنبه در ایمیل خود داشته باشید.
برای عضویت در این خبرنامه می توانید از طریق فرمی که در پایین همین صفحه قرار دارد، ثبت نام کنید و یا اینکه از طریق لینک زیر در وبسایت DexignerNews عضو خبرنامه شوید.
عضویت در خبرنامه هفتگی دیزاین Dexigner News
طراحی رابط کاربری ( UI/UX ) را از صفر از کجا یاد بگیرم؟
[newsletter-pack newsletter=’8661′]
در آموزش ” آموزش جامع ساخت پروتوتایپ در Adobe Xd – قسمت ششم “ شما ساخت انواع اینتراکشن ها و پروتوتایپ ها در ادوبی ایکس دی را یاد گرفتید.
همچنین برای اینکه قسمت های بعدی آموزش های طراحی رابط و تجربه کاربری UI و UX را از دست ندهید می توانید علاوه بر عضویت در خبرنامه وبلاگ، در کانال یوتیوب نیز عضو شوید تا از جدیدترین فیلم های آموزشی ما سریعا مطلع شوید.
نظر شما در مورد آموزش ” آموزش جامع ساخت پروتوتایپ در Adobe Xd – قسمت ششم ” چیست؟ در بخش نظرات برای ما بنویسید که به چه موضوعی بیشتر در حوزه طراحی UI و UX علاقه دارید تا بیشتر در مورد آن محتوای آموزشی تولید شود.
لینک آموزش ها و مقالات فارسی دیگر طراحی رابط کاربری ( UI/UX ) در وبلاگ من:
آموزش طراحی UI/UX با Figma از صفر در 30 دقیقه با مثال کاربردی
آموزش جامع Figma – کار با ابزارها و محیط فیگما 2021 – قسمت اول
آموزش جامع Figma – کار با پنل Design در فیگما 2021 –قسمت دوم
10 ترفند فوق العاده کاربردی فیگما 2021 – قسمت اول
آموزش طراحی یک عنصر با بینهایت حالت با Variants در Figma
5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت اول
5 پلاگین فوق العاده کاربردی Figma 2021 – قسمت دوم
آموزش جامع طراحی Adobe Xd – محیط ظاهری و آرتبورد ها – قسمت اول
آموزش طراحی شکل های مختلف و تنظیمات آنها در Adobe Xd – قسمت دوم
آموزش ابزار متن و فارسی نویسی در Adobe Xd – قسمت سوم
آموزش کار با تصاویر و ماسک کردن در Adobe Xd – قسمت چهارم
آموزش طراحی آیکان با Pathfinder در Adobe Xd – قسمت پنجم
آموزش Adobe XD – معرفی 5 پلاگین فوق العاده کاربردی – قسمت دوم
معرفی 5 پلاگین فوق العاده کاربردی برای Adobe Xd- قسمت اول
آموزش Adobe Xd - یک دکمه برای همه جا در طراحی رابط کاربری
10 افزونه فوق العاده کاربردی برای طراحان رابط کاربری
آموزش UI/UX : طراحی رابط کاربری را از صفر چطور و از کجا یاد بگیریم؟
آموزش UI/UX : وایرفریم چیه و چطور آن را طراحی کنیم؟
چطور طرح رابط کاربری را در اختیار برنامه نویس و کارفرما قرار دهیم؟
لندینگ پیج چیست و چطور باید رابط کاربری UI/UX آن را طراحی کرد؟
