منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۰ دقیقه

متریال دیزاین (Material Design) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

سایه در متریال دیزاین یک تزئین نیست؛ یک عدد است. و از همان لحظه‌ای که عمق به عدد تبدیل شد، یک سلیقهٔ بصری به یک سیستم تبدیل شد.

تعریف

متریال دیزاین یک سیستم طراحی رابط است که گوگل ساخته تا طراحان تجربه کاربری بتوانند تجربه‌های دیجیتالِ یکدست، شهودی و واکنش‌گرا بسازند.

و تاریخش روشن است: سال ۲۰۱۴ در کنفرانس Google I/O معرفی شد، با نام رمزِ اولیهٔ Quantum Paper.

ماتیاس دوآرته، معاون طراحی گوگل، هدفش را ساختن زبانی طراحی خوانده که حسِ قلم و کاغذ را تقلید می‌کند.

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

سه ستون

یک: استعارهٔ فیزیکی. سیستم از ارتفاع، نور، بافت و حرکت استفاده می‌کند تا رابط شبیه جهان واقعی رفتار کند. کارت‌ها مثل کاغذ رفتار می‌کنند و سایه‌ها سلسله‌مراتب می‌سازند.

دو: گرافیکِ جسور و عامدانه. رنگ‌های پرمایه، تایپوگرافی بزرگ، فضای سفیدِ معنادار، و سلسله‌مراتب بصری روشن.

و کلیدواژه اینجا «عامدانه» است. هیچ‌کدام از این‌ها تصادفی نیست.

سه: حرکت معنا می‌سازد. انیمیشن نرم و واکنش‌گرا، تغییرهای رابط را به هم وصل می‌کند و بافتِ ذهنی کاربر را حفظ می‌کند.

یعنی حرکت اینجا کارِ روایت را می‌کند، نه کارِ آذین را. و این همان مرزی است که ریزتعامل خوب را از انیمیشن اضافی جدا می‌کند.

محور z: سایه یک عدد است

متریال به سایه یک مؤلفهٔ سوم اضافه کرد. در کنار x و y، محور z هم آمد.

و قاعده‌اش یک خط است: هرچه مقدار z بزرگ‌تر باشد، سایه بزرگ‌تر می‌شود و آن جزء بالاتر از نماهای دیگر می‌نشیند.

نتیجه‌اش دو چیز است: سلسله‌مراتب بصری، و ادراک عمق.

و ارزش این تصمیم در اندازه‌پذیری‌اش است. عمق دیگر یک حسِ سلیقه‌ای نیست. یک مقدار است که می‌شود در سند نوشت و در کد گذاشت.

شبکه، نقطهٔ شکست، و کلاس اندازه

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

چیدمان‌ها روی یک شبکهٔ دوازده‌ستونی می‌نشینند.

و نقطه‌های شکست دو تا هستند: ۶۰۰ واحد برای تبلت و ۸۴۰ واحد برای دسکتاپ.

روی این‌ها سیستم کلاس‌های اندازهٔ پنجره را می‌گذارد: فشرده، میانه، و گسترده. این سه کلاس تعیین می‌کنند رابط در هر اندازه چه رفتاری داشته باشد.

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

رنگ: پنج نقش، و پالتی که کاربر می‌سازد

نسخهٔ سه پنج نقش رنگ تعریف می‌کند: اصلی، دومین، سومین، خنثی، و خنثی متغیر.

و یک تغییر مهم هم داد: لایه‌های شفافیت جایشان را به هفت سطحِ مبتنی بر تون دادند، تا عمق در همهٔ صفحه‌ها یکدست باشد.

ولی ویژگی تازه‌تر، سامانهٔ رنگ پویا است. سیستم یک پالت هماهنگ را از دیوارکاغذی کاربر بیرون می‌کشد و در کل رابط اعمال می‌کند.

و این یک جابه‌جایی بنیادی در مالکیت تصمیم است. رنگِ رابط دیگر در فایل طراحی انتخاب نمی‌شود؛ روی دستگاه ساخته می‌شود. همین منطق است که حالت تاریک را هم از یک تم دوم به یک محاسبه تبدیل کرد.

تایپوگرافی و اجزای آماده

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

