دوره آموزشی متریال دیزاین در اندروید

سلام و عرض احترام

در این بخش از آموزش‌های اندورید در خدمت شما هستیم با دوره آموزشی متریال دیزاین در اندروید.

متریال دیزاین چیست؟

متریال دیزاین سبکی/زبانی جدید در طراحی است که گوگل دریکی از کنفرانس‌های خبری خود در ماه ژوئن سال ۲۰۱۴ آن را معرفی کرده است. متریال دیزاین بیش‌ازحد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی‌شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) اما خیلی زیباتر با انیمیشن‌ها و  Transition های بسیار زیبا و درعین‌حال پیچیده است. خود گوگل ادعا دارد که زبان جدید طراحی آن‌ها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate می‌گوید همان‌گونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد.

اگر بخواهیم در یک جمله بگوییم متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت (Flat Design) هست. محیط متریال یک فضای سه‌بعدی می‌باشد. هر صفحه material یک جایگاه واحد در محور z را به خود اختصاص می‌دهد و دارای ضخامت استاندارد ۱ dp می‌باشد.

چرا از Material Design گوگل استفاده کنیم؟

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

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

توضیحات دوره:

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

• قسمت اول (آشنایی با متریال دیزاین):در این قسمت از آموزش توضیحاتی در مورد متریال دیزاین داده می‌شود و سعی بر آن شده تا شما عزیزان دید کلی نسبت به متریال دیزاین داشته باشید و همین‌طور درک خوبی با این تکنولوژی پیدا کنید.

• قسمت دوم (کتابخانه پشتیبان):در این قسمت از آموزش با کتابخانه پشتیبان متریال دیزاین آشنا می‌شوید. کاربرد این کتابخانه ازاین‌جهت مهم است که با استفاده از آن شما می‌توانید از متریال دیزاین در  ورژن های پایین‌تر اندروید هم می‌توانید از این تکنولوژی استفاده کنید.

• قسمت سوم (آشنایی با تعدادی از وب‌سایت‌ها):برای کار با متریال دیزاین سایت‌های مختلفی ارائه‌شده است که ابزارهای مختلفی شامل آیکون‌های متریال و رنگ‌های استانداردی که شما باید در طراحی متریال استفاده کنید را در اختیار شما می‌گذارند. در این ویدیو ما تعدادی از آن‌ها را موردبررسی قرار می‌دهیم.

• قسمت چهارم (استایل ها و تم‌ها):از این جلسه دوره ما به‌صورت اختصاصی و در قالب کار بر روی پروژه آغاز می‌شود. در این ویدیو با استایل ها و تم‌ها آشنا می‌شوید و نحوه بکار گیری تم‌های مختلف در برنامه را می‌آموزید.

• قسمت پنجم (پالت رنگ‌های گوگل):شما نیاز دارید که با قسمت‌های مختلف صفحه‌نمایش آشنا بشوید تا بتوانید به‌راحتی رنگ‌های قسمت‌های مختلف را تنظیم کنید. در این جلسه نحوه انتخاب رنگ‌های مختلف را می‌آموزید به‌نحوی‌که این رنگ‌ها باهم همخوانی داشته باشند و ظاهر قابل قبولی را به کاربر نمایش دهند.

• قسمت ششم (تولبار و منو):حتماً در اپلیکیشن های مختلف با تولبار ها و منوها آشنا شدید. ما در این جلسه نحوه  پیاده‌سازی تولبار متریال را آموزش می‌دهیم و همچنین استفاده از دکمه‌های منو در این تولبار که تنظیمات مختلفی را در اختیار کاربر قرار می‌دهد.

• قسمت هفتم (اسنک بار):در ورژن های جدید اندروید استفاده از اسنک بار به‌جای Toast پیشنهادشده است که ظاهر به‌مراتب زیباتر و حرفه‌ای‌تری را به اپلیکیشن شما می‌دهد. در این ویدیو ابتدا یک اسنک بار را ایجاد می‌کنیم و در ادامه یک اسنک بار سفارشی‌شده را پیاده‌سازی می‌کنیم.

• قسمت هشتم (TabLayout):تب لیوت ها این امکان را به شما می‌دهند که بتوانید در صفحات مختلفی اطلاعاتی با موضوعات و سرفصل‌های مختلف را پیاده‌سازی کنید. در این ویدیو یک تب لیوت متریال را ایجاد و مقداردهی می‌کنیم.

