متریال دیزاین زبان طراحی است که برای سیستم عامل اندروید ایجاد شده و در تابستان ۲۰۱۴ به عموم معرفی شد . اگرچه تمرکز این زبان روی برنامه های صفحه نمایش های لمسی می باشد اما به سادگی میتوان مفاهیم آن را به طراحی وب سایت ها نیز سرایت داد . متریال دیزاین در سایت خود document نسبتا کاملی ارائه داده اما به نظر بعضی قسمت های آن بسیار گنگ است . بنابراین فکر کردم بهتر است این مقاله را بنویسم تا توضیحات کاملی در مورد اهداف متریال دیزاین و تاثیر آن بر روی پروسه طراحی رابط کاربری ارائه کنم .

Material Design دقیقا چیست ؟

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

اما material موجود در رابط کاربری دیجیتال (مانند اشکال ، پاراگراف ها ، دکمه ها و … ) از جنس material فیزیکی و واقعی نیستند . Google Material Design فرض را بر این قرار داده که هر material نوعی fabric (ترکیب) همگن است که از تعدادی پیکسل تشکیل شده . کاربر میتواند بر روی این fabric ها ضربه بزند (tap) ، آنها را به سمتی بکشاند (swipe) و یا آنها را بزرگ و کوچک کند (pinch) و بر اساس عمل کاربر ، این material عکس العمل مناسب نشان خواهد داد .

رابط های کاربری موبایل بر اساس آبجکت های لایه ای ایجاد شده اند مانند ستون های مستطیلی و یا دکمه های دایره ای . محتوا ها ( متن ، تصویر ، ویدئو ) بصورت تخت بر روی این آبجکت ها قرار می گیرند .

گیج شدید ؟ خوب پس بیایید چند تا مثال دیگر را بررسی کنیم شاید موضوع کمی روشنتر شود . هر قسمت از material به عنوان یک آبجکت جداگانه در دنیای دیجیتال فرض می شود . بنابراین یک app با رنگ پس زمینه سفید در حقیقت از یک تکه سفید رنگ از material که تمام صفحه را پوشانده استفاده کرده است . یک نوار ناوبری (navbar) آبی رنگ که در قسمت بالا قرار دارد از قسمت دیگری از material استفاده کرده . بنابراین کاربر طوری با تکه های جداگانه material در ارتباط است که انگار آنها اشیاء فیزیکی واقعی هستند .

Material design اهداف این فعل و انفعال کاربر و app را پوشش می دهد . حرکت ، عمق ، اصول نور و رنگ ، سلسله مراتب ارائه اطلاعات و … تحت پوشش مستندات متریال دیزاین هستند . به دلیل اینکه کل مبحث Material design بسیار نوپاست انتظار دارم که آپدیت های زیادی از طرف گوگل بصورت مستمر برای آن ارائه شود .

نکته مهمی که باید همیشه مدنظر داشته باشید اینست که Material Design یک زبان است نه فقط یک کیت رابط کاربری (UI kit) یا مجموعه ای از المان های کاربری . در حقیقت متریال دیزاین نگرشی نو در ارتباط با رابط های کاربری است .

Material Surfaces

همه material object ها با استفاده از واحد “مقدار پیکسل مستقل دستگاه” یا dp اندازه گیری می شوند . این واحد اندازه گیری یک یکای فیزیکی است که می تواند بر اساس سایز صفحه نمایش دستگاه (device screen size) به اینچ یا میلیمتر تبدیل شود . با استفاده از این واحد طراحان می توانند رابط های کاربری طراحی کنند که فارغ از اندازه صفحه نمایش باشند .

متریال دیزاین برای اندازه گیری عرض ، ارتفاع و عمق material از واحد dp استفاده می کند . به دلیل اینکه متریال دیزاین بر اساس دنیای حقیقی بنا شده ، دارای ۳ محور مختصات X , Y و Z است

تصویر بالا مربوط به صفحه Google spatial page در مستندات متریال دیزاین است . لایه لایه کردن متریال آبجکت ها حسی مانند حس عمق در دنیای واقعی را شبیه سازی می کند . اما محتواها بصورت تخت بر روی material قرار می گیرند . این را مقایسه کنید با نحوه قرارگیری تتو روی پوست و یا ریختن جوهر بر روی صفحه کاغذ.

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

در قسمت اول این مقاله به معرفی Google Material Design پرداختیم و چند مفهوم پایه را معرفی کردیم ، در قسمت دوم به سراغ محتوا ، انیمیشن ، حرکت و آیکن ها می رویم .

وضعیت محتوا

