هیچ دوره ای در سبد خرید شما وجود ندارد
آنچه در دوره مقدماتی گذشت
در دوره مقدماتی Adobe Xd مسائل مربوط به طراحی، ابزارها و تکنیک های استفاده از آن مورد بررسی دقیق قرار گرفت و آموختیم که با این ابزار می توان یک طرح را به صورت کامل و جامع پیاده سازی کرد. در کنار آن نمونه پروژه مثل پیشخوان پنل کاربری، لیندینگ پیج و پخش کننده صوتی انجام و آموزش داده شد. اما این همه Adobe Xd نیست و ویژگی هایی مطرح کردیم که این نرم افزار را نسبت به سایر رقبایش متمایز می کند.
از جمله این ویژگی ها ایجاد نمونه قابل تعامل با کاربران، ایجاد انیمیشن، اشتراک گذاری و بازخورد و ویرایش همزمان که قصد داریم در این دوره به معرفی و یادگیری تمامی این موارد بپرداریم.
آپدیت این دوره تحت عنوان «دوره جامع آموزش Adobe Xd 2022 به صورت پروژه محور» منتشر شده است. پیشنهادی می گردد آن دوره را خریداری بفرمایید.
تعامل کاربر با طرح رابط کاربری در Adobe Xd
پروتوتایپ یا نمونه سازی طرح اولیه در طراحی تجربه و رابط کاربری دارای اهمیت ویژه ای است. در گذشته و حتی در حال حاضر افرادی که با فتوشاپ طراحی رابط کاربری انجام میدهند امکان ایجاد تعامل کاربر با طرح وجود ندارد و طرح باید به صورت تصویرهای جدا و یا نهایتا ویدئو یا پاورپوینت برای مشتری ارائه شود. اما اشکال این کار چیست؟
- امکان پیاده سازی انیمیشن و جابجایی بین صفحات طرح به سادگی قابل انجام نیست و باید در مرحله کد نویسی این کار انجام شود.
- کاربر نمیتواند شکل نهایی کار خود را ببیند مثلا با کلیک روی چه منوی چه اتفاقی بیفتد و به چه صفحه ای هدایت شود.
- ایجاد تغییر در فتوشاپ به مراتب وقت گیر تر است.
اما نرم افزار Adobe Xd با ویژگی پروتوتایپ ( ویکی پدیا ) خود این امکان را ایجاد کرده تا روی طرح خود با کاربر تعامل برقرار کنیم و کاربر مثل یک طرح نهایی پروژه را آزمایش کند،روی منو ها و دکمه ها کلیک کند و بین صفحات جابجا شود و البته کنار آن انیمیشن هایی که طراحی شده را مشاهده، تأیید یا رد کند.
قطعا اگر در مرحله طراحی مشتری این تعامل و انیمیشن را مشاهده کرده و از طرح رضایت نداشته باشید هزینه خیلی کمتری نسبت به زمانی که طرح وارد کد شده خواهد داشت.
استفاده از موکاپ در رابط کاربری
قطعا یکی از چالش های هر طراحی از طراح رابط کابری گرفته تا طراح پوستر تبلیغاتی، طراح کارت ویزیت، طرح لباس و … این است که زمانی طرح چاپ می شود ممکن است اصلا با جایگاهی که قرار می گیرد همخوانی نداشته باشد و چه بهتر که بتوان طرح را در مثال و جایگاه واقعی آن تصور کرد و به تصویر کشید. به تصویر طراحی شده در این دوره دقت کنین:
هر دو یک طرح هستند اما تصویر سمت چپ یک طرح بدون قاب و چارچوب ولی تصویر سمت راست در داخل طرح موکاپ قرار گرفته و نمای واقعی تر را به مخاطب و ما به نمایش می گذارد. قطعا در طرح سمت راست ایرادات ظاهری، مقیاس اندازه ها، توازن رنگ طرح با شکل و شمایل گوشی و حتی رنگ گوشی بهتر مشخص و نتیجه واقعی تری را به طراح نشان می دهد.
موکاپ نمای کار را دو چندان جذاب می کند شاید بهتر است بگوییم که نمای واقعی طرح را به نمایش می گذارد و طراحان رابط کاربری و حتی طراحان پوسترهای تبلیغاتی از موکاپ برای ارائه نمونه کارهای خود در شبکه های اجتماعی و سایت های طراحی استفاده می کنند. البته لازم به ذکر است موکاپ صرفا یک تصویر ثابت نیست و می تواند مثل نمونه زیر به صورت متحرک و ویدئویی هم تولید و برای ارائه به کار گرفته شود.
اشتراک و بازخورد
یکی از مباحثی که باعث پیشرفت در کار طراحی می شود قطعا گرفتن انتقادات و پیشنهاد درباره طرح است. البته در این خصوص باید روحیه انتقاد پذیری خود را تقویت کنید در غیر این صورت در حباب پیشرفت کاذبی که دور خود ایجاد کرده اید به دام خواهید افتاد. ادوبی ایکس دی امکان اشتراک طرح را به گونه های مختلف به طراح می دهد که افرادی را تحت عنوان تست کننده، توسعه دهنده و بازبینی کننده به پروژه دعوت و از آنها بازخورد و نظرخواهی کند.
اما در کنار آن نباید از اشتراک طرح ها در شبکه های اجتماعی پر بازدید و معتبر مثل دریبل و بیهنس قافل شد چرا که این سایت ها کانون طراحان رابط کاربری با هزار ایده و سلیقه هستند.
پروژه طراحی اپلیکیشن آیفون در دوره
در این دوره سعی کردیم تا نمونه متفاوت تر پروژه ای را نسبت به دوره مقدماتی اجرا کنیم. تصیمیم گرفتیم تا یک نمونه اپلیکیشن آیفون 10 با چند صفحه محدود در دو حالت روز و شب به همراه چالش های طراحی، اندازه ها، تنظیم رنگ ها و ایجاد انیمیشن ها و پروتایپ طراحی و آماده کنیم.
سرفصل دوره adobe xd
فصل چهارم: پروتوتایپ و انیمیشن در Adobe Xd
- پروتوتایپ یا نمونه اولیه چیست؟
- ایجاد اولین پروتوتایپ
- حفظ موقعیت اسکرول در صفحه
- انیمیشن خودکار
- تکنیک های انیمیشن خودکار
- انیمیشن خودکار صفحه راهنما
- توابع زمانی و شتاب انیمیشن
- انیمیشن اسکرول در صفحه
- لایه رویی یا overlay
- اجرای فایل صوتی
- عملیات درگ و دراپ ماوس
- تکنیک اسلاید جلو و عقب
- صفحه کلید و دسته بازی
- اجرای فرمان صوتی
- میکرو اینتراکشن چیست؟
- میکرو اینتر اکشن با قابلیت استفاده مجدد
- ساخت منوی کشویی با قابلیت استفاده مجدد
فصل پنجم: تکنیک های انیمیشن
- تکنیک انیمیشن نمودار سهمی
- تکنیک انیمیشن ضربان قلب
- تکنیک انیمیشن تشکرنامه دریبل
- تکنیک انیمیشن حداکثر تخفیف
فصل ششم: طراحی اپلیکیشن آیفون
- درباره طراحی در آیفون
- قالب بندی آیفون
- پلت رنگ
- اسپلش اسکرین
- کارت کراوسل اصلی
- منوی اصلی و منوی پایین
- ایجاد انیمیشن در منوی پایین
- طراحی صفحه لیست دوره ها
- انیمیشن مرتب سازی صفحه لیست دوره ها
- طراحی صفحه دوره
- تبدیل به حالت شب اپلیکیشن
- اجرای پروتوتایپ برای اپلیکیشن
فصل هفتم: ارائه و خروجی طرح
- تهیه و ضبط ویدئوی ارائه طرح
- لینک و تنظیمات اشتراک و بازخورد
- تعریف موکاپ و معرفی ابزارهای آنلاین
- آموزش کار با موکاپ Psd
- آموزش کار با موکاپ Psd متحرک
- تبدیل ویدئوی ارائه به موکاپ
پس از دوره
پس از طی این دوره و دوره مقدماتی Adobe Xd شما به تسلط کامل در این نرم افزار خواهید رسید به مهارت های زیر از Adobe Xd دست پیدا می کنید:
- کار با تمام ابزار Adobe Xd و تکنیک های ابزارها
- طراحی انواع لندینگ پیج یا صفحه ورود به همراه ایجاد تعامل کاربر و همچنین انیمیشن
- طراحی انواع اپلیکیشن های موبایل به همراه تعامل کاربر و انیمیشن ها
- مدیریت پروژه ها و نسخه های مختلف طرح ها
- ویرایش همزمان روی یک پروژه در شرکت های بزرگ
- خروجی گرفتن فایل های مورد نیاز پروژه برای مراحل بعدی طراحی و ارائه به توسعه دهندگان وب و موبایل
- ارائه طرح به روش های مختلف ویدئویی، موکاپ Psd و حتی موکاپ های ویدئویی برای مشتری یا نمونه کار
البته در دوره توضیح داده شد که آموزش طراحی خاص آیفون و یا اندروید به دلیل خاص بودن استاندارد ها و گستردگی دستگاه ها آموزش های جداگانه و تخصصی تری را می طلبد که باید به استانداردهای هر دستگاهی که برای آن طرح می زنید توجه شود
پس از طی این دوره شما به صورت کامل روی Adobe Xd مسلط خواهید بود و نیاز به آموزش اضافه ای برای این نرم افزار نخواهید داشت. ولی کسب تجربه و به روز بودن در مباحث تجربه و رابط کاربری و گرفتن بازخورد و ارتقاء جزو کارهایی است به هیچ عنوان نباید از آن دست بکشید
فراموش نکنید با عضویت در کانال @learnxd مطالب رایگان از جمله آموزش، کیت طراحی و آخرین اخبار و مخصوصا موکاپ های Psd مربوط به طراحی ها را دراختیار داشته باشید.
hsart
سلام خیلی دوره خوب و جامعی بود.
imanpro007
کاملترین دوره اموزشی adobe xd که میشد تهیه کرد، در حال تمرین و تسلط پیدا کردن به برنامه هستم. با تشکر از مدرس عزیز اقای مودی
soheylakazemi
سلام ممنون از نظر شما دوست عزیز به زودی اپدیت دوره هم منتشر خواهد شد
علی قربانی
سلام و وقت بخیر
چطوری میتونم با مدرس دوره آقای مودی ارتباط داشته باشم؟
حسن رجبیان
سلام
@hamedmoody
این آیدی تلگرامشون هست میتونین پیام بدین
امیر
سلام و عرض ادب
آیا adobe xd رو برای طراحی وب سایت هم میشه استفاده کرد یا فقط برای طراحی اپلیکیشن مناسبه؟ واینکه بر فرض مثال ما یک طرح کامل (وب سایت) رو ب این نرمافزار درست کردیم بعد چه جوری باید از اون خروجی htm و css بگیریم تا بتونیم وب سایت رو تکمیل کنیم.اصلا بعد از طراحی باید چه کار کرد ت اون رو تبدیل به کد کنیم . ممنون
حامد مودی مدرس دوره
سلام دوست عزیز
از ایکس دی برای هر نوع طراحی رابط کاربری استفاده میشه که طراحی وب هم یکیش. پلاگین هایی هم هست که خروجی کد میده اما کد مد نظر ما برای استفاده نیست و باید روش کار بشه. ولی شخصا به عنوان کدنویس میگم که هیچ پلاگینی کار یه کد نویس خوب رو تو این زمینه انجام نمیده
ابوالفضل
سلام.
ببخشید توی این دوره آموزش خروجی گرفتن به صورت وب (کد های html و css) آموزش داده شده؟
حامد مودی مدرس دوره
سلام خیر متأسفانه.
با پلاگین اصلا کیفیت یه کد نویس رو نمیده و خروجی دستی رو توی این دوره نگفتم.
انشاا… دوره طراحی قالب به صورت اختصاصی سراغ این مبحث خواهیم اومد
elfine
کاش یه دموی کامل درباره این فصل و پروژه هایی که تو این فصل پیاده میشه اشاره میشد
حامد مودی مدرس دوره
سلام
چشم به زودی دموی دوره اضافه میشه