ورود با اکانت گوگل
یا
آقای متریال

برای جستجو کلمه مورد نظر خود را وارد کنید

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

alisaffari


اطلاعات نویسنده
alisaffari

alisaffari

  • Exclusive Author
  • sold_between_10_000_and_50_000_dollars
  • bought_between_1_and_9_items
  • Iran (Islamic Republic of)
نمونه کارها
پشتیبانی
برای دیدن اطلاعات تماس تهیه کننده این محصول باید محصول رو خریداری کرده باشید

به احتمال زیاد تا به امروز کلمه  Material Design به گوش شما خورده است و شاید چندین مقاله هم در این مورد خوانده باشید، در این مقاله قصد داریم از تاریخچه و ماهیت Material Design اطلاعاتی در اختیار شما دوستان قرار دهیم.

اول از همه باید بدانیم متریال دیزاین به چه معناست؟ متریال دیزاین سبکی/زبانی جدید در طراحی است که گوگل در یکی از کنفرانس های خبری خود آن را معرفی کرده است. اگر بخواهیم دقیق تر باشیم در ماه ژوئن سال قبل (۲۰۱۴)

متریال دیزاین بیش از حد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) باشد اما خیلی زیباتر با انیمییشن‌ها و  Transition های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی آنها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate میگوید همانگونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد.

اگر بخواهیم در یک جمله بگوییم متریال دیزاین چیست. می‌توانیم بگویم متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت (Flat Design) هست. در ابتدا این نوع طراحی محدود به اپلیکیشن‌های موبایلی بود که برای اندروید فراهم شده‌اند و استفاده از آن در محیط وب کمی نامفهوم بود، ولی متریال دیزاین خیلی سریع جای خود را بین طراحان رابط کاربری وب پیدا کرده و میتوان گفت در حال محبوب شدن است.

 

متریالایز کردن متریال

در زبان بصری جدید اندروید از طبیعت، فیزیک، جسارت و نمای گرافیکی بر پایه چاپ الهام گرفته شده، یا به عبارت دیگر یک طراحی بر پایه ی کیفیت کاغذ. هنگام تجربه ی متریال دیزاین، دنبال نماد های مادی باشید [نماد هایی از موادی که هم اکنون در اطرافتان می بینید]. از جمله “استفاده از ویژگی های آشنای قابل لمس (familiar tactile attributes)” و “نورپردازی واقعی (realistic lighting)” برای بوجود آوردن یک “فضای منطقی” و “سیستم حرکتی”.

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

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

header2

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

یکی دیگر از قدم های بزرگ رو به جلویی که اندروید به سمت طبیعی تر جلوه کردن برداشته، تعامل پاسخگو (Responsive Interaction) است. به این معنی که عناصر واسط کاربری به شیوه ای منطقی و قابل پیش بینی به ورودی های کاربر عکس العمل نشان می دهند. شیوه ای که با اصول گوگل تعریف می شود که تقسیم شده اند به: سورفیس ری اکشن (تایید بصری آنی در نقطه تماس) متریال ریسپانس (تغییر متریال به محض لمس یا کلیک) و رادیال اکشن (اعمالی که به شکل بصری به مرکز ورودی شان متصل می شوند – صدا از طریق آیکون میکروفون وارد می شود، کیبورد از طریق کلید های کیبورد و …)

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

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

 

header3

رنگ های دیوانه!

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

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

 

icons

نگاه آیکونیک

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

 

paper

کاغذ کوانتومی

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

 

style-imagery-style-philosophy-large-mdpi

نتیجه

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

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

 

 

منبع : دیجیاتو

Material-Design---screenshots (1)

Material-Design---screenshots (2)

Material-Design---screenshots (3)

Material-Design---screenshots (4)

Material-Design---screenshots (5)

Material-Design---screenshots (6)

Material-Design---screenshots (7)

Material-Design---screenshots (8)

Material-Design---screenshots (9)

Material-Design---screenshots (10)

Material-Design---screenshots (11)

Material-Design---screenshots (12)

Material-Design---screenshots (13)

Material-Design---screenshots (14)

Material-Design---screenshots (15)

Material-Design---screenshots (16)

Material-Design---screenshots (17)

Material-Design---screenshots (18)

Material-Design---screenshots (19)

Material-Design---screenshots (20)

Material-Design---screenshots (21)

Material-Design---screenshots (22)

Material-Design---screenshots (23)

Material-Design---screenshots (25)

Material-Design---screenshots (26)

Material-Design---screenshots (27)

Material-Design---screenshots (28)

Material-Design---screenshots (29)

Material-Design---screenshots (30)

Material-Design---screenshots (31)

Material-Design---screenshots (32)

Material-Design---screenshots (51)

Material-Design---screenshots (34)

Material-Design---screenshots (35)

Material-Design---screenshots (36)

Material-Design---screenshots (37)

Material-Design---screenshots (38)

Material-Design---screenshots (39)

Material-Design---screenshots (40)

Material-Design---screenshots (41)

Material-Design---screenshots (42)

Material-Design---screenshots (43)

Material-Design---screenshots (44)

Material-Design---screenshots (45)

Material-Design---screenshots (46)

Material-Design---screenshots (47)

Material-Design---screenshots (48)

Material-Design---screenshots (49)

Material-Design---screenshots (50)

Material-Design---screenshots (51)

Material-Design---screenshots (53)

Material-Design---screenshots (54)

Material-Design---screenshots (55)

Material-Design---screenshots (56)

Material-Design---screenshots (57)

Material-Design---screenshots (58)

Material-Design---screenshots (59)

Material-Design---screenshots (60)

Material-Design---screenshots (61)

Material-Design---screenshots (62)

Material-Design---screenshots (63)

Material-Design---screenshots (64)

Material-Design---screenshots (65)

Material-Design---screenshots (66)

Material-Design---screenshots (69)

Material-Design---screenshots (70)

Material-Design---screenshots (72)

Material-Design---screenshots (71)

Material-Design---screenshots (73)

Material-Design---screenshots (74)

Material-Design---screenshots (75)

Material-Design---screenshots (76)

Material-Design---screenshots (77)

Material-Design---screenshots (78)

Material-Design---screenshots (79)

Material-Design---screenshots (80)

Material-Design---screenshots (81)

Material-Design---screenshots (82)

Material-Design---screenshots (83)

Material-Design---screenshots (84)

Material-Design---screenshots (85)

Material-Design---screenshots (86)

Material-Design---screenshots (87)

Material-Design---screenshots (88)

 

Material-Design---screenshots (89)

Material-Design---screenshots (90)

Material-Design---screenshots (91)

Material-Design---screenshots (92)

Material-Design---screenshots (93)

Material-Design---screenshots

دیدگاه هایی که برای این مطلب ارسال شده

  1. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: رضا آذر ۲۲, ۱۳۹۴

    ممنون استاد ، عالی بود . موفق باشیم …!

  2. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: امیرمحمد کردلو دی ۱۳, ۱۳۹۴

    عالی بود استاد صفاری عزیز

شما هم دیدگاهی برای این مطلب ارسال کنید

مطالب مرتبط

مطالب تصادفی

لوگوی دوستان

هایپر تمپ | HyperTemp