Material Design | متریال دیزاین

متریال دیزاین سامانهٔ طراحی گوگل است که از سال ۲۰۱۴ برای یکدست‌کردن تجربه در اندروید، وب و محصولات دیجیتال گسترش یافت. ایدهٔ مرکزی الهام از مادهٔ فیزیکی است: سطوح، لایه‌ها، سایه، و حرکتی که علت و معلول را نشان می‌دهد تا رابط لمسی و دیداری حس قابل پیش‌بینی بگیرد. این سامانه قواعد تایپوگرافی، رنگ، فاصله، مؤلفه، و تعامل را طوری مدون می‌کند که تیم‌ها کمتر از صفر اختراع کنند و کاربر میان اپ‌ها کمتر گیج شود. متریال نه یک پوسته‌ٔ تزئینی، بلکه زبان مشترک طراحی و پیاده‌سازی است—با کتابخانه‌ها و مستنداتی که مسیر ساخت را کوتاه می‌کنند.

چرا گوگل به زبان بصری واحد نیاز داشت

پیش از متریال، اکوسیستم اندروید و سرویس‌های وب گوگل اغلب ناسازگار به نظر می‌رسیدند: دکمه‌ها، الگوهای ناوبری و عمق بصری هر محصول سلیقهٔ خود را داشت. هزینهٔ این پراکندگی را کاربر با یادگیری دوباره می‌پرداخت و تیم‌ها با بازکاری. متریال با ارائهٔ راهنمای جامع، انتظارات مشترک ساخت: کجا اقدام اصلی است، چگونه لایه باز می‌شود، و بازخورد لمسی چه حسی باید بدهد. محبوبیت بیرون از گوگل از همین کامل بودن آمد؛ بسیاری از سازمان‌ها به‌جای نوشتن سامانه از صفر، اسکلت آماده را گرفتند و برند خود را روی آن نشاندند.

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

ارتفاع، سطح و سلسله‌مراتب توجه

استعارهٔ ارتفاع یکی از امضاهای متریال است. سایه و لایه‌بندی نشان می‌دهند چه چیزی روی چه چیزی است، کدام سطح موقتاً اولویت دارد، و مدال یا منو از کجا آمده است. این عمق بصری سلسله‌مراتب را بدون شلوغی متن توضیح می‌دهد. استفادهٔ افراطی از سایه یا ارتفاع تصادفی همان استعاره را خراب می‌کند؛ ارتفاع باید معنای تعاملی داشته باشد نه تزئین پراکنده.

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

کتابخانهٔ مؤلفه و سرعت مهندسی

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

خطر این است که محصول «فقط شبیه اندروید» شود بدون آنکه نیاز برند یا زمینهٔ وب دسکتاپ را بسنجد. متریال نقطهٔ شروع قوی است؛ کپی کور بدون تنظیم چگالی، تایپوگرافی فارسی، یا الگوی ناوبری محصول شما می‌تواند تجربه را سنگین یا غریبه کند. انتخاب آگاهانهٔ زیرمجموعهٔ مؤلفه‌ها بهتر از وارد کردن تمام کیت به‌اجبار است.

حرکت به‌مثابه توضیح، نه زرق‌وبرق

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

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

دسترس‌پذیری توکار، نه پیوست انتهایی

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

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

تم برند روی اسکلت مشترک

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

نسخه‌های جدیدتر با توکن و تم پویا همین ایده را تقویت کرده‌اند: نقش معنایی ثابت، ظاهر قابل تنظیم. مهاجرت تدریجی بهتر از بازنویسی هیجانی است—به‌ویژه وقتی بدهی مؤلفه‌های قدیمی زیاد باشد. تصمیم محصول باید صریح باشد: کجا از استاندارد متریال منحرف می‌شویم و چرا.

هم‌مرزی با فاصله‌گذاری و با راهنماهای دیگر

