Advanced Adobe XD (دوره رایگان)

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

این دوره بیش از 90 دقیقه طول می کشد، و در این مدت ما طیف گسترده ای از موضوعات را از نحوه استفاده حداکثری از انیمیشن خودکار گرفته تا درس هایی در مورد تبدیل های سه بعدی، تعاملات میکرو و چیدمان های پیشرفته را پوشش خواهیم داد.

معرفی

1. به دوره خوش آمدید

درس تصویری را تماشا کنید [0:00] ↗

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

ما در مورد برخی از ابزارهای پیشرفته‌تر Adobe XD که ارائه می‌کند جزئیات بیشتری خواهیم داشت – ابزارهایی که عادت کردن به آن‌ها کمی زمان بیشتری می‌برد.

متحرک سازی خودکار

2. پویانمایی خودکار موقعیت، اندازه، و چرخش

درس تصویری را تماشا کنید [1:51] ↗

این درس همه چیزهایی را که برای متحرک سازی خودکار اندازه، موقعیت و چرخش عناصر در Adobe XD نیاز دارید، پوشش می دهد.

و فقط یک نکته قبل از اینکه ادامه دهیم: با پیشرفت دوره، کاربردهای پیچیده تری را برای انیمیشن خودکار مشاهده خواهید کرد، اما همه چیز (همه چیز!) ریشه در سه ویژگی دارد که اکنون به شما نشان خواهم داد.

در طول این درس، ما روی یک نوار لغزنده مانند زیر کار خواهیم کرد:

و در اینجا، از انیمیشن خودکار برای تنظیم اندازه، موقعیت و چرخش هر عنصر در نوار لغزنده استفاده خواهیم کرد.

3. ترکیب ماسک و متحرک سازی خودکار

درس تصویری را تماشا کنید [12:18] ↗

بخش بعدی این دوره نحوه ترکیب ماسک ها با انیمیشن خودکار را پوشش می دهد و من به شما نشان خواهم داد که چگونه انیمیشن های بسیار جالبی ایجاد کنید. تمرکز در اینجا بر روی استفاده از متحرک سازی خودکار برای ایجاد یک انیمیشن منظم بین نمادهای صفحه بندی در نوار لغزنده ما است.

انیمیشنی که ما ایجاد می کنیم ترکیبی صاف (و جداسازی) از دایره ها خواهد بود. و این با استفاده از ماسک به دست می آید. ما همچنین یک نوار لغزنده صاف ایجاد می کنیم که می تواند به صورت دستی تنظیم شود تا مقدار عدد افزایش یا کاهش یابد.

4. استفاده از تعاملات متعدد در یک عنصر

درس تصویری را تماشا کنید [31:26] ↗

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

در این مثال، ما یک تعامل کشیدن و یک تعامل ضربه‌ای را روی یک عنصر ترکیب کرده‌ایم:

5. Micro-Interactions در Adobe XD

درس تصویری را تماشا کنید [39:16] ↗

Micro-interactions انیمیشن های کوچکی هستند که برای ارائه بازخورد در مورد برخی اقدامات انجام شده توسط کاربر طراحی شده اند. آنها شفافیت را در مورد آنچه اتفاق می افتد ارائه می دهند و می توانند بازخورد کاربر را ارائه دهند تا بدانند کار درست را انجام می دهند. در این درس، برخی از تعاملات خرد را از Dribbble بررسی می کنیم تا ببینیم چگونه آنها تغییر می کنند و چه بازخوردهایی را به کاربران ارائه می دهند.

سپس، نحوه ایجاد تعاملات ریز در Adobe XD را با استفاده از بهترین دوست جدیدمان بررسی می‌کنیم: انیمیشن خودکار.

تبدیل های سه بعدی

6. تبدیل 3 بعدی سطح بعدی

تماشای ویدیوی درس 55:15]↗

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

پشته ها

7. چیدمان های پیشرفته با پشته ها

درس تصویری را تماشا کنید [01:09:14] ↗

تمرکز در اینجا بر این است که چگونه می توانید از ویژگی نسبتاً جدید Stacks برای ایجاد طرح بندی های پیشرفته در Adobe XD استفاده کنید. به عنوان مثال، ما از یک کیت UI استفاده می کنیم تا نشان دهیم چگونه می توانید از Stacks برای ایجاد طرح بندی های پیچیده تر از آنچه معمولاً ممکن است استفاده کنید.

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

ایالت ها

8. اجزای پیشرفته با ایالات

درس تصویری را تماشا کنید [01:16:17] ↗

در این درس، ما وضعیت‌های مؤلفه را بررسی می‌کنیم، که به شما امکان می‌دهد انواع یک مؤلفه را ایجاد کنید و به راحتی بین آن انواع سوئیچ کنید. این ابزار برای ایجاد دکمه ها یا عناصر فرم بسیار مفید است.

برای این درس، ما از عناصر UI برای ایجاد نسخه‌های مختلف یک کارت استفاده می‌کنیم.

پلاگین ها

9. 5 پلاگین برتر برای کاربران پیشرفته

درس تصویری را تماشا کنید [01:24:53] ↗

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

افزونه های مورد بحث در این درس عبارتند از:

• آن را تغییر نام دهید
• چهره های رابط کاربری
• Google Sheets برای Adobe XD
• طراحی آیکن 4
• ترسیم کنید

مهارت های Adobe XD خود را بیشتر تقویت کنید

همه اینها را دارید و هنوز بیشتر می خواهید؟ ما طیف گسترده ای از موضوعات مرتبط با Adobe XD را در گذشته پوشش داده ایم. پس چرا یکی از آموزش های قبلی ما را بررسی نمی کنید؟