طراحی سایت متریال با فریم ورک متریال چیست؟ چه مزایایی برای ما دارد؟
یکی از مهمترین بخش های طراحی سایت در عصر حاضر استفاده از فریم ورک متناسب با کار می باشد. فریم ورک در صورت کلی به بسته ی از پیش ایجاد شده گفته می شود که برای طراحی از کد های خاصی استفاده کرده و حالت کاربری یکسانی را برای ما ایجاد می کند. فریم ورک های معروفی در حال حاضر وجود دارند. از جمله معروف ترین آن ها بوت استرپ می باشد. طراحی سایت به صورت بوت استرپ قابلیت های زیادی به سایت اضافه می کتد. مهمترین ویژگی فریم ورک های طراحی به صورت موبایل فرست و یا ریسپانسیو می باشد. با استفاده از فریم ورک ها به راحتی می توان طراحی ریسپانسیو را انجام داد. اما با یک سرچ ، می توانید فریم ورک های مختلفی را پیدا نمایید که هر کدام ویژگی های خود را دارند. یکی از طراحی هایی که جدیدا در برنامه های موبایل پیاده سازی می شود، طراحی متریال گوگل می باشد. این طراحی حالا پا به طراحی سایت گذاشته است و فریم ورک طراحی متریال سایت ها نیز منتشر شده است. برای بررسی فریم ورک متریال و طراحی سایت متریال با ایران وبر همراه باشید.
یکی از مهمترین بخش ها در گام اول طراحی مشخص کردن هدف است. شما با مشخص کردن هدف از طراحی به راحتی می توانید فریم ورک مورد نظر خود را انتخاب کنید. در این بین بسیاری بین فریم ورک های مختلف قیاس هایی را انجام می دهند اما در حالت در صورتی که هر فریم ورکی را برای طراحی سایت بشناسید و بتوانید بهترین استفاده را از آن انجام دهید، آن فریم ورک بهترین فریم ورک برای شما خواهد بود.
البته نباید بعضی موارد و تفاوت های بین فریم ورک ها را نادیده گرفت. یکی از بخش های متفاوت سرعت بارگذاری است که بعضی از فریم ورک ها زمان بیشتری برای لود سایت نیاز دارند.
فریم ورک تازه معرفی شده ی متریال، توسط گوگل طراحی شده است. این فریم ورک با طراحی فلت اجزا مختلف ظاهری مدرن را به سایت می بخشد.
طراحی سایت متریال و اصول کاری آن
هر فریم ورک بر اصولی پایه گذاری می شود و اصول کاری سایت با فریم ورک متریال و یک طراحی متریال، استفاد از گرافیک فلت می باشد. اما باید در یک کلام گفت که به غیر از این حالت تفاوت خاصی با بوت استرپ نمی توان دید. البته شاید بگویید که کد نویسی های خاص متفاوتی دارد ! البته که این موضوع وجود دارد اما در حالت کلی و در یک جمع بندی می توان گفت که طراحی سایت متریال فقط به المان های متریال آن شناخته می شود.
حال بعضی از بخش های آن را با هم بررسی می کنیم:
در هر فریم ورک طراحی سایت بخش های متفاوتی وجود دارد. از جمله مهمتری بخش ها می توان به موارد زیر اشاره کرد:
بخش CSS
بخش javascript
بخش components
این سه بخش از مهمتری بخش های هر فریم ورک هستند. برای بررسی فریم ورک متریال نیز این سه بخش را به ترتیب بررسی می کنیم.
بخش CSS در فریم ورک متریال
بخش های css برای طراحی از قرار زیر می باشند:
color
Grid
Helpers
Media
Sass
Shadow
table
typography
color
شما در طراحی با فریم ورک متریال می توانید از رنگ های از پیش تعیین شده ای استفاده کنید. در این طراحی با انتخاب یک رنگ از رنگ های این فریم ورک و وارد کردن کلاس ان ها در هر قسمت می توانید آن رنگ را مشاهده کنید.
شما می توانید برای استفاده از رنگ های استاندارد طراحی فلت از این رنگ ها استفاده کنید.
Grid
گرید بندی طراحی متریال نیز مانند گرید بندی بوت استرپ است. این گرید بندی 12 تایی می باشد و شما می توانید از کلاس های خاص این گرید بندی استفاده کنید. در این روش نیز کلاس های خاص خود فریم ورک وجود دارد که مانند بوت استرپ می باشد. برای مثال اگر شما در بوت استرپ از col-md-6 استفاده می کردید در این فریم ورک باید از به این صورت کلاس بدهید: col m6
در تصویر زیر نمونه کد های موجود را مشاهده می کنید.
Helpers
در این بخش نیز یک سری سی اس اس هایی وجود دارد که برای طراحی مفید می باشند. از جمله ی آن کلاس هایی برای پنهان کردن معرفی شده اند.
Media
در بخش مدیا کلاس هایی برای ریسپانسیو کردن عکس و ویدئو بیان شده است. در این کلاس ها ویدئو ها و تصاویر برای طراحی موبایل بهینه می شوند. البته در این کلاس های یه کلاس جالب به نام circle دیده می شود. در این کلاس تصویر شما به صورت دایره ای تغییر شمایل میدهد.
Sass
اگر شما از ورژن Sass فریم ورک متریال استفاده کنید می توانید تغییرات خاصی بر روی فریم ورک ایجاد کنید و انچه باب طبع خود است را در آن پیاده کنید.
Shadow
کلاس جالبی که در طراحی متریال دیده می شود، کلاس z-depth می باشد. شما به راحتی با این کلاس می توانید به باکس خود سایه بدهید. این درجه بندی بین 1 تا 5 می باشد. یعنی شما برای این که سایه ی ملایمی بزنید می توانید z-depth-1 استفاده کنید یا سایه ی بیشتری را در طراحی با کد z-depth-5 استفاده نمایید.
table
در این بخش روش های مختلف ایجاد نمودن جداول در فریم ورک متریال را نشان می دهد. یکی از ویژگی های جالب این فریم ورک در نمایش دادن جداول می باشد. شما با اسفاده از جدول ریسپانسیو یک جدول کامل و با اسکرول افقی را می توانید به مخاطبان خود عرضه کنید.
در شکل مقابل این قابلیت را می بینید.
typography
تایپوگرافی نیز به نوشتن مطالب مربوط می شود و استایل های مناسب آماده ای تدارک دیده شده است. که این بخش چیز خاصی برای توضیح ندارد.
بخش جاوا اسکریپت فریم ورک متریال
بخش جاوا اسکریپت متریال از بخش های زیر تشکیل شده است.
Collapsible
Dialogs
Media
Modals
Parallax
Pushpin
ScrollFire
Scrollspy
SideNav
Tabs
Transitions
Waves
Collapsible
این بخش کلاس هایی را برای باز و بسته شدن باکس ها معرفی می کند.به صورت خلاصه در تصویر می توانید آن چه را که با این روش می توانید به کار ببرید را ببنید.
Dialogs
یکی از قابلیت های جالب در طراحی متریال این است که شما می توانید از قابلیت Dialogs استفاده کنید. با استفاده از این قابلیت می توانید یه هشدا یا پیامی را به روی صفحه نمایشگر کاربر نشان دهید و این پیام پس از چند ثانیه ناپدید می شود و یا در موبایل می توانید با کشیدن این پیام به کنار ان را ناپدید کنید.
برای این کار نمونه کد زیر در سایت سازنده وجود دارد:
<a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Toast!</a>
آنچه شما با این کد خواهید دید به صورت زیر خواهد بود:
Media
در بخش جاوا اسکریپت نیز بخشی برای مدیا وجود دارد. در این بخش می توانید کلاسی برای تصاویر ایجاد کنید که با کلیک بر روی تصاویر، انها به صورت یک باکس باز شوند و بقیه صفحه تیره شود.
Parallax
قابلیت پارالکس نیز جز قابلیت هایی است که از همان ابتدا در این فریم ورک قرار گرفته است.
بخش های دیگر جاوا اسکریپت را خودتان با تماشا کردن نمونه ها می توانید تفاوت و روش کار آن را به خوبی بفهمید.
بخش components
بخش کامپوننت های فریم ورک متریال یک از بخش هایی است که قابلیت متفاوت دیگری را به سایت شما اضافه می کند.
Chips – دکمه های کلیکی
Collections – مجموعه ها
Footer – فوتر
Forms – فرم ها
Icons – آیکو ها
Navbar – منو
Badges – مدالها
Buttons – دکمه ها
Breadcrumbs – نشانگر صفحات
Cards – بلاک ها
Pagination – صفحه بندی
این بخش ها را در آینده به صورت مفصل بررسی خواهیم کرد. با ایران وبر همراه باشید.
دیدگاه ها