آموزش جامع فریم ورک UIKit از صفر

  • مدرس : علی مظلوم
  • سطح آموزش : متوسط
  • مدت : ۲۲۹ دقیقه
  • تعداد دانشجو : ۵۹
شما در گام شانزدهم از ۲۴ گام مسیر طراحی رابط کاربری هستید

کل مسیر پیشنهادی ما به ترتیب و گام به گام در زیر لیست شده است...

آموزش جامع فریم ورک UIKit از صفر

سلام و درود فراوااااااان خدمت شما وی لرنی های عزیز داریم . خییییییییییلی خوشحالیییم که با دوره اموزش فریم ورک UIkit پیشتون اومدیم .

اگر تا حالا مسیر رابط کاربری اکادمی وی لرن رو دیده باشین و دوره آموزش html و css رو گذرونده باشین یا این که تو این زمینه ها کار کرده باشین ، متوجه شدین که برای طراحی راحت تر و سریع تر رابط کاربری ( UI ) یک سایت فریم ورک های مختلفی طراحی شدن . محبوب ترین فریم ورکی که اغلب طراحان ازش استفاده میکنن ، فریم ورک بوت استرپ هست ، که اموزشش رو هم داخل سایت وی لرن میتونین ببینین .

حالا ما میخیوایم یک فریم ورک محبوب دیگه رو هم براتون معرفی کنیم . بعد از فریم ورک bootstrap ، محبوب ترین فریم ورک بین طراحان رابط کاربری ، uikit framework هست  .

معرفی فریم ورک uikit :

اگر تا حالا با بوت استرپ کار کرده باشین ، به راحتی میتونین با uikit هم ارتباط برقرار کنین . اگر هم تا حالا کار نکردین کمی براتون توضیح میدیم تا یک دید کلی نسبت به فریمورک UIkit بدست بیارین .

در uikit کلاس هایی طراحی شده که صفحه رو به ده قسمت مساوی تقسیم میکنه تا شما بتونین به راحتی ساختار مورد نیازتون رو بسازین .

همچنین component های زیادی مثل Accordion  ، Animation ، Breadcrumb و … داره که کار رو برای طراحی بسیار راحت میکنه . ویژگی مثبتش اینه که این component ها هیچ کدومشون داخل فایل فریم ورک uikit نیستن و به دلخواه طراح میشه هر کدوم از اونا رو به پروژه اضافه کرد . که این کار باعث بهینگی و سرعت بالاتر uikit framework میشه .

و بحث مهم دیگه ای که میتونیم خدمتتون بگیم استفاده از تکنولوژی جدید flexbox در UIkit هست . اگر اطلاعی در مورد خاصیت فلکس باکس ندارین ، حتما حتما دوره جذاااااااب آموزش flexbox در آکادمی وی لرن رو ببینین .

چیزی که باعث شده محبوبیت فریم ورک bootstrap نسبت به UIkit بیشتر باشه تم ها و پلاگین هایی هست که برای بوت استرپ طراحی شده و همچنین کد نویسی راحتی که داره . این به عهده خودتون هست که کدوم فریم ورک رو یاد بگیرین . ولی توصیه میشه در صورتی که میخواین در زمینه طراحی رابط کاربری حرفه ای بشین ، حداقل به دو تا فریم ورک مسلط بشین . و به نظر ما بهترین فریم ورکهایی که میتونین یاد بگیرین bootstrap و uikit هستن . امیدواریم که بهترین بهره رو از این دوره کاربردی و جذاب ببرین . اگر از دوره استفاده کردین حتما ما رو هم دعا کنین 🙂 .

 