محتوا بیشترین علتی است که کاربران را به دنبال کردن پروژه فوق العاده شما ترغیب می کند . app ها و وب سایت ها با material ساخته می شوند اما بدون محتوا ، آنها یک سری متریال خالی رها شده هستند . مردم از اَپ ها و وب سایت ها برای چک کردن ضعیت آب و هوا ، دیدن عکس ، خواندن اخبار یا وقت گذرانی در شبکه های اجتماعی استفاده می کنند . محتوا چیزیست که در وب سایت و اپ شما ایجاد تعامل می کند .

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

فلسفه اصلی و اولیه material design بر اساس تعامل کاربر با صفحات موبایل بنا شده ، اما به سادگی می توان آن را به کار با ماوس هم تعمیم داد. به دلیل اینکه app های لمسی بیشتر فیزیکی هستند ، طراحی جزییات آنها نیاز به دقت بیشتری دارند . برای اینکه مثال هایی از ترکیب محتوا با رابط کاربری ببینید نگاهی به Material design components بیاندازید .

حرکت و انیمیشن

از زمان محبوبیت اولین آیفونی که استیو جابز کبیر معرفی کرد ، برنامه های موبایل از “حرکت” سود برده اند . امروزه پیشرفت تکنولوژی به جایی رسیده که امکان ایجاد حرکت را به منو ها ، دکمه ها ، پنجره های تعاملی (windows modal) و حتی آیکون ها داده است . امروزه بحث بر سر امکان استفاده از حرکت نیست بلکه تمام حرف ما ضروری بودن آن است .

متریال دیزاین تمرکز فوق العاده ای بر روی حرکت دارد . در این زبان حرکت ، به عنوان یک مکانیزم واکنشی به تعامل کاربر در نظر گرفته شده که میتواند واقعیت را تداعی کند .

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

تصویر بالا مربوط به یک Dribbble shot است که توسط احسان رحیمی ساخته شده . این حرکت یک مثال زیبا از استفاده مبهم (obscure) از حرکت است . در دنیای واقعی دیده نمی شود که یک دکمه بزرگ شود و تبدیل به یک صفحه جدید آلارم شود (البته تا الان دیده نشده !!!) اما در دنیای دیجیتال زدن یک دکمه برای ایجاد یک آلارم جدید منطقی است . هنگامی که مفاهیم اولیه حرکت را پشت سر بگذارید می توانید از چنین ایده هایی برای افزایش تجربه مثبت کاربری (user experience) بهره ببرید .

Google magic material چند تا تنظیم اولیه و ابتدایی دارد که می تواند افکت هایی مانند کشیدن (stretching) ، ادغام شدن (merging) ، جدا شدن (dividing) و ایجاد شدن (regenerating) را با آن بوجود آورد . آبجکت ها احتمالا از همان ماده اولیه سازنده “باب اسفنجی” بوجود آمده اند !!! حس خوبی بوجود می آید وقتی که material بر اساس عمل کاربر می تواند به هر سمتی حرکت کند .

آیکن های رابط (interface Icons)

آخرین مبحثی که میخواهم در این مقاله به آن بپردازم استفاده از آیکن هاست . آیکن های مسطح همچنان در این زبان متداول است و در این زمینه تفاوتی بوجود نیامده . هنگامی که آیکن های خود را می سازید ، مهمترین نکته ای که باید در نظر داشته باشد “ثبات” (consistency) است .

در اینجا باید یادآور شوم که من در مورد آیکن های محصولات (product icons) حرف نمیزنم (این آیکن ها app icon هم نامیده میشوند ) . آیکن های محصولات همان هایی هستند که اولین بار که اپلیکیشن را اجرا می کنید در صفحه ابتدایی (home screen) آنها را می بینید . خیلی از متدهای طراحی product icon ها ، هنگام طراحی رابط کاربری بی استفاده هستند .

آیکن های رابط کاربری در متریال دیزاین “آیکن های سیستم” (system icons) نامیده می شوند . هدف اصلی متریال دیزاین در این زمینه ساختن آیکن هایی است که بلافاصله در هر سایزی که باشند توسط کاربر شناخته شوند . این ، به معنی جزییات خیلی کم و استفاده از یک رنگ است . گوگل در این زمینه مثال های کمی زده اما من یک بسته رایگان از آیکن های متریال دیزاین که توسط Walmyr Carvalho ایجاد شده پیدا کردم :

تمامی آیکن ها بصورت فایل PNG منتشر شده اما اگر بخواهید می توانید نسخه قابل ویرایش آنها را هم دانلود کنید . به نظر من این آیکن ها بر طبق فلسفه Material design توازن خوبی میان سادگی و جزییات بوجود آورده است . به راحتی قابل شناسایی است و بسیار ثبات دارند .