قلم پیشنهادی Roboto برای اندروید و Noto برای کار چندزبانه است. جانشین‌کردن قلم برند مجاز است، به شرطی که مقیاس دست‌نخورده بماند.

و رهنمودها روی دو چیز پافشاری می‌کنند: ارتفاع سطر یکدست، و فاصلهٔ حروف یکدست.

در سمت اجزا، سیستم آماده تحویل می‌دهد: کارت و دکمهٔ شناور، فهرست و گفت‌وگو، چیدمان واکنش‌گرا، حرکت و بازخورد لمسیِ درون‌ساخت، و کتابخانهٔ برداری آیکن.

چهار نسخه در یازده سال

۲۰۱۴ — کاغذ و سایه. نسخهٔ اول کارت و ارتفاع و سایه را آورد، با تأکید بر شفافیت و یکدستی و پیش‌بینی‌پذیری.

۲۰۱۸ — انعطاف شکل و رنگ. نسخهٔ دو آزادی بیشتری در رنگ و تایپوگرافی و شکل داد. ابزار تم‌ساز هم آمد تا سفارشی‌سازی عمیق ممکن شود.

و انگیزه‌اش صریح بود: اپ‌های ساخته‌شده با متریال بیش از حد شبیه هم شده بودند.

۲۰۲۱ — رنگ پویا. متریال یو و نسخهٔ سه شخصی‌سازی را آوردند: رنگ پویا، الگوهای چیدمان واکنش‌گرا، و اصول حرکتی که با دستگاه‌های مختلف سازگار می‌شوند.

۲۰۲۵ — حرکت فنری. نسخهٔ رسا انیمیشن‌هایی آورد که می‌جهند، کشیده می‌شوند، و طبیعی‌تر به لمس پاسخ می‌دهند.

و پشتش عدد هم هست: ۴۶ پژوهش کاربری با بیش از ۱۸ هزار شرکت‌کننده، که در آن کاربران اجزای کلیدی رابط را تا چهار برابر سریع‌تر تشخیص دادند.

دسترس‌پذیری: چه چیزی آماده است

بخشی از کار دسترس‌پذیری در خودِ سیستم انجام شده:

• - تم‌های کنتراست‌بالا که خودکار تولید می‌شوند.
• - تایپوگرافی مقیاس‌پذیر، که با تنظیم اندازهٔ متنِ دستگاه بزرگ می‌شود.
• - پشتیبانی کیبورد و صفحه‌خوان در اجزای آماده.
• - گزینهٔ کاهش حرکت برای کاربرانی که انیمیشن آزارشان می‌دهد.
• - و برچسب‌های معنایی و رنگ‌هایی که با نیاز کاربران کم‌بینا سازگار می‌شوند.

اما یک هشدار جدی هم هست: این ویژگی‌های خودکار، انطباق را تضمین نمی‌کنند.

خروجی هر تم باید در برابر استاندارد WCAG سنجیده شود و با کاربر واقعی آزموده شود. بازرسی دسترس‌پذیری جای این کار است.

محدودیت‌ها

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

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

این بخش افزودهٔ من است، چون استعارهٔ کاغذ در همه‌جا به‌عنوان ستون معرفی می‌شود و هزینه‌اش کمتر باز می‌شود.

قوت یک استعاره را با چیزی می‌سنجند که ممنوع می‌کند، نه با چیزی که اجازه می‌دهد.

و کاغذ محدودیت‌های روشنی دارد. از خودش نور نمی‌دهد. از دو طرف دیده نمی‌شود. درون خودش عمق ندارد و لبه‌اش را نمی‌شکند.

تا وقتی هر جزء تازه با پرسش «کاغذ اینجا چه می‌کند؟» طراحی می‌شود، سیستم منسجم می‌ماند.

و مشکل از جایی شروع می‌شود که پاسخ آن پرسش «هیچ» است. آن‌وقت سیستم به جدول توکن پناه می‌برد.

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

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

و نشانهٔ خرابی هم روشن است: صفحه‌ای که در آن همه‌چیز سایه دارد. سایه‌ای که همه دارند، هیچ ترتیبی نمی‌سازد.

