متریال دیزاین در طراحی سایت و نرم افزار موبایل

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

متریال دیزاین

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

شرکت گوگل در سال ۲۰۱۴ سبکی جالب از طراحی را معرفی کرد که اساسا به عمق رنگ ها و سایه ها و انیمیشن ها توجه می کرد. استدلال گوگل این بود: به محیط اطراف خود نگاه کنید. چه می بینید ( چه متریال هایی می بینید ) ؟ درختی را متصور شوید که سر سبز است و نسیمی به آن برخورد می کند. نتیجه های گرافیکی: ۱ – رنگ ها: رنگ ها یک طیف بلندی از سبز را در بر میگیرند که در یک بک گراند از محیط و یک تنه با طیف رنگ قهوه ای را شامل می شود. ۲- عمق: بدیهی است که این درخت ۳ بعدی است و قطعا سایه هایی بر پشت و روی برگ ها و همچنین تنه درخت بر بک گراند قابل مشاهده است. ۳- انیمیشن: بادی که می وزد باعث تکان خوردن برگ ها می شود و این خود به جذابیت محیط می افزاید و باید توجه داشت که تاثیر باد بر روی برگ ها بیش از تنه درخت است.
حال چرا نباید این سه مولفه را در طراحی های خود لحاظ کنیم؟ طراحی سایت ، طراحی اپلیکیشن موبایل ، طرح های گرافیکی و بنر همه و همه می توانند عمق و سایه و طیف رنگی داشته باشند. اگر شما با طراحی فلت و تخت در طراحی سایت آشنا هستید می توانید با افزودن عمق و سایه و همچنین انیمیشن های لایه بندی شده (زیرا که تنه درخت در باد کمتر از برگ ها تکان میخورند) به طراحی خود حقیقتی دوباره ببخشید و تاثیر کار خود را ملموس تر احساس کنید.

ابزار های متریال دیزاین در طراحی سایت

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

ابزار های متریال دیزاین در طراحی نرم افزار موبایل

علاوه بر طراحی سایت در زمینه طراحی نرم افزار موبایل می توان هم به ابزار های ارائه شده توسط گوگل تکیه کرد و همچنین از توسعه ها و کتابخانه های حرفه ای و زیبای دست اندرکاران طراحی نرم افزار موبایل استفاده نمود. از جمله ابزار های گوگل می توان به مجموعه کتابخانه های Android Design Support Library اشاره کرد که این مجموعه ابزار عظیم در این رابطه است. این کتابخانه ها و همچنین کتابخانه های توسعه دهندگان آزاد را می توانید از سایت GitHub دانلود کنید. برای استفاده راحت از ابزار های متریال در نرم افزارهای موبایل اندرویدی می توانید از نرم افراز اندروید استدیو استفاده کنید که از اینجا می توانید آن را دریافت نمایید.

