طراحی متریال: سادگی، یکپارچگی و قاعده مندی

بالاخره گوگل بعد از مدت‌ها تعلل و دست دست کردن، در کنفرانس I/O 2014 از زبان اختصاصی طراحی خود یعنی Material Design پرده برداری کند. هرچند این اتفاق باید سال‌ها قبل انجام می‌شد اما پیشروی اپل در این زمینه با معرفی طراحی تخت و دگرگون شده‌ی iOS در سال گذشته که امسال هم به OS X سرایت کرد، گوگل را مجبور به حرکت سریع تر برای ارائه زبان جدید طراحی محصولات خود کرده است. زبانی که بر روی یکپارچگی و یکدست بودن برخلاف قبل، تاکید بسیاری دارد. در این نوشته قصد داریم نگاهی مختصر و کوتاه به Material Design بیاندازیم.

14331752129_d6646810f9_z

گوگل، متریال دیزاین را بر سه قاعده اصلی پیاده کرده است: ۱- قوانین فیزیک (استفاده همزمان از فضای منطقی و حرکت‌ها) ۲- تایپوگرافی در مقیاس بزرگ – فضای سفید زیاد – رنگ‌های غلیظ و آگاهانه – تصاویر لبه به لبه ۳- انیمیشن‌های معنی دار و منسجم.

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

 

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

Style-SystemIcons-round_cornersa_large_mdpi Style-SystemIcons-grid_proportion_sizesa_large_mdpi

ساختار لی اوت یا چیدمان اپ‌ها در متریال دیزاین بر اساس دنیای واقعی و چاپی است. اولین لایه از هر اپ را یک paper یا صفحه تشکیل می‌دهد. و این صفحه می‌تواند خود به چندین بخش تا شود مثل بروشورهای چاپی که چند لت هستند. در واقع گوگل با این کار می‌خواهد قاعده‌مندی متریال دیزاین را نشان دهد. بعنوان مثال یکی از قواعد این است که صفحه نوار ابزار یا Toolbar باید در گوشه اپ باشد و نه در بین آیکون‌ها. همانطور که گفتیم واکنش گرا بودن و یکپارچگی در دستگاههای مختلف مشخصه اصلی متیریال دیزاین است. برای همین گوگل قالب‌ها و دستورالعمل ‌های مفصل با جزئیات زیادی برای سه دستگاه موبایل ، تبلت و دسکتاپ (وب) منتشر کرده است.

layout-structure-drive_chrome-02_large_mdpi

متیریال دیزاین تاکید زیادی روی جزئیاتِ اجراء یا components نیز دارد. این اجزاء شامل دکمه‌ها، جعبه‌های گفتگو، منو‌ها، اسلایدر‌ها، سوئیچ‌ها، تول تیپ‌ها، لیست‌ها و… است. مشخصاً این تاکیدات و ریز شدن در جزئیات تاثیر زیادی بر یکدستی اپ‌های تولید شده خواهد داشت اما در برخی موارد نیز سختگیرانه و بی‌مورد است طوریکه ممکن است خلاقیت طراح را تحت الشعاع قرار دهد. الگو‌ها یا Pattern‌ ها در این سبک طراحی تعریف شدند. مثلا اینکه عکس‌های پروفایل با چه افکتی بارگذاری شوند یا ژست‌های لمسی Gestures چه عملکرد‌ها و واکنش‌های دارد.

cards

خوشبختانه گوگل همزمان با معرفی متریال دیزاین، منابع لازم را نیز در اختیار طراحان قرار داده است که برخی از آن‌ها را در متن فوق لینک کرده‌ام. منابع دیگر نیز شامل whiteframe ‌های مربوط به دسکتاپ، تبلت و موبایل و طرح‌های لایه باز ساختار StickerSheet است. علاوه بر راهنمای تحت وب، PDF ‌ای مختصر نیز برای معرفی اصول این رابط کاربری در اختیار علاقمندان قرار گرفته است.

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

5 نظر طراحی متریال: سادگی، یکپارچگی و قاعده مندی

  1. مهدی

    متریال خیلی عالیه
    در عین سادگی و آرامش خاطر حس سرعت و اطمینان رو هم به کاربر میده
    افکت هاش هم نسبت به اندروید های قبلی بهتر شده
    در کل عالیه و یواش یواش داره من رو هم جذب اندروید می کنه 🙂

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

  3. بازخورد: طراحی متریال: فاصله‌ها و خطوط مرزی - محسن حسینیان

  4. بازخورد: طراحی متریال: ساختار - محسن حسینیان

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *