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

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

اصول بنیادین متریال دیزاین
متریال را با سه مفهوم کلیدی بفهم: سطح، حرکت و معنا.

• سطح: هر المان در صفحه مثل یک ورق کاغذ در فضای سه بعدی رفتار می کند (Elevation و Shadow).

• حرکت: انیمیشن ها و ترنزیشن ها باید علت مند باشند؛ حرکت باید مسیر توجه را هدایت کند.

• معنا: رنگ، تایپوگرافی و فضا باید معنا و سلسله مراتب را منتقل کنند، نه فقط تزئین.

سیستم رنگ در متریال
متریال یک رویکرد ساختارمند برای رنگ دارد: پالت های اصلی، رنگ های تکمیلی و رنگ های سطحی (surface).

• رنگ اصلی (Primary) برای اکشن ها و عناصر مهم استفاده می شود.

• رنگ ثانویه (Secondary) برای تاکیدهای کمتر به کار می رود.

• رنگ های سطحی و پس زمینه باید کنتراست کافی با متن داشته باشند.
  قوانین دسترس پذیری (contrast ratio) را رعایت کن تا متن برای همه خوانا باشد.

تایپوگرافی در متریال
متریال توصیه به استفاده از مقیاس های رزولوشنی ثابت می کند: Display, Headline, Subtitle, Body, Caption.

• وزن ها و فاصله خطوط (line-height) باید معین باشند.

• بیشتر از دو خانواده فونت در یک پروژه استفاده نکن.
  تایپوگرافی در متریال برای انتقال سلسله مراتب اطلاعات ساخته شده — از آن به عنوان ابزار هدایت استفاده کن.

شبکه بندی و فاصله ها (Layout & Spacing)
متریال بر پایه ی یک سیستم Grid منظم است: ستون ها، گاترها و مارجین ها.

• برای موبایل معمولاً از 4 یا 6 ستون استفاده می شود، برای دسکتاپ 12 ستون.

• فاصله ها را با واحدهای ثابت (مثلاً 8px scale) تعریف کن تا طراحی یکنواخت بماند.
  شبکه باعث می شود که اندازه ها و نسبت ها در صفحات مختلف هماهنگ بمانند.

Elevation و سایه ها (Surface & Elevation)
یکی از امضای متریال، استفاده سیستماتیک از elevation است تا سلسله مراتب بصری شکل بگیرد.

• المان های مهم تر ارتفاع بیشتری دارند (سایه واضح تر).

• از سایه های مصنوعی بیش از حد یا رنگی استفاده نکن؛ سایه ها باید نرم و معقول باشند.
  Elevation نه فقط برای زیبایی، بلکه برای نشان دادن تعامل پذیری و ترتیب لایه هاست.

حرکت و انیمیشن (Motion)
در متریال حرکت معنی دار است: نشان دهنده ی اتصال بین وضعیت ها و هدایت کاربر.

• از انیمیشن های کوتاه (100–300ms) برای تغییرات رابط استفاده کن.

• هنگام باز/بستن مودال یا انتقال صفحه، از حرکت برای نشان دادن علت و اثر بهره ببر.
  حرکت باید توجیه پذیر باشد — حرکت بی مورد باعث حواس پرتی می شود.

اجزای متداول و کامپوننت ها
متریال مجموعه ای از کامپوننت های استاندارد دارد: App Bar، Floating Action Button، Cards، Bottom Navigation، Dialog، Text Field و غیره.

• از کامپوننت های استاندارد به عنوان پایه استفاده کن و فقط وقتی نیاز است آن ها را دستکاری کن.

• سیستم کامپوننت باعث سرعت در توسعه و همگونی UI می شود.

دسترسی پذیری (Accessibility)
متریال تاکید زیادی روی دسترس پذیری دارد: رنگ ها، اندازه متن، فاصله گذاری و کنترل های قابل دسترسی.

• همیشه رنگ ها را با ابزار بررسی Contrast چک کن.

• المان های قابل کلیک باید اندازه مناسبی داشته باشند (لمسی/موس).

• برای المان های تعاملی ARIA attributes را در وب در نظر بگیر.

چطور در Figma یا ابزار طراحی متریال را اجرا کنیم — مراحل عملی

1. یک فایل پایه بساز: Grid و Scale spacing را تنظیم کن (8px grid).

2. پالت رنگ و تایپوگرافی پروژه را تعریف کن (Tokens).

3. کامپوننت های پایه را بساز: Button, Card, Input, App Bar.

4. سیستم elevation را به صورت شفاف مستند کن (مثلاً elevation 0/1/2/4/8 با سایه مشخص).

5. نمونه صفحات: صفحه اصلی، صفحه محصول، فرم ورود. از کامپوننت ها استفاده کن تا ببینی چطور همگن می شوند.

6. Export tokens یا library برای توسعه دهنده ها تا از همان قواعد در کد استفاده شود.

تمرین های پیشنهادی (برای تقویت مهارت)

• تمرین 1: یک صفحه پروفایل ساده بساز که از App Bar، Card و Floating Action Button استفاده کند.

• تمرین 2: یک فرم ثبت نام با Text Fieldها و خطاهای معتبرسازی طراحی کن و حالات (focused, error, disabled) را مشخص کن.

• تمرین 3: یک نمونه انتقال صفحه با انیمیشن 200ms بساز که نشان دهد چگونه اطلاعات از یک کارت به صفحه جزئیات منتقل می شود.

خطاهای رایج در پیاده سازی متریال

• شکستن شبکه و استفاده از spacing تصادفی.

• استفاده از رنگ های نامناسب و عدم رعایت کنتراست.

• انیمیشن های طولانی یا زیاد که تجربه را کند می کنند.

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

منابع سریع برای مطالعه بیشتر

• مستندات رسمی Material Design (مطالعه مستقیم قواعد و الگوها)

• کتابخانه عناصر متریال در Figma (UI Kits)

• مقالات و مثال های پروژه های باز که متریال را پیاده کرده اند

چک لیست سریع قبل از انتشار یا تحویل پروژه

• آیا رنگ ها کنتراست کافی دارند؟

• آیا spacing با scale تعریف شده همخوانی دارد؟

• آیا تمام حالات المان ها (hover, focus, disabled, error) طراحی شده اند؟

• آیا کامپوننت ها مستندسازی و در لایبرری قرار گرفته اند؟

• آیا انیمیشن ها کوتاه و معنی دارند؟