متریال دیزاین سامانهٔ جامع گوگل برای ظاهر، مؤلفه و حرکت است. آن را با مفهوم حاشیه‌ها یا فاصله‌گذاری در چیدمان اشتباه نگیرید؛ margin فقط یکی از تصمیم‌های فضایی داخل هر سامانه است، نه جایگزین متریال. همچنین متریال رقیب یا مکمل Human Interface اپل است نه همان چیز: قراردادهای ناوبری، کنترل‌ها و زیبایی‌شناسی پلتفرم تفاوت دارند. انتخاب سامانه باید با پلتفرم هدف، دانش تیم، و نیاز برند هم‌خوان باشد؛ گاهی پایه متریال برای اندروید و وب، و انطباق جدا برای iOS منطقی‌تر از یک پوست اجباری همه‌جاست.

برای محصول‌منجر، متریال اهرم سرعت و کاهش تصمیم‌های تکراری است به شرط آنکه دامنهٔ سفارشی‌سازی کنترل شود. برای طراح، منبع الگو و ضدالگو است نه زندان. برای مهندسی، مجموعه‌ای از اجزای آزمایش‌شده است که باید با دسترس‌پذیری و عملکرد واقعی روی دستگاه میان‌رده سنجیده شود. وقتی تیم این قرارداد را بفهمد، بحث‌ها از سلیقهٔ سایه به ارزش کاربر و تمایز برند منتقل می‌شود. متریال ماندگار شد چون هم زبان مشترک داد هم راه سفارشی‌سازی؛ استفادهٔ بالغ یعنی بهره از هر دو بدون پرستش نسخهٔ پیش‌فرض و بدون شکستن بی‌دلیل عادت میلیون‌ها کاربر اندروید و وب که این زبان را درونی کرده‌اند. مستند داخلی شما باید بگوید کدام بخش متریال قانون تیم است و کدام بخش صرفاً پیشنهاد شروع—تا طراحی و کد در یک جهت بمانند و تجربه در طول زمان تکه‌تکه نشود.

آموزش کوتاه برای اعضای جدید دربارهٔ ارتفاع، نقش رنگ، و الگوی ناوبری انتخاب‌شده، هزینهٔ بازبینی‌های سلیقه‌ای را کم می‌کند. همان آموزش باید نشان دهد کجا متریال را عمداً ترک کرده‌اید تا برند زنده بماند. این شفافیت جلوی دو افراط را می‌گیرد: یکدست‌سازی بی‌روح، و هرج‌ومرج زیبا. در مجموع، متریال دیزاین زیرساخت تجربهٔ قابل پیش‌بینی است؛ موفقیت‌اش در محصول شما به انضباط به‌کارگیری وابسته است نه به صرف افزودن کتابخانه. تیمی که سامانه را می‌فهمد سریع‌تر می‌سازد، کاربر را کمتر غافلگیر می‌کند، و انرژی خلاق را صرف مسئله‌های خاص کسب‌وکار می‌کند نه اختراع دوبارهٔ دکمه.

سوالات متداول

سامانهٔ طراحی گوگل با قواعد ظاهر، مؤلفه، حرکت و تعامل برای ساخت تجربهٔ یکدست و قابل پیش‌بینی در اندروید، وب و محصولات دیجیتال.

برای کاهش ناسازگاری بصری و تعاملی میان محصولات گوگل و اکوسیستم اندروید و دادن زبان مشترک به طراح و توسعه‌دهنده.

حرکت باید پیوستگی و علت‌ومعلول را نشان دهد—مثلاً گسترش دکمه به نمای جدید—نه صرفاً تزئین طولانی و مزاحم.

بله. پالت، تایپ، شکل و تصویرسازی قابل تنظیم‌اند؛ بهتر است رفتار اصلی مؤلفه‌ها برای یکدستی و یادگیری کاربر حفظ شود.

متریال سامانهٔ کامل طراحی و مؤلفه است؛ حاشیه یا margin فقط تصمیم فاصله در چیدمان است و جایگزین این سامانه نیست.