به این بحث بپیوندید / 27 نظر

  • بنفشه می‌گه:

    سلام ایا این موضوع ب سال ۲۰۱۴ برمیگرده یا قبلا طراحان سایت برای طراحی سایت از این موضوع استفاده میکردند؟

  • علیرضا محمدپور می‌گه:

    سلام
    ممنون بابت اطلاعات مفیدی که در اختیار ما گذاشتید،
    با توجه به اینکه ذکر کردید علاوه بر سایت هایی که بر این مبنا طراحی شدند،
    نرم افزار موبایل های گوگوناگونم علاوه بر طراحی سایت ایجاد شده اند…سوال بنده اینه که آیا نرم افزار موبایل هایی نظیر تلگرام بر سبک متریال دیزاین طراحی شده اند؟
    و اینکه چه مزایای کاربردی دارد که گوگل برای طراحی سایت و نرم افزار موبایل به آن توصیه کرده است؟

  • علیرضا می‌گه:

    خیلی مطلب جالبی بود ممنون بابت سایت خوبتان

  • admin می‌گه:

    با درود و احترام
    بله تلگرام هم از اصول متریال پیروی کرده
    هدف طراحی متریال ملموس کردن گرافیک برای کاربر هست
    اگر طرااح نرم افزار موبایل هستید مثلا موردی به نام pull to refresh رو تو لیست ها دیدید
    حال وقتی شما در دنیایی واقعی یه چیزیو میکشید اون جسم اگر مثل آدامس باشه کش میاد
    پس در متریال دیزاینم همین کارو میکنیم و با کشیدن، اکشن بار کش میاد و قضیه ملموستر میشه
    مزیت متریال ارتباط بیشتر کاربر با نرم افزار شماست.

  • admin می‌گه:

    با درود و احترام
    مسئله متریال دیزاین از قبل بوده و فقط گوگل به اون بیشتر و به صورت مستند پرداخته و اسم هم رو اون گذاشته
    فقط همین
    وگر نه مثلا طراحی فلت و تخت از قبل بوده و برای ارتباط بهتر با کاربر تخت طراحی میشدن سایتا
    و گوگل تو این زمینه ۲ تا کار مهم انجام داده. ۱ اینکه بطور مستند و با ساختار بهبود یافته ادائه داد و ۲ اینکه
    برای راحتر شدن کار برای طراحان کتابخانه های وبی و اپلیکیشنی رو توسعه داد و ارائه کرد.

  • نفیسه می‌گه:

    لطفا اگر امکانش هست یک نمونه ساده از نمونه کدهای مربوط به متریال دیزاین که در طراحی سایت استفاده شده را بیاورید

  • بنفشه می‌گه:

    در طراحی نرم افزار موبایل می توانید یک نمومه معرفی کنید که از متریال دیزاین در طراحی کمک گرفته باشد یا لینک دانلودش را اینجا بزارید دیدن نمونه عملی در درک این مبحث فک کنم کمکمون کنه با تشکر

  • صادق می‌گه:

    سلام ui به منظور متحرک سازی در طراحی سایت در همه زبانهای برنامه نویسی استفاده می شوند؟

  • admin می‌گه:

    با درود و احترام

    اول اینکه متریال دیزاین ملموس کننده است نه متحرک کننده (شاید متحرک سازی باعث ملموس شدن بشه و شاید نشه) و دوم اینکه متریال یک مفهوم گرافیکیه و ربطی به زبان برنامه نویسی نداره

  • محمدرضا می‌گه:

    این لینکایی ک گذاشتید غیرفعالن
    البته منظورم لینک مربوط به یو ای میباشد

  • اکبر می‌گه:

    چرا جواب سوالهای منو راجع به طراحی سایت نمیدهید آخه

  • admin می‌گه:

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

  • علی می‌گه:

    بسیار شفاف توضیح دادید ممنونم. واقعا برام جای سوال بود این متریال دیزاین. مرسی

  • محبوب می‌گه:

    ممنون بابت این آموزش

  • قادر می‌گه:

    با سلام و خسته نباشید
    ادمین جان میشه سورس متریال دیزاین هارو هم بذارید؟
    با تشکر

  • admin می‌گه:

    با درود و احترام

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

  • شیدا می‌گه:

    سلام
    برای طراحی نرم افزار موبایل برای اندروید کد نویسی اون چه قدر طول میکشه ؟

  • سیاوش پورمهر می‌گه:

    سلام.چرا بعضی از اپلیکیشن های موبایل دیتا دارن ؟؟

  • ستاره می‌گه:

    سلام خسته نباشید
    ایا نرم افزار موبایلی که تولید میکنید برای مشتری، خودتون میذاریدش تو برنامه هایی مثل بازار ؟؟؟

  • علیرضا می‌گه:

    لطفا مطالبا ادامه دهید من میخاستم با این اموزشا طراحی نرم افزار موبایل را یاد بگیریم

  • reza می‌گه:

    تشکر از سایت بسیار خوبتون

  • maryam می‌گه:

    سلام
    ممنونم از مطالب خوب و مفیدتون…اگه ممکنه راجب ابزارهای برنامه نویسی اندروید و ای او اس مطلب بذارید

  • مجتبی حداد می‌گه:

    سلام بسیار سایت عالی و حرفه ای دارین
    موفق باشین

  • سید علی می‌گه:

    سللم با تشکر از توضیحات جامع و بسیار کاربردی شما ‘؛

  • alaaaaam می‌گه:

    Haziye tarahi sait vase disain arashgah chegbad has hodadn

  • مرجان می‌گه:

    نمونه کارهای نرم افزار موبایل تونم داخل سایت بذارید باتشکر

  • کامرانی می‌گه:

    با سلام من یک پزشک هستم و میخواستم نرم افزار موبایل طراحی کنم اگه ممکنه نیازسنجی مشاغل مختلف رو هم داخل سایت تون بذارید

نظر خود را بیان کنید