هزینهٔ واقعی سفارشی‌سازی، نگهداری است

این هم افزودهٔ من است، چون «خطر ظاهر یکنواخت» معمولاً یک هشدار زیبایی‌شناختی خوانده می‌شود و در عمل یک تصمیم مهندسی است.

انتخاب میان «شبیه بقیه بودن» و «کاملاً برند خودمان بودن» یک انتخاب سلیقه‌ای نیست.

هر واگرایی از پیش‌فرض، یک شاخه است که در هر نسخهٔ سیستم باید دوباره ادغام شود.

پس ترتیب تصمیم مهم‌تر از اندازه‌اش است. اول توکن، بعد شکل، و در آخر رفتار جزء.

بازنویسی توکنِ رنگ و شکل ارزان است، چون سیستم از قبل برایش جا گذاشته است.

بازنویسی رفتار یک جزء گران است، چون همان رفتار در نسخهٔ بعد عوض می‌شود و کار شما دوباره می‌شکند.

و یک کار ساده این هزینه را قابل دیدن می‌کند: فهرستی از هر واگرایی، با دلیلش و با نام کسی که پاسخگوی آن است.

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

در بافت فارسی

یک: فاصلهٔ حروف، فارسی را از هم می‌پاشد. مقیاس تایپ متریال با فاصلهٔ حروف و ارتفاع سطرِ لاتین تنظیم شده است.

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

دو: آینه‌کردن، اجزا را جابه‌جا می‌کند نه نور را. کشوی ناوبری، دکمهٔ شناور و فلش بازگشت باید قرینه شوند.

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

سه: گوشی میان‌رده، بودجهٔ حرکت کم دارد. سهم بزرگی از کاربران ایرانی روی اندرویدهای میان‌رده و چندسال‌گذشته‌اند.

حرکت فنری و بازخورد لمسی روی این دستگاه‌ها فریم می‌اندازد. پس حالت جانشینِ کم‌حرکت را از روز اول بسازید، نه بعد از اولین شکایت.

چهار: رنگ پویا با هویت برند ایرانی جمع نمی‌شود. محصولات این بازار با یک رنگ شناخته می‌شوند و راحت از آن نمی‌گذرند.

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

جمع‌بندی

• - متریال دیزاین: سیستم طراحی رابطِ گوگل، معرفی‌شده در ۲۰۱۴ با نام رمز Quantum Paper
• - هدف اعلامی: زبانی که حسِ قلم و کاغذ را تقلید کند
• - سه ستون: استعارهٔ فیزیکی · گرافیکِ جسور و عامدانه · حرکتی که معنا می‌سازد
• - محور z: هرچه ارتفاع بیشتر، سایه بزرگ‌تر و جزء بالاتر — عمق به عدد تبدیل می‌شود
• - چیدمان: خط پایهٔ ۴ واحد · شبکهٔ دوازده‌ستونی · نقطهٔ شکست ۶۰۰ و ۸۴۰ · کلاس‌های فشرده و میانه و گسترده
• - رنگ: پنج نقش · هفت سطح مبتنی بر تون · و رنگ پویا از دیوارکاغذی کاربر
• - تایپ: پنج سطح در سه اندازه · قلم برند مجاز است اگر مقیاس بماند
• - چهار نسخه: ۲۰۱۴ کاغذ · ۲۰۱۸ انعطاف · ۲۰۲۱ رنگ پویا · ۲۰۲۵ حرکت فنری
• - محدودیت‌ها: حرکت افراطی · ظاهر یکنواخت · هزینهٔ کارایی · نیاز به اعتبارسنجی دسترس‌پذیری · و کیفیت پیاده‌سازی
• - استعاره جایی می‌شکند که نتوانید بگویید عنصر چه چیزِ فیزیکی است — و سایه‌ای که همه دارند، ترتیبی نمی‌سازد
• - سفارشی‌سازی را از توکن شروع کنید، نه از رفتار جزء · و فهرست واگرایی‌ها را بنویسید
• - و در فارسی: فاصلهٔ حروف را صفر کنید · سایه را قرینه نکنید · حالت کم‌حرکت بسازید · و رنگ برند را روی کنشِ اصلی نگه دارید