• قسمت نهم (Navigation Drawer):این آیتم یکی از مهم‌ترین و پرکاربردترین قابلیت‌های موجود برای اپ های حرفه است. در این ویدیو یک  NavigationDrawer حرفه‌ای را طراحی می‌کنیم و در ادامه می‌آموزید که به چه شکل این نویگیشن در زیر تولبار شما قرار بگیرد و در زمان اجرا تمامیِ صفحه بر رو نویگیشن شما فوکوس داشته باشد تا توجه کاربر فقط به سمت نویگیشن و آیتم‌های آن جلب شود و درنهایت آیکونی را به تولبار اضافه می‌کنیم که با حرکت نویگیشن این آیتم به چرخش درآید.

• قسمت دهم (Folating Action Button & menu):در مورد در اپ های متریال به‌دفعات مورداستفاده قرارگرفته است. دکمه‌ای زیبا که با کلیک بر روی آن اتفاق خاصی می‌افتد. این دکمه نمای بسیار جذابی را به اپلیکیشن شما می‌دهد. همچنین در ادامه یک Floating Action Menu هم ایجاد می‌کنیم که با کلیک بر روی آن‌یک منو زیبا برای شما باز شود و برای هر منو قابلیت کلیک کردن پیاده می‌کنیم.

• قسمت یازدهم (RecyclerView):ریسایکلر ویو یک قابلیتی مشابه لیست ویو است با این تفاوت که توانایی این را دارد تا خودش را با سایزهای مختلف صفحه‌نمایش تنظیم کند و همچنین به دلیل کاربردی که دارد از رم دستگاه شما کمترین استفاده را داشته باشد. بعد از ارائه شدن این قابلیت تقریباً استفاده از لیست ویو منسوخ‌شده است  که ما در این جلسه به‌صورت کامل با ریسایکلر ویو کار می‌کنیم.

• قسمت دوازدهم (RecyclerView and animation and ripple):این ویدیو در ادامه مبحث قبلی می‌باشد که ما به ریسایکلر ویو که ایجاد کردیم انیمیشن‌های زیبا و قابلیتی بانام ریپل اضافه می‌کنیم که یک فیدبک از  کلیک شما به کاربر نمایش می‌دهد.

• قسمت سیزدهم (checkBox&Switch):در ادامه این دوره مبحث چک باکس و سوئیچ را به‌صورت متریال دنبال می‌کنیم رنگ پیش‌فرض می‌دهم و رنگی را برای زمان انتخاب شدن تنظیم می‌کنیم.

• قسمت چهاردهم (ProgressBar):مورد دیگری که در ادامه کار می‌کنیم پروگرس بار است که کاربر زیادی در اپلیکیشن ها دارد. در این ویدیو یک پروگرس بار متریال را پیاده‌سازی می‌کنیم و قابلیت‌های مختلفی را موردبررسی قرار می‌دهیم.

• جلسه پانزدهم (circleImage):در این جلسه با استفاده از کتابخانه‌ای تصاویر موجود در برنامه را به‌صورت دایره‌ای شکل پیاده‌سازی می‌کنیم که می‌تواند نمای متفاوتی را ارائه دهد.

• جلسه شانزدهم (kenBournse):در این ودیو یک کتابخانه جذاب را کار می‌کنیم. کتابخانه‌ای که با استفاده از آن تصاویر پس‌زمینه  اپلیکیشن شما به‌صورت متحرک نمایش داده می‌شود.

• جلسه هفدهم (seekbarMaterial):در این قسمت از آموزش یک سیک بار متریال پیاده می‌کنیم. سیک بار برای تنظیم کردن یک سری مقادیر است مثل سایز فون و تنظیم رنگ.

• جلسه هجدهم (materialDialog):در مواقعی نیاز دارید تا با کلیک بر روی یک آیتم یک پنجره کوچک برای شما باز شود و انتخاب‌های متفاوتی را در اختیار شما بگذارد. در این ویدیو با استفاده از کتابخانه, یک متریال دیالوگ را پیاده‌سازی می‌کنیم و با آیتم‌های  آن آشنا می‌شوید.

• جلسه نوزدهم (FloatingLable):در این جلسه یک صفحه لاگین ایجاد می‌کنیم که شامل دو ادیت تکست است و شما با کلیک بر روی هر ادیت تکست اتفاقات زیبایی را مشاهده می‌کنید و همین‌طور وقتی‌که اطلاعات شما اشتباه وارد شود قابلیت متریال را در آن لحظه به‌وضوح مشاهده می‌کنید.

• جلسه بیستم (Transation):در آخرین جلسه از این دوره با ransation آشنا می‌شوید. زمانی که شما از یک اکتیویتی وارد اکتیویتی بعدی می‌شوید با استفاده از Transatioan یک انتقال روان و زیبا را مشاهده می‌کنید به این شکل که در زمان انتقال به‌عنوان‌مثال یک ویجت شما مثل ایمیج ویو تبدیل می‌شود به یک باتن در اکتیویتی بعدی که ظاهر جذابی را برای شما می‌سازد.