პროდუქტის ხატების შექმნა არც ისე რთულია, როგორც ერთი შეხედვით ჩანს. შეიტყვეთ მეტი თქვენი პირველი Android აპის ხატულა ნულიდან დიზაინის შესახებ!
არ აქვს მნიშვნელობა რომელ ბაზარს ან სერვისს ავრცელებს აპლიკაცია, მისი აპლიკაციის ხატულა პირველია, რასაც პოტენციური მომხმარებელი შეამჩნევს. პირველ შთაბეჭდილებას უდიდესი მნიშვნელობა ენიჭება ახალი მომხმარებლების მოზიდვის მცდელობისას, რაც ნიშნავს, რომ ხატები ნებისმიერი აპლიკაციის ძირითადი კომპონენტებია. და, აპლიკაციის განზრახვის მიუხედავად, აპლიკაციის ლამაზი ხატის შექმნა უნდა იყოს ყველა აპლიკაციის განვითარების ფაზის მნიშვნელოვანი ნაწილი. მიუხედავად იმისა, რომ ტექნიკური აპლიკაციების ბევრი დეველოპერი გრაფიკას ტოვებს ერთგულ დიზაინერებს, ესმით დიზაინის საფუძვლები და მათი გამოყენება არის ის, რისი გაკეთებაც ყველას შეუძლია, ექსპერიმენტების უნარის გათვალისწინებით და ანალიზი. გამონაკლისი არც აპის ხატულაა!
ეს გზამკვლევი გადის ადაპტაციური ხატის შექმნას Android-ის ნიმუშის აპისთვის ღია კოდის პროგრამული უზრუნველყოფის გამოყენებით. მიუხედავად იმისა, რომ საბოლოო შედეგი შეიძლება არ იყოს იმ ფორმატში, რომელიც შეიძლება დაგჭირდეთ, აქ განხილული დიზაინის ბევრი რჩევა ჭეშმარიტი იქნება მრავალ პლატფორმაზე.
Android Oreo-ში „ადაპტური ხატების“ გამოშვების შემდეგ, აპლიკაციის ხატულა შეიძლება შედგებოდეს სამი ფუნდამენტური ფენისგან: გაუმჭვირვალე ფონის ფენა, წინა პლანზე ფენა თან გამჭვირვალობის მხარდაჭერადა ა ნიღაბი რომელიც განსაზღვრავს ხატის ფორმას. ყველა ეს ფენა არის 108 x 108 dp ზომის, თუმცა მხოლოდ შიდა 72 x 72 dp შეიძლება იყოს ხილული მომხმარებლისთვის; სხვა რეგიონი, რომელიც ამოჭრილია ზემოდან ნიღბით, გამოიყენება სპეციალური ეფექტებისთვის UI-ში, რათა ხატი დინამიურად გამოჩნდეს. გაუთვითცნობიერებელებისთვის, დპ ან ეკრანისგან დამოუკიდებელი პიქსელი დგას, როგორც საზომი ერთეული ყველა Android-ის ინტერფეისისთვის და განისაზღვრება ტოლი ზომის ერთი პიქსელი 160 წერტილი ინჩზე ეკრანზე.)
ნიკ ბუჩერი Google-იდან საუბრობს 66 dp წრეზე ხატის ცენტრში, რომელსაც ვერცერთი ნიღაბი ვერ მოაშორებს, რომელსაც ეწოდება "უსაფრთხო ზონა". ეს არის ადგილი, სადაც ჩვენი ხატების დიზაინის ძირითადი ელემენტები დაჯდება მოგვიანებით, როდესაც მივალთ რეალურ დიზაინზე. ამ 33 dp რადიუსის მიღმა არაფერი შეიძლება არ იყოს ხილული ხატულაზე, სანამ მას აქვს ფორმის ნიღაბი.
ვინაიდან UI სკალირების გამო ხატები უკეთესია იყოს ვექტორული გამოსახულება, ჩვენ დაგვჭირდება ვექტორული გრაფიკის რედაქტორი ჩვენი ხატის შესაქმნელად. Inkscape არის ღია წყარო და შესანიშნავი ალტერნატივა უფრო ძვირი პროგრამული უზრუნველყოფის, ასე რომ, ეს იქნება ჩვენი არჩევანი ამ გაკვეთილის მიზნებისთვის. მე ასევე შევქმენი პროექტის ფაილი ხელმისაწვდომია აქ რომელსაც აქვს უსაფრთხო ზონა და Google-ის საკუთარი დიზაინის საკვანძო ხაზი გამოკვეთილი და ლამაზი ფენის ნიღაბი, რომელიც საშუალებას გვაძლევს გადავხედოთ ხატის ფორმას.
Inkscape-ში გახსნილი პროექტის ფაილით და შევსება და ინსულტი (Shift+Ctrl+F), PNG გამოსახულების ექსპორტი (Shift+Ctrl+E) და ფენები (Shift+Ctrl+L) პანელები იხსნება, ჩვენ მზად ვართ დასაწყებად. ფენების პანელი არის პროექტის ხორცის ადგილი წინა პლანი და ფონი ფენები, რომლებიც განკუთვნილია მათი სატიტულო კომპონენტების განსათავსებლად და გაიდლაინები და ნიღაბი იგულისხმება ჩართვა და გამორთვა (მათ გვერდით პატარა თვალის ხატულაზე დაწკაპუნებით) მითითებისთვის.
ხატულა არის აპლიკაციის იდენტურობის გამოხატულება. როგორც ასეთი, ის უნდა შეიცავდეს როგორც აპლიკაციის პიროვნების ხასიათს, ასევე პლატფორმის სპეციფიკურ დიზაინს, როგორიცაა Android-ის მასალის დიზაინის ენას სთავაზობს. დემონსტრირების მიზნით, დავუშვათ, რომ ვმუშაობთ ამინდის აპლიკაციაზე, რომელიც იყენებს მატერიალურ ელემენტებს. ჩვენ შეგვიძლია გამოვიყენოთ კლასიკური მზისა და ღრუბლების მოტივი მომხმარებლისთვის აპლიკაციის დანიშნულების შესახებ ინფორმირებისთვის და ცოტა დავაყენოთ დაატრიალეთ ეს ძირითადი დიზაინი ჩამოსაშლელი ჩრდილების და გეომეტრიის გამოყენებით, რათა ის კარგად იყოს შერწყმული მის Android გარემოში.
ფონი
დავიწყოთ ფონის დაყენებით, რომელიც შედგება ლურჯი ცისა და ყვითელი მზისგან ცენტრში. შემობრუნება ნიღაბი უხილავი, ვირჩევ და ხილულს ვაქცევ ფონის ფენა, შეავსეთ მთელი ტილო შექმენით ოთხკუთხედები და კვადრატები ინსტრუმენტი (F4) და დააყენეთ მართკუთხედის შევსების ფერი შევსება და ინსულტი 64B5F6FF-მდე (ღია ლურჯი) შესაბამისად მასალის ფერის პალიტრა. შემდეგ ვირჩევ შექმენით წრეები, ელიფსები და რკალი (F5) ხელსაწყოს და დაჭერით Shift და Ctrl, დახაზეთ წრე საკვანძო ხაზის ცენტრიდან სიდიდით მეორე წრემდე და დააყენეთ მისი ფერი FFEE58FF, რომელიც გვაძლევს თბილ პატარა მზეს. ყოველთვის კარგია ნებისმიერი სახის დიზაინის ძირითადი გეომეტრიის დაცვა, ხოლო Android-ის დიზაინის ენა განსაკუთრებით ხელს უწყობს სიმარტივეს. მატერიალური ინსტრუქციების შესასრულებლად, მე ასევე მზეს ვაძლევ დახვეწილ ჩრდილს ფილტრები → ჩრდილები და ბზინვარები → ჩამოგდებული ჩრდილი.
წინა პლანი
Მოდის წინა პლანი, მე ვხატავ ღრუბლების ჯგუფს მზის ირგვლივ სხვა წრეების გარშემოწერილობიდან წრეების დახატვით და ვაძლევ მათ ყველა შევსების ფერს EEEEEEFF. შემდეგ ვაჯგუფებ წრეებს სათანადოდ, რამდენიმე ობიექტზე მაუსის მარჯვენა ღილაკით და არჩევით ჯგუფიდა გაუშვით ვარდნის ჩრდილის გენერატორი ორ საბოლოო ფორმაზე, რომელსაც საბოლოოდ მივიღებ. შემობრუნება გაიდლაინები უხილავი და ცვალებადი წინა პლანი და ფონი ალტერნატიულად, ჩანს ჩვენი ამინდის აპის ხატის შემადგენელი ფენები. თუ აპლიკაციის ხატულა ოდესმე გადაიტანება მთავარ ეკრანზე, ღრუბლები სტაციონარული მზეს მიედინება!
შედეგი
ნიღაბი ახლა შეიძლება გახდეს ხილული და შესწორება მარშრუტების რედაქტირება კვანძების მიხედვით (F2) სხვადასხვა ფორმის ნიღბების ცდა და სიმულაცია. ასევე, ორი ფენის ექსპორტი შესაძლებელია ცალკე გამოყენებით PNG გამოსახულების ექსპორტი პანელი გამოყენებისთვის Android Studio-შიდა ერთად ა Google Play ხატულა.
პროდუქტის ხატის შექმნისას ყოველთვის კარგი პრაქტიკაა აპლიკაციის დანიშნულების მიღება, მისი ყველაზე აბსტრაქტული ვიზუალური ფორმის გამოხდა და მარტივი გეომეტრიის გამოყენებით. რაც უფრო მარტივია დიზაინის ნებისმიერი კომპონენტი, მით უკეთესი და საიმედოდ მუშაობს ის ჩვეულებრივ და ეს ასევე ეხება გრაფიკულ დიზაინს. უმეტეს მიზნებისთვის, ობიექტის ფორმა წინა პლანზე და მყარი ფერი ან ნიმუში ფონზე (ან პირიქით) კარგად მუშაობს, მაგრამ როგორც ჩვენს მაგალითში, სხვა ფენის გამოყენება შესაძლებელია, თუ იგრძნობა აუცილებელი; ძალიან ბევრი დაწყობა ან ჩამოსაშლელი ჩრდილების გამოყენება მხოლოდ გაართულებს ხატის დიზაინს.
შეგიძლიათ მეტი წაიკითხოთ ხატების დიზაინის შესახებ Material ინტერფეისებში ოფიციალურზე მასალის ვებსაიტიდა აიღეთ სისტემის უფასო ხატები ხატების დიზაინში გამოსაყენებლად იგივე საიტი.