Google- ის მატერიალური დიზაინი სპეციფიკაცია თავდაპირველად მიზნად ისახავდა Android პლატფორმას, როგორც პლატფორმის დიზაინის თანმიმდევრულობის შესთავაზა.
06 01
როგორ შეიქმნას მასალა დიზაინი ბარათის Adobe Experience დიზაინი CC
მას შემდეგ, რაც დიზაინერებმა დაიწყეს გაღვიძება და გააზრებული აზროვნება, მასალის დიზაინი მშვიდი გახდა ვებსა და მობილური დიზაინის ერთ-ერთ ყველაზე გავლენიან ვიზუალურ ფილოსოფიად. ყველა თქვენ უნდა გააკეთოთ იმის დანახვა, თუ რას ვაკეთებთ, რომ გავაკეთოთ მასალა დიზაინი Pinterest- ზე და ნახავთ ასობით მაგალითს და ექსპერიმენტს მოწყობილობებზე, ტაბლეტებზე და თუნდაც ვებსაიტებზე.
მატერიალური დიზაინის მომხიბლავი ასპექტი ის არის Google- ის აზროვნება, თუ როგორ უნდა მოახდინონ აპლიკაციები მობილური მოწყობილობებით გამოჩნდნენ და მუშაობდნენ, მაგრამ კონცეფციები ნებისმიერი პლატფორმის ნებისმიერ ეკრანზე ვრცელდება. როგორც Google აცხადებს სპეციფიკაციის გახსნის პარაგრაფს, "ჩვენ დავუშვით საკუთარ თავს ვიზუალური ენის შესაქმნელად ჩვენი მომხმარებლებისთვის, რომელიც ქმნის კარგი დიზაინის კლასიკურ პრინციპებს ინოვაციისა და ტექნოლოგიებისა და მეცნიერების შესაძლებლობით. ეს არის მატერიალური დიზაინი. ეს სპექტრი არის ცოცხალი დოკუმენტი, რომელიც განახლდება, რადგან ჩვენ ვაგრძელებთ მატერიალურ-დიზაინის პრინციპებს და სპეციფიკას. "
მასალა ზოგადად ისაუბრა, ზოგადად არის ქაღალდი და მატერიალური დიზაინის სიმბოლოა ბარათი. იფიქრეთ ინდექსი ბარათზე ზედაპირზე და თქვენ სწორ გზაზე ხართ. ბარათი წარმოადგენს ელემენტებს, რომლებიც შეიცავს ფოტოებს, ვიდეოებს, ტექსტურ ბმულებს და ა.შ. მაგრამ, სადაც ისინი განსხვავდებიან ყველაზე ინტერაქტიული დიზაინით, ისინი ერთ საგნებზე ფოკუსირებული არიან. ბარათები მრგვალდება კუთხეებში, შეიცავს თხელი ჩრდილების მითითებას ზედაპირზე ზემოთ და თუ ისინი ერთნაირი თვითმფრინავით არიან განლაგებული, ისინი "კრებული" არიან.
ამ "როგორ" ჩვენ ვაპირებთ შექმნას ბარათი დაფუძნებული spec. იმის ნაცვლად, რომ შექმნათ ბარათი სხვადასხვა გამოსახულების და ხატვის საშუალებებით, ჩვენ ვაპირებთ მისვლას სხვა მიმართულებით. ჩვენ ვაპირებთ გამოიყენოთ ინსტრუმენტები Adobe- ის გამოცდილების დიზაინში, რომელიც ამჟამად მაიკროსოფტის მხოლოდ საჯარო გადახედვისას და თავისუფალია. შეგიძლიათ ჩამოტვირთოთ აქ.
დავიწყოთ.
06 06
შექმნა პროტოტიპი Artboard in Adobe Experience დიზაინი CC
არ არსებობს აშკარა გზა Android ეკრანზე საწყისი ეკრანიდან Experience Design CC- ში (XD). რა ვიყენეთ XD- ის გახსნისას, არის iPhone 6- ის ვარიანტის შესარჩევად და როდესაც ინტერფეისი იხსნება, აირჩიეთ Toolbar- ის ქვედა ნაწილში Artboard- ის ინსტრუმენტი და შეარჩიეთ Android Mobile- ის პარამეტრები საწყისი პანელში მარჯვნივ. შემდეგ ჩვენ შევცვალეთ შერჩევის ხელსაწყოში, დააჭირეთ ერთჯერადად iPhone artboard- ის სახელს და წაშალეთ გალერეა. მეტი აღარ.
XD- ს მიმდინარე ვერსიაში არის პატარა ისარი iPhone 6- ზე, რომელიც, როდესაც დაჭერით, ხსნის მენიუში. იქიდან, აირჩიეთ Android მობილური ვერსია და Android მობილურ არტ-არტის შერჩევა ინტერფეისიდან.
ბარათისთვის ღია ეკრანის სივრცის გახსნის უზრუნველსაყოფად, ჩვენ ჩვეულებრივ გადავიდეთ Sketch 3- ზე და შეიტანეთ და დაამატეთ სტატუსის ბარი, Nav ბარი და აპლიკაციის ბარი მატერიალური დიზაინის თარგისგან მხატვარში. Sketch 3.2 შეიცავს მასალა დიზაინის თარგს ( ფაილის> New From Template> Material Design ) და კიდევ ერთი კარგი უფასოა Kyle Ledbetter- სგან, რომელიც შეგიძლიათ მიიღოთ აქ. თუ არ გაქვთ ესკიზი, შეგიძლიათ დააკოპირეთ და დააკოპირეთ XD სტიკერები ფაილი> ღია UI Kit> Google მასალაში . თქვენ ასევე შეგიძლიათ გადმოწეროთ მათ Google Photoshop- ში, Illustrator- ში, ეფექტებიდან და Sketch- ში.
06 06
ციფრული დიზაინის ბარათის დამატება Adobe XD CC Artboard- ში
XD- ის ერთ-ერთი ყველაზე სასარგებლო თვისება არის UI ინსტრუმენტების ჩართვა Apple iOS, Google მასალა და Microsoft Windows. ბევრი თვალსაზრისით ისინი სიტყვა "რაპიდს" ტერმინს "სწრაფი პროტოტიპინგი" უერთდებიან, ასევე დიზაინერის სამუშაოს გამარტივებას ამ საერთო UI ელემენტებში არ უნდა იყოს მუდმივი რესურსი დიზაინის განაცხადში, როგორიცაა Photoshop, Illustrator ან ჩანახატი.
UI ელემენტის ჩვენ გვჭირდებოდა იყო ბარათი. მის მისაღებად შევარჩიეთ ფაილი> ღია UI Kit> Google მასალა და ნაკრები ახალი დოკუმენტის სახით გახსნილი. ელემენტებს გვჭირდებოდა ბარათების კატეგორიაში ნაპოვნი.
რაც ჩვენ გვიყვარს ამის შესახებ, ისინი აკმაყოფილებენ მასალის დიზაინის სპეციფიკას, როგორც ასახულია კონტენტის ბლოკების სპეციფიკაში, ასევე ტექსტის გაფორმებით და ინტერვალით განსაზღვრულ ტიპოგრაფიაში.
ბარათის სტილის გვინდა იყო ერთი ქვედა მარცხენა. ჩვენ უბრალოდ გვეუბნება, რომ ეს მაუსი და გადაწერა მას ბუფერში. სამწუხაროდ, XD არ შეიცავს ღია დოკუმენტებისთვის tabbed ინტერფეისს. რას ვაკეთებთ, გადავახსენებთ ღია დოკუმენტის ფანჯარაში, რათა გამოვხატო ის, რაც ჩვენ ვმუშაობთ, აირჩიეთ და ჩასვით. XD- ის ღია დოკუმენტებს შორის სწრაფი გადართვის კიდევ ერთი გზა არის " Command- ის" დაყენება .
06 06
როგორ რედაქტირება მასალა დიზაინი ელემენტის Adobe გამოცდილება დიზაინი CC
როდესაც XD- ში ჩამოსხმის ბარათი clipboard- ით ჩამოდის, არ იწყება მუშაობა. პირველი, რაც უნდა გააკეთოთ , ბარათის გაანგარიშებაა, რადგან გჭირდებათ წვდომა ბიტიანი და ბარათების შესაქმნელად. ამისათვის აირჩიეთ ბარათი და აირჩიეთ ობიექტი> Ungroup ან დააჭირეთ Shift-Command-G.
თქვენი ბარათი ახლა სამი ნაწილისგან შედგება:
- ღია რუხი ყუთი იმიჯი.
- საშუალო ნაცრისფერი ყუთი ტექსტისთვის
- უკანა ყუთი გამოიყენება ფონზე.
პირველი ნაბიჯი არის მსუბუქი ნაცრის ყუთების წაშლა. მისი ერთადერთი მიზანი არის იმიჯს, როგორც იმიჯს, რომ გააკეთოს, თუ აირჩევთ, სურვილისამებრ.
ყუთში ტექსტის ნაცვლად მუქი ნაცრისფერი 50% უკმაყოფილოა. ეს ყუთი შეიძლება გამოყენებულ იქნას როგორც ტექსტის ფონზე და შეგიძლიათ შეცვალოთ ფერი და ყუთი სრულად.
მიუხედავად იმისა, რომ ეს დაუყოვნებლივ არ ჩანს, მსუბუქი ნაცრისფერი ყუთი შემდეგნაირად შეიმუშავებს მასალის დიზაინს, რომლის ზედა კუთხეები 2 პიქსელია. გაითვალისწინეთ, თუ სურათს დაამატებთ. მას ასევე დასჭირდება მრგვალი კუთხეები, რომელიც შეიძლება დაემატოს გამოსახულების გამოყენებას ან XD- ს.
ხედავს, თუ როგორ ეს არის დასასვენებელი მდგომარეობა ბარათის მას ასევე სჭირდება ჩრდილში. სპეცრაზმი ცხადყოფს, რომ არსებობს 2 პიქსელის ბარათის დასასრული. იმისათვის, რომ დაამატოთ, აირჩიეთ შავი ფონის ფორმის და დააყენეთ Y და B (Blur) მნიშვნელობები 2 in Properties Panel.
06 06
როგორ დაამატოთ გამოსახულება მასალა დიზაინის ბარათში Adobe XD CC- ში
ბარათის იცის არის 344 პიქსელი ფართო და გამოსახულების არეალი 150 პიქსელით მაღალია ( ღია რუხი ყუთის სიმაღლის ნახევარი ) ჩვენ გავხსენით გამოსახულება Photoshop- ში, გადააცილეთ ზომას და გადაარჩინა იგი Photoshop- ის ექსპორტში @ 2x ვარიანტით როგორც დიალოგი ყუთი. გამოსახულება იმპორტირებულია Adobe XD- ში.
შემდეგ ჩვენ გამოვყავით ღია რუხი ყუთზე სურათზე პასტუბოზე და შერჩეული ობიექტი> ნიღაბი ფორმაში . შედეგი იყო ფორმის მომრგვალებული კუთხეების გამოსახულება. ჩვენ გადავინახეთ გამოსახულება მისი საბოლოო პოზიციაზე.
სურათთან ერთად, ჩვენ შევცვალეთ საშუალო ნაცრისფერი ფერის ფერის ფერი, შეცვალა ტექსტისა და ბმული ტექსტის ფერი.
06 06
გამოყენებით Adobe XD CC Grid მხატვრული
ბარათის დასრულებამდე ახლა საჭიროა სათანადო განთავსება მატერიალური დიზაინის სპეც. ეს იმას ნიშნავს, რომ ბარათის ორივე მხარეს 8 პიქსელია და ბარათს აპლიკაციის ბარიდან 8 პიქსელი უნდა იყოს. ამისათვის დააჭირეთ ღილაკს არბორდში და Properties Properties Panel- ში აირჩიეთ ბადე. გრაფიკი გამოჩნდება არტბორდზე.
ნაგულისხმევი ბადის ზომა არის 8 პიქსელი, რომელიც უნდა იყოს იგივე ზომის მატრიცული მასალა დიზაინისთვის. თუ საჭიროა განსხვავებული ზომა, შეცვალოთ ღირებულება Grid- ში. თუ გსურთ შეცვალოთ ფერის ქსელი, დააწკაპუნეთ ფერადი ჩიპი და აირჩიეთ ფერი ფერის ამოღების ფერიდან.
ბადეში ხილული, დააწკაპუნეთ ბარათზე და გადაიტანეთ საბოლოო პოზიციაზე.
დასრულება, ჩვენ შეარჩია ბარათი, დააწკაპეთ გამეორებული ღილაკის ღილაკს და შეცვალეთ ინტერვალი ბარათების შორის 8 პიქსელამდე.