دورس جامع فریم ورک UIKit از صفر

  • 1- معرفی دوره آموزشی uikit

    6 دقیقه
  • سلام و درود خدمت شما وی لرنی های عزیز

    خیلی خوشحالیم که با این دوره آموزشی در خدمتتون هستیم . امیدواریم که بهره کافی رو از این دوره آموزشی ببرین و بتونین تو پروژه هاتون از فریم ورک UIkit استفاده کنین .

    تو قسمت معرفی دوره یه سری توضیح در مورد uikit دادیم . الان یکم بحث رو باز تر میکنیم تا بیشتر در موردش بدونین .

    فریمورک uikit دارای امکانات زیادی هست که حتی میشه گفت از بوت استرپ هم بیشتر هست . که چند تا از اونا رو خدمتتون میگیم :

    Grid Layout , Elemnts , Modal , Switcher , Toggle , ScrollSpy , slider , Smooth scroll , Animation , Flexbox , flat , gradient , …

    برای مشاهده ویدئوی این درس، کافیست بر روی پلیر کلیک کنید. همچنین برای بزرگ شدن پلیر، بر روی آیکون مربع شکل پلیر کلیک نمائید.

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 2- نصب پلاگین UIKit Autocomplete در Sublime Text

    3 دقیقه
  • خب حالا میخوایم اولین قدم برای استفاده از uikit رو برداریم . پلاگینی به نام UIkit Autocomplete توسط تیم طراح uikit طراحی شده که باید اون رو نصب کنیم تا بتونیم از امکاناتش استفاده کنیم .

    برای این که بتونیم پلاگین رو نصب کنیم اول  باید package control رو واسه sublime text نصب کنیم بعدش هم uikit رو نصب میکنیم . حالا میتونیم به راحتی از فریم ورک Uikit بهره کافی رو ببریم .

    برای مشاهده ویدئوی این درس، کافیست بر روی پلیر کلیک کنید. همچنین برای بزرگ شدن پلیر، بر روی آیکون مربع شکل پلیر کلیک نمائید.

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 3- بررسی ساختار فریم ورک uikit

    6 دقیقه
  • میخوایم اولین کد رو با استفاده از uikit بنویسیم . برای این کار ، اول باید لینک های مربوط به فایل هایی که قرار هست استفاده بشن رو داخل کد هامون بنویسیم . هر کدوم از component های uikit رو که خواستیم استفاده کنیم باید فایلش رو داخل فایل پروژمون قرار بدیم و بعد لینکش رو هم داخل کدهامون بذاریم .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 4- بررسی Layout-Grid فریم ورک uikit

    15 دقیقه
  • بحث grid رو تو این جلسه براتون مطرح میکنیم . در uikit صفحه به 10 تا ستون تقسیم میشه که ما با استفاده از کلاس uk-width میتونیم ساختار مورد نظر خودمون رو بسازیم .

    همچنین در نظر داشته باشین که طرز قرار گیری المان ها در uikit بر اساس flexbox هست . اگر هنوز باهاش آشنایی ندارین ، دوره آموزش flexbox در سایت وی لرن رو ببیین .

    قسمت اول :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

     

    قسمت دوم :

    مشکلی تو قسمت اول داشتیم ، این بود که با استفاده از کلاس uk-width در تمام نمایشگرها یک نمایش یکسان رو داشتیم . ما میخوایم که طرز نمایش تو نمایشگرهای مختلف با هم فرق داشته باشه . مثلا میخوایم که در اندازه دسکتاپ سه ستون و در تبلت دو ستون و در موبایل یک ستون داشته باشیم .

    برای حل این مشکل از کلاس های uk-width-small , uk-width-medium , uk-width-large استفاده می کنیم که به ترتیب مربوط به نمایشگرهای بزرگتر از 480px , 768px , 960px هستن . ویدیو آموزشی این دو قسمت رو حتما تماشا کنین .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

     

    قسمت سوم :

    در این قسمت هم به نحوه ایجاد ستون های تو در تو می پردازیم .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 5- بررسی Push , Pop , Center فریم ورک uikit

    3 دقیقه
  • اگر بخوایم المانی رو وسط صفحه یا یک المان دیگه قرار بدیم چه باید بکنیم؟ باید از کلاس uk-container-center استفاده کنیم .

    دو تا کلاس دیگه هم داریم که کمتر استفاده میشن . کلاس های uk-push و uk-pull هستن که برای جابجایی المان ها استفاده میشن و از خاصیت left برای این جابجایی استفاده میکنن .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 6- بررسی Dynamic Grid و filtering در فریم ورک uikit

    11 دقیقه
  • برای این که بتونیم ساختار masonry رو در سایتمون ایجاد کنیم ، باید از کتابخونه ای با همین نام استفاده می کردیم . ولی در فریم ورک uikit این ساختار با نام  Dynamic Grid وجود داره و احتیاج به هیچ کتابخونه ای هم نداره .

    برای استفاده از بحث Dynamic Grid فقط کافیه فایل اصلی فریم ورک uikit و grid رو داخل پروژه قرار بدیم و از کلاس های uk-grid-width-mediumuk-grid-width-larg و uk-grid-width-small استفاده کنیم . اون وقت میتونیم با دادن ارتفاع های دلخواهمون به ساختار مورد نظرمون دست پیدا کنیم .

    بحث دیگه ای که میخوایم خدمتتون بگیم ایجاد ساختار portfolio هست . برای این که بتونیم چنین ساختاری رو ایجاد کنیم از کتابخونه isotope استفاده می کردیم . حالا فریم ورک uikit این قابلیت رو به ما میده که ساختار portfolio رو با استفاده از بخش filtering ایجاد کنیم . برای این که به خوبی متوجه بحث بشین حتما ویدیوی آموزشی این قسمت رو تماشا کنین .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 7- بررسی Parallax Grid در UIKIT

    4 دقیقه
  • یکی از ویژگی های باحالی که در UIKIT پشتیبانی میشه بحث parallax grid هست . پیاده سازیش هم به راحتی آب خوردنه !؟

    مواد مورد نیاز برای پیاده سازی parallax بر روی المان های مورد نظرمون ، یک عدد فایل grid-parallax هست که باید داخل پروژه مون اضافه بشه و صفت data-uk-grid-parallax هست که باید ادخل کدهامون اضافه بشه . برای دیدن دستور پخت دقیق تر parallax ویدیوی آموزشی این قسمت رو با دقت تماشا کنین 😀

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 8- صفحه بندی یا pagination در UIKit

    9 دقیقه
  • تو این درس میخوایم صفحه بندی یا pagination در uikit رو خدمتتون بگیم . اولین کاری که میکنیم ، قرار دادن فایل pagination.js داخل پروژه و بعدش لینک کردن اون به کدهای پروژمون هست .

    اصلی ترین کلاس که برای ساخت صفحه بندی استفاده میشه uk-pagination هست . کلاسهای دیگه ای هم استفاده میشن که میتونین داخل فیلم آموزشی ابن قسمت ببینین .

    بعد از آموزش هسته صفحه بندی میریم سراغ component اون ، تا بتونیم یک صفحه بندی پویا ( dynamic pagination ) داشته باشیم . شما میتونین بر اساس طراحیتون pagination  رو سمت راست ، چپ و یا وسط صفحه قرار بدین . همچنین میتونین موارد دلخواه دیگه ای رو هم روی pagination اعمال کنین که توضیحات کاملش داخل فیلم آموزشی pagination در UIKit قابل مشاهده هست .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 9- ایجاد فرم در UIKIT بخش 1

    7 دقیقه
  • یه بخش خیلی مهم که در اغلب سایت ها هم وجود داره ، فرم هست . نحوه ایجاد فرم در UIKIT بسیار ساده هست . فقط کافیه فایل form-advanced رو داخل پروژه قرار بدین و اونو به پروژه لینک کنین . و بعد با استفاده از کلاس های مربوط به ساخت فرم ، فرم مورد نظرتون رو بسازین .
    کلاس اصلی برای ساخت فرم که ظاهر زیبایی به المان ها میده ، کلاس uk-form هست . کلاس های دیگه ای هم هستن که برای ساختن فرم دلخواهتون کمکتون میکنن . توصیه میکنیم حتما فیلم آموزشی این قسمت رو تماشا کنین .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10- بررسی Form advanced بخش 2

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 11- بررسی Progress

    3 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 12- بررسی modal بخش 1

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 13- بررسی modal بخش 2

    4 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 14- بررسی lightbox

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 15- بررسی کامپوننت اسلایدر

    8 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 16- بررسی کامپوننت Slideset

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 17- بررسی کامپوننت Slideset بخش 2

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 18- بررسی کامپوننت Slideshow بخش 1

    7 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 19- بررسی کامپوننت Slideshow بخش 2

    4 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 20- بررسی کامپوننت Parallax

    9 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 21- بررسی کامپوننت Accordion

    4 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 22- بررسی کامپوننت Notify

    7 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 23- بررسی کامپوننت Search

    3 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 24- بررسی کامپوننت Nestable

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 25- طراحی تم UIKit ( قسمت اول )

    10 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 26- طراحی تم UIKit ( قسمت دوم )

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 27- طراحی تم UIKit ( قسمت سوم )

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 28- طراحی تم UIKit ( قسمت چهارم )

    8 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 29- طراحی تم UIKit ( قسمت پنجم )

    6 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 30- طراحی تم UIKit ( قسمت ششم )

    3 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 31- طراحی تم UIKit ( قسمت هفتم)

    7 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 32- طراحی تم UIKit ( قسمت هشتم)

    7 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 33- طراحی تم UIKit ( قسمت نهم)

    5 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 34- طراحی تم UIKit ( قسمت دهم)

    6 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 35- طراحی تم UIKit ( قسمت آخر)

    8 دقیقه
  • برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

نظرات آموزش جامع فریم ورک UIKit از صفر

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما