რა არის მასალის დიზაინი? მასალის დიზაინის ძირითადი ელემენტები. ესკიზის რესურსი მასალის დიზაინისთვის Boilerplate-დან

ვინც ავითარებს მობილურ აპლიკაციებსა და ვებსაიტებს, დაგვიწერა სვეტი და ყველაფერი თავის ადგილზე დადო ბინის და მატერიალურ დიზაინთან დაკავშირებით.

ზოგადად, განსხვავება ბრტყელ დიზაინსა და მასალის დიზაინს შორის დახვეწილია. ადამიანს, რომელსაც არ აქვს ღრმა ცოდნა გრაფიკული დიზაინის შესახებ, ისინი შეიძლება მართლაც ძალიან ჰგვანან. ამ სტატიაში შევეცდები „ნათელი მოჰფინოს“ მათ შორის არსებულ ზოგიერთ განსხვავებას. თქვენ მიიღებთ დამატებით ცოდნას, რომელიც იმდენად აუცილებელია, რომ შემთხვევით არ დააზიანოთ დიზაინერის დელიკატური ბუნება.

ცოტა ისტორია

სანამ დავიწყებთ საუბარს ორი ყველაზე პოპულარული დიზაინის ტენდენციას შორის განსხვავებების შესახებ, მოდით გავარკვიოთ, საიდან მოდის ისინი. არსებობს მოსაზრება, რომ მასალის დიზაინი იქმნება ბინის საფუძველზე. მაშინ საიდან გაჩნდა ბრტყელი დიზაინი?

სკევომორფიზმი

როდესაც საქმე ეხება მომხმარებლის ინტერფეისს და ვებ დიზაინს, სკეუმორფიზმის კონცეფცია ეხება მიდგომას, რომლის მთავარი იდეაა იმიტაცია. ზედმეტი დეტალების გარეშე, უბრალოდ გავიხსენოთ Apple-ის წინასწარი iOS 7 ინტერფეისები მათი „რეალისტური ტექსტურებით, განათებითა და ბომბასტური ეფექტებით“.

ციფრული ობიექტების რეალურ კოლეგებთან მიმსგავსების მცდელობა მოტივირებული იყო მოწყობილობასთან მომხმარებლის ურთიერთქმედების ხელშეწყობის აუცილებლობით. სინამდვილეში, ეს არის მიზეზი იმისა, რომ რეალისტური ტექსტურების მქონე ყველა ინტერფეისი მრავალი წლის განმავლობაში დომინირებს ციფრულ სამყაროში. Skeuomorphic დიზაინი შესანიშნავად ეხმარება მომხმარებლებს რეალურ სამყაროდან ციფრულ სამყაროზე შეუფერხებლად გადასვლაში.

თუმცა, მობილური ტექნოლოგიის ზრდასთან ერთად, თანდათან ჩნდება მოთხოვნილება, რომ ფოკუსირება მოახდინოთ პირველ რიგში მოხერხებულობაზე და გამოყენების მარტივობაზე. დამეთანხმებით, ამ სფეროში მნიშვნელოვნად იზრდება სხვადასხვა მოწყობილობიდან ხელმისაწვდომი მობილური გადაწყვეტილებების შექმნის საჭიროება. და სწორედ ამ მომენტში, სიმარტივე ხდება ახალი დიზაინის სტანდარტი.

შენიშვნა: არავითარ შემთხვევაში არ იფიქროთ, რომ სკეომორფიზმი მთლიანად გაქრა. იგი ფართოდ გამოიყენება თამაშებში, სადაც აუცილებელია რეალისტური სამყაროს შექმნა და მოთამაშეების დახმარება, იგრძნონ თავიანთი ხასიათი, რათა ღრმად ჩაეფლონ თამაშის პროცესში.

ბრტყელი დიზაინი

ეს სტილი სრულიად მოკლებულია სამგანზომილებიან ობიექტებს. უხეშად რომ ვთქვათ, ბრტყელ დიზაინს აკლია ისეთი სტილისტური ელემენტები, როგორიცაა ჩრდილები, ტექსტურები, გრადიენტები, მაგრამ ყურადღებას აქცევს შრიფტების, ფერების და ხატების თამაშს. მაგრამ რატომ იყო ეს ყველაფერი საჭირო? პასუხი მარტივია.

პირველ რიგში, ბრტყელი დიზაინი მნიშვნელოვნად ამცირებს გვერდის ჩატვირთვის დროს. „მძიმე“ სკევომორფული დეტალების არარსებობა (ვფიქრობ: ფენები, სერიფული შრიფტები, გრადიენტები) ბრტყელი დიზაინის ელემენტებს „მსუბუქს“ ხდის, რაც თავის მხრივ მნიშვნელოვნად აჩქარებს დატვირთვის დროს. უფრო მეტიც, ბრტყელი ელემენტები ერთნაირად მიმზიდველად გამოიყურება როგორც მაღალი, ასევე დაბალი გარჩევადობის ეკრანებზე.

მეორეც, მარტივ სურათებს შეუძლიათ თქვენი აზრი უფრო სწრაფად მიაწოდონ მომხმარებლებს, ვიდრე დეტალურ ილუსტრაციებს: ისინი ესკიზურია და, შესაბამისად, საკმაოდ ადვილად გასაგები.

და, რა თქმა უნდა, ბრტყელ ხატებს შედარებით მარტივი შრიფტით შეუძლია მომხმარებელთა ყურადღება მიმართოს მართლაც მნიშვნელოვან შინაარსს.

დღეს ბინის დიზაინმა დამსახურებული აღიარება მიიღო, მაგრამ მას მაინც აქვს თავისი პრობლემები. ასეთი პრობლემების ყველაზე თვალსაჩინო მაგალითი იყო Microsoft-ის მიერ Windows 8-ის გამოშვება. ეს ოპერაციული სისტემა ითვლება ბრტყელი დიზაინის პიონერად და მხარს უჭერს მეტრო დიზაინის კონცეფციას. პრობლემების მიზეზი ის იყო, რომ კომპანიამ საჭიროდ ჩათვალა უფრო მეტი ყურადღება დაეთმო ტიპოგრაფიას, ვიდრე თავად გრაფიკას.

NN Group-ის მიერ ჩატარებული Windows 8-ის გამოყენებადობის ტესტის შედეგებმა აჩვენა, რომ მომხმარებლებს უჭირდათ დაწკაპუნებადი ობიექტების გარჩევა დაწკაპუნებადი ობიექტებისგან. მომხმარებლები ჩიოდნენ, რომ ობიექტები, რომლებიც სტატიკური ჩანდა, რეალურად იყო დაწკაპუნებული. შედეგად, კომპანიის მთავარი მისია - დაეხმარა მომხმარებლებს სისტემის სწორად ინტერპრეტაციას - ჩაიშალა.

კიდევ ერთი კომპანია, რომელიც ხშირად ასოცირდება ბრტყელ დიზაინთან, არის Apple. ისინი ჩამოშორდნენ სკეუმორფული დიზაინის ელემენტებს მობილური ოპერაციული სისტემის iOS 7-ში, რომელიც გამოვიდა 2013 წელს. ამჯერად გადასვლა ოდნავ უკეთესად მიიღეს, ძირითადად იმის გამო, რომ კომპანიამ არ სცადა მომხმარებლის ინტერფეისის კონცეფციის სრულად განახლება, არამედ უბრალოდ დაამატა რამდენიმე ცვლილება ბრტყელი დიზაინისკენ. ეს საშუალებას აძლევს მომხმარებლებს გამოიყენონ პროდუქტი ოპერაციული სისტემებისა და ვებსაიტების წინა გამოცდილებაზე დაყრდნობით.

მასალის დიზაინი

მოდით, ახლავე ვიყოთ ნათელი: მატერიალური დიზაინი უფრო ბრენდირებული პროდუქტია, ვიდრე სპონტანური დიზაინის ტენდენცია, რომელმაც ფართო აღიარება მოიპოვა. ეს არის ის, რაც ძირითადად განასხვავებს მას ბრტყელი დიზაინისგან.

დიზაინის მასალას „ბრენდირებული“ წოდებით ვგულისხმობ, რომ მას აქვს მკაფიოდ განსაზღვრული რეკომენდაციები და პრინციპები, რომლებსაც ყველა თავმოყვარე დიზაინერი მისდევს. სავსებით აშკარაა, რატომ შემოიტანა Google-მა თავისი Material Design: საჭირო იყო დიზაინის გაერთიანება ისე, რომ აპლიკაციები ერთნაირად გამოიყურებოდა Android-ის ნებისმიერ მოწყობილობაზე.

მიუხედავად იმისა, რომ საკმაოდ ფუნქციონალურია, ბრტყელი დიზაინი მაინც რთულად გასაგებია. სიმართლე ისაა, რომ ეკრანზე ბრტყელ ობიექტებს შეუძლიათ დააბნიონ მომხმარებლები (განსაკუთრებით მათ, ვისაც არ აქვს გამოცდილება მობილური და ვებ ინტერფეისების გამოყენებაში). ამიტომ, მატერიალური დიზაინი ცდილობს დააბრუნოს სკეუმორფიზმის ელემენტები, მაგრამ ძალიან გამარტივებული ფორმით. სურათები გამოიყურება ბრტყელი, განსაკუთრებით მაშინ, როდესაც საქმე ფერებს ეხება, მაგრამ მაინც მრავალგანზომილებიანია Z-ღერძის არსებობის წყალობით.

სხვა სიტყვებით რომ ვთქვათ, მატერიალურ დიზაინს შეიძლება ეწოდოს ბრტყელი დიზაინის გაუმჯობესებული ვერსია სკეუმორფიზმის ელემენტებით - ანიმაცია, ჩრდილები და ფენები. ამ გზით თქვენ შეგიძლიათ პროდუქტი უფრო ინტუიციური გახადოთ ნავიგაციის თვალსაზრისით და თავიდან აიცილოთ ზედმეტი სირთულე საერთო სტილის ფარგლებში.

ბრტყელი დიზაინის დადებითი და უარყოფითი მხარეები

მოდით, უკან დავტოვოთ სტილის ევოლუციის ისტორია და გადავიდეთ უფრო მნიშვნელოვანზე - ჩამოვთვალოთ ბრტყელი დიზაინის ძლიერი და სუსტი მხარეები.

• მინიმალიზმი და სტილი
• ინტუიცია. გაგიადვილდებათ თქვენი იდეის მომხმარებლებისთვის გადაცემა.
• დროისა და რესურსების დაზოგვა. გვერდები იტვირთება ბევრად უფრო სწრაფად, ნაკლები გამტარუნარიანობის მოხმარებით.
• ფოკუსირება შინაარსზე. ინტერფეისი თავისუფალია არასაჭირო დეტალებისგან, რამაც შეიძლება ყურადღება გადაიტანოს მართლაც ღირებული ინფორმაციისგან.
• ერთნაირად კარგად გამოიყურება სხვადასხვა მოწყობილობებზე, იქნება ეს კომპიუტერის ბრაუზერი თუ სმარტფონი.
• აჩქარებს ვებსაიტის ან აპლიკაციის დიზაინის განვითარების პროცესს დიზაინის არასაჭირო შეხების აღმოფხვრის გზით.

• მინიმალისტური სტილი.
• საკმაოდ ინტუიციური ინტუიციურ დონეზე. მატერიალური დიზაინი ერთნაირად ადვილი იქნება როგორც გამოცდილი მომხმარებლისთვის, ასევე დამწყებთათვის.
• ზომიერი სკეომორფიზმი. ყველაფერი უფრო რეალისტურად გამოიყურება Z-ღერძის (უნიკალური Google კონცეფცია) გამოყენების წყალობით.
• არსებობს სახელმძღვანელოების ნაკრები, რომელიც მუდმივად განახლდება. ამიტომ, ნებისმიერ დიზაინერს ყოველთვის შეუძლია მიმართოს მათ, თუ სირთულეები წარმოიქმნება სამუშაო პროცესში.
• წახალისებულია ანიმაცია ვებ გადაწყვეტილებისთვის. არ არის საჭირო შეგახსენოთ, თუ რამდენად უყვარს ხალხს მოძრაობა. გარდა ამისა, ანიმაცია საშუალებას გაძლევთ გახადოთ ინტერფეისი უფრო ნათელი და ინტუიციური.

• ჰყავს მფლობელი (გუგლის კომპანია). ამიტომ, გაუმჯობესების შესახებ ნებისმიერი შეკითხვა და წინადადება უნდა მიემართოს მფლობელს.
• Z ღერძის გამო, დიზაინის პროცესს შეიძლება მეტი დრო დასჭირდეს.
• ანიმაციური ელემენტები მეტ რესურსს მოითხოვს.
• მითითებების მკაცრი დაცვამ შეიძლება შეზღუდოს დიზაინის ორიგინალობა.

შეაჯამეთ

სინამდვილეში, ერთ-ერთი განსახილველი დიზაინის მიდგომა არ უნდა ჩაითვალოს აშკარა უპირატესობად მეორეზე, რადგან ბრტყელი და მატერიალური სტილი ერთმანეთის გვერდით მიდის. ისინი ორივე წარმოუდგენლად პოპულარულია და ორივე მოკლებულია ზედმეტ რეალიზმს. მასალის დიზაინი ბრტყელი დიზაინის მემკვიდრეა, ხოლო თავად ბრტყელი დიზაინი იყო რეაქცია გადაწყვეტილებებზე, რომლებიც ძალიან მძიმე და რეალისტური იყო. მასალის დიზაინმა დაამატა ის, რისგანაც ბრტყელი დიზაინი ყოველთვის ცდილობდა თავის დაღწევას - პატარა სკეუმორფიზმი. მიუხედავად იმისა, რომ ერთი რამ ყოველთვის განსხვავებული იქნება ამ მიდგომებს შორის: მატერიალური დიზაინი არის Google-ის საკუთრების პროდუქტი, ხოლო ბრტყელი დიზაინი არის რამდენიმე დიზაინის პრაქტიკის შერწყმის შედეგი, რომელიც ძირითადად საერთო სიმარტივისაკენ ისწრაფვის.

სინამდვილეში, ბრტყელი დიზაინი ბოლო წლებში ძალიან განვითარდა, სრულიად „ბრტყელი“ სტილიდან „ნახევრად ბრტყელ“ სტილამდე. ახლა ის იძლევა შრეებისა და დახვეწილი ჩრდილების გამოყენების საშუალებას, რათა ობიექტები უფრო ღრმად გამოჩნდნენ, ვიდრე ადრე ჩანდნენ. ასე რომ, მე და შენ ვართ ბრტყელი დიზაინის 2.0-ის ბედნიერი თანამედროვეები.

და ბოლოს, არაფერი გიშლით ხელს ამ ორი მიდგომის გაერთიანებაში, რათა შექმნათ ნამდვილად ფუნქციონალური და მოსახერხებელი პროდუქტი. ასე რომ, მიიღეთ შთაგონება ბინის და მატერიალური დიზაინის გურუებისგან და შეუდგეთ მუშაობას!

მასალის ვებ დიზაინი არის Google-ის მიერ შექმნილი ვიზუალური ენა, რომელსაც ბევრი უწოდებს ძალიან პერსპექტიულ მიმართულებას.

ეს ტენდენცია არის ხარისხის დიზაინის, ინოვაციებისა და სამეცნიერო და ტექნოლოგიური შესაძლებლობების ძირითადი პრინციპების სინთეზი, რომლის მთავარი მიზანია მომხმარებლის ერთიანი გამოცდილების უზრუნველყოფა ნებისმიერ მოწყობილობაზე, პლატფორმაზე და ეკრანის ფორმატზე.

ინტერფეისის დიზაინის ამ მიდგომის მთავარი პრიორიტეტია მობილური ფუნქციონირება (შეხება, გადაფურცვლა), მაგრამ არანაკლებ ყურადღება ეთმობა პერიფერიულ მოწყობილობებს (კლავიატურა, მაუსი) და სენსორულ პადს.

მასალა - როგორც მეტაფორა

Google-ის წარმომადგენლების თქმით:

„ხელშესახები საშუალებები, რომლებიც დაფუძნებულია ტაქტილურ ურთიერთქმედებაზე, ტექნოლოგიურად განვითარებული და ღიაა ახალი გადაწყვეტილებებისთვის“.

როგორც ჩანს, ჩვენ ვსაუბრობთ არა მხოლოდ სკეუმორფიზმის შეკუმშულ ვერსიაზე, არამედ ვიზუალური წარმოდგენის სრულიად ახალი ენისკენ ნახტომზე.

Skeuomorphism არის საკმაოდ მარტივი ტექნიკა ხელოვნურ ნივთებზე რეალიზმის დასამატებლად, რომელიც დიდი ხანია გამოიყენება iPhone-ის სტანდარტული აპლიკაციების შესაქმნელად (შენიშვნები, სიახლეები და სხვა). iOS 7-ის ოფიციალური გამოშვების შემდეგ, დიზაინის ეს ტენდენცია კარგავს აქტუალობას მომხმარებლებისთვის, რაც საკმაოდ სამართლიანია.

დამეთანხმებით, ციფრულ სამყაროსთან ამდენი წლის ურთიერთობის შემდეგ, ბევრი მომხმარებლისთვის სენსორული ღილაკების რეალიზმი კარგავს აქტუალობას. და რაც უფრო სწრაფად მიდიან სხვა მომხმარებლები იმავე აზრზე, მით უფრო ინტენსიურად განვითარდება ციფრული დიზაინი.

ახლა (ბრტყელი დიზაინი), ფონზე ღილაკების გაქრობის ტექნიკა პოპულარობას იძენს და ყველაზე ხშირად ეს ართულებს მომხმარებლებს საჭირო ფუნქციების პოვნას, განსაკუთრებით იმ შემთხვევაში, თუ მათ ადრე არ შეხვედრიათ ასეთი ინტერფეისი. აქ მატერიალური დიზაინი მოქმედებს, რადგან ზედაპირები და კიდეები იძლევა ვიზუალურ მინიშნებებს, ხოლო განათება ხელს უწყობს ობიექტების განსაზღვრას და სივრცის განსაზღვრას.

გარდა ამისა, ნაცნობი ტაქტილური ფუნქციების გამოყენება დიზაინის ამ მიმართულებით ასევე საშუალებას გაძლევთ სწრაფად დაეუფლონ ურთიერთობებს ინდივიდუალურ ობიექტსა და მის გარემოს შორის.

მასალის დიზაინის პრინციპები არ არის მხოლოდ ვიზუალური მიმზიდველობა, არამედ თქვენი მომხმარებლის გამოცდილების კურირება იერარქიის, მნიშვნელობისა და აქცენტის საშუალებით.

მდიდარი ფერების პალიტრა, მკაფიო გამოსახულების საზღვრები, თვალსაჩინო ტიპოგრაფია და თეთრი ფონი გეხმარებათ მომხმარებლის განსაცვიფრებელი გამოცდილების შექმნაში.

ამ ტრენდში მთავარი აქცენტი კეთდება მომხმარებლის აქტივობაზე, რადგან დიზაინის ელემენტებთან ურთიერთობისას მიღებული გამოცდილების ბუნება პირდაპირ დამოკიდებულია ადამიანზე. მოქმედებები უნდა განხორციელდეს ცალკეულ გარემოში და მნიშვნელოვანი ინტერაქტიული ობიექტები უნდა იყოს წარმოდგენილი ინტერფეისის ცვლილების შემდეგაც კი.

ზოგადად, მასალის დიზაინის შესახებ ყველა ინფორმაცია შეგიძლიათ იხილოთ შესაბამის Google ვებსაიტზე. ამ გზით თქვენ შეძლებთ უფრო დეტალურად გაიგოთ ციფრული გარემოს მახასიათებლები, 3D დიზაინი, ანიმაცია და ადაპტური ურთიერთქმედება.

ამ დროისთვის, უბრალოდ გადახედეთ ქვემოთ მოცემულ მაგალითებს და მიიღეთ მათგან იდეები თქვენი განვითარების შესახებ.

Ღონისძიების დაგეგმვა

Ფრენის ინფორმაცია

2014 წლის 25 ივნისს Google-მა საზოგადოებას წარუდგინა თავისი ახალი ხედვა მომავლის ინტერფეისის დიზაინის შესახებ - წესებისა და პირობების მთელი ნაკრები, რომლითაც ამიერიდან აშენდება კორპორაციის ყველა პროდუქტის ინტერფეისი. რატომ იყო ეს ყველაფერი საჭირო? სულ რაღაც ხუთი წლის წინ Google-ის ყველა პროდუქტი ძალიან განსხვავდებოდა ერთმანეთისგან, მათ შორის ერთი და იგივე აპლიკაციის სხვადასხვა ვერსიები სხვადასხვა მოწყობილობებზე. დეველოპერები ფიქრობდნენ სპეციალური წესების შექმნაზე ყველა განვითარებული აპლიკაციისა და სერვისის მშენებლობისა და გაერთიანებისთვის, რომლებიც მოგვიანებით გაერთიანდა საერთო სახელწოდებით "პროექტი კენედი". სწორედ ეს პროექტი განვითარდა მოგვიანებით მასალის დიზაინი (მასალის დიზაინი).

მატერიალური ფილოსოფია

კენედის პროექტის წყალობით, Google-ის ყველა ძირითადმა სერვისმა მიიღო საერთო დიზაინისა და ინტერფეისის ფუნქციები. ამან შესაძლებელი გახადა ვებ ინტერფეისების და მოგვიანებით მობილური აპლიკაციების ინტერფეისების შექმნის მიდგომების გაერთიანება.

ერთიანი დიზაინის ერთ-ერთი მახასიათებელი იყო ბარათები ინფორმაცია, რომელიც შეიძლება განთავსდეს სამუშაო ადგილის ნებისმიერ ნაწილში. Google Now აპში მათი შესწავლისას, დეველოპერებმა საკუთარ თავს დაუსვეს კითხვა: "რა არის ამ ბარათების ქვეშ?" Google-ის დიზაინის ვიცე-პრეზიდენტ მატიას დუარტეს თქმით, ამ „უდანაშაულო კითხვამ ძლიერი ნაპერწკალი გააჩინა“.

დიზაინის ჯგუფმა დაიწყო დიზაინის განხილვა არა როგორც თვითმფრინავებისა და პიქსელების კოლექცია, არამედ როგორც რეალური ფიზიკური ობიექტი. მათ სურდათ იგივე მიეწოდებინათ მომხმარებლისთვის, რათა მას ჰქონოდა ინტერფეისის ხელშესახების განცდა, რომ რაც ეკრანზე ხდება რაც შეიძლება დამაჯერებლად და ლოგიკურად გამოიყურებოდეს.

ტოტალური დომინირების შემდეგ სკეომორფიზმი(დიზაინში ფიზიკური სამყაროს რეალური ობიექტების ზუსტი იმიტაცია) ყველა მკვეთრად გადავიდა საპირისპირო მიმართულებით - . სწორედ ეს აიღო Google-მა, როგორც საფუძველი გამოგონებისას ” მასალა" ამავდროულად, მცირე ნაბიჯის გადადგმა რეალიზმისკენ.

კვანტური ქაღალდი

მატერიალური დიზაინის მთავარი ელემენტია ფიზიკური ობიექტის მეტაფორათვისებებით მსგავსია ქაღალდისა და აქვს მისი თვისებების უმეტესი ნაწილი - ზომა, ფერი, სისქე. ამ მეტაფორული მასალის თითოეული ფენა განლაგებულია სამგანზომილებიან სივრცეში და ემორჩილება ყველა ფიზიკურ კანონს, შესაბამისად, კლასიკური ბრტყელი სტილისგან განსხვავებით, მას შეუძლია ჩრდილი მიაქციოს ქვედა ფენებს. ყველა ფენა მოთავსებულია ძირითად ქვედა მასალაზე.

ქაღალდის მსგავსი თვისებების გამო, მასალას თავდაპირველად "კვანტურ ქაღალდს" უწოდებდნენ. ეს არის იგივე ქაღალდი, როგორც ფიზიკურ სამყაროში, მაგრამ მას აქვს მრავალი "ჯადოსნური" თვისება, მაგალითად, მას შეუძლია შეცვალოს მისი ზომა და შეუფერხებლად გადაადგილდეს სივრცეში, გაერთიანდეს სხვა "ფოთლებთან" ან დაიშალოს რამდენიმე. კვანტური ქაღალდი დგას ფონის ზემოთ, რომელიც ყველაზე ხშირად თეთრი ფერისაა. ჩრდილი მოძრაობს თავად მასალის მოძრაობის მიხედვით და მცირდება ან იზრდება ფონზე მასალის სიმაღლის მიხედვით.

ციფრული მელანი

თუ "კვანტური ქაღალდი" განკუთვნილია ობიექტის ფიზიკური თვისებების ასახვაზე, მაშინ ყველაფერი, რაც ამ ქაღალდის ზედაპირზეა - ფერები, სურათები, ტექსტი, ხატები - იქმნება ""-ის გამოყენებით. ციფრული მელანი" - მატერიალური დიზაინის კიდევ ერთი უნიკალური ობიექტი.

მასალის დიზაინი იყენებს ბეჭდვის ყველა განვითარებას ინტერფეისის დიზაინში. მაგრამ აქაც არის Google-ის საკუთრების ფუნქციები. მაგალითად, მთავარი შრიფტი, რომელიც გამოიყენება მასალის დიზაინში, არის Roboto. თუმცა, არაფერი უშლის კომპანიებს, გამოიყენონ თავიანთი კორპორატიული შრიფტი საკუთარი იდენტობის შესანარჩუნებლად. მატერიალური დიზაინის გამოყენების სახელმძღვანელო მაგალითებია ინტერფეისებში შრიფტის სხვადასხვა სტილისა და ზომის გამოყენების მაგალითები.

მაგრამ ყველაზე მნიშვნელოვანი მატერიალური დიზაინის გრაფიკაში არის ფერი. ფერი კვანტურ ქაღალდზე გამოხატვის მთავარი საშუალებაა და ამიტომ ძალიან მნიშვნელოვან როლს ასრულებს. ჩვეულებრივია მატერიალური დიზაინის გამოყენება ძირითადიდა აქცენტის ფერები. ასევე რამდენიმე ჩრდილი სხვადასხვა სიტუაციებისთვის.

ჩვეულებრივ პირველადი ფერებიგამოიყენება დიდი ტერიტორიების შეღებვისთვის, როგორიცაა სათაურები, სამოქმედო ზოლები, სტატუსის ზოლები. გამოიყენება მნიშვნელოვანი ელემენტების ხაზგასასმელად აქცენტის ფერი. მაგალითად, მატერიალური დიზაინის სავიზიტო ბარათისთვის - მცურავი მოქმედების ღილაკები.

მასალის დიზაინის ძირითადი პრინციპები კარნახობს სურათების გამოყენებას. ეს იმდენად მნიშვნელოვანი ელემენტია, რომ რეკომენდებულია მაქსიმალური ზომის სურათების გამოყენება ჩარჩოების გარეშე. უფრო მეტიც, სამოქმედო ზოლები გამჭვირვალე ხდება გამოსახულების ხედვის მაქსიმალურად გასაუმჯობესებლად.

Android მხარს უჭერს სპეციალურ ბიბლიოთეკას პალიტრა, რომელსაც შეუძლია გამოსახულების ძირითადი და აქცენტირებული ფერების ამოღება და აპლიკაციის დიზაინის დინამიურად შეცვლა, აქტიურ სურათთან ადაპტაცია (მაგალითი ზემოთ).

ანიმაციის მნიშვნელობა

განაგრძობს ბუნებრივ სამყაროსთან ანალოგიების დახატვას, უნდა აღინიშნოს, რომ არაფერი ქრება არსად, ისევე როგორც არაფერი გამოდის არსაიდან. ამრიგად, მასალის დიზაინში აუცილებელია შეუფერხებლად შეიცვალოს არსებული ინტერფეისი მომხმარებლის ყველა მოქმედების საპასუხოდ, რათა ყველა გადასვლა იყოს ლოგიკური და აშკარა. ამრიგად, მასალის დიზაინში ანიმაცია არის მომხმარებლისა და ინტერფეისის ურთიერთქმედების შედეგი.

აქტიური მოძრაობა იპყრობს მომხმარებლის ყურადღებას, ამიტომ რეალიზმის ეფექტის მისაღწევად აუცილებელია რამდენიმე წესის გამოყენება:

• ასიმეტრია
  როგორც წესი, ობიექტების ზომა შემოიფარგლება მოწყობილობის სიგანით, ამიტომ კვანტური ქაღალდის რეალისტური ზომის შეცვლისთვის აუცილებელია ობიექტის სიგანისა და სიმაღლის ასიმეტრიულად შეცვლა დამოუკიდებლად, რითაც თავიდან აიცილებს ობიექტის უფრო დიდი ან მცირე ზომის ილუზიას. .
• უპასუხე
  მომხმარებლის ნებისმიერ მოქმედებაზე უნდა იყოს შესაბამისი პასუხი. მაგალითად, Google გთავაზობთ ინტერფეისის ობიექტებში ტალღის ცვლილების ეფექტს ეპიცენტრთან ურთიერთქმედების წერტილში.
• ბუნებრივი ავთენტური მოძრაობები
  ბუნებაში, ობიექტები, როდესაც მოძრაობენ, მყისიერად ვერ იძენენ სიჩქარეს ან ჩერდებიან, ამიტომ, რეალიზმის მისაცემად, ყველა ანიმაცია არ უნდა იყოს ხაზოვანი, არამედ შენელებითა და აჩქარებით.

დასკვნა

მასალის დიზაინიარის სრულიად ახალი გზა ურთიერთობისა და ინტერფეისების შესაქმნელად, რომელიც ჯერ კიდევ დამუშავების პროცესშია და ნებისმიერ დროს შეიძლება გაფართოვდეს. თუმცა მისი პერსპექტივების პროგნოზირება უკვე შესაძლებელია. მინიმუმ, ის დომინირებს Android აპლიკაციების შემუშავებაში, რადგან ყველა ინტერფეისის გაერთიანება დადებითად იმოქმედებს გამოყენების მარტივობაზე.

თავად Google-ში მატერიალური დიზაინის განვითარება მოთავსებულია ისეთ მნიშვნელოვან მოვლენებთან, როგორიცაა ფანჯრის ინტერფეისის და კურსორის კონტროლის განვითარება (Xerox PARC) და სენსორული ეკრანების შექმნა (Apple). აბა, ვნახოთ, რა გამოდის აქედან.

Google-ის ახალი ლოგო და იდენტობა წინ უძღვის მატერიალურ დიზაინს

დეტალური სახელმძღვანელო მატერიალური დიზაინის შემქმნელისგან შეგიძლიათ იხილოთ აქ -

უკვე რამდენიმე წელია, Material Design არის გლობალური ვებ დიზაინის ტენდენციების ლიდერთა შორის. და ეს საერთოდ არ არის გასაკვირი. ყოველივე ამის შემდეგ, სწორედ მან შეძლო შეეთავსებინა სიმარტივე, მუშაობის ლოგიკა და მოსახერხებელი გარეგნობა და ამავე დროს შექმნა გააზრებული და ინტუიციური ინტერფეისი მომხმარებლებისთვის. ფართო სივრცე, დეტალების არეულობის გარეშე, სისუფთავე და ეკრანის ზედმეტი დეკორაციის ნაკლებობა. მასალის დიზაინის ძირითადი პრინციპი ფოკუსირებულია გამოყენებადობაზე და არა მხოლოდ კარგ დიზაინზე, რომელიც მადლიერი აუდიტორიის გულებს იპყრობს თავისი მადლითა და მოხერხებულობით.

ტენდენციის პოპულარობა აიხსნება დიზაინერებისთვის რესურსების და ხელსაწყოების უზარმაზარი რაოდენობით, სხვათა შორის, ფასიანიც და უფასოც. მაგალითად, დღეს მე გთავაზობთ სასარგებლო არჩევანს, რომელიც სავსეა 30 შთამაგონებელი უფასო და ფასიანი რესურსით დიზაინერებისთვის მატერიალური დიზაინის სტილში. ყოველდღე გამოდის ახალი აპლიკაციები და პროექტები Material Design-ის სტილში. ნუ ჩამორჩებით. შეიტყვეთ ინსტრუმენტები, რომლებიც დიზაინერებს ეხმარებიან ყოველდღე დაძლიონ რთული გამოწვევები და მიაღწიონ წარმატებას. დაეხმარეთ თქვენს მომავალ პროექტს გაბრწყინდეს მატერიალური დიზაინით.

სასარგებლოა დიზაინერისთვის. 30 უფასო და ფასიანი მასალების დიზაინის ხელსაწყოებისა და რესურსების კოლექცია.

ფონი:

1. 40+ უფასო ფონი მასალის დიზაინის სტილში

შესანიშნავი არ არის 40+ უფასო მასალის დიზაინის ფონის მთელი კოლექციის პოვნა ერთ ადგილას? დამზადებულია მაღალი გარჩევადობით, ისინი აუცილებლად შთააგონებენ ვებ პროექტის ან სხვა ბეჭდური დიზაინის განხორციელებას. სხვადასხვა ფორმისა და ფერის დიდი რაოდენობა ყველაზე მომთხოვნი დიზაინერის ყურადღებასაც კი მიიპყრობს.

2. 10 უფასო ფონი

არ გამოტოვოთ შანსი, დაამატოთ 10 მაღალი ხარისხის მასალის დიზაინის ფონის კოლექცია თქვენს ხელსაწყოების ბიბლიოთეკაში. ეს ფონი ხელმისაწვდომია ორ სტილში და ხუთი ფერის კომბინაციით 300 Dpiდა 10 .jpg ფაილი, ასევე ნებართვა 5000x3000px. და ეს ყველაფერი შეგიძლიათ მიიღოთ უფასოდ.

3. 30 ფონი პროექტისთვის მატერიალურ სტილში

მაღალი ხარისხის ფონის კიდევ ერთი დიდი არჩევანი თქვენი მასალის დიზაინის პროექტისთვის. აირჩიეთ 30 განსხვავებული დიზაინიდან, რომლებიც სავსეა დამატებითი ფორმებით, როგორიცაა კვადრატები, სამკუთხედები და წრეები და მიეცით თქვენს პროექტს ხელნაკეთი შეხება. ხელმისაწვდომია უფასოდ .pngდა .აიფორმატები.

4. 12 უფასო პრომო ფონი მატერიალური დიზაინის სტილში

რამე ახალი გინდა? გთხოვთ. შეამოწმეთ ჩვენი კოლექცია 12 ახალი Material Design დიზაინის მაღალი გარჩევადობით. კარგი სიახლე - კოლექციის გამოყენება შესაძლებელია როგორც პირადი, ასევე კომერციული მიზნებისთვის, რადგან... პროდუქტები ლიცენზირებულია Creative Common Zero, რაც ნიშნავს, რომ ისინი გამოცდილი და მზად არიან გამოსაყენებლად. ალმასის ფორმა ფონის ცენტრში ემსახურება პროდუქტის ყურადღების მიქცევას. ჩამოსატვირთად ხელმისაწვდომია .pngდა .jpgფორმატები.

5. ნიმუშიანი ფონების ნაკრები

არ გამოტოვოთ ჩვენი არჩევანი ნათელი და მაღალი ხარისხის ფონებით დამზადებული კრამიტის დიზაინით. ფაილი შეიცავს ფაილებს .png, ფოტოშოპიდა ფორმატი ილუსტრატორის ვექტორი, რაც ნიშნავს, რომ თქვენ შეგიძლიათ დამოუკიდებლად მოარგოთ ფერის სქემა თქვენი მოთხოვნების შესაბამისად. გამოიყენეთ უფასოდ ნებისმიერი ზომის და ხარისხის დაკარგვის გარეშე.

6. უფასო ბანერები

აქ არის 5 ბანერის ნაკრები მატერიალური დიზაინის სტილში რეზოლუციით 1140x600px. შესანიშნავია სათაურების, სურათების ან ცალკეული სექციების ხაზგასმა ნებისმიერ ვებ პროექტში.

მობილური განვითარების ინსტრუმენტები

7. უფასო მობილური დიზაინის ინსტრუმენტარიუმი

შესანიშნავი არჩევანი, რომელიც შეუმჩნეველი არ დარჩება Photoshop-ისა და Sketch-ის მომხმარებლებისთვის. თქვენს ყურადღებას წარმოგიდგენთ მატერიალური დიზაინის სხვადასხვა კომპონენტის კომპლექტს, რომელსაც შეუძლია ვებ პროექტს მისცეს საკმაოდ აქტიური ენერგია. შესანიშნავი ვარიანტი მუსიკალური აპლიკაციის ან ვებსაიტის მობილური ვერსიის შესაქმნელად.

8. Edacious UI KIT

UI ნაკრები, რომელიც შექმნილია თქვენი სამუშაო პროცესის დასაჩქარებლად.

9. DO არის ყოვლისმომცველი აპლიკაციის UI ნაკრები. Უფასოდ

Do არის ნამდვილი აღმოჩენა ყველასთვის, ვინც დაინტერესებულია სხვადასხვა სახის მასალის დიზაინის აპლიკაციების შექმნით. Do არის 130 დიზაინი, 10 უნიკალური თემა და 250-ზე მეტი UI ელემენტი მოქნილი და ბადურის მზა დიზაინის შესაქმნელად. აქ თქვენ ნამდვილად შეგიძლიათ იპოვოთ ადგილი ექსპერიმენტებისთვის. აირჩიეთ თანამედროვე, ფერადი დიზაინი.

10. უფასო UI ელემენტების ნაკრები მუსიკალური აპლიკაციების შესაქმნელად

აღმოაჩინეთ უფასო UI ელემენტების კოლექცია აქ .psdფორმატი, რომელიც შესანიშნავია მუსიკალური აპლიკაციების შესაქმნელად. სხვათა შორის, ფემინისტური დიზაინი ჰარმონიულად გამოყოფს სილამაზის სხვადასხვა ვებ პროექტებს.

11. უფასო ინტერფეისის ელემენტების ნაკრები მატერიალური დიზაინის სტილში

ვისაც ჯერ კიდევ აქვს ეჭვი მატერიალური დიზაინის სტილში ხელსაწყოებისა და რესურსების არჩევანში, გირჩევთ, ყურადღება მიაქციოთ Material Design UI Kit კოლექციას. გამოყენებით სხვადასხვა .psdელემენტები, რომლებიც, სხვათა შორის, ადვილად მოერგება თქვენს საჭიროებებს Photoshop-ში, შეგიძლიათ დაზოგოთ დრო და ძალისხმევა პროექტის დაწყების ეტაპზეც კი. დაამატეთ შესანიშნავი მასალა თქვენს კოლექციას სწრაფი მატერიალური დიზაინის პროექტებისა და აპლიკაციების შესაქმნელად.

ხატები

12. Google-ის ხატების კოლექცია მატერიალური დიზაინის სტილში

დაიწყეთ თქვენი ვებ პროექტის ან აპლიკაციის სწორი ხატულების ძიება Google Material Icons კოლექციით. ნაკრები შეიცავს ყველა სახის ხატულ ვარიანტს სხვადასხვა აპლიკაციისთვის, როგორიცაა მედიის დაკვრა, კომუნიკაცია, შინაარსის რედაქტირება და ა.შ. ჩამოტვირთვა zip არქივი(~ 57 მბ) და ისიამოვნეთ შესანიშნავი მასალებით, რომლებიც ყველა დიზაინერს სჭირდება ხელთ.

13. უფასო ხატების კოლექცია

Material Design Icons არის უფასო მასალის დიზაინის სტილის ხატების კოლექცია, რომლის ჩამოტვირთვა შესაძლებელია სასურველი ფორმატით, ზომით და ფერით, პროექტის მოთხოვნებიდან გამომდინარე. გადაიტანეთ და ჩამოაგდეთ ხატები Illustrator-ში, Photoshop-ში ან Visual Studio-ში, შეცვალეთ ფერი და თქვენი ხატი მზად არის.

14. პაკეტი: მასალის დიზაინის ხატები

აქ შეგიძლიათ სწრაფად და მოხერხებულად ჩამოტვირთოთ უფასო ელემენტები, როგორიცაა ხატები, თემატური ფონი ან ფერის პალიტრები. ხატები ხელმისაწვდომია .icns, .ico, .pngფორმატები. ხატების სხვადასხვა ფორმები და სტილი შესანიშნავია დიზაინის პროცესში რუტინული მუშაობისთვის.

15. მასალა დიზაინის ხატულა

რას იტყვით 1000 ხატის კოლექციაზე დაყოფილი 20 კატეგორიად 7 რეზოლუციით? შედეგი არის 7000-ზე მეტი ფაილის ნაკრები, ყველაფერი არაფრისთვის. უბრალოდ აირჩიეთ თქვენი კატეგორია და საჭირო გარჩევადობა და voila - ხატი მზად არის. დროა დავიწყოთ ვარიანტების განხილვა, რას ფიქრობთ?

ჩარჩოები

16. მატერიალიზება - ადაპტირებული წინა ნაწილის ჩარჩო, რომელიც დაფუძნებულია მასალის დიზაინის პრინციპებზე

დაამატეთ თქვენს კოლექციას უნივერსალური ინსტრუმენტი აპლიკაციის ინტერფეისების სწრაფი პროტოტიპებისთვის მატერიალური დიზაინის პრინციპების შესაბამისად. ამრიგად, ხელმისაწვდომია ტექსტის დიზაინი, ადაპტური 12-სვეტიანი ბადე, ელემენტების სტილი, ბარათები, ბლოკები, ამომხტარი ელემენტები და ა.შ. შეამოწმეთ ჩარჩო საკუთარ პროექტზე.

17. Material Design Lite ჩარჩო

გჭირდებათ ინსტრუმენტი, რომელიც ხელს შეუწყობს ვებსაიტების და აპლიკაციების შექმნის პროცესს მატერიალურ დიზაინზე? სცადეთ Material Design Lite - ეს არის უნივერსალური ჩარჩო, რომელიც იცავს მასალის დიზაინის პრინციპებს, მხარს უჭერს მობილური ბრაუზერებს და გეხმარებათ შექმნათ საპასუხო და მინიმალისტური დიზაინი. მოიცავს სხვადასხვა ინტერფეისის კონტროლს.

18. Material-UI ჩარჩო

გაქვთ გამოცდილება React-თან? Material-UI არის კიდევ ერთი საკმაოდ პოპულარული ჩარჩო, რომელიც შედგება კომპონენტების კომპლექტისაგან React-ისთვის. პერსონალიზაციის ფართო ვარიანტები, ცალკეულ ფაილებად დაყოფილი სტილის მხარდაჭერა და მასალის დიზაინის მითითებების დაცვა.

19. LumX ჩარჩო

LumX პოზიციონირებს როგორც წინა ბოლო ჩარჩო, რომელიც დაფუძნებულია როგორც AngularJS სპეციფიკაციებზე, ასევე მასალის დიზაინის პრინციპებზე. გარდა ამისა, საჭიროა jQuery, Velocity და Momentum. მოიცავს AngularJS კომპონენტების დიდ რაოდენობას.

20. მატერიალური ფონდის ჩარჩო, რომელიც ეფუძნება მასალის დიზაინის პრინციპებს

ზურბის ფონდის პრინციპიდან გამომდინარე, მასალა ფონდის ჩარჩო იმსახურებს ყურადღებას, სულ მცირე, იმიტომ, რომ ის თავისუფალი და თვითკმარია. ჩარჩო გთავაზობთ ფართო შესაძლებლობებს პერსონალიზაციის თვალსაზრისით. შეიცავს React კომპონენტებს, რომლებიც მიჰყვება მასალის დიზაინის პრინციპებს.

21. MUI - ჩარჩო, რომელიც დაფუძნებულია Google-ის მასალის დიზაინის მითითებებზე

საკმაოდ ადვილად გამოსაყენებელი ჩარჩო, რომელიც დიდად შეუწყობს ხელს მომავალი პროექტების განვითარებას. უზრუნველყოფს Angular, React და WebComponents მხარდაჭერას. მსუბუქ ჩარჩოს აქვს ელემენტების ძირითადი ნაკრები მცირე პროექტების განვითარების პროცესის დასაჩქარებლად.

22. Angular Material frame - UI ელემენტების ნაკრები

Angular Material ჩარჩო არის Google-ის მიერ მხარდაჭერილი ერთ-ერთი ყველაზე პოპულარული ჩარჩო. გთავაზობთ მუშაობას სრულფასოვანი მატერიალური დიზაინით სხვადასხვა კომპონენტებთან, ხატებთან და სკრიპტებთან ერთად. ადაპტირებულია მობილურზე, ბრაუზერებსა და დესკტოპ აპლიკაციებზე მუშაობისთვის.

23. Bootstrap Material Design - ინსტრუმენტების ნაკრები Bootstrap-ზე მასალის დიზაინისთვის

როგორც სახელი გვთავაზობს, Bootstrap Material Design არის Bootstrap თემა, რომელიც სავსეა Bootstrap-ის სასარგებლო ფუნქციებით, შერეული მატერიალური დიზაინის ელემენტებით.

ფასიანი მასალები

24.

გსურთ, რომ თქვენი მომავალი პროექტი განსხვავდებოდეს ასობით სხვა მსგავსი პროექტისგან? პრემიუმ პაკეტის დახმარებით, რომელიც შეიცავს 1100 ტექსტურას, შეგიძლიათ გამოირჩეოდეთ ბრბოსგან და შექმნათ უნიკალური დიზაინი მარტივად და სწრაფად. ხელმისაწვდომია სხვადასხვა ფერებში, როგორიცაა მარმარილო, მელანი, აკრილის ტონები ან აკვარელი, ტექსტურები მოერგება ყველაზე ჩვეულებრივი დიზაინერის გემოვნებას. დარწმუნებული ვარ, აქ არის რაღაც ექსპერიმენტი.

25.

UTech არის პრემიუმ კოლექცია, რომელიც წარმოდგენილია სხვადასხვა ეკრანებით, განლაგებითა და სტილებით და შესანიშნავი გამოსავალია სხვადასხვა სტარტაპისთვის. გარდა ამისა, ნაკრები მოიცავს სხვადასხვა ეკრანის კომპლექტს პროფილის, ახალი ამბების ან მისასალმებელი გვერდისთვის. კოლექცია განკუთვნილია ნიშებისთვის, როგორიცაა ფინანსები, განათლება, საკვები, მედია პორტალი ან ელექტრონული კომერცია.

26. წვიმიანი სეზონი - PSD ინტერფეისის ელემენტები დიზაინერის, მხატვრის პორტფოლიოსთვის

აღსანიშნავია, რომ პრემიუმ PSD ელემენტების კოლექცია შესანიშნავია აპლიკაციების ან ვიჯეტების შესაქმნელად. რატომ არ დაამატეთ მაღალი ხარისხის ელემენტების შერჩევა თქვენს ბიბლიოთეკაში მომავალი პროექტებისთვის?

27.

Bootstrap-ის ელემენტების პრემიუმ კოლექციის გამოყენებით, შეგიძლიათ შექმნათ სრულად საპასუხო ბარათების განლაგება. შედეგად, თქვენ შეგიძლიათ აირჩიოთ 5 განსხვავებული ფორმა, ფერი და მიმზიდველი დიზაინი. ისინი ყველა ერთად ჯდება. Ჰო მართლა, icomoon ხატულა-ფონტებიასევე დაემატა კომპლექტს.

28.

განსაკუთრებულ ყურადღებას იმსახურებს ინფოგრაფიული ელემენტების პრემიუმ პაკეტი Tree Bundle. შეიძლება გამოყენებულ იქნას PowerPoint პრეზენტაციებში, ბროშურებში, წლიურ ანგარიშებში, რეზიუმეებში ან ბიზნეს მიზნებისთვის, რეკლამაში, მარკეტინგში და ა.შ. ამგვარად, ნაკრები მოიცავს 4 ფერს. EPSდა ა.ი.ფაილი, zip ფაილის შიგნით ზომის შეცვლის შესაძლებლობით. საუკეთესოდ მუშაობს Adobe Illustrator CS5 ან უფრო ახალთან.

29.

ყველა სახის ინფოგრაფიული ელემენტების შესანიშნავი არჩევანი გრაფიკების, დიაგრამების, ხატების და სხვა მორგებული ფორმების სახით მომავალი პროექტების გამოსაყენებლად. ელემენტები შესაფერისია პრეზენტაციებისთვის, წლიური ანგარიშებისთვის, რეკლამისთვის, მარკეტინგის ან პროდუქტის პოპულარიზაციისთვის ელექტრონული ფოსტით. კოლექცია EPSდა ა.ი.ფაილები სასურველია იმუშაოს Adobe Illustrator CS5 ან უფრო ახალთან.

30.

მათთვის, ვინც ჯერ კიდევ აგროვებს ხატების ბიბლიოთეკას, გირჩევთ, ყურადღება მიაქციოთ Tonicons-ს. რაც შეეხება 2000 პრემიუმ ხარისხის ხატს დაყოფილი 6 კატეგორიად? გეთანხმები, ღირს კითხვა. გარდა ამისა, თქვენ შეგიძლიათ მარტივად შეცვალოთ თითოეული მათგანი თქვენი მოთხოვნების შესაბამისად, შეცვალოთ ზომა და სხვა საჭირო დეტალები.

შეჯამება

მაშინაც კი, თუ თქვენ ახალი ხართ მატერიალურ დიზაინში, უფასო და ფასიანი ხელსაწყოებისა და რესურსების ამ არჩევანით, შეგიძლიათ უსაფრთხოდ ჩაყვინთოთ სამუშაოში თავდაუზოგავად. მიიღეთ ყველა ზემოთ ჩამოთვლილი რესურსი და გამოიყენეთ ისინი საჭიროებისამებრ. ამა თუ იმ ბიბლიოთეკის გამოყენებით, თითოეულ დიზაინერს შეუძლია მიიღოს მზა გადაწყვეტა თავისი საჭიროებისთვის სწრაფად, ზედმეტი თავის ტკივილის გარეშე. გახსოვდეთ, რომ გამოიყენოთ თქვენი გამოცდილება, პრეფერენციები და უნარები სახელმძღვანელოდ. მერწმუნეთ, ეს აუცილებლად დაგეხმარებათ მომავალში. თუ თქვენ გაქვთ რაიმე სათქმელი და დაამატოთ სიაში, მიუთითეთ კომენტარში.

Google-ის დიზაინის ვიცე პრეზიდენტი მატიას დუარტე The Verge-თან ინტერვიუში საუბრობს ახალი დიზაინის ძირითად პრინციპებზე, რომელსაც Material ჰქვია. ეს არის სრულიად განსხვავებული მიდგომა, რომელიც უზრუნველყოფს წესების ერთიან კომპლექტს, დაწყებული პროგრამული უზრუნველყოფის სახეობიდან ფუნქციებამდე. ამ დროისთვის, დიზაინი ცოტა უცნაურად გამოიყურება და გარკვეული შეჩვევა სჭირდება.

Google-ის დიზაინერების ჯგუფმა იგრძნო, რომ უნდა გამოემუშავებინა პროგრამული უზრუნველყოფის ერთიანი სახე და ფუნქციონირება, რომელიც გამოიყენებოდა ყველა პროდუქტში: Android, Chrome OS, ვებ სერვისები. იმის ნაცვლად, რომ დაეწყოთ ფერების პალიტრის შემუშავება, მათ დაიწყეს კითხვა: "რა არის პროგრამული უზრუნველყოფა?"

მატერია და ფორმა

პასუხი დიზაინის განყოფილებიდან მოვიდა, როდესაც ჯონ უილიმ, Google-ის საძიებო სისტემის მთავარმა დიზაინერმა და მისმა კოლეგამ ნიკოლას ჯიტკოფმა Google Now-ს დიზაინი შეხედეს. მათ დახედეს ბარათის ინტერფეისს და ფიქრობდნენ: ”და თუ ბარათს გადაიტან, რა დგას მის უკან?”

”ამ უდანაშაულო კითხვამ ძლიერი ნაპერწკალი აანთო!” - თქვა დუარტემ. მთელმა გუნდმა დაიწყო პროგრამული ელემენტების ურთიერთქმედების ახალ გზაზე ფიქრი. იმის ნაცვლად, რომ უბრალოდ გამოეყენებინათ პიქსელები ეკრანზე და აბსტრაქტული შრეები, გუნდმა დაიწყო ფიქრი დიზაინზე, როგორც რეალურ, ხელშესახებ ობიექტზე. ამიტომ, ბარათებს უნდა ჰქონდეთ ფიზიკური თვისებები. დროა მოვიფიქროთ წესები, რომლებიც განსაზღვრავს, თუ როგორ უნდა იმოქმედოს და მოძრაობდეს ყველაფერი ეკრანზე. დეველოპერთა გუნდს სურდა მიეღწია იმ ეფექტის, რომ მომხმარებელი ურთიერთქმედებდა ფიზიკურ ობიექტებთან.

ამრიგად, დაიწყო მუშაობა ქაღალდის მსგავს მეტაფორულ მასალაზე - ბრტყელი და თეთრი რეალისტური ჩრდილებით. ეს იყო თესლი, საიდანაც გაიზარდა დიზაინის დანარჩენი ნაწილი, რომლის განხორციელებაც ჩანს Android L-ში. Material Design არის თამამი, ნათელი ფერები, მინიმალიზმი და თანმიმდევრულობის გრძნობა.

უილი და ჟიტკოფი ამბობენ, რომ ეს არის Google-ის მთელი დიზაინის ფილოსოფიის ესთეტიკური ევოლუცია. 2012 და 2013 წლებში ინტერნეტ გიგანტის შტაბ-ბინის კედლებში დაიწყო მუშაობა პროექტ კენედიზე, რომელიც აერთიანებდა ყველაფრის დიზაინს.

კრეატიულობა და შეზღუდვები

მასალის დიზაინი აერთიანებს ყველა საუკეთესო იდეას. მატიას დუარტე ჩვენს ახალ სტილს განიხილავს, როგორც შეზღუდვების სერიას, რომელიც, მისი აზრით, აპლიკაციის დიზაინერების მუშაობას ამარტივებს და თანმიმდევრულს ხდის. მაგალითად, ბარათის გადაბრუნების ჟესტი, რათა დაინახოს რა წერია უკანა მხარეს. ნორმალურ სამყაროში ეს შეუძლებელია სივრცის ნაკლებობის გამო. თითქოს პროგრამული უზრუნველყოფა იყო რეალური ფიზიკური ობიექტები მოწყობილობების შიგნით. და აშკარად არ არის ადგილი თქვენს ტელეფონში ბარათის გადასაბრუნებლად, ამიტომ Google ზღუდავს ამ სახის მანიპულირებას.

ჩვენ დიდად ვეყრდნობით ფიზიკას და პროგრამული უზრუნველყოფა ხშირად იქცევა ისე, რომ არღვევს ჩვენს გაგებას სამყაროს შესახებ, როგორც ზოგიერთი სამეცნიერო ფანტასტიკური ფილმი, რომელიც ეწინააღმდეგება ძირითად ლოგიკას. დუარტე პირდაპირ კომენტარს აკეთებს Apple-ის ახალი iOS დიზაინის ფილოსოფიაზე.

ჩვენ არ ვჩქარობთ სივრცესა და დროს ზებგერითი სიჩქარით. დიზაინი - არის გადაწყვეტის ძიება მკაცრი შეზღუდვების ფარგლებში. დიზაინი ხელოვნებაა.

Google-ის დიზაინერები ჯიუტად უარს ამბობენ გამოყენებული ფიქტიური მასალის დასახელებაზე. გამოსავალი, რომელიც ორივე მათ უფრო მეტ მოქნილობას ანიჭებს და ნივთიერებას მეტაფიზიკური მისტიკის ფენას მატებს. კვანტური ქაღალდი - ეს ითქვა ზოგიერთ გაჟონვაში Google I/O-მდე. ეს მნიშვნელოვანია, რადგან მასალა ემორჩილება ფიზიკას და ის არ მოხვდება სკეუმორფიზმის მახეში. ეს არ არის ზუსტად ფიზიკური ობიექტების იმიტაცია, როგორც დუარტე ამბობს, ეს არის რაღაც „ჯადოსნური“.

ჩვენს დიზაინში არსებულ მასალას შეუძლია გააკეთოს ის, რაც ფიზიკურ ქაღალდს არ შეუძლია, მაგალითად, ანიმაციით ზრდა და შემცირება. ეს ანიმაციები მნიშვნელოვანია Google-ისთვის, რადგან ისინი ეხმარება მომხმარებლებს გააცნობიერონ, რომ ისინი პროგრამული უზრუნველყოფის შიგნით არიან. Wiley ადარებს პროგრამულ უზრუნველყოფას ფილმებს, სადაც მკვეთრი ნახტომებია სცენებს შორის. მომხმარებელი კარგავს დროისა და სივრცის შეგრძნებას. პროგრამულ უზრუნველყოფაში მნიშვნელოვანია, რომ მომხმარებელმა გაიგოს ერთიდან მეორეზე გადასვლის პრინციპები.

მატერიალიზება

სხვა უფრო მნიშვნელოვანი რამ, რაც მასალა დიზაინს მოაქვს, არის გაერთიანება. Google წლების განმავლობაში მუშაობდა ალგორითმებზე ყველა თავისი პროდუქტისთვის და ეს გახდა ახალი დიზაინის ფილოსოფიის განუყოფელი ნაწილი. იმის ნაცვლად, რომ მომხმარებელმა თავად მოახდინოს ყველაფრის კონფიგურაცია, Material Design აიძულებს მათ დაიჯერონ, რომ რაც მათ სჭირდებათ ეკრანზე, იქნება ის, რაც მათ სჭირდებათ საჭირო დროს.

სწორედ ამიტომ Android Wear არ აძლევს მომხმარებლებს შეტყობინებებთან ურთიერთობის გარდა. ალექს ფაბორგი, პლატფორმის დიზაინერი, ამბობს:

თქვენ დიდ დროს არ ხარჯავთ საათთან ურთიერთობაში. თქვენ უბრალოდ გსურთ შეხედოთ თქვენს მაჯას და მყისიერად მიიღოთ თქვენთვის საჭირო ინფორმაცია ან შეასრულოთ მოქმედება ხმოვანი ბრძანებით. ჩვენ გავაკეთეთ უზარმაზარი სამუშაო Google-ის მთელ პლატფორმაზე.

Google ძალიან დიდ კრედიტს ითხოვს საკუთარი თავისთვის და მისი "ჯადოსნური" ქაღალდის მასალისთვის, მაგრამ დუარტე თვლის, რომ ამის კარგი მიზეზები არსებობს.

ჩვენ ეს გავაკეთეთ, რადგან ეს არის უმარტივესი გამოსავალი. ჩვენ გვინდა შევქმნათ რაც შეიძლება მარტივი დიზაინი მომხმარებლისთვის.

პარკი 3.0

Material Design-ში ბევრად მეტია, ვიდრე უბრალოდ Android L-ის, Android Wear-ის და ყველაფერი, რაშიც Google არის ჩართული. ჩვენ ვსაუბრობთ შეგრძნებებზე ადამიანისა და ტექნოლოგიების ურთიერთობაში.

დუარტე ამბობს, რომ Xerox PARC-მა ბრწყინვალე სამუშაო შეასრულა ნაცნობი ფანჯრისა და კურსორის გამოცდილების შესაქმნელად. ეს იყო ინოვაციური, რადგან კომპანიამ შეძლო რეალური დესკტოპის ვირტუალური ვერსიის შექმნა. ხალხს ესმოდა, როგორ მუშაობდა კომპიუტერი და შეეძლო მასთან კომფორტულად მუშაობა. ეს ასევე ეხება იმას, რაც Apple-მა გააკეთა სენსორული ეკრანებით.

ახლა Google-ს მიაჩნია, რომ მან იგივე შეძლო. უილი ამბობს, რომ დღეს ადამიანებს ბევრი ტექნოლოგია აქვთ: სენსორული ეკრანები, ჟესტები, ხმოვანი ბრძანებები, ინტელექტუალური ალგორითმები. მასალის დიზაინი აერთიანებს მთელ ამ მრავალფეროვნებას ერთ ინტუიციურ ნივთად. ეს დაგეხმარებათ მარტივად გამოიყენოთ იგივე Chrome OS-ზე, Android-ზე ან ვებზე.

9 პრინციპი

1. მასალა მეტაფორაა

Material Design არის სისტემა, რომელიც რაციონალიზაციას უკეთებს სივრცეს და მოძრაობას. დიზაინი ეფუძნება ტაქტილურ რეალობას, შთაგონებულია ქაღალდისა და მელნის შესაძლებლობებით, მაგრამ ღიაა ფანტაზიისა და მაგიისთვის.

2. ზედაპირები ინტუიციურია

სიბრტყეები და კიდეები გადმოსცემს ვიზუალურ მინიშნებებს რეალობის ჩვენს აღქმაზე დაყრდნობით. ნაცნობი ტაქტილური ატრიბუტების გამოყენება წვდება ჩვენი ტვინის პირველყოფილ ნაწილებს და გვეხმარება სწრაფად გავიგოთ რა არის წარმოსახული.

3. განზომილება ქმნის ურთიერთქმედებას

სინათლის, ზედაპირისა და მოძრაობის საფუძვლები არის ობიექტების ურთიერთქმედების ძირითადი საფუძვლები. რეალისტური განათება ყოფს სივრცეს და ყურადღებას ამახვილებს მოძრავ ნაწილებზე.

4. ერთიანი საპასუხო დიზაინი

ერთი დიზაინი ყველაფრისთვის. თითოეული მოწყობილობა ასახავს განსხვავებულ შეხედულებას ერთი და იგივე ძირითადი ელემენტების შესახებ. თითოეული ხედი მორგებულია თითოეული მოწყობილობის ზომაზე და ურთიერთქმედებებზე. ფერები, იკონოგრაფია, იერარქია და სივრცითი ურთიერთობები უცვლელი რჩება.

5. შრიფტები, გრაფიკა, ფერები

გამორჩეული დიზაინი ქმნის იერარქიას, გაგებას და ეხმარება ფოკუსირებას. სპეციალურად შერჩეული ფერები, ზღვარამდე სივრცის გამოყენება, დიდი შრიფტები და თეთრის მიზანმიმართული/მიზანმიმართული გამოყენება საშუალებას გაძლევთ მთლიანად ჩაეფლოთ მომხმარებლის ინტერაქციის პროცესში, გახადოთ ის უფრო ნათელი და გასაგები.

6. პირველადი მოქმედებები

მომხმარებლის მოქმედება არის დიზაინის არსი. პირველადი მოქმედებები გარდაქმნის მთელ დიზაინს. ისინი ყურადღებას ამახვილებენ ძირითად ფუნქციონირებაზე და დაუყოვნებლივ იპყრობენ მომხმარებლის თვალს.

7. მომხმარებლები იწყებენ ცვლილებებს

ინტერფეისში ცვლილებები ხდება მომხმარებლის ქმედებების გამო. მოძრაობა აძლიერებს პირველადი მოქმედების გამოცდილებას.

8. ანიმაციური ქორეოგრაფია

ყველა მოქმედება ხდება ერთ გარემოში. ობიექტები, რომლებსაც მომხმარებელი ხედავს, არ არღვევს მომხმარებლის დანარჩენ გამოცდილებას ტრანსფორმაციისა და რეორგანიზაციის შემდეგაც კი.

9. მოძრაობა იძლევა მნიშვნელობას

მოძრაობას აქვს მნიშვნელობა და აუცილებელია ყურადღების მისაპყრობად. გადასვლები ეფექტურია.

დიზაინი არის შემოქმედების ხელოვნება. ჩვენი მიზანია დავაკმაყოფილოთ ადამიანის მოთხოვნილებების მრავალფეროვანი სპექტრი. როგორც ეს საჭიროებები ვითარდება, ასევე უნდა განვითარდეს ჩვენი დიზაინი, იდეები და ფილოსოფია.

ჩვენ მიზნად დავსახეთ, რომ შევქმნათ ვიზუალური ენა ჩვენი მომხმარებლებისთვის, რომელიც აერთიანებს კლასიკური დიზაინის ნაცნობ პრინციპებს ინოვაციებთან.